caimei365-manager-ui/src/views/user/club-portrait/components/select-time.vue

<template>
  <div class="time-select">
    <div
      v-for="i in timeList"
      :key="i.id"
      class="time-tap"
      :class="activeId === i.id && 'active'"
      @click="handleTimeSelct(i)"
    >
      {{ i.content }}
    </div>
    <el-date-picker
      v-model="time"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
    />
  </div>
</template>

<script>
import loopEchart from '../mixins/index'

export default {
  mixins: [loopEchart],
  props: {
    timeList: {
      type: Array,
      default: () => [
        {
          id: 1,
          content: '昨天'
        },
        {
          id: 2,
          content: '近1月'
        },
        {
          id: 3,
          content: '近6月'
        },
        {
          id: 4,
          content: '近1年'
        },
        {
          id: 0,
          content: '全部'
        }
      ]
    },
    activeLinkId: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      time: [],
      activeId: 1
    }
  },
  watch: {
    activeId: {
      handler(e) {
        const obj = {
          1: () => this.getYesterDay(1),
          2: () => this.getMonths(1),
          3: () => this.getMonths(6),
          4: () => this.getYears(1),
          0: () => {
            this.time = []
          },
          5: () => this.getWeeks(1)
        }
        this.time = e !== 0 ? [obj[e](), this.getDay()] : ['', '']
      },
      immediate: true
    },
    time: {
      handler(e) {
        this.$emit('handleSelectTime', e)
      },
      immediate: true
    },
    activeLinkId: {
      handler(val) {
        if (val) {
          this.activeId = val
        }
      },
      immediate: true
    }
  },
  methods: {
    handleTimeSelct($event) {
      this.activeId = $event.id
    }
  }
}
</script>

<style lang="scss">
.time-select {
  display: flex;
  align-items: center;
  padding: 0.5vw 0;
  .time-tap {
    margin-right: 1vw;
    font-size: 14px;
    color: #ccc;
    cursor: pointer;
    &.active {
      color: rgb(0, 174, 255);
    }
  }
}
.el-picker-panel {
  z-index: 9999999 !important;
}
</style>