|
|
|
@ -1,62 +1,79 @@ |
|
|
|
<template> |
|
|
|
<view class="person-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="pod-status">已完成</text> |
|
|
|
<text |
|
|
|
class="pod-status" |
|
|
|
:class="{ active: [ '计费中', '待支付' ].includes(orderInfo.status_text) }" |
|
|
|
>{{ 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="pod-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="离场时间：">2020-01-10 17:20:24</kv-line> |
|
|
|
<kv-line label="时长合计：">1小时35分9秒 </kv-line> |
|
|
|
<view class="pod-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="pod-total"> |
|
|
|
<text class="pt-name">合计支付：</text>￥9.5 |
|
|
|
</view> |
|
|
|
<kv-line label="项目类型：">人时({{ orderInfo.project_type_name || '-' }})</kv-line> |
|
|
|
<kv-line label="进场时间：">{{ orderInfo.start_time || '-' }}</kv-line> |
|
|
|
<kv-line label="离场时间：">{{ orderInfo.end_time || '-' }}</kv-line> |
|
|
|
<kv-line label="时长合计：">{{ orderInfo.extension&&orderInfo.extension.duration || '-' }}</kv-line> |
|
|
|
<block v-if="[ '已完成', '已退款', '待支付' ].includes(orderInfo.status_text)"> |
|
|
|
<view class="pod-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="pod-total"> |
|
|
|
<text class="pt-name">合计支付：</text>￥{{ orderInfo.pay_amount || '0' }} |
|
|
|
</view> |
|
|
|
</block> |
|
|
|
</info-temp> |
|
|
|
|
|
|
|
<view class="pod-margin"></view> |
|
|
|
<info-temp title="支付信息"> |
|
|
|
<kv-line label="支付方式：">微信支付</kv-line> |
|
|
|
<kv-line label="支付时间：">2019年6月18日 10:30:40</kv-line> |
|
|
|
<kv-line label="微信交易号：">424736746998493847989434</kv-line> |
|
|
|
</info-temp> |
|
|
|
<blcok v-if="[ '已完成', '已退款' ].includes(orderInfo.status_text)"> |
|
|
|
<view class="pod-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.trace_no || '-' }}</kv-line> |
|
|
|
</info-temp> |
|
|
|
</blcok> |
|
|
|
|
|
|
|
<block v-if="orderInfo.status_text === '已退款'"> |
|
|
|
<view class="pod-margin"></view> |
|
|
|
<info-temp title="退款信息1"> |
|
|
|
<kv-line label="退款金额：">￥7</kv-line> |
|
|
|
<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> |
|
|
|
</block> |
|
|
|
|
|
|
|
<view class="pod-margin"></view> |
|
|
|
<info-temp title="退款信息1"> |
|
|
|
<kv-line label="退款金额：">￥7</kv-line> |
|
|
|
<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> |
|
|
|
<view class="pod-margin"></view> |
|
|
|
<view class="pod-margin"></view> |
|
|
|
|
|
|
|
<view class="pod-btn" v-if="false">完结订单</view> |
|
|
|
<view class="pod-btn" v-else>结束计费</view> |
|
|
|
<view |
|
|
|
class="pod-btn" |
|
|
|
v-if="orderInfo.status_text === '计费中'" |
|
|
|
@click="endOrder" |
|
|
|
>结束计费</view> |
|
|
|
|
|
|
|
<!-- <view class="pod-fixed"> |
|
|
|
<view class="pf-btn">取消预约</view> |
|
|
|
</view> --> |
|
|
|
<bottom-fixed> |
|
|
|
<fixed-button>取消预约</fixed-button> |
|
|
|
<bottom-fixed v-if="orderInfo.status_text === '已完成'"> |
|
|
|
<fixed-button>退款</fixed-button> |
|
|
|
</bottom-fixed> |
|
|
|
|
|
|
|
|
|
|
|
<end-billing-modal></end-billing-modal> |
|
|
|
<end-billing-modal ref="endBillingModal"></end-billing-modal> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -69,6 +86,10 @@ import endBillingModal from "../modules/order_detail/end_billing_modal.vue"; |
|
|
|
import bottomFixed from "../modules/order_detail/bottom_fixed.vue"; |
|
|
|
import fixedButton from "../modules/order_detail/fixed_button.vue"; |
|
|
|
// import bottomFixed from "../modules/order_detail/bf_button.vue"; |
|
|
|
|
|
|
|
import { ORDER_API } from '../../../js/api'; |
|
|
|
import server from '../../../js/server'; |
|
|
|
import { showLoad, hideLoad, formatDate, showNone } from '@/utils/util'; |
|
|
|
export default { |
|
|
|
components: { |
|
|
|
'header-temp': headerTemp, |
|
|
|
@ -78,6 +99,47 @@ export default { |
|
|
|
'end-billing-modal': endBillingModal, |
|
|
|
'bottom-fixed': bottomFixed, |
|
|
|
'fixed-button': fixedButton, |
|
|
|
}, |
|
|
|
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, |
|
|
|
success: res=>{ |
|
|
|
console.log('endOrder res -->', res); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
getOrderDetail({ |
|
|
|
brand_id = '', order_no = '' |
|
|
|
}){ |
|
|
|
showLoad(); |
|
|
|
server.get({ |
|
|
|
url: ORDER_API.billingOrderDetail, |
|
|
|
data: { |
|
|
|
brand_id, order_no |
|
|
|
}, |
|
|
|
failMsg: '加载失败！' |
|
|
|
}) |
|
|
|
.then(res=>{ |
|
|
|
hideLoad(); |
|
|
|
console.log('person getOrderDetail -->', res); |
|
|
|
this.orderInfo = res || {}; |
|
|
|
}) |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
@ -89,6 +151,9 @@ export default { |
|
|
|
margin-left: auto; |
|
|
|
flex-shrink: 0; |
|
|
|
@include flcw(28upx, 40upx, #9C9C9F); |
|
|
|
&.active{ |
|
|
|
color: $mColor; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.pod-margin{ |
|
|
|
|
