You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
383 lines
14 KiB
383 lines
14 KiB
<template>
|
|
<view class="locker-order-info">
|
|
<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="lb-tit">租用详情</view>
|
|
<a-line :value="orderInfo.hardware_name || '-'">
|
|
<block slot="name">设备名称：</block>
|
|
</a-line>
|
|
<a-line :value="orderInfo.cabinet_name || '-'">
|
|
<block slot="name">柜子编号：</block>
|
|
</a-line>
|
|
<a-line :value="orderInfo.start_time || '-'">
|
|
<block slot="name">租借时间：</block>
|
|
</a-line>
|
|
<a-line :value="orderInfo.end_time || '-'">
|
|
<block slot="name">归还时间：</block>
|
|
</a-line>
|
|
<a-line :value="orderInfo.duration || '-'" value-color="#019874">
|
|
<block slot="name">租借时长：</block>
|
|
</a-line>
|
|
</view>
|
|
<view class="loi-box">
|
|
<view class="lb-tit">费用详情</view>
|
|
<view class="lb-section" v-if="orderInfo.late_status">
|
|
<view class="ls-header">
|
|
<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 class="lb-price">
|
|
<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 class="lb-line"></view>
|
|
|
|
<view class="lb-pay-info">
|
|
<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 class="lb-section">
|
|
<view class="ls-header">
|
|
<view class="prestore-line">
|
|
<view>预寄存时长：{{ orderInfo.dimension || '-' }}</view>
|
|
<view>预寄存时长数量：{{ orderInfo.locker_price_number || 0 }}</view>
|
|
</view>
|
|
<view class="prestore-line">
|
|
<view>收费标准：{{ orderInfo.locker_price_hint || '-' }}</view>
|
|
<view>合计预寄存时长：{{ orderInfo.duration || '-' }} </view>
|
|
</view>
|
|
</view>
|
|
<view class="lb-price">
|
|
<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 class="lb-line"></view>
|
|
|
|
<view class="lb-pay-info">
|
|
<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 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-info">
|
|
<a-line :value="userInfo.username || '-'">
|
|
<block slot="name">操作人：</block>
|
|
</a-line>
|
|
<a-line :value="orderInfo.total_duration || '-'" value-color="#019874">
|
|
<block slot="name">时长合计：</block>
|
|
</a-line>
|
|
<a-line :value="orderInfo.late_amount || '-'" value-color="#ff873e">
|
|
<block slot="name">金额合计：</block>
|
|
</a-line>
|
|
</view>
|
|
<view class="lc-ipt">
|
|
<view class="li-txt"><text>*</text>请输入金额</view>
|
|
<view class="li-frame"><input v-model="iptPrice" /></view>
|
|
</view>
|
|
<view class="lc-btn" @click="confirmEndBtn">确认</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import header from '../../../components/header/header.vue';
|
|
import a_line from '../../../../../components/order_list/a_line/a_line.vue';
|
|
import s_line from '../../../components/s_line/s_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 {
|
|
components: {
|
|
'o-header': header,
|
|
'a-line': a_line,
|
|
's-line': s_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>
|
|
|
|
<style lang="scss">
|
|
@import '~style/public.scss';
|
|
.locker-order-info{
|
|
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{
|
|
margin-bottom: 24upx;
|
|
padding: 30upx;
|
|
background-color: #fff;
|
|
}
|
|
.lb-tit{
|
|
margin-bottom: 18upx;
|
|
font-size: 32upx;
|
|
line-height: 44upx;
|
|
color: #1A1A1A;
|
|
}
|
|
.lb-section{
|
|
margin-bottom: 24upx;
|
|
background-color: #f6f6f6;
|
|
border-radius: 10upx;
|
|
.ls-header{
|
|
padding: 40upx 30upx;
|
|
border-radius: 10upx;
|
|
background-color: #f1f1f1;
|
|
.over-time{
|
|
margin-bottom: 12upx;
|
|
font-size: 28upx;
|
|
line-height: 40upx;
|
|
color: #e6081a;
|
|
@include textHide(1);
|
|
>text{
|
|
color: #333333;
|
|
}
|
|
}
|
|
.over-price{
|
|
line-height: 40upx;
|
|
font-size: 28upx;
|
|
color: #1A1A1A;
|
|
>text{
|
|
color: #fe873d;
|
|
}
|
|
}
|
|
.prestore-line{
|
|
margin-bottom: 12upx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
>view{
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
line-height: 40upx;
|
|
width: 50%;
|
|
font-size: 28upx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
}
|
|
.lb-price{
|
|
padding: 44upx 30upx 0;
|
|
.lp-total{
|
|
text-align: right;
|
|
font-size: 28upx;
|
|
font-weight: 500;
|
|
color: #ff873d;
|
|
@include textHide(1);
|
|
>text{
|
|
font-weight: 400;
|
|
color: #1A1A1A;
|
|
}
|
|
}
|
|
}
|
|
.lb-line{
|
|
margin: 20upx 0 0;
|
|
height: 0;
|
|
border-top: 2upx dashed #fff;
|
|
}
|
|
.lb-pay-info{
|
|
padding: 40upx 30upx;
|
|
|
|
}
|
|
}
|
|
.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{
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba($color: #000000, $alpha: .5);
|
|
.lm-content{
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
padding: 80upx;
|
|
width: 620upx;
|
|
background-color: #fff;
|
|
border-radius: 10upx;
|
|
.lm-close{
|
|
position: absolute;
|
|
right: 30upx;
|
|
top: 30upx;
|
|
width: 34upx;
|
|
height: 34upx;
|
|
}
|
|
.lc-tit{
|
|
margin-bottom: 34upx;
|
|
text-align: center;
|
|
line-height: 44upx;
|
|
font-size: 32upx;
|
|
font-weight: 500;
|
|
color: #1A1A1A;
|
|
}
|
|
.lc-info{
|
|
margin-bottom: 34upx;
|
|
}
|
|
.lc-ipt{
|
|
margin-bottom: 60upx;
|
|
.li-txt{
|
|
margin-bottom: 8upx;
|
|
font-size: 28upx;
|
|
line-height: 40upx;
|
|
color: #1A1A1A;
|
|
>text{
|
|
color: #EA5061;
|
|
}
|
|
}
|
|
.li-frame{
|
|
padding: 0 20upx;
|
|
height: 88upx;
|
|
border-radius: 10upx;
|
|
border: 2upx solid #D8D8D8;
|
|
>input{
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 28upx;
|
|
color: #1A1A1A;
|
|
}
|
|
}
|
|
}
|
|
.lc-btn{
|
|
margin: 0 auto;
|
|
width: 240upx;
|
|
line-height: 88upx;
|
|
text-align: center;
|
|
border-radius: 10upx;
|
|
color: #fff;
|
|
background-color: $themeColor;
|
|
font-size: 32upx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|