|
|
|
@ -0,0 +1,296 @@ |
|
|
|
<template> |
|
|
|
<view class="booking-card"> |
|
|
|
<view class="bc-header"> |
|
|
|
<view class="odh-stadium"> |
|
|
|
<image v-if="extension.stadium_logo" class="os-img" mode="aspectFit" :src="extension.stadium_logo"></image> |
|
|
|
<view class="os-name">{{ extension.stadium_name || '-' }}</view> |
|
|
|
</view> |
|
|
|
<view class="bh-content"> |
|
|
|
<kv-line label="订单编号："> |
|
|
|
<template v-slot:default>{{ orderInfo.order_no || '-' }}</template> |
|
|
|
<template v-slot:right> |
|
|
|
<text |
|
|
|
class="od-status" |
|
|
|
:class="false ? 'active' : ''" |
|
|
|
>{{ orderInfo.pay_status_text || '-' }}</text> |
|
|
|
</template> |
|
|
|
</kv-line> |
|
|
|
<kv-line label="创建时间：">{{ orderInfo.created_at || '-' }}</kv-line> |
|
|
|
<kv-line label="手机号码：">{{ orderInfo.mobile || '-' }}</kv-line> |
|
|
|
<kv-line label="用户昵称：">{{ orderInfo.nickname || '-' }}</kv-line> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="bc-box bc-cards"> |
|
|
|
<view class="bb-tit"> |
|
|
|
<view class="bt-name">订场卡信息</view> |
|
|
|
<view class="bt-record" @click="toRecord">使用记录</view> |
|
|
|
</view> |
|
|
|
<view class="bb-content"> |
|
|
|
<kv-line label="订场卡名称：">{{ orderInfo.card_info_name || '-' }}</kv-line> |
|
|
|
<kv-line label="订场卡号：">{{ orderInfo.user_card_no || '-' }}</kv-line> |
|
|
|
<kv-line label="来源：">{{ orderInfo.source || '-' }}</kv-line> |
|
|
|
</view> |
|
|
|
<view class="bc-discount"> |
|
|
|
<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 class="od-total"> |
|
|
|
<text class="pt-name">合计支付：</text>￥{{ orderInfo.pay_amount || '0' }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="bc-box bc-payment"> |
|
|
|
<view class="bb-tit"> |
|
|
|
<view class="bt-name">支付信息</view> |
|
|
|
</view> |
|
|
|
<view class="bb-content"> |
|
|
|
<kv-line label="支付方式：">{{ orderInfo.pay_type_text || '-' }}</kv-line> |
|
|
|
<kv-line label="支付时间：">{{ orderInfo.pay_time || '-' }}</kv-line> |
|
|
|
<kv-line label="交易号：" v-if="orderInfo.trade_no">{{ orderInfo.trade_no || '-' }}</kv-line> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- 退款列表 --> |
|
|
|
<view v-for="(e, i) in refunds" :key="i"> |
|
|
|
<view style="height: 24rpx;"></view> |
|
|
|
<order-refund-info |
|
|
|
:refund_price="e.amount || 0" |
|
|
|
:refund_no="e.refund_no || '-'" |
|
|
|
:refund_time="e.refund_time || '-'" |
|
|
|
:refund_reason="e.reason || '-'" |
|
|
|
:nameKey="i + 1" |
|
|
|
:refund-integral="e.deduction_integral" |
|
|
|
></order-refund-info> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="bc-fixed" v-if="refunds.length < 2 && extension.refundable_amount > 0"> |
|
|
|
<view class="bf-btn" @click="refundBtn">退款</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 退款弹窗 --> |
|
|
|
<order-refund-modal ref="orderRefundModal" ></order-refund-modal> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import kvLine from "../../components/kv_line.vue"; |
|
|
|
import kvsLine from "../../components/kvs_line.vue"; |
|
|
|
import orderRefundModal from './modules/refund_modal.vue'; |
|
|
|
import orderRefundInfo from '@/components/order_refund/info.vue'; |
|
|
|
|
|
|
|
import { ORDER_API } from '../../js/api'; |
|
|
|
import server from '../../js/server'; |
|
|
|
import { showLoad, hideLoad, showNone, routeTo } from '@/utils/util'; |
|
|
|
export default { |
|
|
|
components: { |
|
|
|
kvLine, |
|
|
|
kvsLine, |
|
|
|
orderRefundModal, |
|
|
|
orderRefundInfo |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
extension(){ |
|
|
|
return this.orderInfo?.extension ?? {}; |
|
|
|
}, |
|
|
|
refunds(){ |
|
|
|
return this.orderInfo?.refunds ?? []; |
|
|
|
} |
|
|
|
}, |
|
|
|
data(){ |
|
|
|
return { |
|
|
|
orderInfo: {}, |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad(options){ |
|
|
|
this.cardOrderGet({ |
|
|
|
brand_id: options.brand_id ?? '', |
|
|
|
order_no: options.order_no ?? '', |
|
|
|
}); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
toRecord(){ |
|
|
|
let { orderInfo } = this; |
|
|
|
let _qryStr = `card_no=${orderInfo?.user_card_no || ''}&brand_id=${orderInfo?.brand_id || ''}`; |
|
|
|
routeTo(`/subpackage/order/pages/booking_card/use_record?${_qryStr}`, 'nT'); |
|
|
|
}, |
|
|
|
refundBtn(){ |
|
|
|
let { orderInfo, extension, refunds } = this; |
|
|
|
this.$refs.orderRefundModal.show({ |
|
|
|
stadium_name: extension?.stadium_name ?? '', |
|
|
|
order_no: orderInfo?.order_no ?? '', |
|
|
|
mobile: orderInfo?.mobile ?? '', |
|
|
|
refundable_amount: extension?.refundable_amount ?? 0, |
|
|
|
refundable_integral: extension?.refundable_integral ?? 0, |
|
|
|
refundable_hours: extension?.refundable_hours ?? 0, |
|
|
|
refund_times: refunds?.length || -1, |
|
|
|
confirm: e => { |
|
|
|
this.cardOrderRefund({ |
|
|
|
brand_id: orderInfo?.brand_id ?? '', |
|
|
|
stadium_id: orderInfo?.stadium_id ?? '', |
|
|
|
order_no: orderInfo?.order_no ?? '', |
|
|
|
amount: e.refund_amount ?? 0, |
|
|
|
deduction_integral: e.refund_integral ?? 0, |
|
|
|
hours: e.refund_time ?? 0, |
|
|
|
}) |
|
|
|
.finally(()=>{ |
|
|
|
setTimeout(()=>{ |
|
|
|
this.cardOrderGet({ |
|
|
|
brand_id: orderInfo?.brand_id || '', |
|
|
|
order_no: orderInfo?.order_no || '' |
|
|
|
}); |
|
|
|
}, 1000); |
|
|
|
}) |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 订场卡订单 - 列表 |
|
|
|
cardOrderGet({ brand_id, order_no }){ |
|
|
|
showLoad(); |
|
|
|
return server.post({ |
|
|
|
url: ORDER_API.cardOrderGet, |
|
|
|
data: { |
|
|
|
brand_id: +brand_id, order_no, |
|
|
|
}, |
|
|
|
isDefaultGet: false, |
|
|
|
}) |
|
|
|
.then(res => { |
|
|
|
hideLoad(); |
|
|
|
let _data = res?.data || {}; |
|
|
|
if(_data.code === 0){ |
|
|
|
this.orderInfo = _data.data ?? {}; |
|
|
|
}else{ |
|
|
|
return Promise.reject(_data); |
|
|
|
} |
|
|
|
}) |
|
|
|
.catch(err => { |
|
|
|
hideLoad(); |
|
|
|
showModal({ content: err.message || '加载列表失败！' }) |
|
|
|
console.warn('subpackage order bookingcard order info cardOrderGet err --->', err); |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 订场卡订单 - 退款 |
|
|
|
cardOrderRefund({ brand_id, stadium_id, order_no, amount, deduction_integral, hours }){ |
|
|
|
showLoad(); |
|
|
|
return server.post({ |
|
|
|
url: ORDER_API.cardOrderRefund, |
|
|
|
data: { |
|
|
|
brand_id: +brand_id, stadium_id, order_no, |
|
|
|
amount, deduction_integral, hours |
|
|
|
}, |
|
|
|
failMsg: '操作失败！' |
|
|
|
}) |
|
|
|
.then(res=>{ |
|
|
|
hideLoad(); |
|
|
|
showNone('操作成功！'); |
|
|
|
// this.orderInfo = res || {}; |
|
|
|
return 'success'; |
|
|
|
}) |
|
|
|
.catch(err=>{ |
|
|
|
hideLoad(); |
|
|
|
showNone('操作失败！'); |
|
|
|
console.warn('subpackage order bookingcard order info cardOrderRefund err -->', err); |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
.booking-card{ |
|
|
|
padding: 24upx; |
|
|
|
@include isPd(132upx); |
|
|
|
.bc-header{ |
|
|
|
padding: 0 30upx 40upx; |
|
|
|
border-radius: 10upx; |
|
|
|
background: #fff; |
|
|
|
.odh-stadium{ |
|
|
|
padding: 26upx 0; |
|
|
|
border-bottom: 1px solid #D8D8D8; |
|
|
|
@include ctf(flex-start); |
|
|
|
.os-img{ |
|
|
|
flex-shrink: 0; |
|
|
|
margin-right: 14upx; |
|
|
|
width: 40upx; |
|
|
|
height: 40upx; |
|
|
|
} |
|
|
|
.os-name{ |
|
|
|
@include flcw(28upx, 40upx, #333333, 500); |
|
|
|
@include tHide; |
|
|
|
} |
|
|
|
} |
|
|
|
.bh-content{ |
|
|
|
margin-top: 26upx; |
|
|
|
.od-status{ |
|
|
|
margin-left: auto; |
|
|
|
flex-shrink: 0; |
|
|
|
@include flcw(28upx, 40upx, #9C9C9F); |
|
|
|
&.active{ |
|
|
|
color: $mColor; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.bc-box{ |
|
|
|
margin-top: 24upx; |
|
|
|
padding: 30upx; |
|
|
|
border-radius: 10upx; |
|
|
|
background: #fff; |
|
|
|
.bb-tit{ |
|
|
|
@include ctf(space-between); |
|
|
|
.bt-name{ |
|
|
|
@include flcw(28upx, 40upx, #9C9C9F); |
|
|
|
@include tHide; |
|
|
|
} |
|
|
|
.bt-record{ |
|
|
|
flex-shrink: 0; |
|
|
|
max-width: 250upx; |
|
|
|
@include flcw(28upx, 40upx, $mColor); |
|
|
|
@include tHide; |
|
|
|
} |
|
|
|
} |
|
|
|
.bb-content{ |
|
|
|
padding-top: 20upx; |
|
|
|
} |
|
|
|
} |
|
|
|
.bc-cards{ |
|
|
|
.bc-discount{ |
|
|
|
margin-top: 20upx; |
|
|
|
border-top: 1px solid #D8D8D8; |
|
|
|
.od-total{ |
|
|
|
padding-top: 10upx; |
|
|
|
text-align: right; |
|
|
|
@include flcw(28upx, 50upx, #1A1A1A, 500); |
|
|
|
@include tHide; |
|
|
|
.pt-name{ |
|
|
|
color: #9A9A9D; |
|
|
|
font-weight: 400; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.bc-fixed{ |
|
|
|
position: fixed; |
|
|
|
left: 0; |
|
|
|
bottom: 0; |
|
|
|
padding: 10upx 24upx; |
|
|
|
width: 100%; |
|
|
|
background: #f2f2f7; |
|
|
|
@include ctf(flex-end); |
|
|
|
.bf-btn{ |
|
|
|
width: 192upx; |
|
|
|
border-radius: 10upx; |
|
|
|
text-align: center; |
|
|
|
background: #fff; |
|
|
|
@include flcw(32upx, 88upx, $mColor, 500); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
刘嘉炜
