28 changed files with 33637 additions and 11927 deletions
-
21914package-lock.json
-
1package.json
-
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
-
2src/js/api.js
-
6src/pages.json
-
2src/pages/site/confirm/confirm.vue
-
8src/store/actions.js
-
3src/store/index.js
-
173src/subpackage/device/components/brand_change_modal.vue
-
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
-
56src/subpackage/device/pages/index/index.vue
-
212src/subpackage/device/pages/order_details/order_details.vue
-
6src/subpackage/order/js/api.js
-
110src/subpackage/order/pages/curriculum/detail/detail.vue
-
430src/subpackage/order/pages/retail/detail/detail.vue
-
83src/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
-
21311yarn.lock
21914
package-lock.json
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -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> |
|||
@ -0,0 +1,173 @@ |
|||
<template> |
|||
<view class="brand-change-modal"> |
|||
<view class="bcm-mask" v-show="isShow"> |
|||
<view class="bm-content"> |
|||
<view class="bc-title">品牌切换</view> |
|||
<input type="text" class="bc-ipt" v-model="searchTxt" placeholder="模糊搜索..." /> |
|||
<view class="bc-tip">当前选中：{{ curSelected.name || '-' }}</view> |
|||
<view class="bc-tip">Tip：控件有bug，当前选中与下方不匹配时，滑动纠正</view> |
|||
<picker-view class="bc-picker-view" immediate-change @change="pickerChange"> |
|||
<picker-view-column> |
|||
<view class="bpv-item" v-for="(e, i) in showBrandList" :key="i">{{ e.name || '-' }}</view> |
|||
</picker-view-column> |
|||
</picker-view> |
|||
|
|||
<view class="bc-btns"> |
|||
<view class="bb-item" @click="hide">取消</view> |
|||
<view class="bb-item" @click="confirm">确认</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
import deviceServer from '../js/device_server'; |
|||
import deviceApi from '../js/device_api'; |
|||
import PinyinEngine from "pinyin-engine"; |
|||
export default { |
|||
data(){ |
|||
return { |
|||
isShow: false, |
|||
searchTxt: '', |
|||
brandList: [], |
|||
initOptions: {}, |
|||
pickerIdx: 0, |
|||
pyEngine: null, |
|||
} |
|||
}, |
|||
computed: { |
|||
showBrandList(){ |
|||
let { brandList, searchTxt, pyEngine } = this; |
|||
|
|||
if(searchTxt&&pyEngine?.query){ |
|||
let _ls = pyEngine.query(searchTxt); |
|||
return _ls || []; |
|||
} |
|||
return brandList.filter(item=>{ |
|||
return item.name.includes(searchTxt); |
|||
}); |
|||
}, |
|||
curSelected(){ |
|||
let { pickerIdx, showBrandList } = this; |
|||
return showBrandList?.[pickerIdx] || {}; |
|||
} |
|||
}, |
|||
mounted(){ |
|||
// this.getBrandList(); |
|||
}, |
|||
methods: { |
|||
confirm(){ |
|||
let { pickerIdx, showBrandList, initOptions } = this; |
|||
console.log('pickerIdx', pickerIdx); |
|||
console.log('showBrandList', showBrandList); |
|||
this.hide(); |
|||
if(showBrandList?.length <= 0) return; |
|||
let _brand = showBrandList[pickerIdx]; |
|||
initOptions?.success?.(_brand); |
|||
this.$emit('click:confirm', _brand); |
|||
}, |
|||
pickerChange(e){ |
|||
this.pickerIdx = e?.detail?.value?.[0]; |
|||
}, |
|||
async init(options){ |
|||
if(this.brandList?.length <= 0) await this.getBrandList(); |
|||
this.initOptions = options; |
|||
this.show(); |
|||
}, |
|||
show(){ |
|||
this.isShow = true; |
|||
}, |
|||
hide(){ |
|||
this.isShow = false; |
|||
}, |
|||
// 获取品牌列表 |
|||
getBrandList(){ |
|||
util.showLoad(); |
|||
return deviceServer.get({ |
|||
url: deviceApi.brandList, |
|||
data: {}, |
|||
failMsg: '加载品牌列表失败！' |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad(); |
|||
let _ls = res || []; |
|||
this.brandList = _ls; |
|||
|
|||
if(_ls?.length > 0&&PinyinEngine){ |
|||
this.pyEngine = new PinyinEngine(_ls, ['name']); |
|||
} |
|||
}) |
|||
.catch(util.hideLoad) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.bcm-mask{ |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background-color: rgba(0, 0, 0, 0.5); |
|||
z-index: 10; |
|||
.bm-content{ |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
padding: 40upx; |
|||
width: 620upx; |
|||
border-radius: 10px; |
|||
background-color: #fff; |
|||
} |
|||
.bc-title{ |
|||
text-align: center; |
|||
@include flcw(32upx, 44upx, #1a1a1a, 500); |
|||
} |
|||
.bc-tip{ |
|||
margin-top: 10upx; |
|||
@include flcw(20upx, 30upx, #9A9A9D); |
|||
} |
|||
.bc-ipt{ |
|||
box-sizing: border-box; |
|||
margin-top: 38upx; |
|||
padding: 0 20upx; |
|||
height: 88upx; |
|||
border-radius: 10upx; |
|||
border: 2upx solid #d8d8d8; |
|||
@include flcw(28upx, 40upx, #1a1a1a, 500); |
|||
} |
|||
.bc-picker-view{ |
|||
margin-top: 20upx; |
|||
width: 100%; |
|||
height: 300upx; |
|||
.bpv-item{ |
|||
font-size: 28upx; |
|||
color: #1a1a1a; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
} |
|||
} |
|||
.bc-btns{ |
|||
margin-top: 30upx; |
|||
@include ctf(space-between); |
|||
.bb-item{ |
|||
width: 240upx; |
|||
height: 88upx; |
|||
border-radius: 10upx; |
|||
border: 2upx solid $mColor; |
|||
text-align: center; |
|||
@include flcw(32upx, 84upx, $mColor, 500); |
|||
&+.bb-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> |
|||
21311
yarn.lock
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save
Reference in new issue