|
|
@ -1,12 +1,13 @@ |
|
|
<template> |
|
|
<template> |
|
|
<view> |
|
|
|
|
|
|
|
|
<view v-if="$isRight(order_details)"> |
|
|
<lf-nav title="订单详情" :showIcon="true"></lf-nav> |
|
|
<lf-nav title="订单详情" :showIcon="true"></lf-nav> |
|
|
<view class="tips" v-if="type == 'default'"> |
|
|
|
|
|
|
|
|
<!-- v-if="order_details.last_pay_time" --> |
|
|
|
|
|
<view class="tips" v-if="show"> |
|
|
<view class="lf-font-24 lf-color-white">剩余支付时间：</view> |
|
|
<view class="lf-font-24 lf-color-white">剩余支付时间：</view> |
|
|
<view> |
|
|
|
|
|
|
|
|
<view class="lf-font-24 lf-color-white"> |
|
|
|
|
|
<!-- {{time}} --> |
|
|
<countdown-timer :time="time" :autoStart="true" @finish="dateFinish"> |
|
|
<countdown-timer :time="time" :autoStart="true" @finish="dateFinish"> |
|
|
<template v-slot="{minute, second}"> |
|
|
<template v-slot="{minute, second}"> |
|
|
<!-- <view>{{minute}}:{{second}}</view> --> |
|
|
|
|
|
<view class="lf-flex"> |
|
|
<view class="lf-flex"> |
|
|
<view class="lf-font-24 lf-color-white">{{ minute >= 10 ? minute : "0" + minute }}</view> |
|
|
<view class="lf-font-24 lf-color-white">{{ minute >= 10 ? minute : "0" + minute }}</view> |
|
|
<view class="lf-font-24 lf-color-white">:</view> |
|
|
<view class="lf-font-24 lf-color-white">:</view> |
|
|
@ -87,7 +88,8 @@ |
|
|
<text class="lf-color-777">商品订单编号</text> |
|
|
<text class="lf-color-777">商品订单编号</text> |
|
|
<text> |
|
|
<text> |
|
|
<text class="lf-color-222">{{order_details.order_no}}</text> |
|
|
<text class="lf-color-222">{{order_details.order_no}}</text> |
|
|
<text class="lf-font-28 lf-m-l-20" style="color: #22A19F;" @click="copy(order_details.order_no)">复制</text> |
|
|
|
|
|
|
|
|
<text class="lf-font-28 lf-m-l-20" style="color: #22A19F;" |
|
|
|
|
|
@click="copy(order_details.order_no)">复制</text> |
|
|
</text> |
|
|
</text> |
|
|
</view> |
|
|
</view> |
|
|
<view class="lf-row-between lf-font-28 lf-m-t-30"> |
|
|
<view class="lf-row-between lf-font-28 lf-m-t-30"> |
|
|
@ -173,21 +175,24 @@ |
|
|
<script> |
|
|
<script> |
|
|
import countdownTimer from '@/components/countdown-timer/countdown-timer'; |
|
|
import countdownTimer from '@/components/countdown-timer/countdown-timer'; |
|
|
export default { |
|
|
export default { |
|
|
data(){ |
|
|
|
|
|
|
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
type: 'default' ,// point积分订单详情, default默认普通商品订单详情 |
|
|
|
|
|
time: new Date('2021/09/8 14:15:00').getTime() - new Date('2021/09/8 14:10:00').getTime(), |
|
|
|
|
|
|
|
|
type: 'default', // point积分订单详情, default默认普通商品订单详情 |
|
|
|
|
|
time: '', |
|
|
order_no: '', |
|
|
order_no: '', |
|
|
order_details: '' |
|
|
|
|
|
|
|
|
order_details: '', |
|
|
|
|
|
countdown_minute: '', |
|
|
|
|
|
time: '', |
|
|
|
|
|
show: false |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
components: { |
|
|
components: { |
|
|
countdownTimer |
|
|
countdownTimer |
|
|
}, |
|
|
}, |
|
|
onLoad(options){ |
|
|
|
|
|
|
|
|
onLoad(options) { |
|
|
this.type = options.type || this.type; |
|
|
this.type = options.type || this.type; |
|
|
this.order_no = options.order_id; |
|
|
this.order_no = options.order_id; |
|
|
if(this.order_no) { |
|
|
|
|
|
|
|
|
if (this.order_no) { |
|
|
this.getOrderDetails(); |
|
|
this.getOrderDetails(); |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
@ -198,17 +203,76 @@ |
|
|
data: text |
|
|
data: text |
|
|
}); |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
dateFinish(){ |
|
|
|
|
|
|
|
|
dateFinish() { |
|
|
|
|
|
this.show = false; |
|
|
console.log("倒计时结束"); |
|
|
console.log("倒计时结束"); |
|
|
}, |
|
|
}, |
|
|
|
|
|
countDown(munite, second) { |
|
|
|
|
|
let m = munite; |
|
|
|
|
|
let s = second; |
|
|
|
|
|
let m2, s2; |
|
|
|
|
|
let _this = this; |
|
|
|
|
|
let tiem = setInterval(function() { |
|
|
|
|
|
s--; |
|
|
|
|
|
if (s < 0) { |
|
|
|
|
|
s = 59; |
|
|
|
|
|
m--; |
|
|
|
|
|
if (m < 0) { |
|
|
|
|
|
_this.time = '00分00秒'; |
|
|
|
|
|
_this.show = false; |
|
|
|
|
|
// _this.getOrderDetails(); |
|
|
|
|
|
clearTimeout(tiem); |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
m2 = m < 10? '0' + m : m; |
|
|
|
|
|
s2 = s < 10 ? ('0' + s) : s; |
|
|
|
|
|
_this.time = m2 + '分' + s2 + '秒'; |
|
|
|
|
|
}, 1000) |
|
|
|
|
|
}, |
|
|
|
|
|
s_to_hs(s) { |
|
|
|
|
|
//计算分钟 |
|
|
|
|
|
//算法：将秒数除以60，然后下舍入，既得到分钟数 |
|
|
|
|
|
var h; |
|
|
|
|
|
h = Math.floor(s / 60); |
|
|
|
|
|
//计算秒 |
|
|
|
|
|
//算法：取得秒%60的余数，既得到秒数 |
|
|
|
|
|
s = s % 60; |
|
|
|
|
|
//将变量转换为字符串 |
|
|
|
|
|
h += ''; |
|
|
|
|
|
s += ''; |
|
|
|
|
|
//如果只有一位数，前面增加一个0 |
|
|
|
|
|
// h = (h.length == 1) ? '0' + h : h; |
|
|
|
|
|
// s = (s.length == 1) ? '0' + s : s; |
|
|
|
|
|
this.countDown(h,s) |
|
|
|
|
|
// return h + ':' + s; |
|
|
|
|
|
}, |
|
|
|
|
|
getTime(){ |
|
|
|
|
|
var date = new Date(), |
|
|
|
|
|
year = date.getFullYear(), |
|
|
|
|
|
month = date.getMonth() + 1, |
|
|
|
|
|
day = date.getDate(), |
|
|
|
|
|
hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(), |
|
|
|
|
|
minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(), |
|
|
|
|
|
second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); |
|
|
|
|
|
month >= 1 && month <= 9 ? (month = "0" + month) : ""; |
|
|
|
|
|
day >= 0 && day <= 9 ? (day = "0" + day) : ""; |
|
|
|
|
|
var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second; |
|
|
|
|
|
return timer; |
|
|
|
|
|
}, |
|
|
getOrderDetails() { |
|
|
getOrderDetails() { |
|
|
this.$http.get({ |
|
|
this.$http.get({ |
|
|
api: 'api/order/'+this.order_no, |
|
|
|
|
|
|
|
|
api: 'api/order/' + this.order_no, |
|
|
header: { |
|
|
header: { |
|
|
Authorization: `Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjVkYTY5YjM5NWFhYzM5NzVmMzI3ZTEwZDEyMzAzZjI5MzE4ZmU2OGE2Njg0MTU0MWVjMjQ2NWM4ZWJkYjRlMTUwMmY1NWM0NDlkOTcxZDdjIn0.eyJhdWQiOiIzIiwianRpIjoiNWRhNjliMzk1YWFjMzk3NWYzMjdlMTBkMTIzMDNmMjkzMThmZTY4YTY2ODQxNTQxZWMyNDY1YzhlYmRiNGUxNTAyZjU1YzQ0OWQ5NzFkN2MiLCJpYXQiOjE2MzIzODY3NDAsIm5iZiI6MTYzMjM4Njc0MCwiZXhwIjoxNjYzOTIyNzQwLCJzdWIiOiIxIiwic2NvcGVzIjpbXX0.am-szF_sZcjtyOnEJT1DHMnr1hjAZ90MJc1Pc3AD3FrcQU5xb-u43ddL70ZmM3OxxLTZlmrB8OA3XJYREMtcz26MzwOMfopB9A5AH1EjHiFCV_368cq4ZpXNFi_Sn_LrY9Wje0-WMvkznF8tbrdCNrZn5YyIV47cwEnUNQrrREX4OhcgrSfNvwnh8_O_fueBwws9yY3tTlvVB7-AvG2urFI5XCzygsE3llE0wxF5ZJO1T5QRYLDse2BQ3d9feFzO5_7FiVspKr8DrJUlZP-Zz02UgIDIA_PX0UO2M0KeBwqPYq2d5uEnXT8or7K9coSnHRqbbr4qn6iczxDu4ofM58oCcaPycbtI3RvP2SMZuWmX8fXw-T99XltK_uJEU_wlIkrjvabzyo3tkrxRrwmzJEb3Yf4Lbah_xtfi24Nsu9SRjdw8YoiF6YhuuU5YaOn-wLltgmugfYpkFpEOneVAxoMjkm5IxZAJYMXF-DeSpdOoiTmuIRZYX4GDa55s_31r0YMyF6IIQNUvOjHHk-sJSHG0kPd5QivLP7dxE5XndwyFKAOeM97X2TjdYMhJz0EBCyS4Y_pI6AFWsxJkKsa0aqvBAeJyOV9k8kbYwtPeeBhBNsDWSlGBEZYMcoAv-C-IBZzd7gu2Ceh_MJPItrnsvj8W43Cv1TwxD26bJyt9EUY` |
|
|
|
|
|
|
|
|
Authorization: this.$cookieStorage.get('user_token') |
|
|
} |
|
|
} |
|
|
}).then(res => { |
|
|
}).then(res => { |
|
|
this.order_details = res.data.data |
|
|
this.order_details = res.data.data |
|
|
|
|
|
var date = this.getTime() |
|
|
|
|
|
this.time = new Date(this.order_details.will_closed_at).getTime() - new Date(date).getTime() |
|
|
|
|
|
if(this.time > 0) { |
|
|
|
|
|
this.show = true; |
|
|
|
|
|
} |
|
|
console.log(this.order_details); |
|
|
console.log(this.order_details); |
|
|
}) |
|
|
}) |
|
|
}, |
|
|
}, |
|
|
@ -217,7 +281,7 @@ |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style> |
|
|
<style> |
|
|
page{ |
|
|
|
|
|
|
|
|
page { |
|
|
background-color: #F8F8F8; |
|
|
background-color: #F8F8F8; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
@ -231,6 +295,7 @@ |
|
|
padding: 0 32rpx; |
|
|
padding: 0 32rpx; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.waitconfirm-tag { |
|
|
.waitconfirm-tag { |
|
|
width: 136rpx; |
|
|
width: 136rpx; |
|
|
height: 53rpx; |
|
|
height: 53rpx; |
|
|
@ -242,6 +307,7 @@ |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.btn-cancel { |
|
|
.btn-cancel { |
|
|
width: 220rpx; |
|
|
width: 220rpx; |
|
|
height: 90rpx; |
|
|
height: 90rpx; |
|
|
@ -253,6 +319,7 @@ |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.btn-confirm { |
|
|
.btn-confirm { |
|
|
width: 220rpx; |
|
|
width: 220rpx; |
|
|
height: 90rpx; |
|
|
height: 90rpx; |
|
|
@ -264,6 +331,7 @@ |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.btn-atonce { |
|
|
.btn-atonce { |
|
|
width: 220rpx; |
|
|
width: 220rpx; |
|
|
height: 90rpx; |
|
|
height: 90rpx; |
|
|
@ -275,6 +343,7 @@ |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.order-btn { |
|
|
.order-btn { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 120rpx; |
|
|
height: 120rpx; |
|
|
@ -285,6 +354,7 @@ |
|
|
position: fixed; |
|
|
position: fixed; |
|
|
bottom: 0; |
|
|
bottom: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.tips { |
|
|
.tips { |
|
|
display: flex; |
|
|
display: flex; |
|
|
background-color: #F63434; |
|
|
background-color: #F63434; |
|
|
@ -293,42 +363,49 @@ |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
} |
|
|
} |
|
|
.card{ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.card { |
|
|
height: max-content; |
|
|
height: max-content; |
|
|
width: 750rpx; |
|
|
width: 750rpx; |
|
|
padding: 30rpx 32rpx; |
|
|
padding: 30rpx 32rpx; |
|
|
background-color: #FFFFFF; |
|
|
background-color: #FFFFFF; |
|
|
&:nth-child(n+2){ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&:nth-child(n+2) { |
|
|
margin-top: 20rpx; |
|
|
margin-top: 20rpx; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.goods{ |
|
|
|
|
|
.shop-name{ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.goods { |
|
|
|
|
|
.shop-name { |
|
|
font-size: 28rpx; |
|
|
font-size: 28rpx; |
|
|
color: #222222; |
|
|
color: #222222; |
|
|
font-weight: bold; |
|
|
font-weight: bold; |
|
|
margin: 0 15rpx; |
|
|
margin: 0 15rpx; |
|
|
} |
|
|
} |
|
|
.goods-img{ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.goods-img { |
|
|
width: 130rpx; |
|
|
width: 130rpx; |
|
|
height: 130rpx; |
|
|
height: 130rpx; |
|
|
border-radius: 4rpx; |
|
|
border-radius: 4rpx; |
|
|
margin-right: 15rpx; |
|
|
margin-right: 15rpx; |
|
|
background-color: #EEEEEE; |
|
|
background-color: #EEEEEE; |
|
|
} |
|
|
} |
|
|
.info{ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.info { |
|
|
width: 540rpx; |
|
|
width: 540rpx; |
|
|
height: 130rpx; |
|
|
height: 130rpx; |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
justify-content: space-around; |
|
|
justify-content: space-around; |
|
|
.price{ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.price { |
|
|
font-size: 32rpx; |
|
|
font-size: 32rpx; |
|
|
color: #F63434; |
|
|
color: #F63434; |
|
|
font-weight: bold; |
|
|
font-weight: bold; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.order-num{ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.order-num { |
|
|
font-size: 24rpx; |
|
|
font-size: 24rpx; |
|
|
color: #999999; |
|
|
color: #999999; |
|
|
display: flex; |
|
|
display: flex; |
|
|
|
