1.首先获取列表数据的时候,把支付时间pay_time取出来,再写一个倒计时方法
getList() {
const { dataType, queryParam, page } = this
this.isLoading = true
return Api.list({ dataType, ...queryParam, page })
.then((response) => {
this.$nextTick(() => {
response.data.list.data.map((res) => {
res.disparityTimeStr = ''
let disparityTime = Date.parse(new Date(res.pay_time)) + 172800000 - response.data.date * 1000
if (disparityTime > 0) {
res.disparityTime = disparityTime
this.getDisparityTimeStr(res)
}
})
this.orderList = response.data.list
})
})
.finally(() => {
this.isLoading = false
})
},
getDisparityTimeStr(item) {
let setTime = setInterval(() => {
item.disparityTime = item.disparityTime - 1000
let hours = parseInt((item.disparityTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
let minutes = parseInt((item.disparityTime % (1000 * 60 * 60)) / (1000 * 60))
let seconds = parseInt((item.disparityTime % (1000 * 60)) / 1000)
item.disparityTimeStr =
(hours < 10 ? '0' + hours : hours) +
'小时' +
(minutes < 10 ? '0' + minutes : minutes) +
'分' +
(seconds < 10 ? '0' + seconds : seconds) +
'秒'
if (item.disparityTime < 0) {
clearTimeout(setTime)
}
}, 1000)
},
2.页面显示
<a-tag color="red" v-if="item.disparityTimeStr">
剩余时间:{{ item.disparityTimeStr }}
</a-tag>