sulibao-mini/tuniao-ui/components/tn-row-notice/tn-row-notice.vue

<template>
  <view
    v-if="show"
    class="tn-row-notice-class tn-row-notice"
    :class="[backgroundColorClass]"
    :style="[noticeStyle]"
  >
    <view class="tn-row-notice__wrap">
      <!-- 左图标 -->
      <view class="tn-row-notice__icon">
        <view
          v-if="leftIcon"
          class="tn-row-notice__icon--left" 
          :class="[`tn-icon-${leftIconName}`,fontColorClass]"
          :style="[fontStyle('leftIcon')]"
          @tap="clickLeftIcon"></view>
      </view>
      
      <!-- 消息体 -->
      <view class="tn-row-notice__content-box" id="tn-row-notice__content-box">
        <view
          class="tn-row-notice__content"
          id="tn-row-notice__content"
          :style="{
            animationDuration: animationDuration,
            animationPlayState: animationPlayState
          }"
        >
          <text
            class="tn-row-notice__content--text"
            :class="[fontColorClass]"
            :style="[fontStyle()]"
            @tap="click"
          >{{ showText }}</text>
        </view>
      </view>
      
      <!-- 右图标 -->
      <view class="tn-row-notice__icon">
        <view
          v-if="rightIcon"
          class="tn-row-notice__icon--right" 
          :class="[`tn-icon-${rightIconName}`,fontColorClass]"
          :style="[fontStyle('rightIcon')]"
          @tap="clickRightIcon"></view>
        <view
          v-if="closeBtn"
          class="tn-row-notice__icon--right" 
          :class="[`tn-icon-close`,fontColorClass]"
          :style="[fontStyle('close')]"
          @tap="close"></view>
      </view>
    </view>
  </view>
</template>

<script>
  import componentsColorMixin from '../../libs/mixin/components_color.js'
  export default {
    name: 'tn-row-notice',
    mixins: [componentsColorMixin],
    props: {
      // 显示的内容
      list: {
        type: Array,
        default() {
          return []
        }
      },
      // 是否显示
      show: {
        type: Boolean,
        default: true
      },
      // 播放状态
      // play -> 播放 paused -> 暂停
      playStatus: {
        type: String,
        default: 'play'
      },
      // 是否显示左边图标
      leftIcon: {
        type: Boolean,
        default: true
      },
      // 左边图标的名称
      leftIconName: {
        type: String,
        default: 'sound'
      },
      // 左边图标的大小
      leftIconSize: {
        type: Number,
        default: 34
      },
      // 是否显示右边的图标
      rightIcon: {
        type: Boolean,
        default: false
      },
      // 右边图标的名称
      rightIconName: {
        type: String,
        default: 'right'
      },
      // 右边图标的大小
      rightIconSize: {
        type: Number,
        default: 26
      },
      // 是否显示关闭按钮
      closeBtn: {
        type: Boolean,
        default: false
      },
      // 圆角
      radius: {
        type: Number,
        default: 0
      },
      // 内边距
      padding: {
        type: String,
        default: '18rpx 24rpx'
      },
      // 自动播放
      autoplay: {
        type: Boolean,
        default: true
      },
      // 水平滚动时的速度，即每秒滚动多少rpx
      speed: {
        type: Number,
        default: 160
      }
    },
    computed: {
      fontStyle() {
        return (type) => {
          let style = {}
          style.color = this.fontColorStyle ? this.fontColorStyle : ''
          style.fontSize = this.fontSizeStyle ? this.fontSizeStyle : ''
          if (type === 'leftIcon' && this.leftIconSize) {
            style.fontSize = this.leftIconSize + 'rpx'
          }
          if (type === 'rightIcon' && this.rightIconSize) {
            style.fontSize = this.rightIconSize + 'rpx'
          }
          if (type === 'close') {
            style.fontSize = '24rpx'
          }
          
          return style
        }
      },
      noticeStyle() {
        let style = {}
        style.backgroundColor = this.backgroundColorStyle ? this.backgroundColorStyle : 'transparent'
        if (this.padding) style.padding = this.padding
        return style
      }
    },
    data() {
      return {
        // 滚动文字的宽度
        textWidth: 0,
        // 存放滚动文字的盒子的宽度
        textBoxWidth: 0,
        // 动画执行的时间
        animationDuration: '10s',
        // 动画执行状态
        animationPlayState: 'paused',
        // 当前显示的文本
        showText: ''
      }
    },
    watch: {
      list: {
        handler(value) {
          this.showText = value.join('，')
          this.$nextTick(() => {
            this.initNotice()
          })
        },
        immediate: true
      },
      playStatus(value) {
        if (value === 'play') this.animationPlayState = 'running'
        else this.animationPlayState = 'paused'
      },
      speed(value) {
        this.initNotice()
      }
    },
    methods: {
      // 初始化通知栏
      initNotice() {
        let query = [],
          textBoxWidth = 0,
          textWidth = 0;
        let textQuery = new Promise((resolve, reject) => {
          uni.createSelectorQuery()
            .in(this)
            .select(`#tn-row-notice__content`)
            .boundingClientRect()
            .exec(ret => {
              this.textWidth = ret[0].width
              resolve()
            })
        })
        query.push(textQuery)
        
        Promise.all(query).then(() => {
          // 根据t=s/v(时间=路程/速度)，这里为何不需要加上#tn-row-notice__content-box的宽度，因为设置了.tn-row-notice__content样式中设置了padding-left: 100%
          this.animationDuration = `${this.textWidth / uni.upx2px(this.speed)}s`
          // 这里必须这样开始动画，否则在APP上动画速度不会改变(HX版本2.4.6，IOS13)
          this.animationPlayState = 'paused'
          setTimeout(() => {
            if (this.autoplay && this.playStatus === 'play') this.animationPlayState = 'running'
          }, 10)
        })
      },
      // 点击了通知栏
      click() {
        this.$emit('click')
      },
      // 点击了关闭按钮
      close() {
        this.$emit('close')
      },
      // 点击了左边图标
      clickLeftIcon() {
        this.$emit('clickLeft')
      },
      // 点击了右边图标
      clickRightIcon() {
        this.$emit('clickRight')
      }
    }
  }
</script>

<style lang="scss" scoped>
  
  .tn-row-notice {
    width: 100%;
    overflow: hidden;
    
    &__wrap {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
    
    &__content {
      &-box {
        flex: 1;
        display: flex;
        flex-direction: row;
        overflow: hidden;
        margin-left: 12rpx;
      }
      
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      text-align: right;
      // 为了能滚动起来
      padding-left: 100%;
      animation: tn-notice-loop-animation 10s linear infinite both;
      
      &--text {
        word-break: keep-all;
        white-space: nowrap;
      }
    }
    
    &__icon {
      &--left {
        display: inline-flex;
        align-items: center;
      }
      
      &--right {
        margin-left: 12rpx;
        display: inline-flex;
        align-items: center;
      }
    }
  }
  
  @keyframes tn-notice-loop-animation {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
</style>