vue在列表中使用倒计时
应用场景:订单列表中每个待支付订单的有效时长倒计,或者拼团的倒计时,如下1、html仅展示主要部分,这里limit_time 的值为一个具体时长,如:86400秒,可以根据自己的实际情况进行换算。<div v-for="(spellGroup, index) in groups" :key="index"><p >剩余 {{spellGroup.limit_ti...
·
应用场景:订单列表中每个待支付订单的有效时长倒计,或者拼团的倒计时,如下
1、html
仅展示主要部分,这里limit_time
的值为一个具体时长,如:86400秒
,可以根据自己的实际情况进行换算。
<div v-for="(spellGroup, index) in groups" :key="index">
<p >剩余 {{spellGroup.limit_time | limitTimeFilter}}</p>
</div>
2、script
部分,这里有个小坑,从父组件获取的infos
是不能直接被更改的,所以咱们要给它重新放到一个新的容器groups
里面,再来操作groups
就不会有任何问题了。
另外,下面的formateTimeStamp
方法为将时间转化为对象的工具函数,可以视情况调整。
import { formateTimeStamp } from '@/util/tools.js'
export default {
props: {
infos: {
type: [Array, Object]
}
},
data () {
return {
groups: this.infos.group_list, // 遍历到页面的数据集合
ticker: null
}
},
filters: {
// 拼团有效期的filter
limitTimeFilter (val) {
if (val > 0) {
let formateLimitTimes = formateTimeStamp(val);
let txt = `${formateLimitTimes.hour} 时 ${formateLimitTimes.min} 分 ${formateLimitTimes.seconds} 秒`;
if (formateLimitTimes.day != '00') {
txt = `${Number(formateLimitTimes.day)*24} 时 ${formateLimitTimes.min} 分 ${formateLimitTimes.seconds} 秒`;
}
return txt;
} else {
const twtxt = `0 时 0 分 0 秒`
return twtxt;
}
}
},
methods: {
beginTimer() { //这个计时器是每秒减去数组中指定字段的时间
this.ticker = setInterval(() => {
for (let i = 0, len = this.groups.length; i < len; i++) {
const item = this.groups[i];
if (item.limit_time > 0) {
this.groups[i].limit_time = this.groups[i].limit_time - 1;
}
}
}, 1000);
}
},
mounted () {
//这一段是防止进入页面出去后再进来计时器重复启动
if (this.ticker) {
clearInterval(this.ticker);
}
this.beginTimer();
}
}
tools.js
// 计算出时间戳的具体数据:比如将85400转化为 n时n分n秒
export function formateTimeStamp (timeStamp) {
var hour;
var min;
var seconds;
hour = parseInt(timeStamp / (60 * 60)) // 计算整数小时数
var afterHour = timeStamp - hour * 60 * 60 // 取得算出小时数后剩余的秒数
min = parseInt(afterHour / 60) // 计算整数分
seconds = parseInt(timeStamp - hour * 60 * 60 - min * 60) // 取得算出分后剩余的秒数
if (hour < 10) {
hour = '0' + hour
}
if (min < 10) {
min = '0' + min;
}
if (seconds < 10) {
seconds = '0' + seconds;
}
const restTime = {
hour: hour,
min: min,
seconds: seconds
}
return restTime
}
更多推荐
已为社区贡献12条内容
所有评论(0)