uniapp订单循环列表倒计时

最新推荐文章于 2024-05-06 17:03:38 发布
最新推荐文章于 2024-05-06 17:03:38 发布
阅读量617 收藏
点赞数
文章标签： uni-app uniapp倒计时 uniapp商城倒计时
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49714202/article/details/133890108
版权

目录

效果图片

请添加图片描述

插件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 = day
							item.hour = hour
							item.minute = minute
							item.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>

最后

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！

MFG_666
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app加入购物车、创建订单以及支付流程
weixin_48043684的博客
07-25 756
uni-app实现加入购物车流程、创建订单流程、支付流程
uni——foreach遍历 创建对象数组
努力、拼搏、奋进
12-29 1524
uni——foreach遍历 创建对象数组
uni-app实现订单支付倒计时，不会随着返回重新计时
嘀嘀嘀123的博客
08-23 3206
uni-app实现订单支付倒计时，不会随着返回重新计时。
uniapp遍历数组对象的常见方法
最新发布
知码客
05-06 1369
我们在开发的时候经常会遇到遍历对象的一些操作，遍历的方式方法多种多样下面我们来分享几个常见的。
uni-app(v2)订单支付倒计时列表
qq_52244923的博客
03-21 361
uni-app(v2)订单支付倒计时列表
单向循环链表
01-20
循环链表 循环链表是一种特殊的单链表。实际上，循环链表也很简单。它跟单链表唯一的区别就在尾结点。我们知道，单链表的尾结点指针指向空地址，表示这就是最后的结点了。而循环链表的尾结点指针是指向链表的头结点...
C语言实现循环链表
08-18
C语言实现循环链表 本文主要介绍了C语言实现循环链表的知识点，包括循环链表的定义、创建、插入、删除和遍历操作。下面是对应的知识点： 1. 循环链表的定义：循环链表是一种特殊的链表结构，链表的最后一个结点的...
循环链表和双向链表.ppt
09-20
循环链表和双向链表是两种特殊类型的线性链表，它们在数据结构中扮演着重要角色，尤其在处理线性关系的数据时。下面将详细讨论这些概念。 首先，我们来看带头结点的链表。在普通链表的基础上，带头结点的链表会在...
如何用C++实现双向循环链表
12-31
双向循环链表，即每个节点都拥有一前一后两个指针且头尾互链的链表。各种链表的简单区别如下：单向链表：基本链表；单向循环链表：不同于单向链表以 NULL 判断链表的尾部，单向循环链表的尾部链接到表头，因此当迭代...
uni-app的下订单页显示
qq_27009517的博客
02-21 1395
组件式开发，先写每个订单的组件，再写页面的。 数据由商品列表页传递到下订单页，点击继续添加商品后数据的合并。 uni-app的生命周期函数的使用和vue3的setup的使用，数据之间的传递。 右侧拖拽显示删除，数量的操作按钮，中间的输入需要弹出框修改，不能直接input修改的。因为加减是在加减后的的数据上进行操作，如果中间同时可以修改，那。。。，和淘宝修改差不多，利用弹出框进行修改。 selectedProductCard.vue <template> <view class
uni-app 的30分钟倒计时
06-20
uni-app 的30分钟倒计时
uniapp选择框遍历数组
Csignificanc的博客
03-31 2547
uniapp选择框遍历数组 代码如下 <!-- 遍历数组 --> <view class="itemList"> <view class="item acea-row row-between-wrapper" v-for="(item, indexw) in hnUserlist" :key="indexw"> <view class="namele">{{ item.name }}</view> &
uniapp-倒计时-循环倒计时-列表倒计时
qq_41901130的博客
10-07 492
案例：列表循环倒计时。
uniapp，vue下单支付30分钟动态倒计时
weixin_52869172的博客
02-08 1309
下单时间参数为creatTime，样式xxxx-xx-xx xx:xx:xx ,需要30分钟动态倒计时。
【日期、时区、时间】本地时间转UTC时间详解
热门推荐
m0_45406092的博客
04-03 1万+
/** * 把时间转化为utc时间格式 * * @param localTime * @return */ public static Date translatetoUtc(long localTime, TimeZone localZone) { Calendar cal = Calendar.getInstanc...
uniapp 电商app支付倒计时处理
yehaocheng520的博客
10-10 1948
电商app支付倒计时 所有电商app支付页面都是有倒计时的，一来可以促进消费，二来可以减少恶意减库存的问题发生。 因为创建订单的时候，除了预售的商品外，实际销售的商品是需要减库存的。 一般的电商app倒计时都是30分钟或者45分钟的。 如果在此页面没有进行付款或者付款失败，则此订单会进入到待付款页面中，在那个页面还是可以进行二次支付的。此时的倒计时会延续之前的倒计时时间。如果倒计时到了0，则此订单默认为交易失败，订单关闭。 此处的解决方法如下： 创建订单时，默认是30分钟倒计时。 创建订单成功后，如
uni-app入门:WXML列表渲染与条件渲染
weixin_43401380的博客
11-18 1951
uni-app入门:WXML列表渲染与条件渲染。
C++双向循环链表详解与模板实现教程
本课程设计详细介绍了如何在C++中实现双向循环链表，并利用模板技术进行编码。首先，我们从基本概念开始，双向循环链表（doubly circular list）是一种特殊的链表结构，它允许元素在链表中双向移动，包括头节点和尾...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值