|
|
|
@ -1,71 +1,93 @@ |
|
|
|
<template> |
|
|
|
<view class="site-order-detail"> |
|
|
|
<header-temp> |
|
|
|
<header-temp |
|
|
|
:stadium-name="orderInfo.stadium_name" |
|
|
|
:stadium-logo="orderInfo.stadium_logo" |
|
|
|
> |
|
|
|
<kv-line label="订单编号："> |
|
|
|
<template v-slot:default>qp20200150150245569qp20200150150245569qp20200150150245569</template> |
|
|
|
<template v-slot:default>{{ orderInfo.order_no || '-' }}</template> |
|
|
|
<template v-slot:right> |
|
|
|
<text class="od-status">已完成</text> |
|
|
|
<text |
|
|
|
class="od-status" |
|
|
|
:class="[ '待使用', '使用中', '待支付', '计费中' ].includes(orderInfo.status_text) ? 'active' : ''" |
|
|
|
>{{ orderInfo.status_text || '-' }}</text> |
|
|
|
</template> |
|
|
|
</kv-line> |
|
|
|
<kv-line label="创建时间：">2019-08-17 18:02:58</kv-line> |
|
|
|
<kv-line label="手机号码：">18316553478</kv-line> |
|
|
|
<kv-line label="用户昵称：">i术生</kv-line> |
|
|
|
<kv-line label="创建时间：">{{ orderInfo.created_at || '-' }}</kv-line> |
|
|
|
<kv-line label="手机号码：">{{ orderInfo.mobile || '-' }}</kv-line> |
|
|
|
<kv-line label="用户昵称：">{{ orderInfo.nickname || '-' }}</kv-line> |
|
|
|
</header-temp> |
|
|
|
|
|
|
|
<view class="od-margin"></view> |
|
|
|
<info-temp title="场地计时信息"> |
|
|
|
<kv-line label="项目类型：">茶室(1号茶室)</kv-line> |
|
|
|
<kv-line label="进场时间：">2020-01-10 15:02:24</kv-line> |
|
|
|
<kv-line label="离场时间：">现场扫码结算</kv-line> |
|
|
|
<kv-line label="时长合计：">00小时00分00秒</kv-line> |
|
|
|
|
|
|
|
<view class="od-pay-info"> |
|
|
|
<kvs-line label="金额小计">¥10.5</kvs-line> |
|
|
|
<kvs-line label="折扣金额">-¥0</kvs-line> |
|
|
|
<kvs-line label="积分抵扣">-¥0</kvs-line> |
|
|
|
<kvs-line label="优惠券优惠">-¥1</kvs-line> |
|
|
|
</view> |
|
|
|
<view class="od-total"> |
|
|
|
<text class="pt-name">合计支付：</text>￥9.5 |
|
|
|
</view> |
|
|
|
</info-temp> |
|
|
|
<kv-line label="项目类型：">({{ orderInfo.project_type_name || '-' }})</kv-line> |
|
|
|
<kv-line label="进场时间：">{{ orderInfo.start_time || '-' }}</kv-line> |
|
|
|
<kv-line |
|
|
|
label="离场时间：" |
|
|
|
v-if="[ '待使用', '已取消预约', '计费中', '使用中' ].includes(orderInfo.status_text)&&orderInfo.settlement_type === 1" |
|
|
|
>现场扫码结算</kv-line> |
|
|
|
<kv-line label="离场时间：" v-else>{{ orderInfo.end_time || '-' }}</kv-line> |
|
|
|
<kv-line label="时长合计：">{{ orderInfo.extension&&orderInfo.extension.duration || '-' }}</kv-line> |
|
|
|
|
|
|
|
<view class="od-margin"></view> |
|
|
|
<info-temp title="关联押金订单"> |
|
|
|
<kv-line label="押金订单号："> |
|
|
|
<template v-slot:default>qp20200150150245569</template> |
|
|
|
<template v-slot:right> |
|
|
|
<text class="od-check">查看押金订单</text> |
|
|
|
</template> |
|
|
|
</kv-line> |
|
|
|
<kv-line label="押金金额：">￥50</kv-line> |
|
|
|
<kv-line label="订单状态："> |
|
|
|
<template v-slot:default>已退款</template> |
|
|
|
<template v-slot:right> |
|
|
|
<text class="od-deposit-explain">(押金已原路退返账户，请留意查收!)</text> |
|
|
|
</template> |
|
|
|
</kv-line> |
|
|
|
<block |
|
|
|
v-if="orderInfo.settlement_type === 1 || [ '已完成', '已退款', '待支付', '已失效' ].includes(orderInfo.status_text)" |
|
|
|
> |
|
|
|
<view class="od-pay-info"> |
|
|
|
<kvs-line label="金额小计">¥{{ orderInfo.amount || '0' }}</kvs-line> |
|
|
|
<kvs-line label="折扣金额">-¥{{ orderInfo.discount_amount || '0' }}</kvs-line> |
|
|
|
<kvs-line label="积分抵扣">-¥{{ orderInfo.deduction_amount || '0' }}</kvs-line> |
|
|
|
<kvs-line label="优惠券优惠">-¥{{ orderInfo.coupons_amount || '0' }}</kvs-line> |
|
|
|
</view> |
|
|
|
<view class="od-total"> |
|
|
|
<text class="pt-name">合计支付：</text>￥{{ orderInfo.pay_amount || '0' }} |
|
|
|
</view> |
|
|
|
</block> |
|
|
|
</info-temp> |
|
|
|
|
|
|
|
<view class="od-margin"></view> |
|
|
|
<info-temp> |
|
|
|
<kv-line label="取消时间：">2019-05-17 11:12:58</kv-line> |
|
|
|
<kv-line label="取消原因：">商家主动取消</kv-line> |
|
|
|
</info-temp> |
|
|
|
<block v-if="extension.show_deposit"> |
|
|
|
<view class="od-margin"></view> |
|
|
|
<info-temp title="关联押金订单"> |
|
|
|
<kv-line label="押金订单号："> |
|
|
|
<template v-slot:default>{{ orderInfo.deposit_order_no || '-' }}</template> |
|
|
|
<template v-slot:right> |
|
|
|
<text class="od-check" @click="toDepoistDetail">查看押金订单</text> |
|
|
|
</template> |
|
|
|
</kv-line> |
|
|
|
<kv-line label="押金金额：">￥{{ extension.deposit_amount || '0' }}</kv-line> |
|
|
|
<kv-line label="订单状态："> |
|
|
|
<template v-slot:default>{{ extension.deposit_status_text || '-' }}</template> |
|
|
|
<!-- <template v-slot:right> |
|
|
|
<text class="od-deposit-explain">(押金已原路退返账户，请留意查收!)</text> |
|
|
|
</template> --> |
|
|
|
</kv-line> |
|
|
|
</info-temp> |
|
|
|
</block> |
|
|
|
|
|
|
|
<view class="od-margin"></view> |
|
|
|
<info-temp title="支付信息"> |
|
|
|
<kv-line label="支付方式：">微信支付</kv-line> |
|
|
|
<kv-line label="支付时间：">2019-05-17 11:12:58</kv-line> |
|
|
|
<kv-line label="交易流水：">4200225665566566565455</kv-line> |
|
|
|
</info-temp> |
|
|
|
<block v-if="orderInfo.status_text === '已取消预约'"> |
|
|
|
<view class="od-margin"></view> |
|
|
|
<info-temp> |
|
|
|
<kv-line label="取消时间：">{{ orderInfo.cancel_time || '-' }}</kv-line> |
|
|
|
<kv-line label="取消原因：">{{ orderInfo.cancel_reason || '-' }}</kv-line> |
|
|
|
</info-temp> |
|
|
|
</block> |
|
|
|
|
|
|
|
<view class="od-margin"></view> |
|
|
|
<info-temp title="费用详情"> |
|
|
|
<kv-line label="产生费用："><text class="od-check">￥10</text></kv-line> |
|
|
|
</info-temp> |
|
|
|
<block v-if="orderInfo.settlement_type === 1 || [ '已完成', '已退款', '已失效' ].includes(orderInfo.status_text)"> |
|
|
|
<view class="od-margin"></view> |
|
|
|
<info-temp title="支付信息"> |
|
|
|
<kv-line label="支付方式：">{{ orderInfo.pay_type_text || '-' }}</kv-line> |
|
|
|
<kv-line label="支付时间：">{{ orderInfo.pay_time || '-' }}</kv-line> |
|
|
|
<kv-line label="交易流水：">{{ orderInfo.trade_no || '-' }}</kv-line> |
|
|
|
</info-temp> |
|
|
|
</block> |
|
|
|
|
|
|
|
<view class="od-margin"></view> |
|
|
|
<block v-if="orderInfo.status_text === '计费中'"> |
|
|
|
<view class="od-margin"></view> |
|
|
|
<info-temp title="费用详情"> |
|
|
|
<kv-line label="产生费用："><text class="od-check">￥{{ orderInfo.amount || '0' }}</text></kv-line> |
|
|
|
</info-temp> |
|
|
|
</block> |
|
|
|
|
|
|
|
<!-- <view class="od-margin"></view> |
|
|
|
<info-temp title="退款信息1"> |
|
|
|
<kv-line label="退款金额：">￥998</kv-line> |
|
|
|
<kv-line label="退款单号：">TF-20195171564566</kv-line> |
|
|
|
@ -79,21 +101,61 @@ |
|
|
|
<kv-line label="退款单号：">TF-20195171564566</kv-line> |
|
|
|
<kv-line label="退款时间：">2019-05-17 11:12:58</kv-line> |
|
|
|
<kv-line label="退款原因：">商家主动退款</kv-line> |
|
|
|
</info-temp> |
|
|
|
</info-temp> --> |
|
|
|
|
|
|
|
<view class="od-margin"></view> |
|
|
|
<view class="od-margin"></view> |
|
|
|
<view |
|
|
|
class="pod-btn" |
|
|
|
v-if="orderInfo.status_text === '待支付'" |
|
|
|
@click="finishOrder" |
|
|
|
>完结订单</view> |
|
|
|
<view |
|
|
|
class="pod-btn" |
|
|
|
v-if="orderInfo.status_text === '计费中'" |
|
|
|
@click="endOrder" |
|
|
|
>结束计费</view> |
|
|
|
<view |
|
|
|
class="pod-btn" |
|
|
|
v-if="orderInfo.status_text === '待使用'" |
|
|
|
>取消预约</view> |
|
|
|
|
|
|
|
<end-billing-modal ref="endBillingModal"></end-billing-modal> |
|
|
|
|
|
|
|
<bottom-fixed> |
|
|
|
<!-- <bottom-fixed> |
|
|
|
<fixed-button>取消预约</fixed-button> |
|
|
|
</bottom-fixed> |
|
|
|
</bottom-fixed> --> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
/* |
|
|
|
这页面只是场时订单 |
|
|
|
|
|
|
|
type: |
|
|
|
|
|
|
|
2是人时 1 3是场时 |
|
|
|
1是场时 3是场时的押金 |
|
|
|
预约订单是另外一个字段判断 -> enable_subscribe |
|
|
|
------------------ |
|
|
|
enable_subscribe= true&&type= 1 --> 预约订单 |
|
|
|
enable_subscribe= true&&type= 3 --> 预约的押金订单 |
|
|
|
|
|
|
|
settlement_type --> 结算方式[0离场结算1用前结算] |
|
|
|
|
|
|
|
人时和场时分开，不考虑人时订单 |
|
|
|
*/ |
|
|
|
import headerTemp from "../modules/order_detail/header_temp.vue"; |
|
|
|
import infoTemp from "../modules/order_detail/info_temp.vue"; |
|
|
|
import kvLine from "../../../components/kv_line.vue"; |
|
|
|
import kvsLine from "../../../components/kvs_line.vue"; |
|
|
|
import bottomFixed from "../modules/order_detail/bottom_fixed.vue"; |
|
|
|
import fixedButton from "../modules/order_detail/fixed_button.vue"; |
|
|
|
import endBillingModal from "../modules/order_detail/end_billing_modal.vue"; |
|
|
|
|
|
|
|
import { ORDER_API } from '../../../js/api'; |
|
|
|
import server from '../../../js/server'; |
|
|
|
import { showLoad, hideLoad, formatDate, showNone, showModal, routeTo } from '@/utils/util'; |
|
|
|
export default { |
|
|
|
components: { |
|
|
|
'header-temp': headerTemp, |
|
|
|
@ -102,6 +164,111 @@ export default { |
|
|
|
'kvs-line': kvsLine, |
|
|
|
'bottom-fixed': bottomFixed, |
|
|
|
'fixed-button': fixedButton, |
|
|
|
'end-billing-modal': endBillingModal, |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
extension(){ |
|
|
|
let { orderInfo } = this; |
|
|
|
return orderInfo?.extension || {}; |
|
|
|
} |
|
|
|
}, |
|
|
|
data(){ |
|
|
|
return { |
|
|
|
orderInfo: {} |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad(options){ |
|
|
|
this.getOrderDetail({ |
|
|
|
brand_id: options?.brand_id || '', |
|
|
|
order_no: options?.order_no || '' |
|
|
|
}) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
endOrder(){ |
|
|
|
let { orderInfo } = this; |
|
|
|
this.$refs.endBillingModal.initModal({ |
|
|
|
operator: orderInfo?.end_bill_operator_name, |
|
|
|
duration: orderInfo?.extension?.duration, |
|
|
|
amount: orderInfo?.amount, |
|
|
|
brand_id: orderInfo?.brand_id, |
|
|
|
order_no: orderInfo?.order_no, |
|
|
|
success: res=>{ |
|
|
|
setTimeout(()=>{ |
|
|
|
this.getOrderDetail({ |
|
|
|
brand_id: orderInfo?.brand_id, |
|
|
|
order_no: orderInfo?.order_no |
|
|
|
}); |
|
|
|
}, 1000); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
finishOrder(){ |
|
|
|
let { orderInfo } = this; |
|
|
|
showModal({ |
|
|
|
title: '提示', |
|
|
|
content: '是否确认完结订单？', |
|
|
|
showCancel: true, |
|
|
|
success: modalRes=>{ |
|
|
|
if(modalRes.confirm)this.endOrderServer({ |
|
|
|
brand_id: orderInfo?.brand_id || '', |
|
|
|
order_no: orderInfo?.order_no || '', |
|
|
|
stadium_id: orderInfo?.stadium_id || '' |
|
|
|
}) |
|
|
|
.finally(res=>{ |
|
|
|
setTimeout(()=>{ |
|
|
|
this.getOrderDetail({ |
|
|
|
brand_id: orderInfo?.brand_id, |
|
|
|
order_no: orderInfo?.order_no |
|
|
|
}); |
|
|
|
}, 1000); |
|
|
|
}); |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
endOrderServer({ |
|
|
|
brand_id, order_no, stadium_id |
|
|
|
}){ |
|
|
|
showLoad(); |
|
|
|
return server.get({ |
|
|
|
url: ORDER_API.timeOrderComplete, |
|
|
|
data: { |
|
|
|
brand_id, order_no, stadium_id |
|
|
|
}, |
|
|
|
failMsg: '操作失败！' |
|
|
|
}) |
|
|
|
.then(res=>{ |
|
|
|
hideLoad(); |
|
|
|
showNone('操作成功！'); |
|
|
|
return res; |
|
|
|
}) |
|
|
|
.catch(err=>{ |
|
|
|
hideLoad(); |
|
|
|
showNone('操作失败！'); |
|
|
|
console.warn('end billing modal confirmBtn err -->', err); |
|
|
|
return Promise.reject(err); |
|
|
|
}) |
|
|
|
}, |
|
|
|
toDepoistDetail(){ |
|
|
|
let { orderInfo } = this; |
|
|
|
routeTo(`/subpackage/order/pages/timekeeping/order_detail/deposit?order_no=${orderInfo.deposit_order_no || ''}&brand_id=${orderInfo.brand_id || ''}`, 'rT'); |
|
|
|
}, |
|
|
|
getOrderDetail({ |
|
|
|
brand_id = '', order_no = '' |
|
|
|
}){ |
|
|
|
showLoad(); |
|
|
|
return server.get({ |
|
|
|
url: ORDER_API.billingOrderDetail, |
|
|
|
data: { |
|
|
|
brand_id, order_no |
|
|
|
}, |
|
|
|
failMsg: '加载失败！' |
|
|
|
}) |
|
|
|
.then(res=>{ |
|
|
|
hideLoad(); |
|
|
|
this.orderInfo = res || {}; |
|
|
|
return res; |
|
|
|
}) |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
@ -147,4 +314,11 @@ export default { |
|
|
|
height: 24upx; |
|
|
|
background: transparent; |
|
|
|
} |
|
|
|
|
|
|
|
.pod-btn{ |
|
|
|
text-align: center; |
|
|
|
border-radius: 10upx; |
|
|
|
background: $mColor; |
|
|
|
@include flcw(32upx, 112upx, #fff, 500); |
|
|
|
} |
|
|
|
</style> |
