uniapp订单循环列表倒计时
目录
-
- 效果图片
- 插件uni-countdown
- 代码
- 最后
效果图片
插件uni-countdown
地址
代码
<template>
<view class="">
<view class="item" v-for="(item, index) in listData" :key="index">
<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": "[email protected]",
"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>
最后
感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！