|
|
<template> <view class="marketing-time-box" :class="mold == 'index' ? 'index' : ''"> <view class="seckill-item" :style="'color: ' + config.countColor" 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">距离{{typename}}结束还剩余</view> <view class="tiem"><span class="num-item" :style="'background: ' + config.mainColor"> <p class="zero" v-if="endTime.hour < 10">0</p>{{endTime.hour}}</span> 时 <span class="num-item" :style="'background: ' + config.mainColor"><p class="zero" v-if="endTime.minute < 10">0</p>{{endTime.minute}}</span> 分 <span class="num-item" :style="'background: ' + config.mainColor"><p class="zero" v-if="endTime.second < 10">0</p>{{endTime.second}}</span> 秒 </view> </view> </view> <view class="seckill-item" :style="'color: ' + config.countColor" v-else> <view v-if="type == 0"> <!--<view class="no-starts"> 未开始 </view>--> <view class="time-text"> {{message}} </view> </view> <view class="time-out" :style="'color: ' + config.countColor" v-if="type == 1"> <!--<i class="iconfont icon-shijian"></i>--> <view class="text">距离{{typename}}开始还剩余</view> <view class="tiem"><span class="num-item" :style="'background: ' + config.mainColor"> <p class="zero" v-if="startsTime.hour < 10">0</p>{{startsTime.hour}}</span> 时 <span class="num-item" :style="'background: ' + config.mainColor"> <p class="zero" v-if="startsTime.minute < 10">0</p>{{startsTime.minute}}</span> 分 <span class="num-item" :style="'background: ' + config.mainColor"> <p class="zero" v-if="startsTime.second < 10">0</p>{{startsTime.second}}</span> 秒 </view> </view> </view> </view></template><script> // import { config, getUrl, weapp, this.$cookieStorage, connect, bindActionCreators, store, actions, sandBox } from '../../lib/myapp.js';
export default { data() { return { message: '', endmessage: '', active: false, type: 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 }, config: '', serverTime: '' }; },
options: { addGlobalClass: true }, 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' }, typename: { type: String, value: '秒杀' } },
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 }); clearInterval(this.endTime.interval); // 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 { var month = arr[1] < 10 ? '0' + arr[1] : arr[1], day = arr[2] < 10 ? '0' + arr[2] : arr[2], time = arr[3] < 10 ? '0' + arr[3] : arr[3], minute = arr[4] < 10 ? '0' + arr[4] : arr[4]; this.endmessage = `${month} 月 ${day} 日，${time} : ${minute} 结束`; //console.log('这个是什么',this.endmessage);
} },
// 活动未开始的倒计时
countStartsTime() { var d = 86400000, h = 3600000, n = 60000, sta = this.starts, server = this.server, arr = String(sta).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 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.type = 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 { var month = arr[1] < 10 ? '0' + arr[1] : arr[1], day = arr[2] < 10 ? '0' + arr[2] : arr[2], time = arr[3] < 10 ? '0' + arr[3] : arr[3], minute = arr[4] < 10 ? '0' + arr[4] : arr[4]; this.message = `${month} 月 ${day} 日，${time} : ${minute} 开始` } } }, mounted() { // 第三方平台配置颜色
var gbConfig = this.$cookieStorage.get('globalConfig') || ''; this.config = gbConfig; var interval = setInterval(() => { this.countStartsTime(); }, 1000); this.startsTime.interval = interval; } };</script>
<style rel="stylesheet/less" lang="less"> @import "seckill";</style>
|
