mall4pc-bbc/pages/special-discount.vue

<template>
  <div class="discount-list" v-cloak>
    <div class="list-con" v-if="discountList.length">
      <div
        :class="['item' , item.pcPic ? '' : 'no-bg']"
        v-for="(item,index) in discountList"
        :key="item.discountId"
        @click="toDiscountDetail(item.discountId)"
      >
        <img :src="item.pcPic" class="bg" />
        <div class="text-box">
          <div class="time">
            <span class="time-icon"></span>
            {{ $t('onlyLeft') }}
            <div class="much-time" v-if="endTimeList[index].day">
              <span class="number">{{endTimeList[index].day}}</span>{{ $t('day') }}
            </div>
            <!-- 大于一天展示 -->
            <div class="number-box" v-if="endTimeList[index].day===0">
              <span class="number">{{endTimeList[index].hour}}</span>
              <span class="colon">:</span>
              <span class="number">{{endTimeList[index].min}}</span>
              <span class="colon">:</span>
              <span class="number">{{endTimeList[index].second}}</span>
            </div>
            <!-- 小于一天展示 -->
          </div>
          <div class="logo">
            <img :src="item.shopLogo" alt />
          </div>
          <div class="info">{{item.discountName}}</div>
        </div>
      </div>
    </div>
    <!-- 页码 -->
    <pagination v-model="current" :pages="pages" @changePage="getDiscountPage"></pagination>
    <!-- /页码 -->
    <!-- 活动列表为空 -->
    <div class="empty" v-if="!discountList.length">
      <div class="img">
        <img src="~/assets/images/emptyPic/not-found.png" alt />
      </div>
      <div class="action">
        <div class="text">{{ $t('sorryNoRelatedActivities') }}</div>
        <nuxt-link to="/" class="btn">{{ $t('backToHome') }}</nuxt-link>
      </div>
    </div>
    <!-- 活动列表为空 -->
  </div>
</template>

<script>
import Pagination from '~/components/pagination'
export default {
  components: {
    Pagination
  },
  data () {
    return {
      discountList: [],  //优惠活动列表
      current: 1, // 当前页数
      pages: 1, // 总页数
      endTimeList: [],  //结束时间
      timer: ''
    }
  },
  mounted () {
    // 设置网页标题
    document.title = this.$t('commonHead.limitedTimeOffer')
    this.getDiscountPage(1)  //默认加载第一页
  },
  beforeDestroy () {
    clearTimeout(this.timer)
  },
  methods: {

    //获取优惠活动列表
    getDiscountPage (cur) {
      this.$axios.get('/marking/discount/getDiscountList', {
        params: {
          current: cur,  //当前页
          size: 20
        }
      }).then(({ data }) => {
        this.discountList = data.records
        this.pages = data.pages
        var endTimeList = [];
        this.discountList.forEach(item => {
          endTimeList.push({ endTime: item.endTime });
        })
        this.endTimeList = endTimeList;
        this.countTime()
      })
    },

    // 倒计时
    countTime () {
      var endTimeList = this.endTimeList
      endTimeList.forEach((item, index) => {
        // 获取当前时间
        let date = new Date()
        let now = date.getTime()

        // 设置截止时间
        let end = new Date(item.endTime).getTime()

        // 时间差
        let leftTime = end - now

        // 定义变量 d,h,m,s保存倒计时的时间
        if (leftTime >= 0) {
          // 天
          item.day = Math.floor(leftTime / 1000 / 60 / 60 / 24)
          // 时
          let h = Math.floor(leftTime / 1000 / 60 / 60 % 24)
          item.hour = h < 10 ? '0' + h : h
          // 分
          let m = Math.floor(leftTime / 1000 / 60 % 60)
          item.min = m < 10 ? '0' + m : m
          // 秒
          let s = Math.floor(leftTime / 1000 % 60)
          item.second = s < 10 ? '0' + s : s
        } else {
          item.day = 0
          item.hour = '00'
          item.min = '00'
          item.second = '00'
        }
        this.$set(this.endTimeList, index, item)
      })
      // 递归每秒调用countTime方法，显示动态时间效果
      this.timer = setTimeout(this.countTime, 1000)
    },

    //跳转活动详情
    toDiscountDetail (discountId) {
      this.$router.push({
        path: '/discount-detail',
        query: {
          discountId: discountId
        }
      })
    }

  }

}
</script>

<style scoped src='~/assets/css/discount.css'></style>
<style scoped>
.empty {
  padding-top: 140px;
}
</style>