jsm-mall-front/src/components/NoticeBar/index.vue

<!-- 公告栏组件 -->
<template>
  <transition name="el-fade-in-linear">
    <div class="notice-bar" v-show="open && show">
      <div class="notice-bar__icon"></div>
      <div ref="wrap" class="notice-bar__wrap">
        <div ref="content" class="notice-bar__content" :style="contentStyle">
          <span class="notice-bar__content_item" v-for="(item, index) in noticeList">{{ item.title }}</span>
        </div>
      </div>
      <div class="close">
        <el-button size="mini" @click="handleClearTimer">关闭</el-button>
      </div>
    </div>
  </transition>
</template>

<script>
import { mapMutations, mapGetters, mapActions } from 'vuex'
// import { getNoticeList } from '@/api/notificationCenter'

export default {
  name: 'NoticeBar',
  props: {
    speed: {
      type: Number,
      default: 50
    },
    defaultWidth: {
      type: Number,
      default: 375
    }
  },
  data() {
    return {
      contentStyle: {
        transitionDuration: '0s',
        transform: 'translateX(0px)'
      },
      wrapWidth: 0,
      contentWidth: 0,
      time: 0,
      timer: null,
      convertSpeed: 1,
      noticeList: [],
      noticeTimer: null,
      open: null
    }
  },
  computed: {
    ...mapGetters(['show'])
  },
  watch: {
    open(val, oval) {
      if (val) {
        clearInterval(this.noticeTimer)
      } else {
        this.noticeTimer = setInterval(() => {
          this.$nextTick(() => {
            this.getList()
            this.updateUnreadNotice()
          })
        }, 5000)
      }
    }
  },
  mounted() {
    // this.getList()
    this.updateUnreadNotice()
  },
  beforeDestroy() {
    this.handleClearTimer()
  },
  methods: {
    ...mapMutations({
      SET_SHOW: 'app/SET_SHOW'
    }),
    ...mapActions({
      updateUnreadNotice: 'app/getUnreadNum'
    }),
    handleClearTimer() {
      this.open = false
      this.SET_SHOW(null)
      clearInterval(this.timer)
      clearInterval(this.noticeTimer)
    },
    getList() {
      let params = {
        pageNum: 1,
        pageSize: -1,
        params: [{ param: 'read_flag', compare: '=', value: 'NO' }]
      }
      // getNoticeList(params).then(res => {
      //   this.noticeList = res.data.records
      //   if (this.noticeList.length) {
      //     this.open = true
      //     this.SET_SHOW(true)
      //     this.$nextTick(() => {
      //       clearInterval(this.timer)
      //       clearInterval(this.noticeTimer)
      //       this.init()
      //       this.noticeTimer = setInterval(() => {
      //         this.getList()
      //         this.updateUnreadNotice()
      //       }, this.time * 1000)
      //     })
      //   } else {
      //     this.open = false
      //     this.SET_SHOW(null)
      //   }
      // })
    },

    initAttribute() {},
    init() {
      const _width = innerWidth
      this.convertSpeed = (_width / this.defaultWidth) * this.speed // 根据分辨率转化成不同的速度
      this.wrapWidth = this.$refs.wrap.offsetWidth
      this.contentWidth = this.$refs.content.offsetWidth
      this.startAnimate()
      this.timer = setInterval(() => {
        this.startAnimate()
      }, this.time * 1000)
      this.$once('hook:beforeDestroy', () => {
        clearInterval(this.timer)
        this.timer = null
      })
    },
    startAnimate() {
      this.contentStyle.transitionDuration = '0s'
      this.contentStyle.transform = 'translateX(' + this.wrapWidth + 'px)'
      this.time = (this.wrapWidth + this.contentWidth) / this.convertSpeed
      setTimeout(() => {
        this.contentStyle.transitionDuration = this.time + 's'
        this.contentStyle.transform = 'translateX(-' + this.contentWidth + 'px)'
      }, 200)
    },
    tipClick() {
      this.$emit('click')
    }
  }
}
</script>
<style scoped lang="less">
.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
.close {
  margin-right: 20px;
}
.notice-bar {
  position: relative;
  width: 100%;
  height: 54px;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
  z-index: 1999;
  .notice-bar__icon {
    img {
      width: 100%;
    }
  }
  .notice-bar__content_item {
    margin-right: 100px;
  }
  .notice-bar__wrap {
    position: relative;
    display: flex;
    flex: 1;
    height: 100%;
    align-items: center;
    overflow: hidden;
    .notice-bar__content {
      position: absolute;
      white-space: nowrap;
      transition-timing-function: linear;
    }
  }
}
</style>