hlm_pl_mall_h5/pages/home/goodsdetail/child/InfoPromotions.vue

<!-- promotions.vue -->

<template>
	<view class="div">
		
	<view
		class="div ui-promotions-wrapper ui-detail-common"
		v-if="mansong_info"
	>

		
		<!-- 展示促销信息 -->
		<view class="div promotions-body" :style="'background-image:url('+ovalbg+')'">
			<view
				class="div body-list"
				v-for="(item, index) in mansong_info.rules"
				:key="index"
			>
				<text class="span">满{{ item.mansongrule_price }}立减现金{{ item.mansongrule_discount }}</text>
				<text class="span" v-if="item.goods_id && item.goods_storage" @click="goNavigate('/pages/home/goodsdetail/Goodsdetail',{ 'goods_id': item.goods_id })">，送礼品 {{item.mansong_goods_name}}</text>

			</view>
			
		</view>
		<view class="div time-body">
			<view class="div pt-10 pb-10">还剩<text class="span day" v-if="day">{{ day }}天</text></view>
			<view class="div time-wrapper">
				<text class="span time" style="margin-left:0">{{ hours }}</text
				>&nbsp;时&nbsp;<text class="span time">{{ minute }}</text
				>&nbsp;分&nbsp;<text class="span time">{{ second }}</text
				>&nbsp;秒
			</view>
		</view>
	</view>
		

	</view>
</template>

<script>
import { urlencode } from '@/util/common'
import { mapState, mapMutations } from 'vuex'
import { env } from '../../../../static/config'
export default {
  data () {
    return {
		flag: false,
		day: '',
		hours: '',
		minute: '',
		second: '',
		time: '',
		ovalbg: env.SITE_URL+'/uploads/home/h5/home/oval.png'
    }
  },
  mounted () {
    this.time = setInterval(() => {
      if (this.flag == true) {
        clearInterval(this.time)
      } else {
        this.timeDown()
      }
    }, 1000)
  },
  computed: {
    ...mapState({
      mansong_info: state => state.goodsdetail.mansongInfo
    })
  },

  methods:{
    goNavigate(path,query=false){
      uni.navigateTo({url:path+(query?('?'+urlencode(query)):'')})
    },

   /*
	 * timeDown: 倒计时
	 */
    timeDown () {
      if (
        this.mansong_info
      ) {
        const endTime = new Date(this.mansong_info.mansong_endtime * 1000)
        const nowTime = new Date()
        let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000)
        this.day = parseInt(leftTime / (24 * 60 * 60))
        this.hours = this.formate(parseInt((leftTime / (60 * 60)) % 24))
        this.minute = this.formate(parseInt((leftTime / 60) % 60))
        this.second = this.formate(parseInt(leftTime % 60))
        if (leftTime <= 0) {
          this.flag = true
          this.$emit('time-end')
        }
      }
    },

    /*
	 * 格式化时间
	 */
    formate (time) {
      if (time >= 10) {
        return time
      } else {
        return `0${time}`
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.ui-promotions-wrapper{margin-bottom:$modelSpace;display: flex;height:7.5rem;background-color: #fff;margin-top:$modelSpace;
	.promotions-body{width:6rem;background-size:6rem;background-repeat:no-repeat;background-position:left top;font-size:$fontSize;padding-top:3rem;padding-left:$pageSpace;
	.body-list{padding-top:.5rem;color:$descTextColor;white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;}
	}
	.time-body{flex:1;font-size:$subFontSize;padding-left:.5rem;
		.day{color:$primaryColor;margin-left:.2rem;}
		.time-wrapper{display: flex;align-items: center;
		.time{width:1.5rem;height:1.5rem;margin:0 .1rem;font-size:1rem;line-height:1.5rem;background:$subColor;border:1px solid $primaryColor;border-radius:.2rem;color:$primaryColor;text-align:center;}
	}
	}
}

</style>