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
-
108src/subpackage/order/pages/curriculum/detail/detail.vue
-
130src/subpackage/order/pages/retail/detail/detail.vue
-
81src/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