CountDown.vue
3.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<template>
<div class="data_package_count_down">
<div v-if="detailData.applyCount >= detailData.minPeopleCount || timeTamp * 1 < 0">{{ detailData.periodOfValidity }}</div>
<template v-else>
<div class="countDownFont">{{ showTime.day }}</div>
天
<div class="countDownFont">{{ showTime.hour }}</div>
时
<div class="countDownFont">{{ showTime.minute }}</div>
分
<div class="countDownFont">{{ showTime.second }}</div>
秒
</template>
</div>
</template>
<script>
export default {
props: ['day', 'productId', 'packageArr', 'bindId', 'comboId'],
data() {
return {
timeTamp: '',
showTime: {
day: '',
hour: '',
minute: '',
second: '',
},
showPintuanAbout: false,
detailData: '',
}
},
watch: {
bindId(oldVal, newVal) {
this.getDateInfoById()
},
comboId(oldVal, newVal) {
this.getDateInfoById()
},
},
mounted() {
// console.log(this.detailData)
// console.log(this.packageArr)
this.getDateInfoById()
},
methods: {
// 根据选择的档期显示成团状态
getDateInfoById() {
const productId = this.productId
const bindId = this.bindId
const comboId = this.comboId
// console.log(productId, bindId, comboId)
this.yxAxios
.get(`${this.yanxueUrl}/api/Product/DateInfo/ById?productId=${productId}&bindId=${bindId}&comboId=${comboId}`)
.then((res) => {
// console.log(res.data)
if (res.data.status == 1) {
let data = res.data.data
// console.log(data.clusterTime)
data.clusterTime = this.Moment(new Date(data.clusterTime.replace(/\-/g, '/')))
.add(1, 'days')
.subtract(1, 'seconds')
.format('YYYY/MM/DD HH:mm:ss')
data.periodOfValidity = this.Moment(new Date(data.periodOfValidity.replace(/\-/g, '/')))
.add(1, 'days')
.subtract(1, 'seconds')
.format('YYYY/MM/DD HH:mm:ss')
console.log(data.clusterTime)
this.detailData = data
let timer = setInterval(() => {
this.timeDown() //倒计时
}, 1000)
this.$once('hook:beforeDestroy', () => {
clearInterval(timer) //清理定时器
console.log('清理定时器')
})
} else {
this.$toast('获取成团状态失败')
}
})
},
//倒计时计算
timeDown() {
var clusterTime = Date.parse(new Date(this.detailData.clusterTime))
// var clusterTime = Date.parse(new Date(this.detailData.clusterTime.replace(/\-/g, "/"))) + 60 * 60 * 24 * 1000;
var nowTime = Date.parse(new Date())
let timeTamp = clusterTime / 1000 - nowTime / 1000
// console.log(timeTamp)
this.timeTamp = timeTamp
// console.log(timeTamp)
let k = this.calculateDiffTime(timeTamp)
// console.log(k)
},
calculateDiffTime(timeDiff) {
var day = parseInt(timeDiff / 86400)
var hour = parseInt((timeDiff % 86400) / 3600)
var minute = parseInt(((timeDiff % 86400) % 3600) / 60)
var second = parseInt((((timeDiff % 86400) % 3600) % 60) % 60)
this.showTime = {
day,
hour,
minute,
second,
}
day = day ? day + '天' : ''
hour = hour ? hour + '时' : ''
minute = minute ? minute + '分' : ''
second = second ? second + '秒' : ''
return day + hour + minute + second
},
},
}
</script>
<style lang="scss">
.data_package_count_down {
display: inline-block;
vertical-align: middle;
font-size: 24px;
margin-left: 10px;
.countDownFont {
display: inline-block;
width: 34px;
height: 34px;
color: #ffe9b1;
background: #000;
line-height: 34px;
border-radius: 6px;
margin: 0 10px;
vertical-align: middle;
text-align: center;
}
}
</style>