You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
238 lines
10 KiB
238 lines
10 KiB
<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>
|