23 changed files with 1424 additions and 685 deletions
-
1src/components/end_billing_modal/end_billing_modal.vue
-
38src/components/fixed_bar/fixed_bar.vue
-
22src/components/order_refund/button.vue
-
57src/components/order_refund/fixed.vue
-
56src/components/order_refund/info.vue
-
231src/components/order_refund/modal.vue
-
4src/components/timing_order/timing_order.vue
-
1src/js/api.js
-
6src/pages.json
-
2src/pages/site/confirm/confirm.vue
-
8src/store/actions.js
-
3src/store/index.js
-
30src/subpackage/device/components/order/reservation_people_detail/reservation_people_detail.vue
-
42src/subpackage/device/components/order/reservation_site_detail/reservation_site_detail.vue
-
265src/subpackage/device/components/order/timing_detail/timing_detail.vue
-
212src/subpackage/device/pages/order_details/order_details.vue
-
7src/subpackage/order/js/api.js
-
110src/subpackage/order/pages/curriculum/detail/detail.vue
-
434src/subpackage/order/pages/retail/detail/detail.vue
-
85src/subpackage/order/pages/stored_value_card/detail/detail.vue
-
379src/subpackage/order/pages/timing/detail.vue
-
112src/subpackage/order/pages/ym_card/detail/detail.vue
-
4src/utils/util.js
@ -0,0 +1,38 @@ |
|||
<template> |
|||
<view class="fixed-bar" :style="'padding-top:'+ fbHeight +'px;'"> |
|||
<view class="fb-fixed" id="fb"> |
|||
<slot></slot> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getNodeMes } from '@/utils/util' |
|||
export default { |
|||
data(){ |
|||
return { |
|||
fbHeight: 0, |
|||
} |
|||
}, |
|||
mounted() { |
|||
getNodeMes('#fb', this).then(res => { |
|||
this.fbHeight = res?.height || 0 |
|||
console.log(res) |
|||
}) |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.fixed-bar{ |
|||
|
|||
} |
|||
.fb-fixed{ |
|||
padding-top: 20upx; |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
z-index: 10; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,22 @@ |
|||
<template> |
|||
<view class="order-refund-button" @click="$emit('click')"> |
|||
<slot>退款</slot> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.order-refund-button{ |
|||
width: 192upx; |
|||
text-align: center; |
|||
border-radius: 10upx; |
|||
background-color: #fff; |
|||
border: 2upx solid $mColor; |
|||
@include flcw(32upx, 84upx, $mColor, 500); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,57 @@ |
|||
<template> |
|||
<fixed-bar v-if="isShow"> |
|||
<view class="order-refund-fixed"> |
|||
<or-button @click="$emit('click:button')"></or-button> |
|||
</view> |
|||
</fixed-bar> |
|||
</template> |
|||
|
|||
<script> |
|||
import fixedBar from "../fixed_bar/fixed_bar.vue"; |
|||
import orButton from "./button.vue"; |
|||
import { mapState } from 'vuex'; |
|||
/** |
|||
* 全部订单都能退两次, 所有订单最多只能退2次款 |
|||
* 只要订单金额是未全退的，都能退 |
|||
* 0元订单不能退 |
|||
* |
|||
*/ |
|||
export default { |
|||
components: { |
|||
fixedBar, |
|||
orButton |
|||
}, |
|||
props: [ 'pay_amount', 'refund_amount', 'refund_times' ], |
|||
computed: { |
|||
...mapState([ 'brandInfo' ]), |
|||
payAmount(){ |
|||
let { pay_amount } = this; |
|||
return +pay_amount || 0 |
|||
}, |
|||
refundAmount(){ |
|||
let { refund_amount } = this; |
|||
return +refund_amount || 0 |
|||
}, |
|||
isShow(){ |
|||
console.log('brandInfo', this.brandInfo) |
|||
let { payAmount, refundAmount, refund_times, brandInfo } = this; |
|||
if( |
|||
payAmount - refundAmount > 0 |
|||
&&[0, 1].includes(refund_times) |
|||
&&brandInfo?.permission?.['1018'] // 退款权限 |
|||
){ |
|||
return true |
|||
} |
|||
return false |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.order-refund-fixed{ |
|||
padding: 10upx 24upx; |
|||
background: #F2F2F7; |
|||
@include ctf(flex-end); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,56 @@ |
|||
<template> |
|||
<view class="refund-info"> |
|||
<view class="ri-name">退款信息{{ nameKey || '' }}</view> |
|||
<view class="ri-line"> |
|||
<view class="ri-name">退款金额：</view> |
|||
<view class="ri-value">{{ refund_price }}</view> |
|||
</view> |
|||
<view class="ri-line"> |
|||
<view class="ri-name">退款单号：</view> |
|||
<view class="ri-value">{{ refund_no }}</view> |
|||
</view> |
|||
<view class="ri-line"> |
|||
<view class="ri-name">退款时间：</view> |
|||
<view class="ri-value">{{ refund_time }}</view> |
|||
</view> |
|||
<view class="ri-line"> |
|||
<view class="ri-name">退款原因：</view> |
|||
<view class="ri-value">{{ refund_reason }}</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
nameKey: { default: '' }, |
|||
refund_price: { default: '-' }, |
|||
refund_no: { default: '-' }, |
|||
refund_time: { default: '-' }, |
|||
refund_reason: { default: '-' }, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.refund-info{ |
|||
padding: 30upx; |
|||
border-radius: 10upx; |
|||
background: #fff; |
|||
.ri-name{ |
|||
flex-shrink: 0; |
|||
@include flcw(28upx, 40upx, #9C9C9F); |
|||
&+.ri-line{ |
|||
margin-top: 16upx; |
|||
} |
|||
} |
|||
.ri-line{ |
|||
@include ctf(space-between); |
|||
.ri-value{ |
|||
flex-grow: 1; |
|||
@include flcw(28upx, 60upx, #1A1A1A); |
|||
@include tHide; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,231 @@ |
|||
<template> |
|||
<view class="order-refund-modal"> |
|||
<view class="orm-mask" v-show="isShow"> |
|||
<view class="om-content"> |
|||
<image class="oc-close" mode="aspectFit" src="../../static/images/icon/x_close.png" @click="hide"></image> |
|||
<view class="oc-title">退款</view> |
|||
<view class="oc-section"> |
|||
<view class="os-info"> |
|||
<view class="oi-name">{{ refundInfo.stadium_name || '' }}</view> |
|||
<view class="oi-line">订单编号：{{ refundInfo.order_no || '' }}</view> |
|||
<view class="oi-line">手机号码：{{ refundInfo.mobile || '' }}</view> |
|||
|
|||
<view class="os-ipts"> |
|||
<view class="oi-item"> |
|||
<view class="oi-name"> |
|||
<text class="on-txt">*</text> |
|||
退款金额 |
|||
</view> |
|||
<view class="oi-right"> |
|||
<input |
|||
class="or-ipt" |
|||
type="digit" |
|||
v-model="iptInfo.refund_amount" |
|||
:disabled="refundInfo.refund_times > 0" |
|||
:class="{ 'or-disabled': refundInfo.refund_times > 0 }" |
|||
/> |
|||
<view class="or-tip">可退{{ refundInfo.refundable_amount || 0 }}元</view> |
|||
</view> |
|||
</view> |
|||
<view class="oi-item"> |
|||
<view class="oi-name"> |
|||
<text class="on-txt">*</text> |
|||
退款积分 |
|||
</view> |
|||
<view class="oi-right"> |
|||
<input |
|||
class="or-ipt" type="digit" |
|||
v-model="iptInfo.refund_integral" |
|||
:disabled="refundInfo.refund_times > 0" |
|||
:class="{ 'or-disabled': refundInfo.refund_times > 0 }" |
|||
/> |
|||
<view class="or-tip">可退{{ refundInfo.refundable_integral || 0 }}积分</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
<view class="oc-btns"> |
|||
<view class="ob-item" @click="cancelBtn">取消</view> |
|||
<view class="ob-item" @click="confirmBtn">确认</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* PM: |
|||
* 什么状态下都能退 |
|||
* 全部订单都能退两次, 所有订单最多只能退2次款 |
|||
* 只要订单金额是未全退的，都能退 |
|||
* 0元订单不能退 |
|||
* |
|||
*/ |
|||
import { mapState } from 'vuex'; |
|||
import { showModal } from '@/utils/util'; |
|||
export default { |
|||
computed: { |
|||
...mapState([ 'brandInfo' ]) |
|||
}, |
|||
data() { |
|||
return { |
|||
isShow: false, |
|||
refundInfo: { |
|||
/** |
|||
* @param {String} stadium_name 店铺名称 |
|||
* @param {String} order_no 订单编号 |
|||
* @param {String} mobile 手机号码 |
|||
* @param {String} refundable_amount 退款金额 |
|||
* @param {String} refundable_integral 退款积分 |
|||
* @param {Number} refund_times 退款次数 |
|||
* @param {Function} cancel 取消回调 |
|||
* @param {Function} confirm 确认回调 |
|||
*/ |
|||
}, |
|||
iptInfo: { |
|||
refund_amount: '', |
|||
refund_integral: '' |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
show(initData){ |
|||
let { brandInfo } = this; |
|||
if(brandInfo?.permission?.['1018']){ |
|||
this.isShow = true; |
|||
this.init(initData); |
|||
}else{ |
|||
showModal({ |
|||
content: '您没有退款权限', |
|||
}) |
|||
} |
|||
|
|||
}, |
|||
init(data){ |
|||
this.iptInfo.refund_amount = data?.refundable_amount || '0'; |
|||
this.iptInfo.refund_integral = data?.refundable_integral || '0'; |
|||
this.refundInfo = data; |
|||
}, |
|||
hide(){ |
|||
this.isShow = false; |
|||
}, |
|||
cancelBtn() { |
|||
this.hide(); |
|||
this.$emit('click:cancel'); |
|||
this.refundInfo?.cancel?.(0); |
|||
}, |
|||
confirmBtn() { |
|||
let { iptInfo, refundInfo } = this; |
|||
|
|||
this.$emit('click:confirm'); |
|||
this.refundInfo?.confirm?.(iptInfo); |
|||
this.hide(); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.order-refund-modal{} |
|||
|
|||
.orm-mask{ |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: rgba(0,0,0,.5); |
|||
z-index: 10; |
|||
} |
|||
.om-content{ |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
padding-bottom: 80upx; |
|||
width: 620upx; |
|||
border-radius: 10px; |
|||
background: #fff; |
|||
.oc-close{ |
|||
position: absolute; |
|||
top: 30upx; |
|||
right: 30upx; |
|||
width: 34upx; |
|||
height: 34upx; |
|||
} |
|||
.oc-title{ |
|||
padding-top: 78upx; |
|||
text-align: center; |
|||
@include flcw(32upx, 44upx, #333, 500); |
|||
} |
|||
.oc-section{ |
|||
padding: 30upx 30upx 0; |
|||
@include ctf(center); |
|||
.os-info{ |
|||
.oi-name{ |
|||
@include flcw(28upx, 48upx, #333); |
|||
} |
|||
.oi-line{ |
|||
@include flcw(28upx, 48upx, #9C9C9F); |
|||
} |
|||
.os-ipts{ |
|||
padding-top: 34upx; |
|||
.oi-item{ |
|||
display: flex; |
|||
align-items: flex-start; |
|||
.oi-name{ |
|||
@include flcw(28upx, 56upx, #333333); |
|||
.on-txt{ |
|||
color: #EA5061; |
|||
} |
|||
} |
|||
.oi-right{ |
|||
margin-left: 16upx; |
|||
flex-shrink: 0; |
|||
width: 312upx; |
|||
.or-ipt{ |
|||
display: block; |
|||
box-sizing: border-box; |
|||
padding: 0 20upx; |
|||
width: 100%; |
|||
height: 56upx; |
|||
border-radius: 10upx; |
|||
border: 2upx solid #D8D8D8; |
|||
@include flcw(28upx, 48upx, #9C9C9F); |
|||
&.or-disabled{ |
|||
background: #cecece; |
|||
color: #9C9C9F; |
|||
} |
|||
} |
|||
.or-tip{ |
|||
padding-left: 8upx; |
|||
@include flcw(24upx, 48upx, #EA5061); |
|||
@include tHide; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.oc-btns{ |
|||
margin-top: 32upx; |
|||
padding: 0 54upx; |
|||
@include ctf(space-between); |
|||
.ob-item{ |
|||
width: 240upx; |
|||
height: 88upx; |
|||
text-align: center; |
|||
border: 2upx solid $mColor; |
|||
border-radius: 10upx; |
|||
@include flcw(32upx, 84upx, $mColor, 500); |
|||
&+.ob-item{ |
|||
background: $mColor; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,265 +0,0 @@ |
|||
<template> |
|||
<view class="timing-details"> |
|||
<view class="td-head"> |
|||
<view class="th-store"> |
|||
<image :src="orderInfo.stadium_logo || ''"></image> |
|||
<view>{{orderInfo.stadium_name || '-'}}</view> |
|||
</view> |
|||
<view class="th-line"> |
|||
<view>订单编号：<text>{{orderInfo.order_no || '-'}}</text></view> |
|||
<view><text :class="[orderInfo.pay_status == 0?'tl-active':'']">{{zh_order_status(orderInfo.pay_status)}}</text></view> |
|||
</view> |
|||
<view class="th-line"> |
|||
<view>创建时间：<text>{{orderInfo.model.created_at || '-'}}</text></view> |
|||
</view> |
|||
<view class="th-line"> |
|||
<view>用户昵称：<text>{{orderInfo.nickname || '-'}}</text></view> |
|||
</view> |
|||
</view> |
|||
<view class="td-box"> |
|||
<view class="tb-title">计时信息</view> |
|||
<view class="tb-line"> |
|||
<!-- 项目 场时有 人时没有 order_type: 1场时 2人时 --> |
|||
<view v-if="orderInfo.order_type==1">项目：<text>{{orderInfo.project_name || '-'}}({{orderInfo.venue_name || '-'}})</text></view> |
|||
<view>进场时间：<text>{{orderInfo.start_time || '-'}}</text></view> |
|||
<!-- 离场时间 已完成显示 --> |
|||
<view v-if="orderInfo.pay_status != 0">离场时间：<text>{{orderInfo.end_time || '-'}}</text></view> |
|||
<view>时长合计：<text>{{orderInfo.extension.duration || '-'}}</text></view> |
|||
</view> |
|||
<view class="tb-section" v-if="!(orderInfo.pay_status== 0&&orderInfo.early_end_timing==false)"> |
|||
<view class="ts-line"> |
|||
<view>金额小计</view> |
|||
<view>¥{{orderInfo.amount || 0}}</view> |
|||
</view> |
|||
<view class="ts-line"> |
|||
<view>积分抵扣</view> |
|||
<view>-¥{{orderInfo.deduction_amount ||0}}</view> |
|||
</view> |
|||
<view class="ts-line"> |
|||
<view>折扣金额</view> |
|||
<view>-¥{{orderInfo.discount_amount||0}}</view> |
|||
</view> |
|||
<view class="ts-line"> |
|||
<view>优惠券优惠</view> |
|||
<view>-¥{{orderInfo.coupons_amount || 0}}</view> |
|||
</view> |
|||
<view class="ts-total"> |
|||
<view>合计支付：<text>￥</text><text>{{orderInfo.pay_amount ||0}}</text></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="td-box" v-if="orderInfo.pay_status != 0"> |
|||
<view class="tb-title">支付信息</view> |
|||
<view class="tb-line"> |
|||
<view>支付方式：<text>{{zh_pay_type(orderInfo.pay_type)}}</text></view> |
|||
<view>支付时间：<text>{{orderInfo.pay_time || '-'}}</text></view> |
|||
<view v-if="orderInfo.pay_type==0">微信交易号：<text>{{orderInfo.trade_no || ''}}</text></view> |
|||
<view v-if="orderInfo.pay_type==3">操作人：<text>{{orderInfo.end_bill_operator_name || ''}}</text></view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="td-box" v-if="orderInfo.pay_status == 4"> |
|||
<view class="tb-title">退款信息</view> |
|||
<view class="tb-line"> |
|||
<view>退款原因：<text>{{orderInfo.refund_reason || '-'}}</text></view> |
|||
<view>退款时间：<text>{{orderInfo.refund_time || '-'}}</text></view> |
|||
<view>退款单号：<text>{{orderInfo.refund_no || '-'}}</text></view> |
|||
</view> |
|||
</view> |
|||
<view class="td-btn" @click="isEndBill = true" v-if="orderInfo.pay_status == 0&&orderInfo.early_end_timing==false">结束计费</view> |
|||
<view class="td-btn" @click="completeBtn" v-if="orderInfo.pay_status == 0&&orderInfo.early_end_timing==true">完结订单</view> |
|||
|
|||
<!-- 结束计费弹框 --> |
|||
<end-billing-modal |
|||
v-if="isEndBill==true" |
|||
@close="isEndBill=false" |
|||
@timeEndBtn="timeEndBtn" |
|||
:orderInfo="orderInfo" |
|||
></end-billing-modal> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
import deviceServer from '../../../js/device_server'; |
|||
import deviceApi from '../../../js/device_api'; |
|||
import { mapState } from 'vuex'; |
|||
import end_billing_modal from '../../../../../components/end_billing_modal/end_billing_modal.vue'; |
|||
export default { |
|||
components: { |
|||
'end-billing-modal': end_billing_modal, |
|||
}, |
|||
props: { |
|||
orderInfo: { |
|||
type: Object, |
|||
default: ()=>({}) |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState(['brandInfo']), |
|||
zh_order_status(){ |
|||
// 订单状态 0计费中1已完成 |
|||
let { orderInfo } = this |
|||
return status =>{ |
|||
const _obj = { |
|||
'0': orderInfo.early_end_timing==true?'待支付':'计费中', |
|||
'1': '已完成', |
|||
'4': '已退款', |
|||
} |
|||
return _obj[`${status}`] || '-' |
|||
} |
|||
}, |
|||
zh_pay_type(){ |
|||
// 支付类型 0微信支付1支付宝支付2储值卡支付 |
|||
return status =>{ |
|||
const _obj = { |
|||
'0': '微信支付', |
|||
'1': '支付宝支付', |
|||
'2': '储值卡支付', |
|||
'3': '商家主动结束计费', |
|||
} |
|||
return _obj[`${status}`] || '-' |
|||
} |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
isEndBill: false, |
|||
} |
|||
}, |
|||
methods: { |
|||
completeBtn(){ |
|||
this.$emit('completeBtn'); |
|||
}, |
|||
|
|||
timeEndBtn(){ |
|||
this.$emit('refreshPage'); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" > |
|||
@import '~style/public.scss'; |
|||
.timing-details{ |
|||
margin-bottom: 24rpx; |
|||
.td-head{ |
|||
margin: 24rpx 24rpx 0rpx; |
|||
padding: 30rpx; |
|||
background-color: #FFF; |
|||
border-radius: 10rpx 10rpx 0px 0px; |
|||
.th-store{ |
|||
padding-bottom: 26rpx; |
|||
margin-bottom: 18rpx; |
|||
border-bottom: 2rpx solid #D8D8D8; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
>image{ |
|||
flex-shrink: 0; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
background-color: skyblue; |
|||
|
|||
} |
|||
>view{ |
|||
flex-grow: 1; |
|||
margin-left: 14rpx; |
|||
color: #333333; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
.th-line{ |
|||
margin-top: 8rpx; |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
line-height: 40rpx; |
|||
font-size: 28rpx; |
|||
&:first-child{ |
|||
color: #9A9A9D; |
|||
>text{ |
|||
color: #333333; |
|||
} |
|||
} |
|||
&:nth-child(2){ |
|||
>text{ |
|||
color: #9A9A9D; |
|||
} |
|||
.tl-active{ |
|||
color: #009874; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.td-box{ |
|||
margin: 24rpx 24rpx 0rpx; |
|||
padding: 30rpx; |
|||
background-color: #FFF; |
|||
border-radius: 10rpx; |
|||
.tb-title{ |
|||
color: #9A9A9D; |
|||
font-size: 28rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.tb-line{ |
|||
>view{ |
|||
line-height: 52rpx; |
|||
font-size: 28rpx; |
|||
color: #9A9A9D; |
|||
>text{ |
|||
color: #333333; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.tb-section{ |
|||
margin-top: 30rpx; |
|||
border-top: 2rpx solid #D8D8D8; |
|||
.ts-line{ |
|||
margin-top: 26rpx; |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
color: #333333; |
|||
&:first-child{ |
|||
font-size: 28rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
font-size: 24rpx; |
|||
margin-right: 8rpx; |
|||
} |
|||
} |
|||
} |
|||
.ts-total{ |
|||
margin-top: 22rpx; |
|||
@include centerFlex(flex-end); |
|||
>view{ |
|||
color: #333333; |
|||
font-size: 28rpx; |
|||
>text{ |
|||
color: #FF873D; |
|||
&:first-child{ |
|||
font-size: 28rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
font-size: 36rpx; |
|||
margin-right: 8rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.td-btn{ |
|||
height: 112rpx; |
|||
margin: 80rpx 24rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #009874; |
|||
color: #FFF; |
|||
font-size: 32rpx; |
|||
line-height: 112rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,379 @@ |
|||
<template> |
|||
<view class="timing-details"> |
|||
<view class="td-head"> |
|||
<view class="th-store"> |
|||
<image :src="orderInfo.stadium_logo || ''"></image> |
|||
<view>{{orderInfo.stadium_name || '-'}}</view> |
|||
</view> |
|||
<view class="th-line"> |
|||
<view>订单编号：<text>{{orderInfo.order_no || '-'}}</text></view> |
|||
<view><text :class="[orderInfo.pay_status == 0?'tl-active':'']">{{zh_order_status(orderInfo.pay_status)}}</text></view> |
|||
</view> |
|||
<view class="th-line"> |
|||
<view>创建时间：<text>{{orderInfo.model.created_at || '-'}}</text></view> |
|||
</view> |
|||
<view class="th-line"> |
|||
<view>用户昵称：<text>{{orderInfo.nickname || '-'}}</text></view> |
|||
</view> |
|||
</view> |
|||
<view class="td-box"> |
|||
<view class="tb-title">计时信息</view> |
|||
<view class="tb-line"> |
|||
<!-- 项目 场时有 人时没有 order_type: 1场时 2人时 --> |
|||
<view v-if="orderInfo.order_type==1">项目：<text>{{orderInfo.project_name || '-'}}({{orderInfo.venue_name || '-'}})</text></view> |
|||
<view>进场时间：<text>{{orderInfo.start_time || '-'}}</text></view> |
|||
<!-- 离场时间 已完成显示 --> |
|||
<view v-if="orderInfo.pay_status != 0">离场时间：<text>{{orderInfo.end_time || '-'}}</text></view> |
|||
<view>时长合计：<text>{{orderInfo.extension.duration || '-'}}</text></view> |
|||
</view> |
|||
<view class="tb-section" v-if="!(orderInfo.pay_status== 0&&orderInfo.early_end_timing==false)"> |
|||
<view class="ts-line"> |
|||
<view>金额小计</view> |
|||
<view>¥{{orderInfo.amount || 0}}</view> |
|||
</view> |
|||
<view class="ts-line"> |
|||
<view>积分抵扣</view> |
|||
<view>-¥{{orderInfo.deduction_amount ||0}}</view> |
|||
</view> |
|||
<view class="ts-line"> |
|||
<view>折扣金额</view> |
|||
<view>-¥{{orderInfo.discount_amount||0}}</view> |
|||
</view> |
|||
<view class="ts-line"> |
|||
<view>优惠券优惠</view> |
|||
<view>-¥{{orderInfo.coupons_amount || 0}}</view> |
|||
</view> |
|||
<view class="ts-total"> |
|||
<view>合计支付：<text>￥</text><text>{{orderInfo.pay_amount ||0}}</text></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="td-box" v-if="orderInfo.pay_status != 0"> |
|||
<view class="tb-title">支付信息</view> |
|||
<view class="tb-line"> |
|||
<view>支付方式：<text>{{zh_pay_type(orderInfo.pay_type)}}</text></view> |
|||
<view>支付时间：<text>{{orderInfo.pay_time || '-'}}</text></view> |
|||
<view v-if="orderInfo.pay_type==0">微信交易号：<text>{{orderInfo.trade_no || ''}}</text></view> |
|||
<view v-if="orderInfo.pay_type==3">操作人：<text>{{orderInfo.end_bill_operator_name || ''}}</text></view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<!-- 退款列表 --> |
|||
<view v-for="(e, i) in refundList" :key="i" style="padding: 24rpx 24rpx 0;"> |
|||
<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" |
|||
></order-refund-info> |
|||
</view> |
|||
|
|||
<view class="td-btn" @click="isEndBill = true" v-if="orderInfo.pay_status == 0&&orderInfo.early_end_timing==false">结束计费</view> |
|||
<view class="td-btn" @click="completeBtn" v-if="orderInfo.pay_status == 0&&orderInfo.early_end_timing==true">完结订单</view> |
|||
|
|||
<!-- 退款按钮拦 --> |
|||
<order-refund-fixed |
|||
:pay_amount="orderInfo.pay_amount || 0" |
|||
:refund_amount="orderInfo.refund_amount || 0" |
|||
:refund_times="(refundList&&refundList.length) || 0" |
|||
@click:button="refunndBtn" |
|||
></order-refund-fixed> |
|||
|
|||
<!-- 结束计费弹框 --> |
|||
<end-billing-modal |
|||
v-if="isEndBill==true" |
|||
@close="isEndBill=false" |
|||
@timeEndBtn="timeEndBtn" |
|||
:orderInfo="orderInfo" |
|||
></end-billing-modal> |
|||
<!-- 退款弹窗 --> |
|||
<order-refund-modal |
|||
ref="orderRefundModal" |
|||
></order-refund-modal> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
import { ORDER_API } from '../../js/api'; |
|||
import server from '../../js/server'; |
|||
import { mapState } from 'vuex'; |
|||
import end_billing_modal from '@/components/end_billing_modal/end_billing_modal.vue'; |
|||
import orderRefundFixed from '@/components/order_refund/fixed.vue' |
|||
import orderRefundModal from '@/components/order_refund/modal.vue'; |
|||
import orderRefundInfo from '@/components/order_refund/info.vue'; |
|||
export default { |
|||
components: { |
|||
'end-billing-modal': end_billing_modal, |
|||
'order-refund-fixed': orderRefundFixed, |
|||
'order-refund-modal': orderRefundModal, |
|||
'order-refund-info': orderRefundInfo |
|||
}, |
|||
computed: { |
|||
...mapState(['brandInfo']), |
|||
zh_order_status(){ |
|||
// 订单状态 0计费中1已完成 |
|||
let { orderInfo } = this |
|||
return status =>{ |
|||
const _obj = { |
|||
'0': orderInfo.early_end_timing==true?'待支付':'计费中', |
|||
'1': '已完成', |
|||
'4': '已退款', |
|||
} |
|||
return _obj[`${status}`] || '-' |
|||
} |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
isEndBill: false, |
|||
orderInfo: {}, |
|||
refundList: [], // 退款列表 |
|||
} |
|||
}, |
|||
onLoad(options){ |
|||
this.getOrderInfo({ |
|||
order_no: options?.order_no || '', |
|||
stadium_id: options?.stadium_id || '' |
|||
}) |
|||
this.getRefundTimes(options?.order_no || ''); |
|||
}, |
|||
methods: { |
|||
refunndBtn(){ |
|||
let { orderInfo, refundList } = this; |
|||
this.$refs.orderRefundModal.show({ |
|||
stadium_name: orderInfo?.stadium_name ?? '', |
|||
order_no: orderInfo?.order_no ?? '', |
|||
mobile: orderInfo?.mobile ?? '', |
|||
refundable_amount: orderInfo?.extension?.refundable_amount ?? 0, |
|||
refundable_integral: orderInfo?.extension?.refundable_integral ?? 0, |
|||
refund_times: refundList?.length || -1, |
|||
confirm: e => { |
|||
this.orderRefund({ |
|||
order_no: orderInfo?.order_no || '', |
|||
amount: e.refund_amount || 0, |
|||
integral: e.refund_integral || 0, |
|||
stadium_id: orderInfo?.stadium_id || '' |
|||
}) |
|||
} |
|||
}); |
|||
}, |
|||
orderRefund({ order_no = '', amount = 0, integral = 0, stadium_id = ''}){ |
|||
util.showLoad(); |
|||
server.get({ |
|||
url: ORDER_API.orderRefund, |
|||
data: { order_no, amount, integral }, |
|||
isDefaultGet: false |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad(); |
|||
if(res.data.code == 0){ |
|||
util.showNone(res.data.message || '操作成功！'); |
|||
}else{ |
|||
util.showNone(res.data.message || '操作失败！'); |
|||
} |
|||
}) |
|||
.catch(util.hideLoad) |
|||
.finally(_=>setTimeout(_=>{ |
|||
this.getOrderInfo({ order_no, stadium_id }); |
|||
this.getRefundTimes(order_no); |
|||
}, 1200)); |
|||
}, |
|||
async getRefundTimes(order_no){ |
|||
try{ |
|||
let _refundRes = await this.$store.dispatch('getOrderRefundList', order_no); |
|||
let _refundLs = _refundRes?.data?.data?.list || []; |
|||
this.refundList = _refundLs; |
|||
}catch(err){ |
|||
console.warn('getRefundTimes err', err); |
|||
} |
|||
}, |
|||
getOrderInfo({ order_no, stadium_id }){ |
|||
util.showLoad(); |
|||
server.get({ |
|||
url: ORDER_API.timeOrderDetail, |
|||
data: { order_no, stadium_id }, |
|||
failMsg: '加载失败！' |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad() |
|||
this.orderInfo = res || {} |
|||
}) |
|||
.catch(util.hideLoad) |
|||
}, |
|||
zh_pay_type: util.order_pay_type_txt, |
|||
completeBtn(){ |
|||
this.$emit('completeBtn'); |
|||
}, |
|||
|
|||
timeEndBtn(){ |
|||
let { orderInfo } = this; |
|||
this.getOrderInfo({ |
|||
order_no: orderInfo?.order_no || '', |
|||
stadium_id: orderInfo?.stadium_id || '' |
|||
}) |
|||
}, |
|||
// 计时订单-完结订单 |
|||
completeBtn(){ |
|||
let { orderInfo } = this |
|||
util.showModal({ |
|||
title: '提示', |
|||
content: '是否确认完结订单？', |
|||
showCancel: true, |
|||
success: modalRes=>{ |
|||
if(modalRes.confirm)this.timeOrderComplete({ |
|||
brand_id: orderInfo?.brand_id || '', |
|||
order_no: orderInfo?.order_no || '', |
|||
stadium_id: orderInfo?.stadium_id || '' |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
//计时订单完结 请求 |
|||
timeOrderComplete({ brand_id, order_no, stadium_id }){ |
|||
util.showLoad(); |
|||
server.get({ |
|||
url: ORDER_API.timeOrderComplete, //计时订单完结 |
|||
data: { brand_id, order_no }, |
|||
failMsg: '请求失败！' |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad(); |
|||
util.showNone('操作成功！'); |
|||
|
|||
setTimeout(_=>{ |
|||
this.getOrderInfo({ order_no, stadium_id }); |
|||
util.previousPageFunction({ |
|||
fnName: 'refreshList', |
|||
query: { isLoad: false}, |
|||
}); |
|||
}, 1200) |
|||
}) |
|||
.catch(util.hideLoad) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" > |
|||
.timing-details{ |
|||
margin-bottom: 24rpx; |
|||
.td-head{ |
|||
margin: 24rpx 24rpx 0rpx; |
|||
padding: 30rpx; |
|||
background-color: #FFF; |
|||
border-radius: 10rpx 10rpx 0px 0px; |
|||
.th-store{ |
|||
padding-bottom: 26rpx; |
|||
margin-bottom: 18rpx; |
|||
border-bottom: 2rpx solid #D8D8D8; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
>image{ |
|||
flex-shrink: 0; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
>view{ |
|||
flex-grow: 1; |
|||
margin-left: 14rpx; |
|||
color: #333333; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
.th-line{ |
|||
margin-top: 8rpx; |
|||
@include ctf(space-between); |
|||
>view{ |
|||
line-height: 40rpx; |
|||
font-size: 28rpx; |
|||
&:first-child{ |
|||
color: #9A9A9D; |
|||
>text{ |
|||
color: #333333; |
|||
} |
|||
} |
|||
&:nth-child(2){ |
|||
>text{ |
|||
color: #9A9A9D; |
|||
} |
|||
.tl-active{ |
|||
color: $mColor; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.td-box{ |
|||
margin: 24rpx 24rpx 0rpx; |
|||
padding: 30rpx; |
|||
background-color: #FFF; |
|||
border-radius: 10rpx; |
|||
.tb-title{ |
|||
color: #9A9A9D; |
|||
font-size: 28rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.tb-line{ |
|||
>view{ |
|||
line-height: 52rpx; |
|||
font-size: 28rpx; |
|||
color: #9A9A9D; |
|||
>text{ |
|||
color: #333333; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.tb-section{ |
|||
margin-top: 30rpx; |
|||
border-top: 2rpx solid #D8D8D8; |
|||
.ts-line{ |
|||
margin-top: 26rpx; |
|||
@include ctf(space-between); |
|||
>view{ |
|||
color: #333333; |
|||
&:first-child{ |
|||
font-size: 28rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
font-size: 24rpx; |
|||
margin-right: 8rpx; |
|||
} |
|||
} |
|||
} |
|||
.ts-total{ |
|||
margin-top: 22rpx; |
|||
@include ctf(flex-end); |
|||
>view{ |
|||
color: #333333; |
|||
font-size: 28rpx; |
|||
>text{ |
|||
color: #FF873D; |
|||
&:first-child{ |
|||
font-size: 28rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
font-size: 36rpx; |
|||
margin-right: 8rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.td-btn{ |
|||
height: 112rpx; |
|||
margin: 80rpx 24rpx 10upx; |
|||
border-radius: 10rpx; |
|||
background-color: $mColor; |
|||
color: #FFF; |
|||
font-size: 32rpx; |
|||
line-height: 112rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue