基于element-ui实现待支付订单显示定时器

表格显示内容：

<el-table-column label="订单状态" prop="state" align="center"><template slot-scope="scope">{{ _orderState[parseInt(scope.row.state)] }}<br><span style="color: #f10215" v-if="scope.row.state===1 && scope.row.ext.isPreOrderPaid !== true">{{timeObj[scope.row.orderNo]}}</span></template>
</el-table-column>

data中定义：

timeObj:{},

1、init()函数获取表格数据(dataList)后：

if(this.dataList){let that = this;this.dataList.forEach(elem =>{// 判断是否是待支付订单if(elem.state === 1 && elem.ext.isPreOrderPaid !== true){// 传递创建时间和订单编号参数that.deadLine(elem.createTime,elem.orderNo);}})
}

2、周期性执行状态函数

deadLine(createTime,id){let that = this;let interval = setInterval(() =>{that.countTime(createTime,id,interval)},1000)},

3、过期的数据改变状态为’已过期’

async countTime(createTime,id,interval) {let startTime = this.$formatIntValue(createTime);let nowTime = Date.parse(new Date()) / 1000;   // 当前时间时间戳 精确到秒let endTime = startTime + 30 * 60;   // 结束时间戳let downTime = (endTime - nowTime) > 0 ? (endTime - nowTime) : 0;let that = this;if (downTime <= 0) {clearInterval(interval);that.timeObj = {}let params = {orderNo: id};// 调用接口改变订单状态(此处可以和后端协商：后端也用定时器到期后改变订单状态，这样就无需调用接口改变状态，也无需调用接口刷新表格数据，前端遍历表格数据将该订单状态改为过期即可)let res = await this.$api('Order.CancelOrder', params);// 刷新表格数据if(res) {that.init()};//超时 事件处理} else {downTime--;let min = Math.floor(downTime % 3600)let val = that.$formatBit(Math.floor(downTime / 3600)) + ':' +    that.$formatBit(Math.floor(min / 60)) + ':' + that.$formatBit(downTime % 60);//响应式修改数据，确保数据改变时视图同步更新this.$nextTick( async ()=>{this.$set(that.timeObj,id,val)})}
},

说明：
$formatIntValue是自己封装的函数，用于将数据转为整型
$formatBit用于将1位数补0，如：1–>01

Vue.prototype.$formatBit = function (val) {val = +valreturn val > 9 ? val : '0' + val
}

注：原创代码，可能存在性能问题，有需要者可自行优化

基于element-ui实现待支付订单显示定时器相关推荐

Vue HTML：在Vue上写Html遇到的一些问题，html的首行缩进，html的行间距，element UI的回到顶部不显示
Vue & HTML:在Vue上写Html遇到的一些问题,html的首行缩进,html的行间距,element UI的回到顶部不显示资源: HTML 教程- (HTML5 标准) 怎么快速上 ...
vue2 - 基于Element UI实现上传Excel表单数据功能
一.项目场景批量数据上传后台,需要从后台下载一个固定格式的 Excel表格,然后在表格里面添加数据,将数据格式化,再上传给后台,后台做解析处理,往数据库添加数据二.实现功能展示点击导入excel ...
【vue】Element UI实现表格表头纵向显示
element实现表格表头纵向显示我们正常使用Element UI写表格的时候,<el-table-column/> 标签里面都是纵向的.那么我们的需求有时候会要求行列转换,那么来看看咋 ...
基于Element ui 实现输入框只能输入数字并支持千分位
实现效果设置子组件 <template><el-inputref="money"v-model.trim="money":placehold ...
axure element ui素材_【Axure分享】基于Element UI的Axure Web组件
有一段时间没做过产品原型了,前一阵有一个web产品需要做原型,正好在搞前端,于是顺便把Element UI移植到Axure上,基本上实现了大部分的功能组件,部分过于繁琐的组件未实现. 自己觉得蛮满意的 ...
element ui el-table 无数据时显示默认空图片(el-empty)
当获取后台数据为空时,列表显示默认空图片,不正确姿势: <el-tablev-loading="isLoading":data="deviceListData&qu ...
Element UI table超出文本部分显示省略号，鼠标悬浮显示全部内容
1.先看下效果图: 当鼠标放置在第二行地址上时,会显示地址信息的全部内容. 2.本网页是vue项目,依赖啥的就不说了,直接上table.vue详尽代码 <template><div& ...
基于element ui的收起展开检索条件效果
<el-button type="text" style="margin-left:600px;color: #8cc5ff;text-decoration: un ...
vue2.0基于element ui 上月本月下月
<div style="margin-bottom:15px ;float:right;"><el-button-group><el-button p ...
基于element UI的省（市）（区）三级（二级）（一级）联动数据以及使用方法
使用方法: <el-form-item label="省/市/区" required prop="homeDistrict"><el-casc ...

基于element-ui实现待支付订单显示定时器

基于element-ui实现待支付订单显示定时器

1、init()函数获取表格数据(dataList)后：

2、周期性执行状态函数

3、过期的数据改变状态为’已过期’

基于element-ui实现待支付订单显示定时器相关推荐

最新文章

热门文章