web/apps/bigmember_pc/src/components/coupon/CouponGiftList.vue

<template>
  <div class="gift-list">
    <SpecCard
      v-for="spec in giftList"
      :key="spec.id"
      :tipText="spec.tipText"
      :active="spec[activeType] === active"
      @onClick="clickSpec(spec)"
    >
      <div class="spec-c-label">{{ spec.name }}</div>
      <div class="spec-c-desc"></div>
    </SpecCard>
  </div>
</template>

<script>
import SpecCard from '@/components/common/SpecCard.vue'
import { getGiftList } from '@/api/modules/'
export default {
  name: 'gift-list',
  components: {
    SpecCard
  },
  props: {
    productionId: [String, Number],
    activeType: {
      type: String,
      default: 'id'
    }
  },
  data() {
    return {
      active: '',
      token: '', // 用户无身份查询接口
      giftList: []
    }
  },
  watch: {
    productionId() {
      this.getGiftList()
    }
  },
  computed: {
    activeItem() {
      return this.getActiveItem()
    }
  },
  created() {
    this.getToken()
  },
  methods: {
    getToken() {
      const { token } = this.$route.query
      if (token) {
        this.token = token
      }
    },
    clickSpec(spec) {
      this.active = spec[this.activeType]
      this.$emit('change', spec)
    },
    getActiveItem() {
      return this.giftList.find((spec) => spec[this.activeType] === this.active)
    },
    async getGiftList() {
      var info = {
        useProduct: this.productionId,
        token: this.token,
        useProductType: 0
      }
      if (!info.useProduct) {
        return this.giftListLoaded(0)
      }
      this.giftList = []
      const { data } = await getGiftList(info)
      if (Array.isArray(data) && data.length > 0) {
        this.giftList = data.map((item) => {
          item.preStartTime =
            item.preheatingTime && item.preheatingTime.toString().length === 10
              ? item.preheatingTime * 1000
              : item.preheatingTime
          item.startTime =
            item.beginDate && item.beginDate.toString().length === 10
              ? item.beginDate * 1000
              : item.beginDate
          item.endTime =
            item.endDate && item.endDate.toString().length === 10
              ? item.endDate * 1000
              : item.endDate
          item.isReceive = item.IsReceive
          if (!item.stockNumber) {
            item.stockNumber = 0
          }
          const giftInfo = this.sortGiftInfo(item)
          return {
            ...item,
            giftInfo
          }
        })
      } else {
        this.giftList = []
      }
      this.giftListLoaded(this.giftList.length)
    },
    sortGiftInfo(gift) {
      const info = gift
      let timeType = ''
      if (info.timeType === 1) {
        timeType = '天'
        return `${info.time}${timeType}`
      } else if (info.timeType === 2) {
        timeType = '月'
        return `${info.time}个${timeType}`
      }
      return ''
    },
    giftListLoaded(length) {
      this.$emit('loaded', { data: length, list: this.giftList })
    }
  }
}
</script>

<style lang="scss" scoped>
.gift-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  ::v-deep {
    .spec-card {
      width: 240px;
      height: 120px;
    }
    .spec-card:not(:last-of-type) {
      margin-right: 16px;
    }
  }
}
</style>