uniapp订单循环列表倒计时

效果图片

请添加图片描述

插件uni-countdown

地址

代码

<template><view class=""><!-- 下面循环两个列表 --><view class="item" v-for="(item, index) in listData" :key="index"><!-- <text class="shoppay-right1">{{ item.state_text }}</text><view v-if="item.state_text == '待付款'"><uni-countdown :showDay="false" :showHour="true" :fontSize="12" color="#F81111"splitorColor='#F81111' :minute="item.minute" :second="item.second"@timeup="handleTimeup(index)" style=""></uni-countdown></view> --><uni-countdown :showDay="false" :showHour="true" :fontSize="12" color="#F81111" splitorColor='#F81111':minute="item.minute" :second="item.second" style=""></uni-countdown></view></view>
</template><script>export default {data() {return {// listData: [],//定义一个假数据listData: [{"order_id": 70,"order_no": "2023101751999997","total_price": "345.00","order_price": "345.00","coupon_id": 0,"coupon_money": "0.00","coupon_id_sys": 0,"coupon_money_sys": "0.00","points_money": "0.00","points_num": 0,"pay_price": "345.00","update_price": {"symbol": "+","value": "0.00"},"fullreduce_money": 0,"fullreduce_remark": "","product_reduce_money": "0.00","buyer_remark": "","pay_type": {"text": "微信支付","value": 20},"pay_source": "","pay_status": {"text": "待付款","value": 10},"pay_time": 0,"pay_end_time": 1697538731,"delivery_type": {"text": "快递配送","value": 10},"extract_store_id": 0,"extract_clerk_id": 0,"express_price": "0.00","express_id": 0,"express_company": "","express_no": "","delivery_status": {"text": "待发货","value": 10},"delivery_time": 0,"receipt_status": {"text": "待收货","value": 10},"receipt_time": 0,"order_status": {"text": "进行中","value": 10},"points_bonus": 0,"is_settled": 0,"transaction_id": "","is_comment": 0,"order_source": 10,"user_id": 1,"is_refund": 0,"assemble_status": 0,"activity_id": 0,"is_agent": 1,"shop_supplier_id": 3,"supplier_money": "345.00","sys_money": "0.00","room_id": 0,"cancel_remark": "","virtual_auto": 0,"virtual_content": "","balance": "0.00","online_money": "0.00","refund_money": "0.00","trade_no": "2023101751999997","wx_delivery_status": 10,"is_delete": 0,"app_id": 10001,"create_time": "2023-10-17 18:22:11","product_id": 12,"category_id": 8,"name": "智能设备","spec_name": "小时","logo_id": 13,"storage": "local","save_name": "20230926/478df4597d5266ccb33c5fb1f1b5782c.png","file_url": "","file_name": "20230926155419ee8325089.png","pay_end_time_format": "6分钟","file_path": "http://bangke.yunjingwl.com/uploads/20230926/478df4597d5266ccb33c5fb1f1b5782c.png","product": [{"order_product_id": 44,"product_id": 12,"product_name": "测试456","image_id": 37,"deduct_stock_type": 10,"spec_type": 10,"spec_sku_id": "0","product_sku_id": 19,"product_attr": "","product_no": "123","product_price": "345.00","line_price": "345.00","product_weight": 34553435,"is_user_grade": 0,"grade_ratio": 0,"grade_product_price": "0.00","grade_total_money": "0.00","coupon_money_sys": "0.00","coupon_money": "0.00","points_money": "0.00","points_num": 0,"points_bonus": 0,"total_num": 1,"total_price": "345.00","total_pay_price": "345.00","supplier_money": "345.00","sys_money": "0.00","fullreduce_money": "0.00","product_reduce_money": "0.00","is_agent": 0,"is_ind_agent": 0,"agent_money_type": 10,"first_money": "0.00","second_money": "0.00","third_money": "0.00","is_comment": 0,"order_id": 70,"user_id": 1,"product_source_id": 0,"sku_source_id": 0,"bill_source_id": 0,"virtual_content": "","app_id": 10001,"create_time": "2023-10-17 18:22:11","image": {"file_id": 37,"storage": "local","group_id": 0,"file_url": "","save_name": "20231009/cfd4f6da754767b47f60197f1dd3e40b.png","file_name": "2023100910385524eb17726.png","file_size": 890511,"file_type": "image","real_name": "371fa09067c9b88007071d53a38303a4@2x.png","extension": "png","is_user": 0,"is_recycle": 0,"shop_supplier_id": 3,"is_delete": 0,"app_id": 10001,"create_time": "2023-10-09 10:38:55","update_time": 0,"file_path": "http://bangke.yunjingwl.com/uploads/20231009/cfd4f6da754767b47f60197f1dd3e40b.png"}}],"supplier": {"shop_supplier_id": 3,"name": "测试3","user_id": 3},"advance": null,"state_text": "待付款","order_source_text": "普通","pay_end_time_text": "2023-10-17 18:32:11"},{"order_id": 69,"order_no": "2023101799545110","total_price": "100.00","order_price": "100.00","coupon_id": 0,"coupon_money": "0.00","coupon_id_sys": 0,"coupon_money_sys": "0.00","points_money": "0.00","points_num": 0,"pay_price": "100.00","update_price": {"symbol": "+","value": "0.00"},"fullreduce_money": 0,"fullreduce_remark": "","product_reduce_money": "0.00","buyer_remark": "","pay_type": {"text": "微信支付","value": 20},"pay_source": "","pay_status": {"text": "待付款","value": 10},"pay_time": 0,"pay_end_time": 1697537876,"delivery_type": {"text": "快递配送","value": 10},"extract_store_id": 0,"extract_clerk_id": 0,"express_price": "0.00","express_id": 0,"express_company": "","express_no": "","delivery_status": {"text": "待发货","value": 10},"delivery_time": 0,"receipt_status": {"text": "待收货","value": 10},"receipt_time": 0,"order_status": {"text": "已取消","value": 20},"points_bonus": 0,"is_settled": 0,"transaction_id": "","is_comment": 0,"order_source": 10,"user_id": 1,"is_refund": 0,"assemble_status": 0,"activity_id": 0,"is_agent": 1,"shop_supplier_id": 1,"supplier_money": "100.00","sys_money": "0.00","room_id": 0,"cancel_remark": "","virtual_auto": 0,"virtual_content": "","balance": "0.00","online_money": "0.00","refund_money": "0.00","trade_no": "2023101799545110","wx_delivery_status": 10,"is_delete": 0,"app_id": 10001,"create_time": "2023-10-17 18:07:56","product_id": 2,"category_id": 3,"name": "热门分类","spec_name": "小时","logo_id": 1,"storage": "local","save_name": "20230926/0a1de3d0cf3ee4e7db4d84af5995237f.png","file_url": "","file_name": "202309261307338cdd12520.png","pay_end_time_format": "","file_path": "http://bangke.yunjingwl.com/uploads/20230926/0a1de3d0cf3ee4e7db4d84af5995237f.png","product": [{"order_product_id": 43,"product_id": 2,"product_name": "哈哈哈","image_id": 15,"deduct_stock_type": 10,"spec_type": 10,"spec_sku_id": "0","product_sku_id": 2,"product_attr": "","product_no": "123","product_price": "100.00","line_price": "1000.00","product_weight": 1,"is_user_grade": 0,"grade_ratio": 0,"grade_product_price": "0.00","grade_total_money": "0.00","coupon_money_sys": "0.00","coupon_money": "0.00","points_money": "0.00","points_num": 0,"points_bonus": 0,"total_num": 1,"total_price": "100.00","total_pay_price": "100.00","supplier_money": "100.00","sys_money": "0.00","fullreduce_money": "0.00","product_reduce_money": "0.00","is_agent": 0,"is_ind_agent": 0,"agent_money_type": 10,"first_money": "0.00","second_money": "0.00","third_money": "0.00","is_comment": 0,"order_id": 69,"user_id": 1,"product_source_id": 0,"sku_source_id": 0,"bill_source_id": 0,"virtual_content": "","app_id": 10001,"create_time": "2023-10-17 18:07:56","image": {"file_id": 15,"storage": "local","group_id": 0,"file_url": "","save_name": "20230926/98b35fa4f297b138ddf44899da654c5f.jpg","file_name": "20230926160205343ec9076.jpg","file_size": 267265,"file_type": "image","real_name": "1695715325238_wx_camera_1695603440923.jpg","extension": "jpg","is_user": 1,"is_recycle": 0,"shop_supplier_id": 0,"is_delete": 0,"app_id": 10001,"create_time": "2023-09-26 16:02:05","update_time": 0,"file_path": "http://bangke.yunjingwl.com/uploads/20230926/98b35fa4f297b138ddf44899da654c5f.jpg"}}],"supplier": {"shop_supplier_id": 1,"name": "测试1-1","user_id": 1},"advance": null,"state_text": "已取消","order_source_text": "普通","pay_end_time_text": "2023-10-17 18:17:56"}]}},mounted() {/*获取订单列表*/this.getData();},methods: {handleTimeup(index) {this.listData[index].state_text = '服务已取消';},/*获取数据*/getData() {let self = this;self.loading = true;let dataType = self.dataType;self._get('user.order/lists', {dataType: dataType,page: self.page,pay_source: self.getPlatform(),list_rows: self.list_rows},function(res) {self.loading = false;self.listData = self.listData.concat(res.data.list.data);console.log(res.data.list.data, '返回数据1111111111');let result = res.data.list.data.map(item => {let {day,hour,minute,second} = self.countdowm(item.pay_end_time)// console.log(item.pay_end_time,'pay_end_time时间戳');// let {// 	day: deliveryday,// 	hour: deliveryhour,// 	minute: deliveryminute,// 	second: deliverysecond// } = self.countdowm(item.delivery_end_time)// let {// 	day: receiptday,// 	hour: receipthour,// 	minute: receiptminute,// 	second: receiptsecond// } = self.countdowm(item.receipt_end_time)item.day = dayitem.hour = houritem.minute = minuteitem.second = second// console.log(day, 'day');// console.log(hour, 'hour');// console.log(minute, 'minute');// console.log(second, 'second');// item.deliveryday = deliveryday// item.deliveryhour = deliveryhour// item.deliveryminute = deliveryminute// item.deliverysecond = deliverysecond// item.receiptday = receiptday// item.receipthour = receipthour// item.receiptminute = receiptminute// item.receiptsecond = receiptsecond// if(item.product.refund && item.product.refund.refund_end_time){// 	let {// 		day: refundday,// 		hour: refundhour,// 		minute: refundminute,// 		second: refundsecond// 	} = this.countdowm(item.product.refund.refund_end_time)	// 	item.refundday = refundday// 	item.refundhour = refundhour// 	item.refundminute = refundminute// 	item.refundsecond = refundsecond// 	return item// }return item})// 格式化后结果，赋值给data里面listData数组，然后再view循环即可self.listData = result;});},// 计算时分秒	格式化countdowm(timestamp) {let nowTime = new Date();let endTime = new Date(timestamp * 1000);let t = endTime.getTime() - nowTime.getTime();console.log(t, 'ttttttttttttttt');if (t > 0) {let day = Math.floor(t / 86400000);let hour = Math.floor((t / 3600000) % 24);let min = Math.floor((t / 60000) % 60);let sec = Math.floor((t / 1000) % 60);return {day,hour,minute: min,second: sec}} else {return {day: 0,hour: 0,minute: 0,second: 0}}},}}
</script><style>.item{width: 100%;height: 100rpx;border: 1rpx solid blue;margin-bottom: 100rpx;}
</style>