mengyirong/tuniao-ui/components/tn-notice-bar/tn-notice-bar.vue

<template>
  <view
      v-if="showNotice"
      class="tn-notice-bar-class tn-notice-bar"
      :style="{
      borderRadius: radius + 'rpx'
    }"
  >
    <block v-if="mode === 'horizontal' && circular">
      <tn-row-notice
          :backgroundColor="backgroundColor"
          :fontColor="fontColor"
          :fontSize="fontSize"
          :fontUnit="fontUnit"
          :list="valueList"
          :show="show"
          :playStatus="playStatus"
          :leftIcon="leftIcon"
          :leftIconName="leftIconName"
          :leftIconSize="leftIconSize"
          :rightIcon="rightIcon"
          :rightIconName="rightIconName"
          :rightIconSize="rightIconSize"
          :closeBtn="closeBtn"
          :autoplay="autoplay"
          :radius="radius"
          :padding="padding"
          :speed="speed"
          @click="click"
          @close="close"
          @clickLeft="clickLeftIcon"
          @clickRight="clickRightIcon"
      ></tn-row-notice>
    </block>
    <block v-if="mode === 'vertical' || (mode === 'horizontal' && !circular)">
      <tn-column-notice
          :backgroundColor="backgroundColor"
          :fontColor="fontColor"
          :fontSize="fontSize"
          :fontUnit="fontUnit"
          :list="valueList"
          :show="show"
          :mode="mode"
          :playStatus="playStatus"
          :leftIcon="leftIcon"
          :leftIconName="leftIconName"
          :leftIconSize="leftIconSize"
          :rightIcon="rightIcon"
          :rightIconName="rightIconName"
          :rightIconSize="rightIconSize"
          :closeBtn="closeBtn"
          :autoplay="autoplay"
          :radius="radius"
          :padding="padding"
          :duration="duration"
          @click="click"
          @close="close"
          @clickLeft="clickLeftIcon"
          @clickRight="clickRightIcon"
          @end="end"
      ></tn-column-notice>
    </block>
  </view>
</template>

<script>
import componentsColorMixin from '../../libs/mixin/components_color.js'
export default {
  name: 'tn-notice-bar',
  mixins: [componentsColorMixin],
  props: {
    // 显示的内容
    list: {
      type: Array,
      default() {
        return []
      }
    },
    keyName:{
      type:String,
      default: 'key'
    },
    valueName:{
      type:String,
      default: 'value'
    },
    keyValue:{
      type:String,
      default: undefined
    },
    // 是否显示
    show: {
      type: Boolean,
      default: true
    },
    // 播放状态
    // play -> 播放 paused -> 暂停
    playStatus: {
      type: String,
      default: 'play'
    },
    // 滚动方向
    // horizontal -> 水平滚动 vertical -> 垂直滚动
    mode: {
      type: String,
      default: 'horizontal'
    },
    // 是否显示左边图标
    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
    },
    // 滚动周期
    duration: {
      type: Number,
      default: 2000
    },
    // 水平滚动时的速度，即每秒滚动多少rpx
    speed: {
      type: Number,
      default: 160
    },
    // 水平滚动的时候是否采用衔接的模式
    circular: {
      type: Boolean,
      default: true
    },
    // 没有数据时是否显示通知
    autoHidden: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    // 当设置了show为false，或者autoHidden为true且list为空时，不显示通知
    showNotice() {
      return !(this.show === false || (this.autoHidden && this.list.length === 0))
    }
  },
  watch:{
    keyValue:{
      handler(value) {
        this.loadList();
      },
      deep: true
    },
  list:{
    handler(value) {
      this.loadList();
    },
    deep: true
  }
  },
  data() {
    return {
      //显示的值
      valueList:[],
    }
  },
  mounted() {
    this.loadList();
  },
  methods: {
    // 点击了通知栏
    click(index) {
      let value = this.findValue(index);
      //如果是对象，返回传入的对象
      if (this.isObj(value)){
        this.$emit('click', value)
      }else {
        this.$emit('click', index)
      }
    },
    findValue(findIndex){
      let objList = []
      for (let index in this.list){
        let v = this.list[index];
        if (this.isObj(v)){
          //判断是否指定key显示，如果是则显示指定的列表，否则就返回所有列表
          if (this.keyValue == undefined || v[this.keyName] == this.keyValue){
            objList.push(v);
          }
        }else{
          //兼容旧的，旧的直接返回下表
          return findIndex;
        }
      }
      return findIndex >= objList.length ? undefined : objList[findIndex];
    },
    // 点击了关闭按钮
    close() {
      this.$emit('close')
    },
    //判断元素是否是对象
    isObj(value){
      return typeof(value) === 'object';
    },
    // 点击了左边图标
    clickLeftIcon() {
      this.$emit('clickLeft')
    },
    // 点击了右边图标
    clickRightIcon() {
      this.$emit('clickRight')
    },
    // 一个周期滚动结束
    end() {
      this.$emit('end')
    },
    loadList() {
      let tmpList = [];
      for (let index in this.list) {
        let v = this.list[index];
        if (this.isObj(v)) {
          //判断是否指定key显示，如果是则显示指定的列表，否则就返回所有列表
          if (this.keyValue == undefined || v[this.keyName] == this.keyValue) {
            tmpList.push(v[this.valueName]);
          }
        } else {
          tmpList.push(v);
        }
      }
      this.valueList = tmpList;
    }
  }
}
</script>

<style lang="scss" scoped>

.tn-notice-bar {
  overflow: hidden;
}
</style>