402 lines
11 KiB
Vue
402 lines
11 KiB
Vue
<!-- 用户编辑弹窗 -->
|
|
<template>
|
|
<ele-modal
|
|
:width="`80%`"
|
|
:visible="visible"
|
|
:confirm-loading="loading"
|
|
:maxable="maxAble"
|
|
:title="isUpdate ? '编辑订单' : '订单详情'"
|
|
:body-style="{ paddingBottom: '8px', background: '#f3f3f3' }"
|
|
@update:visible="updateVisible"
|
|
:maskClosable="false"
|
|
:footer="null"
|
|
@ok="save"
|
|
>
|
|
<a-card class="order-card" :bordered="false">
|
|
<a-descriptions title="基本信息" :column="3">
|
|
<a-descriptions-item
|
|
label="订单号"
|
|
:labelStyle="{ width: '90px', color: '#808080' }"
|
|
>
|
|
{{ form.orderId }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item
|
|
label="订单编号"
|
|
:labelStyle="{ width: '90px', color: '#808080' }"
|
|
>
|
|
{{ form.orderNo }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item
|
|
label="订单状态"
|
|
:labelStyle="{ width: '90px', color: '#808080' }"
|
|
>
|
|
<a-tag v-if="form.orderStatus == 0">未使用</a-tag>
|
|
<a-tag v-if="form.orderStatus == 1">已付款</a-tag>
|
|
<a-tag v-if="form.orderStatus == 3">已取消</a-tag>
|
|
<a-tag v-if="form.orderStatus == 4">退款申请中</a-tag>
|
|
<a-tag v-if="form.orderStatus == 5">退款被拒绝</a-tag>
|
|
<a-tag v-if="form.orderStatus == 6">退款成功</a-tag>
|
|
<a-tag v-if="form.orderStatus == 7">客户端申请退款</a-tag>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item
|
|
label="买家信息"
|
|
:labelStyle="{ width: '90px', color: '#808080' }"
|
|
>
|
|
{{ form.realName }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item
|
|
label="手机号码"
|
|
:labelStyle="{ width: '90px', color: '#808080' }"
|
|
>
|
|
{{ form.phone }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item
|
|
label="交易流水号"
|
|
:labelStyle="{ width: '90px', color: '#808080' }"
|
|
>
|
|
{{ form.transactionId }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item
|
|
label="订单总金额"
|
|
:labelStyle="{ width: '90px', color: '#808080' }"
|
|
>
|
|
￥{{ form.totalPrice }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item
|
|
label="实付金额"
|
|
:labelStyle="{ width: '90px', color: '#808080' }"
|
|
>
|
|
￥{{ form.payPrice }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item
|
|
label="减少金额"
|
|
:labelStyle="{ width: '90px', color: '#808080' }"
|
|
>
|
|
￥{{ form.reducePrice }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item
|
|
label="支付方式"
|
|
:labelStyle="{ width: '90px', color: '#808080' }"
|
|
>
|
|
<template v-if="form.payStatus == 1">
|
|
<a-tag v-if="form.payType == 0">余额支付</a-tag>
|
|
<a-tag v-if="form.payType == 1">微信支付</a-tag>
|
|
<a-tag v-if="form.payType == 2">积分</a-tag>
|
|
<a-tag v-if="form.payType == 3">支付宝</a-tag>
|
|
<a-tag v-if="form.payType == 4">现金</a-tag>
|
|
<a-tag v-if="form.payType == 5">POS机</a-tag>
|
|
<a-tag v-if="form.payType == 6">VIP月卡</a-tag>
|
|
<a-tag v-if="form.payType == 7">formVIP年卡</a-tag>
|
|
<a-tag v-if="form.payType == 8">formVIP次卡</a-tag>
|
|
<a-tag v-if="form.payType == 9">formIC月卡</a-tag>
|
|
<a-tag v-if="form.payType == 10">formIC年卡</a-tag>
|
|
<a-tag v-if="form.payType == 11">formIC次卡</a-tag>
|
|
<a-tag v-if="form.payType == 12">form免费</a-tag>
|
|
<a-tag v-if="form.payType == 13">formVIP充值卡</a-tag>
|
|
<a-tag v-if="form.payType == 14">formIC充值卡</a-tag>
|
|
<a-tag v-if="form.payType == 15">form积分支付</a-tag>
|
|
<a-tag v-if="form.payType == 16">formVIP季卡</a-tag>
|
|
<a-tag v-if="form.payType == 17">formIC季卡</a-tag>
|
|
</template>
|
|
<template v-else>
|
|
<span></span>
|
|
</template>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item
|
|
label="支付状态"
|
|
:labelStyle="{ width: '90px', color: '#808080' }"
|
|
>
|
|
<a-tag v-if="form.payStatus == 1" color="green"
|
|
><CheckOutlined class="tag-icon" />已付款</a-tag
|
|
>
|
|
<a-tag v-if="form.payStatus == 0" color="error"
|
|
><CloseOutlined class="tag-icon" />未付款</a-tag
|
|
>
|
|
<a-tag v-if="form.payStatus == 3" color="cyan"
|
|
><CoffeeOutlined class="tag-icon" />未付款,占场中</a-tag
|
|
>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item
|
|
label="付款时间"
|
|
:labelStyle="{ width: '90px', color: '#808080' }"
|
|
>
|
|
{{ form.payTime }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item
|
|
label="下单时间"
|
|
:labelStyle="{ width: '90px', color: '#808080' }"
|
|
>
|
|
{{ form.createTime }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item
|
|
label="信息备注"
|
|
:labelStyle="{ width: '90px', color: '#808080' }"
|
|
>
|
|
{{ form.comments }}
|
|
</a-descriptions-item>
|
|
</a-descriptions>
|
|
</a-card>
|
|
<a-card class="order-card" :bordered="false">
|
|
<a-spin :spinning="loading">
|
|
<a-table
|
|
:data-source="form.orderInfoList"
|
|
:columns="columns"
|
|
:pagination="false"
|
|
/>
|
|
</a-spin>
|
|
</a-card>
|
|
</ele-modal>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, reactive, watch } from 'vue';
|
|
import { Form, message } from "ant-design-vue";
|
|
import { assignObject } from 'ele-admin-pro';
|
|
import { Order } from '@/api/shop/order/model';
|
|
import { ColumnItem } from 'ele-admin-pro/es/ele-pro-table/types';
|
|
import {
|
|
CheckOutlined,
|
|
CloseOutlined,
|
|
CoffeeOutlined
|
|
} from '@ant-design/icons-vue';
|
|
import { pageOrderInfo } from '@/api/shop/orderInfo';
|
|
|
|
const useForm = Form.useForm;
|
|
|
|
const props = defineProps<{
|
|
// 弹窗是否打开
|
|
visible: boolean;
|
|
// 修改回显的数据
|
|
data?: Order | null;
|
|
}>();
|
|
|
|
export interface step {
|
|
title?: String | undefined;
|
|
subTitle?: String | undefined;
|
|
description?: String | undefined;
|
|
}
|
|
|
|
// 是否是修改
|
|
const isUpdate = ref(false);
|
|
// 是否显示最大化切换按钮
|
|
const maxAble = ref(true);
|
|
|
|
// 步骤条
|
|
const steps = ref<step[]>([
|
|
{
|
|
title: '报餐',
|
|
description: undefined
|
|
},
|
|
{
|
|
title: '付款',
|
|
description: undefined
|
|
},
|
|
{
|
|
title: '发餐',
|
|
description: undefined
|
|
},
|
|
{
|
|
title: '取餐',
|
|
description: undefined
|
|
},
|
|
{
|
|
title: '完成',
|
|
description: undefined
|
|
}
|
|
]);
|
|
const active = ref(2);
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'done'): void;
|
|
(e: 'update:visible', visible: boolean): void;
|
|
}>();
|
|
|
|
// 订单信息
|
|
const form = reactive<Order>({
|
|
orderId: undefined,
|
|
orderNo: undefined,
|
|
transactionId: undefined,
|
|
refundOrder: undefined,
|
|
merchantId: undefined,
|
|
couponId: undefined,
|
|
cardId: undefined,
|
|
adminId: undefined,
|
|
confirmId: undefined,
|
|
icCard: undefined,
|
|
realName: undefined,
|
|
phone: undefined,
|
|
totalPrice: undefined,
|
|
reducePrice: undefined,
|
|
payPrice: undefined,
|
|
price: undefined,
|
|
money: undefined,
|
|
refundMoney: undefined,
|
|
coachPrice: undefined,
|
|
coachId: undefined,
|
|
payType: undefined,
|
|
payStatus: undefined,
|
|
orderStatus: undefined,
|
|
couponType: undefined,
|
|
couponDesc: undefined,
|
|
qrcode: undefined,
|
|
returnNum: undefined,
|
|
returnMoney: undefined,
|
|
startTime: undefined,
|
|
isInvoice: undefined,
|
|
payTime: undefined,
|
|
refundTime: undefined,
|
|
refundApplyTime: undefined,
|
|
checkBill: undefined,
|
|
isSettled: undefined,
|
|
version: undefined,
|
|
userId: undefined,
|
|
deleted: undefined,
|
|
tenantId: undefined,
|
|
updateTime: undefined,
|
|
createTime: undefined,
|
|
status: 0,
|
|
comments: '',
|
|
sortNumber: 100,
|
|
orderInfoList: []
|
|
});
|
|
|
|
// 请求状态
|
|
const loading = ref(true);
|
|
|
|
const { resetFields } = useForm(form);
|
|
|
|
/* 更新visible */
|
|
const updateVisible = (value: boolean) => {
|
|
emit('update:visible', value);
|
|
};
|
|
|
|
const columns = ref<ColumnItem[]>([
|
|
{
|
|
title: '场馆名称',
|
|
dataIndex: 'merchantName',
|
|
key: 'merchantName'
|
|
},
|
|
{
|
|
title: '场地',
|
|
dataIndex: 'fieldName'
|
|
},
|
|
{
|
|
title: '预定信息',
|
|
dataIndex: 'comments',
|
|
key: 'comments'
|
|
},
|
|
{
|
|
title: '金额',
|
|
dataIndex: 'price',
|
|
customRender: ({ text }) => '￥' + text
|
|
}
|
|
]);
|
|
|
|
/* 制作步骤条 */
|
|
const loadSteps = (order) => {
|
|
steps.value = [];
|
|
steps.value.push({
|
|
title: '下单'
|
|
});
|
|
steps.value.push({
|
|
title: '付款'
|
|
});
|
|
steps.value.push({
|
|
title: '发货'
|
|
});
|
|
steps.value.push({
|
|
title: '收货'
|
|
});
|
|
steps.value.push({
|
|
title: '完成'
|
|
});
|
|
|
|
// 下单
|
|
if (order.payStatus == 10) {
|
|
active.value = 0;
|
|
steps.value[0].description = order.createTime;
|
|
}
|
|
// 付款
|
|
if (order.payStatus == 20) {
|
|
active.value = 1;
|
|
steps.value[0].description = order.createTime;
|
|
steps.value[1].description = order.payTime;
|
|
}
|
|
// 发货
|
|
if (order.payStatus == 20 && order.deliveryStatus == 20) {
|
|
active.value = 2;
|
|
steps.value[0].description = order.createTime;
|
|
steps.value[1].description = order.payTime;
|
|
steps.value[2].description = order.deliveryTime;
|
|
}
|
|
// 收货
|
|
if (order.payStatus == 20 && order.receiptStatus == 20) {
|
|
active.value = 3;
|
|
steps.value[0].description = order.createTime;
|
|
steps.value[1].description = order.payTime;
|
|
steps.value[2].description = order.deliveryTime;
|
|
steps.value[3].description = order.receiptTime;
|
|
}
|
|
// 完成
|
|
if (order.payStatus == 20 && order.orderStatus == 30) {
|
|
active.value = 4;
|
|
steps.value[0].description = order.createTime;
|
|
steps.value[1].description = order.payTime;
|
|
steps.value[2].description = order.deliveryTime;
|
|
steps.value[3].description = order.receiptTime;
|
|
}
|
|
// 已取消
|
|
if (order.orderStatus == 20) {
|
|
active.value = 4;
|
|
}
|
|
};
|
|
|
|
// const getOrderInfo = () => {
|
|
// const orderId = props.data?.orderId;
|
|
// listOrderInfo({ orderId }).then((data) => {
|
|
// orderInfo.value = data.filter((d) => d.totalNum > 0);
|
|
// });
|
|
// };
|
|
|
|
/* 保存编辑 */
|
|
const save = () => {};
|
|
|
|
watch(
|
|
() => props.visible,
|
|
(visible) => {
|
|
if (visible) {
|
|
if (props.data) {
|
|
loading.value = true;
|
|
assignObject(form, props.data);
|
|
pageOrderInfo({ orderId: form.orderId }).then((res) => {
|
|
form.orderInfoList = res?.list;
|
|
loading.value = false;
|
|
});
|
|
loadSteps(props.data);
|
|
}
|
|
} else {
|
|
resetFields();
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.order-card {
|
|
margin-bottom: 20px;
|
|
}
|
|
.ant-form-item {
|
|
margin-bottom: 5px;
|
|
}
|
|
.order-info {
|
|
display: flex;
|
|
.info {
|
|
padding-left: 5px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
.tag-icon {
|
|
padding-right: 6px;
|
|
}
|
|
</style>
|