ec.uniapp-master/components/group/group.vue

<template>
<view class="seckill-time-box " :class="mold == 'index' ? 'index' : ''">
    <view class="seckill seckill-item" v-if="active" >
        <view v-if="endtype == 0">
            <view class="no-starts">
                进行中
            </view>
            <view class="time-text">
                {{endmessage}}
            </view>
        </view>
        <view class="time-out" v-if="endtype == 1">
            <i class="iconfont icon-shijian"></i>
            <view class="text my-class" >距离拼团结束还剩余</view>
            <view class="tiem"><span class="num-item"> <p class="zero" v-if="endTime.hour < 10">0</p>{{endTime.hour}}</span> 时 <span class="num-item"><p class="zero" v-if="endTime.minute < 10">0</p>{{endTime.minute}}</span> 分 <span class="num-item"><p class="zero" v-if="endTime.second < 10">0</p>{{endTime.second}}</span> 秒</view>
        </view>
    </view>
    <view class="seckill-item" v-else>
        <view v-if="gotype == 0">
            <view class="no-starts">
                未开始
            </view>
            <view class="time-text">
                {{message}}
            </view>
        </view>
        <view class="time-out" v-if="gotype == 1">
            <i class="iconfont icon-shijian"></i>
            <view class="text">距离拼团开始还剩余</view>
            <view class="tiem"><span class="num-item"> <p class="zero" v-if="startsTime.hour < 10">0</p>{{startsTime.hour}}</span> 时 <span class="num-item"> <p class="zero"v-if="startsTime.minute < 10">0</p>{{startsTime.minute}}</span> 分 <span class="num-item"> <p class="zero" v-if="startsTime.second < 10">0</p>{{startsTime.second}}</span> 秒</view>
        </view>
    </view>
</view>
</template>
<script>

export default {
  data() {
    return {
      message: '',
      endmessage: '',
      active: false,
      gotype: 0,
      endtype: 0,
      endTime: {
        interval: '',
        day: 0,
        hour: 0,
        minute: 0,
        second: 0,
        count: 0
      },
      startsTime: {
        interval: '',
        day: 0,
        hour: 0,
        minute: 0,
        second: 0,
        count: 0
      }
    };
  },
  props: {
	  end:{
	    type: String,
	    value: null
	  },
	  starts: {
	    type: String,
	    value: null
	  },
	  index: {
	    type: Number,
	    value: 0
	  },
	  findex: {
	    type: Number,
	    value: 0
	  },
	  server: {
	    type: String,
	    value: null
	  },
	  mold: {
	    type: String,
	    value: 'goods'
	  }
  },
 
   options: {
    addGlobalClass: true
  },
  
  
  
    methods: {
      //    		活动开始的倒计时
      countTime() {
        var d = 86400000,
            h = 3600000,
            n = 60000,
            end = this.end,
            server = this.server,
            arr = String(end).split(/\D/),
            newArr = String(server).split(/\D/);
        newArr = newArr.map(Number);
        arr = arr.map(Number);
        var serverTime = new Date(newArr[0], newArr[1] - 1, newArr[2], newArr[3], newArr[4], newArr[5]).getTime();
        var endTime = new Date(arr[0], arr[1] - 1, arr[2], arr[3], arr[4], arr[5]).getTime(); //		        组件才秒杀列表页使用时，没有重新请求列表，服务器时间应该加上未开始倒计时的时间

        if (this.mold == 'list') {
          this.serverTime =  serverTime + this.startsTime.count;
        } //		        计算开始时间跟结束时间的差值


        var timeDiff = endTime - serverTime; //		        在本地计算倒计时

        var allTime = this.endTime.count + 1000;
        this.endTime.count =  allTime;
        var interval = timeDiff - this.endTime.count;

        if (interval < d) {
          this.endtype = 1;

          if (interval < 0) {
            //		        	活动结束
            this.$emit('end', {
              findex: this.findex,
              index: this.index
            }); // 				this.$emit('end',this.index)
          } else {
            var day = Math.floor(interval / d);
            Math.floor(interval -= day * d);
            var hour = Math.floor(interval / h);
            Math.floor(interval -= hour * h);
            var minute = Math.floor(interval / n);
            var second = Math.floor(interval % n / 1000);
            this.endTime.day =  day;
            this.endTime.hour =  hour;
            this.endTime.minute =  minute;
            this.endTime.second = second;
          }
        } else {
         this.endmessage =  `${arr[1]} 月 ${arr[2]} 日，${arr[3]} : ${arr[4]} 结束`;
        }
      },

      //            活动未开始的倒计时
      countStartsTime() {
        var d = 86400000,
            h = 3600000,
            n = 60000,
            sta = this.starts,
            server = this.server,
            arr = String(sta).split(/\D/),
            newArr = String(server).split(/\D/);
			console.log('jijiwawa');
        newArr = newArr.map(Number);
        arr = arr.map(Number);
        var serverTime = new Date(newArr[0], newArr[1] - 1, newArr[2], newArr[3], newArr[4], newArr[5]).getTime();
        var staTime = new Date(arr[0], arr[1] - 1, arr[2], arr[3], arr[4], arr[5]).getTime();
        var timeDiff = staTime - serverTime;
        var allTime = this.startsTime.count + 1000;
        this.startsTime.count =  allTime;
        var interval = timeDiff - this.startsTime.count; //		        var interval = staTime - nowTime;
        //		        时间差小于一天

        if (interval < d) {
          this.gotype =  1

          if (interval < 0) {
            //			        	代表活动已经开始了，需要执行活动开始倒计时
            var interval = setInterval(() => {
              this.countTime();
            }, 1000);
           this.active =  true;
           this.endTime.interval =  interval
            this.$emit('starts', {
              findex: this.findex,
              index: this.index
            }); // 					this.$emit('starts',this.index);
            //                        清除掉倒计时,以免重复分发事件

            clearInterval(this.startsTime.interval);
          } else {
            var day = Math.floor(interval / d);
            Math.floor(interval -= day * d);
            var hour = Math.floor(interval / h);
            Math.floor(interval -= hour * h);
            var minute = Math.floor(interval / n);
            var second = Math.floor(interval % n / 1000);
			this.startsTime.day =  day;
			this.startsTime.hour =  hour;
			this.startsTime.minute =  minute;
			this.startsTime.second = second;
          }
        } else {
          this.message =  `${arr[1]} 月 ${arr[2]} 日，${arr[3]} : ${arr[4]} 开始`
        }
      }

    },
    mounted(){
      var interval = setInterval(() => {
        this.countStartsTime();
      }, 1000);
	  this.startsTime.interval = interval
    }
};
</script>
<style rel="stylesheet/less" lang="less">
    @import "group";
</style>