mall4pc-bbc/pages/discount-detail.vue

<template>
  <div class="discount-detail">
    <div class="banner">
      <img :src="discountDetail.pcBackgroundPic" class="bg" />
      <div class="text-box">
        <div class="time">
          <span class="time-icon"></span>
          {{$t('discountDetail.DistanceToEnd')}}
          <div class="much-time" v-if="day">
            <span class="day">{{day}}</span>{{$t('day')}}
          </div>
          <div class="number-box">
            <span class="number">{{hour}}</span>
            <span class="colon">:</span>
            <span class="number">{{min}}</span>
            <span class="colon">:</span>
            <span class="number">{{second}}</span>
          </div>
        </div>
        <div class="shop-logo">
          <img :src="discountDetail.shopLogo" alt />
        </div>
        <div class="shop-name">{{discountDetail.shopName}}{{$t('discountDetail.SpecialSession')}}</div>
        <div class="info">{{discountDetail.discountName}}</div>
      </div>
    </div>
    <div class="goods-list discount-prod" v-if="discountProdList.length">
      <div class="list-con">
        <!-- 商品 -->
        <div
          class="item"
          v-for="item in discountProdList"
          :key="item.prodId"
          @click="toDiscountProdDet(item.prodId)"
        >
          <div class="goods-img">
            <img v-if="item.pic" :src="item.pic" alt  @error="handlePicError" />
            <img v-else src="~/assets/img/def.png" alt />
          </div>
          <div class="goods-msg">
            <div class="goods-name">{{item.prodName}}</div>
            <div class="activity-price">
              {{$t('discountDetail.eventReferencePrice')}}：
              <div class="price">
                ￥
                <span class="big">{{parsePrice(item.activityPrice)[0]}}</span>
                .{{parsePrice(item.activityPrice)[1]}}
              </div>
              <div class="old-price">￥{{item.price.toFixed(2)}}</div>
            </div>
          </div>
        </div>
        <!-- /商品 -->
      </div>
      <!-- 页码 -->
      <pagination v-model="current" :pages="pages" @changePage="getDiscountProdList"></pagination>
      <!-- /页码 -->
    </div>
    <!-- 商品列表为空 -->
    <div class="empty" v-if="!discountProdList.length">
      <div class="img">
        <img src="~/assets/images/emptyPic/not-found.png" alt />
      </div>
      <div class="action">
        <div class="text">{{$t('sorryNoRelatedProducts')}}</div>
        <nuxt-link to="/special-discount" class="btn">{{$t('lookAtOther')}}</nuxt-link>
      </div>
    </div>
    <!-- 商品列表为空 -->
  </div>
</template>

<script>
import Pagination from '~/components/pagination'
export default {
  components: {
    Pagination
  },
  data () {
    return {
      discountDetail: {},  //活动详情
      discountId: this.$route.query.discountId,  //接收活动列表id
      day: 0,  //天
      hour: 0,  //时
      min: 0,  //分
      second: 0,  //秒
      discountProdList: [],  //限时特惠商品列表
      current: 1,  // 当前页数
      pages: 1,  // 总页数
      endTime: '', //结束时间
      timer: ''
    }
  },
  mounted () {

    // 获取活动详情
    this.$axios.get('/marking/discount/getDiscountByDiscountId/' + this.discountId).then(({ data }) => {
      this.discountDetail = data
      this.endTime = data.endTime
      this.countTime()
    })

    // 获取限时特惠商品列表
    this.getDiscountProdList(1)

  },

  //离开时结束倒计时
  beforeDestroy () {
    clearTimeout(this.timer)
  },

  methods: {
    /**
     * 加载默认图片
     */
    handlePicError(e){
       e.target.src=require('@/assets/img/def.png')
    },
    // 倒计时
    countTime () {
      // 获取当前时间
      let date = new Date()
      let now = date.getTime()

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

      // 时间差
      let leftTime = end - now

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

    //获取限时特惠商品列表
    getDiscountProdList (cur) {
      this.$axios.get('/marking/discount/prodList', {
        params: {
          discountId: this.discountId,  //活动id
          current: cur,  //当前页
          size: 20
        }
      }).then(({ data }) => {
        this.discountProdList = data.records
        this.pages = data.pages
      })
    },

    // 价格过滤
    parsePrice (value) {
      var val = Number(value)
      if (!val) {
        val = 0;
      }
      // 截取小数点后两位，并以小数点为切割点将val转化为数组
      return val.toFixed(2).split(".");
    },

    // 跳转到商品详情
    toDiscountProdDet (prodId) {
      const newPage = this.$router.resolve({ path: '/detail/' + prodId })
      window.open(newPage.href,'_blank')
    }

  }
}
</script>

<style scoped src='~/assets/css/discount-detail.css'></style>