|
|
@ -1,95 +1,104 @@ |
|
|
<template> |
|
|
<template> |
|
|
<view class="locker-order-info"> |
|
|
<view class="locker-order-info"> |
|
|
<o-header></o-header> |
|
|
|
|
|
|
|
|
<o-header |
|
|
|
|
|
:logo='orderInfo.stadium_logo' |
|
|
|
|
|
:source='orderInfo.stadium_name' |
|
|
|
|
|
:phone='orderInfo.mobile' |
|
|
|
|
|
:name='orderInfo.nickname' |
|
|
|
|
|
:status='pay_txt(orderInfo.pay_status)' |
|
|
|
|
|
></o-header> |
|
|
<view class="loi-box"> |
|
|
<view class="loi-box"> |
|
|
<view class="lb-tit">租用详情</view> |
|
|
<view class="lb-tit">租用详情</view> |
|
|
<a-line :value="'欧轩智能储物柜'"> |
|
|
|
|
|
|
|
|
<a-line :value="orderInfo.hardware_name || '-'"> |
|
|
<block slot="name">设备名称：</block> |
|
|
<block slot="name">设备名称：</block> |
|
|
</a-line> |
|
|
</a-line> |
|
|
<a-line :value="'7号柜'"> |
|
|
|
|
|
|
|
|
<a-line :value="orderInfo.cabinet_name || '-'"> |
|
|
<block slot="name">柜子编号：</block> |
|
|
<block slot="name">柜子编号：</block> |
|
|
</a-line> |
|
|
</a-line> |
|
|
<a-line :value="'2020-01-10 15:02:24 '"> |
|
|
|
|
|
|
|
|
<a-line :value="orderInfo.start_time || '-'"> |
|
|
<block slot="name">租借时间：</block> |
|
|
<block slot="name">租借时间：</block> |
|
|
</a-line> |
|
|
</a-line> |
|
|
<a-line :value="'2020-01-10 17:37:33'"> |
|
|
|
|
|
|
|
|
<a-line :value="orderInfo.end_time || '-'"> |
|
|
<block slot="name">归还时间：</block> |
|
|
<block slot="name">归还时间：</block> |
|
|
</a-line> |
|
|
</a-line> |
|
|
<a-line :value="'2小时35分9秒'" value-color="#019874"> |
|
|
|
|
|
|
|
|
<a-line :value="orderInfo.duration || '-'" value-color="#019874"> |
|
|
<block slot="name">租借时长：</block> |
|
|
<block slot="name">租借时长：</block> |
|
|
</a-line> |
|
|
</a-line> |
|
|
</view> |
|
|
</view> |
|
|
<view class="loi-box"> |
|
|
<view class="loi-box"> |
|
|
<view class="lb-tit">费用详情</view> |
|
|
<view class="lb-tit">费用详情</view> |
|
|
<view class="lb-section"> |
|
|
|
|
|
|
|
|
<view class="lb-section" v-if="orderInfo.late_status"> |
|
|
<view class="ls-header"> |
|
|
<view class="ls-header"> |
|
|
<view class="over-time"><text>超时时长：</text>1小时35分9秒 </view> |
|
|
|
|
|
<view class="over-price">缴欠费金额：<text>￥4</text> （超时费用计算标准：1元/小时）</view> |
|
|
|
|
|
|
|
|
<view class="over-time"><text>超时时长：</text>{{ orderInfo.late_duration || '-' }}</view> |
|
|
|
|
|
<view class="over-price">缴欠费金额：<text>￥{{ orderInfo.late_amount || 0 }}</text> （超时费用计算标准：{{ orderInfo.late_price_hint || '-' }}）</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="lb-price"> |
|
|
<view class="lb-price"> |
|
|
<s-line :keyname="'商品金额小计'" :value="'¥6'"></s-line> |
|
|
|
|
|
<s-line :keyname="'金额折扣'" :value="'¥6'"></s-line> |
|
|
|
|
|
<s-line :keyname="'积分抵扣'" :value="'¥6'"></s-line> |
|
|
|
|
|
<s-line :keyname="'优惠券优惠'" :value="'¥6'"></s-line> |
|
|
|
|
|
<view class="lp-total"><text>合计支付：</text>￥5</view> |
|
|
|
|
|
|
|
|
<s-line :keyname="'商品金额小计'" :value="'¥' + (orderInfo.late_amount || 0)"></s-line> |
|
|
|
|
|
<s-line :keyname="'金额折扣'" :value="'¥' + (orderInfo.late_discount_amount || 0)"></s-line> |
|
|
|
|
|
<s-line :keyname="'积分抵扣'" :value="'¥' + (orderInfo.late_deduction_amount || 0)"></s-line> |
|
|
|
|
|
<s-line :keyname="'优惠券优惠'" :value="'¥' + (orderInfo.late_coupons_amount || 0)"></s-line> |
|
|
|
|
|
<view class="lp-total"><text>合计支付：</text>￥{{ orderInfo.late_pay_amount || 0 }}</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="lb-line"></view> |
|
|
<view class="lb-line"></view> |
|
|
|
|
|
|
|
|
<view class="lb-pay-info"> |
|
|
<view class="lb-pay-info"> |
|
|
<p-line :keyname="'下单时间'" :value="'2020-08-22 10:30:40'" isbtn></p-line> |
|
|
|
|
|
<p-line :keyname="'订单编号'" :value="'sc20 0822 0815 6894'"></p-line> |
|
|
|
|
|
<p-line :keyname="'支付方式'" :value="'会员卡支付'"></p-line> |
|
|
|
|
|
<p-line :keyname="'交易流水号'" :value="'202009181255364564612622'"></p-line> |
|
|
|
|
|
|
|
|
<p-line :keyname="'下单时间'" :value="orderInfo.start_time || '-'" isbtn></p-line> |
|
|
|
|
|
<p-line :keyname="'订单编号'" :value="orderInfo.order_no || '-'"></p-line> |
|
|
|
|
|
<p-line :keyname="'支付方式'" :value="status_txt(orderInfo.pay_type)"></p-line> |
|
|
|
|
|
<p-line :keyname="'交易流水号'" :value="orderInfo.trade_no || '-'"></p-line> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="lb-section"> |
|
|
<view class="lb-section"> |
|
|
<view class="ls-header"> |
|
|
<view class="ls-header"> |
|
|
<view class="prestore-line"> |
|
|
<view class="prestore-line"> |
|
|
<view>预寄存时长：1小时</view> |
|
|
|
|
|
<view>预寄存时长数量：2</view> |
|
|
|
|
|
|
|
|
<view>预寄存时长：{{ orderInfo.dimension || '-' }}</view> |
|
|
|
|
|
<view>预寄存时长数量：{{ orderInfo.locker_price_number || 0 }}</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="prestore-line"> |
|
|
<view class="prestore-line"> |
|
|
<view>收费标准：2元/小时 </view> |
|
|
|
|
|
<view>合计预寄存时长：2小时 </view> |
|
|
|
|
|
|
|
|
<view>收费标准：{{ orderInfo.locker_price_hint || '-' }}</view> |
|
|
|
|
|
<view>合计预寄存时长：{{ orderInfo.duration || '-' }} </view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="lb-price"> |
|
|
<view class="lb-price"> |
|
|
<s-line :keyname="'商品金额小计'" :value="'¥6'"></s-line> |
|
|
|
|
|
<s-line :keyname="'金额折扣'" :value="'¥6'"></s-line> |
|
|
|
|
|
<s-line :keyname="'积分抵扣'" :value="'¥6'"></s-line> |
|
|
|
|
|
<s-line :keyname="'优惠券优惠'" :value="'¥6'"></s-line> |
|
|
|
|
|
<view class="lp-total"><text>合计支付：</text>￥5</view> |
|
|
|
|
|
|
|
|
<s-line :keyname="'商品金额小计'" :value="'¥' + orderInfo.amount || 0"></s-line> |
|
|
|
|
|
<s-line :keyname="'金额折扣'" :value="'¥' + (orderInfo.discount_amount || 0)"></s-line> |
|
|
|
|
|
<s-line :keyname="'积分抵扣'" :value="'¥' + (orderInfo.deduction_amount || 0)"></s-line> |
|
|
|
|
|
<s-line :keyname="'优惠券优惠'" :value="'¥' + (orderInfo.coupons_amount || 0)"></s-line> |
|
|
|
|
|
<view class="lp-total"><text>合计支付：</text>￥{{ orderInfo.pay_amount || 0 }}</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="lb-line"></view> |
|
|
<view class="lb-line"></view> |
|
|
|
|
|
|
|
|
<view class="lb-pay-info"> |
|
|
<view class="lb-pay-info"> |
|
|
<p-line :keyname="'下单时间'" :value="'2020-08-22 10:30:40'" ></p-line> |
|
|
|
|
|
<p-line :keyname="'订单编号'" :value="'sc20 0822 0815 6894'" isbtn></p-line> |
|
|
|
|
|
<p-line :keyname="'支付方式'" :value="'会员卡支付'"></p-line> |
|
|
|
|
|
<p-line :keyname="'交易流水号'" :value="'202009181255364564612622'"></p-line> |
|
|
|
|
|
|
|
|
<p-line :keyname="'下单时间'" :value="orderInfo.start_time || '-'" isbtn></p-line> |
|
|
|
|
|
<p-line :keyname="'订单编号'" :value="orderInfo.order_no || '-'"></p-line> |
|
|
|
|
|
<p-line :keyname="'支付方式'" :value="status_txt(orderInfo.pay_type)"></p-line> |
|
|
|
|
|
<p-line :keyname="'交易流水号'" :value="orderInfo.trade_no || '-'"></p-line> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="loi-btn">结束计费</view> |
|
|
|
|
|
<view class="loi-mask"> |
|
|
|
|
|
<view class="lm-content"> |
|
|
|
|
|
|
|
|
<view class="loi-fixd-bar"> |
|
|
|
|
|
<view @click="endBtn">结束计费</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="loi-mask" v-if="isEndModal" @click="closeEndModal"> |
|
|
|
|
|
<view class="lm-content" @click.stop="_=>false"> |
|
|
|
|
|
<image class="lm-close" mode="aspectFit" src="/subpackage/order/static/images/close.png" @click="closeEndModal"></image> |
|
|
<view class="lc-tit">结束计费</view> |
|
|
<view class="lc-tit">结束计费</view> |
|
|
<view class="lc-info"> |
|
|
<view class="lc-info"> |
|
|
<a-line :value="'张贺语'"> |
|
|
|
|
|
|
|
|
<a-line :value="userInfo.username || '-'"> |
|
|
<block slot="name">操作人：</block> |
|
|
<block slot="name">操作人：</block> |
|
|
</a-line> |
|
|
</a-line> |
|
|
<a-line :value="'1小时25分9秒'" value-color="#019874"> |
|
|
|
|
|
|
|
|
<a-line :value="orderInfo.total_duration || '-'" value-color="#019874"> |
|
|
<block slot="name">时长合计：</block> |
|
|
<block slot="name">时长合计：</block> |
|
|
</a-line> |
|
|
</a-line> |
|
|
<a-line :value="'¥100.2'" value-color="#ff873e"> |
|
|
|
|
|
|
|
|
<a-line :value="orderInfo.late_amount || '-'" value-color="#ff873e"> |
|
|
<block slot="name">金额合计：</block> |
|
|
<block slot="name">金额合计：</block> |
|
|
</a-line> |
|
|
</a-line> |
|
|
</view> |
|
|
</view> |
|
|
<view class="lc-ipt"> |
|
|
<view class="lc-ipt"> |
|
|
<view class="li-txt"><text>*</text>请输入金额</view> |
|
|
<view class="li-txt"><text>*</text>请输入金额</view> |
|
|
<view class="li-frame"><input /></view> |
|
|
|
|
|
|
|
|
<view class="li-frame"><input v-model="iptPrice" /></view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="lc-btn">确认</view> |
|
|
|
|
|
|
|
|
<view class="lc-btn" @click="confirmEndBtn">确认</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
@ -100,12 +109,101 @@ import header from '../../../components/header/header.vue'; |
|
|
import a_line from '../../../../../components/order_list/a_line/a_line.vue'; |
|
|
import a_line from '../../../../../components/order_list/a_line/a_line.vue'; |
|
|
import s_line from '../../../components/s_line/s_line.vue'; |
|
|
import s_line from '../../../components/s_line/s_line.vue'; |
|
|
import p_line from '../../../components/p_line/p_line.vue'; |
|
|
import p_line from '../../../components/p_line/p_line.vue'; |
|
|
|
|
|
import { ORDER_API } from '../../../js/api'; |
|
|
|
|
|
import server from '../../../js/server'; |
|
|
|
|
|
import util from '../../../../../utils/util'; |
|
|
export default { |
|
|
export default { |
|
|
components: { |
|
|
components: { |
|
|
'o-header': header, |
|
|
'o-header': header, |
|
|
'a-line': a_line, |
|
|
'a-line': a_line, |
|
|
's-line': s_line, |
|
|
's-line': s_line, |
|
|
'p-line': p_line, |
|
|
'p-line': p_line, |
|
|
|
|
|
}, |
|
|
|
|
|
data(){ |
|
|
|
|
|
return { |
|
|
|
|
|
orderInfo: {}, |
|
|
|
|
|
isEndModal: false, |
|
|
|
|
|
iptPrice: '', |
|
|
|
|
|
userInfo: {}, |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
onLoad(options){ |
|
|
|
|
|
this.getInfo(options.order_no); |
|
|
|
|
|
}, |
|
|
|
|
|
methods: { |
|
|
|
|
|
// 支付类型 |
|
|
|
|
|
status_txt: util.order_pay_type_txt, |
|
|
|
|
|
pay_txt(status){ |
|
|
|
|
|
// status 全部 1,2,4 寄存中 1 已完成 2 已退款 4 |
|
|
|
|
|
let _obj = { |
|
|
|
|
|
1: '寄存中', |
|
|
|
|
|
2: '已完成', |
|
|
|
|
|
4: '已退款' |
|
|
|
|
|
}; |
|
|
|
|
|
return _obj[status] || '-' |
|
|
|
|
|
}, |
|
|
|
|
|
openEndModal(){ |
|
|
|
|
|
this.isEndModal = true; |
|
|
|
|
|
}, |
|
|
|
|
|
closeEndModal(){ |
|
|
|
|
|
this.isEndModal = false; |
|
|
|
|
|
}, |
|
|
|
|
|
endBtn:util.debounce(function(){ |
|
|
|
|
|
this.getCurUserInfo(); |
|
|
|
|
|
}, 300, true), |
|
|
|
|
|
refreshInfo(){ |
|
|
|
|
|
let { orderInfo } = this; |
|
|
|
|
|
this.closeEndModal(); |
|
|
|
|
|
this.getInfo(orderInfo.order_no); |
|
|
|
|
|
}, |
|
|
|
|
|
getInfo(order_no){ |
|
|
|
|
|
util.showLoad(); |
|
|
|
|
|
server.get({ |
|
|
|
|
|
url: ORDER_API.hardwareOrderGet, |
|
|
|
|
|
data: { order_no }, |
|
|
|
|
|
failMsg: '加载失败！' |
|
|
|
|
|
}) |
|
|
|
|
|
.then(res=>{ |
|
|
|
|
|
util.hideLoad(); |
|
|
|
|
|
this.orderInfo = res || {}; |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
|
|
|
getCurUserInfo(){ |
|
|
|
|
|
util.showLoad(); |
|
|
|
|
|
server.get({ |
|
|
|
|
|
url: ORDER_API.currentUser, |
|
|
|
|
|
data: { }, |
|
|
|
|
|
failMsg: '加载用户信息失败！' |
|
|
|
|
|
}) |
|
|
|
|
|
.then(res=>{ |
|
|
|
|
|
util.hideLoad(); |
|
|
|
|
|
let _data = res || {}; |
|
|
|
|
|
this.userInfo = _data; |
|
|
|
|
|
if(_data&&_data.id)this.openEndModal(); |
|
|
|
|
|
console.warn('用户信息', res); |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
|
|
|
confirmEndBtn: util.debounce(function(){ |
|
|
|
|
|
let { orderInfo, iptPrice } = this; |
|
|
|
|
|
if(iptPrice == '')return util.showNone('请输入金额！'); |
|
|
|
|
|
util.showLoad(); |
|
|
|
|
|
server.get({ |
|
|
|
|
|
url: ORDER_API.lockEndBill, |
|
|
|
|
|
data: { order_no: orderInfo.order_no, amount: iptPrice }, |
|
|
|
|
|
isDefaultGet: false |
|
|
|
|
|
}) |
|
|
|
|
|
.then(res=>{ |
|
|
|
|
|
util.hideLoad(); |
|
|
|
|
|
if(res.data.code == 0){ |
|
|
|
|
|
util.showNone(res.data.message || '操作成功！'); |
|
|
|
|
|
setTimeout(this.refreshInfo, 1200); |
|
|
|
|
|
console.warn(res) |
|
|
|
|
|
}else{ |
|
|
|
|
|
util.showNone(res.data.message || '操作失败！'); |
|
|
|
|
|
} |
|
|
|
|
|
console.warn(res); |
|
|
|
|
|
}) |
|
|
|
|
|
}, 300, true), |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
@ -113,9 +211,9 @@ export default { |
|
|
<style lang="scss"> |
|
|
<style lang="scss"> |
|
|
@import '~style/public.scss'; |
|
|
@import '~style/public.scss'; |
|
|
.locker-order-info{ |
|
|
.locker-order-info{ |
|
|
padding-bottom: 0upx; |
|
|
|
|
|
padding-bottom: calc( 0upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|
|
|
|
|
padding-bottom: calc( 0upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|
|
|
|
|
|
|
|
padding-bottom: 142upx; |
|
|
|
|
|
padding-bottom: calc( 142upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|
|
|
|
|
padding-bottom: calc( 142upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|
|
} |
|
|
} |
|
|
.loi-box{ |
|
|
.loi-box{ |
|
|
margin-bottom: 24upx; |
|
|
margin-bottom: 24upx; |
|
|
@ -194,15 +292,23 @@ export default { |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.loi-btn{ |
|
|
|
|
|
margin: 0 auto; |
|
|
|
|
|
width: 702upx; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
line-height: 112upx; |
|
|
|
|
|
border-radius: 10upx; |
|
|
|
|
|
font-size: 32upx; |
|
|
|
|
|
background-color: $themeColor; |
|
|
|
|
|
color: #fff; |
|
|
|
|
|
|
|
|
.loi-fixd-bar{ |
|
|
|
|
|
position: fixed; |
|
|
|
|
|
left: 0; |
|
|
|
|
|
bottom: 0; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
padding: 10upx 24upx; |
|
|
|
|
|
padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|
|
|
|
|
padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|
|
|
|
|
background-color: #f2f2f7; |
|
|
|
|
|
>view{ |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
line-height: 112upx; |
|
|
|
|
|
border-radius: 10upx; |
|
|
|
|
|
font-size: 32upx; |
|
|
|
|
|
background-color: $themeColor; |
|
|
|
|
|
color: #fff; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
.loi-mask{ |
|
|
.loi-mask{ |
|
|
position: fixed; |
|
|
position: fixed; |
|
|
@ -220,6 +326,13 @@ export default { |
|
|
width: 620upx; |
|
|
width: 620upx; |
|
|
background-color: #fff; |
|
|
background-color: #fff; |
|
|
border-radius: 10upx; |
|
|
border-radius: 10upx; |
|
|
|
|
|
.lm-close{ |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
right: 30upx; |
|
|
|
|
|
top: 30upx; |
|
|
|
|
|
width: 34upx; |
|
|
|
|
|
height: 34upx; |
|
|
|
|
|
} |
|
|
.lc-tit{ |
|
|
.lc-tit{ |
|
|
margin-bottom: 34upx; |
|
|
margin-bottom: 34upx; |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
|
