You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
379 lines
11 KiB
379 lines
11 KiB
<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>
|