130 lines
2.8 KiB
JavaScript
130 lines
2.8 KiB
JavaScript
|
import util from '../../utils/util'
|
|||
|
|
|
|||
|
|
Component({
|
|||
|
|
properties: {
|
|||
|
|
// useSlot: Boolean,
|
|||
|
|
// 截止的时间
|
|||
|
|
date: String,
|
|||
|
|
// 分隔符, colon为英文冒号，zh为中文
|
|||
|
|
separator: {
|
|||
|
|
type: String,
|
|||
|
|
value: 'zh'
|
|||
|
|
},
|
|||
|
|
// 组件样式, text为纯文本，custom为带背景色
|
|||
|
|
style: {
|
|||
|
|
type: String,
|
|||
|
|
value: 'text'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
data: {
|
|||
|
|
// 倒计时数据
|
|||
|
|
dynamic: {
|
|||
|
|
day: '00',
|
|||
|
|
hou: '00',
|
|||
|
|
min: '00',
|
|||
|
|
sec: '00'
|
|||
|
|
},
|
|||
|
|
// 分隔符文案
|
|||
|
|
separatorText: {
|
|||
|
|
day: '天',
|
|||
|
|
hou: '时',
|
|||
|
|
min: '分',
|
|||
|
|
sec: '秒'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
attached() {
|
|||
|
|
// 分隔符文案
|
|||
|
|
this.separatorText()
|
|||
|
|
// 开始倒计时
|
|||
|
|
this.onTime()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
detached() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
|
|||
|
|
// 分隔符文案
|
|||
|
|
separatorText() {
|
|||
|
|
const separatorText = this.data.separatorText
|
|||
|
|
if (this.data.separator === 'colon') {
|
|||
|
|
separatorText.day = ':'
|
|||
|
|
separatorText.hou = ':'
|
|||
|
|
separatorText.min = ':'
|
|||
|
|
separatorText.sec = ''
|
|||
|
|
}
|
|||
|
|
this.setData({
|
|||
|
|
separatorText
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 开始倒计时
|
|||
|
|
onTime(deep = 0) {
|
|||
|
|
const app = this
|
|||
|
|
const dynamic = {}
|
|||
|
|
|
|||
|
|
// 获取当前时间，同时得到活动结束时间数组
|
|||
|
|
const newTime = new Date().getTime()
|
|||
|
|
// 对结束时间进行处理渲染到页面
|
|||
|
|
const endTime = new Date(util.format_date(app.data.date)).getTime();
|
|||
|
|
|
|||
|
|
// 如果活动未结束，对时间进行处理
|
|||
|
|
if ((endTime - newTime) <= 0) {
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const diffTime = (endTime - newTime) / 1000;
|
|||
|
|
// 获取时、分、秒
|
|||
|
|
const day = parseInt(diffTime / 86400),
|
|||
|
|
hou = parseInt(diffTime % 86400 / 3600),
|
|||
|
|
min = parseInt(diffTime % 86400 % 3600 / 60),
|
|||
|
|
sec = parseInt(diffTime % 86400 % 3600 % 60);
|
|||
|
|
dynamic.day = app.timeFormat(day)
|
|||
|
|
dynamic.hou = app.timeFormat(hou)
|
|||
|
|
dynamic.min = app.timeFormat(min)
|
|||
|
|
dynamic.sec = app.timeFormat(sec)
|
|||
|
|
|
|||
|
|
// 渲染，然后每隔一秒执行一次倒计时函数
|
|||
|
|
app.setData({
|
|||
|
|
dynamic
|
|||
|
|
})
|
|||
|
|
// 判断倒计时是否结束
|
|||
|
|
const isEnd = app.isEnd()
|
|||
|
|
// 结束后执行回调函数
|
|||
|
|
if (isEnd) {
|
|||
|
|
deep > 0 && app.triggerEvent('finish')
|
|||
|
|
}
|
|||
|
|
// 重复执行
|
|||
|
|
if (!isEnd) {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
app.onTime(++deep)
|
|||
|
|
}, 1000)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 判断倒计时是否结束
|
|||
|
|
isEnd() {
|
|||
|
|
const {
|
|||
|
|
dynamic
|
|||
|
|
} = this.data
|
|||
|
|
if (dynamic.day == '00' && dynamic.hou == '00' && dynamic.min == '00' && dynamic.sec == '00') {
|
|||
|
|
return true
|
|||
|
|
}
|
|||
|
|
return false
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 小于10的格式化函数
|
|||
|
|
*/
|
|||
|
|
timeFormat(value) {
|
|||
|
|
return value < 10 ? '0' + value : value
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
})
|