5 changed files with 1334 additions and 7 deletions
@ -0,0 +1,249 @@ |
|||
<!-- 编辑弹窗 --> |
|||
<template> |
|||
<ele-modal |
|||
:width="800" |
|||
:visible="visible" |
|||
:maskClosable="false" |
|||
:maxable="maxable" |
|||
:title="isUpdate ? '编辑捐款记录' : '添加捐款记录'" |
|||
:body-style="{ paddingBottom: '28px' }" |
|||
@update:visible="updateVisible" |
|||
@ok="save" |
|||
> |
|||
<a-form |
|||
ref="formRef" |
|||
:model="form" |
|||
:rules="rules" |
|||
:label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }" |
|||
:wrapper-col=" |
|||
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' } |
|||
" |
|||
> |
|||
<a-form-item label="年龄" name="age"> |
|||
<a-input |
|||
allow-clear |
|||
placeholder="请输入年龄" |
|||
v-model:value="form.age" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="姓名" name="name"> |
|||
<a-input |
|||
allow-clear |
|||
placeholder="请输入姓名" |
|||
v-model:value="form.name" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="性别 1男 2女" name="sex"> |
|||
<a-input |
|||
allow-clear |
|||
placeholder="请输入性别 1男 2女" |
|||
v-model:value="form.sex" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="手机号码" name="phone"> |
|||
<a-input |
|||
allow-clear |
|||
placeholder="请输入手机号码" |
|||
v-model:value="form.phone" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="班级" name="className"> |
|||
<a-input |
|||
allow-clear |
|||
placeholder="请输入班级" |
|||
v-model:value="form.className" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="年级" name="gradeName"> |
|||
<a-input |
|||
allow-clear |
|||
placeholder="请输入年级" |
|||
v-model:value="form.gradeName" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="居住地址" name="address"> |
|||
<a-input |
|||
allow-clear |
|||
placeholder="请输入居住地址" |
|||
v-model:value="form.address" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="工作单位" name="workUnit"> |
|||
<a-input |
|||
allow-clear |
|||
placeholder="请输入工作单位" |
|||
v-model:value="form.workUnit" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="职务" name="position"> |
|||
<a-input |
|||
allow-clear |
|||
placeholder="请输入职务" |
|||
v-model:value="form.position" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="捐赠证书" name="certificate"> |
|||
<a-input |
|||
allow-clear |
|||
placeholder="请输入捐赠证书" |
|||
v-model:value="form.certificate" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="排序(数字越小越靠前)" name="sortNumber"> |
|||
<a-input-number |
|||
:min="0" |
|||
:max="9999" |
|||
class="ele-fluid" |
|||
placeholder="请输入排序号" |
|||
v-model:value="form.sortNumber" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="备注" name="comments"> |
|||
<a-textarea |
|||
:rows="4" |
|||
:maxlength="200" |
|||
placeholder="请输入描述" |
|||
v-model:value="form.comments" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="状态" name="status"> |
|||
<a-radio-group v-model:value="form.status"> |
|||
<a-radio :value="0">显示</a-radio> |
|||
<a-radio :value="1">隐藏</a-radio> |
|||
</a-radio-group> |
|||
</a-form-item> |
|||
</a-form> |
|||
</ele-modal> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, reactive, watch } from 'vue'; |
|||
import { Form, message } from 'ant-design-vue'; |
|||
import { assignObject, uuid } from 'ele-admin-pro'; |
|||
import { addBszxPay, updateBszxPay } from '@/api/bszx/bszxPay'; |
|||
import { BszxPay } from '@/api/bszx/bszxPay/model'; |
|||
import { useThemeStore } from '@/store/modules/theme'; |
|||
import { storeToRefs } from 'pinia'; |
|||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types'; |
|||
import { FormInstance } from 'ant-design-vue/es/form'; |
|||
import { FileRecord } from '@/api/system/file/model'; |
|||
|
|||
// 是否是修改 |
|||
const isUpdate = ref(false); |
|||
const useForm = Form.useForm; |
|||
// 是否开启响应式布局 |
|||
const themeStore = useThemeStore(); |
|||
const { styleResponsive } = storeToRefs(themeStore); |
|||
|
|||
const props = defineProps<{ |
|||
// 弹窗是否打开 |
|||
visible: boolean; |
|||
// 修改回显的数据 |
|||
data?: BszxPay | null; |
|||
}>(); |
|||
|
|||
const emit = defineEmits<{ |
|||
(e: 'done'): void; |
|||
(e: 'update:visible', visible: boolean): void; |
|||
}>(); |
|||
|
|||
// 提交状态 |
|||
const loading = ref(false); |
|||
// 是否显示最大化切换按钮 |
|||
const maxable = ref(true); |
|||
// 表格选中数据 |
|||
const formRef = ref<FormInstance | null>(null); |
|||
const images = ref<ItemType[]>([]); |
|||
|
|||
// 用户信息 |
|||
const form = reactive<BszxPay>({ |
|||
id: undefined, |
|||
age: undefined, |
|||
name: undefined, |
|||
sex: undefined, |
|||
phone: undefined, |
|||
className: undefined, |
|||
gradeName: undefined, |
|||
address: undefined, |
|||
workUnit: undefined, |
|||
position: undefined, |
|||
number: undefined, |
|||
extra: undefined, |
|||
dateTime: undefined, |
|||
certificate: undefined, |
|||
formData: undefined, |
|||
formId: undefined, |
|||
userId: undefined, |
|||
comments: undefined, |
|||
status: undefined, |
|||
deleted: undefined, |
|||
tenantId: undefined, |
|||
createTime: undefined, |
|||
sortNumber: 100 |
|||
}); |
|||
|
|||
/* 更新visible */ |
|||
const updateVisible = (value: boolean) => { |
|||
emit('update:visible', value); |
|||
}; |
|||
|
|||
// 表单验证规则 |
|||
const rules = reactive({ |
|||
appBszxPayName: [ |
|||
{ |
|||
required: true, |
|||
type: 'string', |
|||
message: '请填写应用-百色中学-捐款记录名称', |
|||
trigger: 'blur' |
|||
} |
|||
] |
|||
}); |
|||
|
|||
const { resetFields } = useForm(form, rules); |
|||
|
|||
/* 保存编辑 */ |
|||
const save = () => { |
|||
if (!formRef.value) { |
|||
return; |
|||
} |
|||
formRef.value |
|||
.validate() |
|||
.then(() => { |
|||
loading.value = true; |
|||
const formData = { |
|||
...form |
|||
}; |
|||
const saveOrUpdate = isUpdate.value ? updateBszxPay : addBszxPay; |
|||
saveOrUpdate(formData) |
|||
.then((msg) => { |
|||
loading.value = false; |
|||
message.success(msg); |
|||
updateVisible(false); |
|||
emit('done'); |
|||
}) |
|||
.catch((e) => { |
|||
loading.value = false; |
|||
message.error(e.message); |
|||
}); |
|||
}) |
|||
.catch(() => {}); |
|||
}; |
|||
|
|||
watch( |
|||
() => props.visible, |
|||
(visible) => { |
|||
if (visible) { |
|||
images.value = []; |
|||
if (props.data) { |
|||
assignObject(form, props.data); |
|||
isUpdate.value = true; |
|||
} else { |
|||
isUpdate.value = false; |
|||
} |
|||
} else { |
|||
resetFields(); |
|||
} |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
</script> |
@ -0,0 +1,566 @@ |
|||
<!-- 用户编辑弹窗 --> |
|||
<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 style="margin-bottom: 20px" :bordered="false"> |
|||
<a-descriptions :column="3"> |
|||
<!-- 第一排--> |
|||
<a-descriptions-item |
|||
label="订单编号" |
|||
span="3" |
|||
:labelStyle="{ width: '90px', color: '#808080' }" |
|||
> |
|||
<span @click="copyText(form.orderNo)">{{ form.orderNo }}</span> |
|||
</a-descriptions-item> |
|||
<!-- 第二排--> |
|||
<a-descriptions-item |
|||
label="买家信息" |
|||
:labelStyle="{ width: '90px', color: '#808080' }" |
|||
> |
|||
<a-space class="flex items-center"> |
|||
<a-avatar :src="form.avatar" size="small"/> |
|||
{{ form.realName }} |
|||
</a-space> |
|||
</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' }" |
|||
> |
|||
<a-tag v-if="form.orderStatus === 0">未完成</a-tag> |
|||
<a-tag v-if="form.orderStatus === 1" color="green">已完成</a-tag> |
|||
<a-tag v-if="form.orderStatus === 2" color="red">已取消</a-tag> |
|||
<a-tag v-if="form.orderStatus === 3" color="red">取消中</a-tag> |
|||
<a-tag v-if="form.orderStatus === 4" color="red">退款申请中</a-tag> |
|||
<a-tag v-if="form.orderStatus === 5" color="red">退款被拒绝</a-tag> |
|||
<a-tag v-if="form.orderStatus === 6" color="orange">退款成功</a-tag> |
|||
<a-tag v-if="form.orderStatus === 7" color="pink">客户端申请退款</a-tag> |
|||
</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.payPrice }} |
|||
</a-descriptions-item> |
|||
<a-descriptions-item |
|||
label="支付状态" |
|||
:labelStyle="{ width: '90px', color: '#808080' }" |
|||
> |
|||
<a-tag v-if="form.payStatus == 1" color="green">已付款</a-tag> |
|||
<a-tag v-if="form.payStatus == 0">未付款</a-tag> |
|||
<a-tag v-if="form.payStatus == 3">未付款,占场中</a-tag> |
|||
</a-descriptions-item> |
|||
<!-- 第四排--> |
|||
<a-descriptions-item |
|||
label="收货地址" |
|||
:labelStyle="{ width: '90px', color: '#808080' }" |
|||
> |
|||
{{ form.address }} |
|||
</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' }" |
|||
> |
|||
<a-tag v-if="form.deliveryStatus == 10">未核销</a-tag> |
|||
<a-tag v-if="form.deliveryStatus == 20" color="green">已核销</a-tag> |
|||
<a-tag v-if="form.deliveryStatus == 30" color="bule">部分核销</a-tag> |
|||
</a-descriptions-item> |
|||
<!-- 第五排--> |
|||
<a-descriptions-item |
|||
label="备注信息" |
|||
:labelStyle="{ width: '90px', color: '#808080' }" |
|||
> |
|||
{{ form.comments }} |
|||
</a-descriptions-item> |
|||
<a-descriptions-item |
|||
label="支付方式" |
|||
:labelStyle="{ width: '90px', color: '#808080' }" |
|||
> |
|||
<a-tooltip :title="`支付时间:${form.payTime || ''}`"> |
|||
<template v-if="form.payStatus == 1"> |
|||
<a-tag v-if="form.payType == 0">余额支付</a-tag> |
|||
<a-tag v-if="form.payType == 1"> |
|||
<WechatOutlined class="tag-icon"/> |
|||
微信支付 |
|||
</a-tag> |
|||
<a-tag v-if="form.payType == 2">积分</a-tag> |
|||
<a-tag v-if="form.payType == 3"> |
|||
<AlipayCircleOutlined class="tag-icon"/> |
|||
支付宝 |
|||
</a-tag> |
|||
<a-tag v-if="form.payType == 4"> |
|||
<IdcardOutlined class="tag-icon"/> |
|||
现金 |
|||
</a-tag> |
|||
<a-tag v-if="form.payType == 5"> |
|||
<IdcardOutlined class="tag-icon"/> |
|||
POS机 |
|||
</a-tag> |
|||
<a-tag v-if="form.payType == 6"> |
|||
<IdcardOutlined class="tag-icon"/> |
|||
VIP月卡 |
|||
</a-tag> |
|||
<a-tag v-if="form.payType == 7"> |
|||
<IdcardOutlined class="tag-icon"/> |
|||
VIP年卡 |
|||
</a-tag> |
|||
<a-tag v-if="form.payType == 8"> |
|||
<IdcardOutlined class="tag-icon"/> |
|||
VIP次卡 |
|||
</a-tag> |
|||
<a-tag v-if="form.payType == 9"> |
|||
<IdcardOutlined class="tag-icon"/> |
|||
IC月卡 |
|||
</a-tag> |
|||
<a-tag v-if="form.payType == 10"> |
|||
<IdcardOutlined class="tag-icon"/> |
|||
IC年卡 |
|||
</a-tag> |
|||
<a-tag v-if="form.payType == 11"> |
|||
<IdcardOutlined class="tag-icon"/> |
|||
IC次卡 |
|||
</a-tag> |
|||
<a-tag v-if="form.payType == 12"> |
|||
<IdcardOutlined class="tag-icon"/> |
|||
免费 |
|||
</a-tag> |
|||
<a-tag v-if="form.payType == 13"> |
|||
<IdcardOutlined class="tag-icon"/> |
|||
VIP充值卡 |
|||
</a-tag> |
|||
<a-tag v-if="form.payType == 14"> |
|||
<IdcardOutlined class="tag-icon"/> |
|||
IC充值卡 |
|||
</a-tag> |
|||
<a-tag v-if="form.payType == 15"> |
|||
<IdcardOutlined class="tag-icon"/> |
|||
积分支付 |
|||
</a-tag> |
|||
<a-tag v-if="form.payType == 16"> |
|||
<IdcardOutlined class="tag-icon"/> |
|||
VIP季卡 |
|||
</a-tag> |
|||
<a-tag v-if="form.payType == 17"> |
|||
<IdcardOutlined class="tag-icon"/> |
|||
IC季卡 |
|||
</a-tag> |
|||
</template> |
|||
</a-tooltip> |
|||
</a-descriptions-item> |
|||
<a-descriptions-item |
|||
label="开票状态" |
|||
:labelStyle="{ width: '90px', color: '#808080' }" |
|||
> |
|||
<a-tag v-if="form.isInvoice == 0">未开具</a-tag> |
|||
<a-tag v-if="form.isInvoice == 1" color="green">已开具</a-tag> |
|||
<a-tag v-if="form.isInvoice == 2" color="blue">不能开具</a-tag> |
|||
</a-descriptions-item> |
|||
<!-- 第六排--> |
|||
<a-descriptions-item |
|||
label="下单时间" |
|||
:labelStyle="{ width: '90px', color: '#808080' }" |
|||
> |
|||
{{ toDateString(form.createTime, 'yyyy-MM-dd HH:mm') }} |
|||
</a-descriptions-item> |
|||
<a-descriptions-item |
|||
label="交易流水号" |
|||
:labelStyle="{ width: '90px', color: '#808080' }" |
|||
> |
|||
<a-tooltip :title="form.payTime">{{ form.transactionId }}</a-tooltip> |
|||
</a-descriptions-item> |
|||
<a-descriptions-item |
|||
label="结算状态" |
|||
:labelStyle="{ width: '90px', color: '#808080' }" |
|||
> |
|||
<a-tag v-if="form.isSettled == 0">未结算</a-tag> |
|||
<a-tag v-if="form.isSettled == 1" color="green">已结算</a-tag> |
|||
</a-descriptions-item> |
|||
|
|||
<!-- <a-descriptions-item span="3">--> |
|||
<!-- <a-divider/>--> |
|||
<!-- </a-descriptions-item>--> |
|||
|
|||
</a-descriptions> |
|||
</a-card> |
|||
<a-card class="order-card" :bordered="false"> |
|||
<a-spin :spinning="loading"> |
|||
<a-table |
|||
:data-source="orderInfo" |
|||
:columns="columns" |
|||
:pagination="false" |
|||
/> |
|||
</a-spin> |
|||
</a-card> |
|||
</ele-modal> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import {ref, reactive, watch} from 'vue'; |
|||
import {Form} from 'ant-design-vue'; |
|||
import {assignObject} from 'ele-admin-pro'; |
|||
import {ColumnItem} from 'ele-admin-pro/es/ele-pro-table/types'; |
|||
import { |
|||
CheckOutlined, |
|||
CloseOutlined, |
|||
CoffeeOutlined |
|||
} from '@ant-design/icons-vue'; |
|||
import {ShopOrder} from '@/api/shop/shopOrder/model'; |
|||
import {BszxPay} from '@/api/bszx/bszxPay/model'; |
|||
import {pageBszxPay} from '@/api/bszx/bszxPay'; |
|||
import {toDateString} from 'ele-admin-pro'; |
|||
import {copyText} from "@/utils/common"; |
|||
|
|||
const useForm = Form.useForm; |
|||
|
|||
const props = defineProps<{ |
|||
// 弹窗是否打开 |
|||
visible: boolean; |
|||
// 修改回显的数据 |
|||
data?: ShopOrder | null; |
|||
}>(); |
|||
|
|||
export interface step { |
|||
title?: String | undefined; |
|||
subTitle?: String | undefined; |
|||
description?: String | undefined; |
|||
} |
|||
|
|||
// 是否是修改 |
|||
const isUpdate = ref(false); |
|||
// 是否显示最大化切换按钮 |
|||
const maxAble = ref(true); |
|||
// 订单信息 |
|||
const orderInfo = ref<BszxPay[]>([]); |
|||
|
|||
// 步骤条 |
|||
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<ShopOrder>({ |
|||
// 订单号 |
|||
orderId: undefined, |
|||
// 订单编号 |
|||
orderNo: undefined, |
|||
// 订单类型,0商城订单 1预定订单/外卖 2会员卡 |
|||
type: undefined, |
|||
// 快递/自提 |
|||
deliveryType: undefined, |
|||
// 下单渠道,0小程序预定 1俱乐部训练场 3活动订场 |
|||
channel: undefined, |
|||
// 微信支付订单号 |
|||
transactionId: undefined, |
|||
// 微信退款订单号 |
|||
refundOrder: undefined, |
|||
// 商户ID |
|||
merchantId: undefined, |
|||
// 商户名称 |
|||
merchantName: undefined, |
|||
// 商户编号 |
|||
merchantCode: undefined, |
|||
// 使用的优惠券id |
|||
couponId: undefined, |
|||
// 使用的会员卡id |
|||
cardId: undefined, |
|||
// 关联管理员id |
|||
adminId: undefined, |
|||
// 核销管理员id |
|||
confirmId: undefined, |
|||
// IC卡号 |
|||
icCard: undefined, |
|||
// 头像 |
|||
avatar: undefined, |
|||
// 真实姓名 |
|||
realName: undefined, |
|||
// 手机号码 |
|||
phone: undefined, |
|||
// 收货地址 |
|||
address: undefined, |
|||
// |
|||
addressLat: undefined, |
|||
// |
|||
addressLng: undefined, |
|||
// 自提店铺id |
|||
selfTakeMerchantId: undefined, |
|||
// 自提店铺 |
|||
selfTakeMerchantName: undefined, |
|||
// 配送开始时间 |
|||
sendStartTime: undefined, |
|||
// 配送结束时间 |
|||
sendEndTime: undefined, |
|||
// 发货店铺id |
|||
expressMerchantId: undefined, |
|||
// 发货店铺 |
|||
expressMerchantName: undefined, |
|||
// 订单总额 |
|||
totalPrice: undefined, |
|||
// 减少的金额,使用VIP会员折扣、优惠券抵扣、优惠券折扣后减去的价格 |
|||
reducePrice: undefined, |
|||
// 实际付款 |
|||
payPrice: undefined, |
|||
// 用于统计 |
|||
price: undefined, |
|||
// 价钱,用于积分赠送 |
|||
money: undefined, |
|||
// 退款金额 |
|||
refundMoney: undefined, |
|||
// 教练价格 |
|||
coachPrice: undefined, |
|||
// 购买数量 |
|||
totalNum: undefined, |
|||
// 教练id |
|||
coachId: undefined, |
|||
// 支付的用户id |
|||
payUserId: undefined, |
|||
// 0余额支付, 1微信支付,102微信Native,2会员卡支付,3支付宝,4现金,5POS机,6VIP月卡,7VIP年卡,8VIP次卡,9IC月卡,10IC年卡,11IC次卡,12免费,13VIP充值卡,14IC充值卡,15积分支付,16VIP季卡,17IC季卡,18代付 |
|||
payType: undefined, |
|||
// 代付支付方式,0余额支付, 1微信支付,102微信Native,2会员卡支付,3支付宝,4现金,5POS机,6VIP月卡,7VIP年卡,8VIP次卡,9IC月卡,10IC年卡,11IC次卡,12免费,13VIP充值卡,14IC充值卡,15积分支付,16VIP季卡,17IC季卡,18代付 |
|||
friendPayType: undefined, |
|||
// 0未付款,1已付款 |
|||
payStatus: undefined, |
|||
// 0未使用,1已完成,2已取消,3取消中,4退款申请中,5退款被拒绝,6退款成功,7客户端申请退款 |
|||
orderStatus: undefined, |
|||
// 发货状态(10未发货 20已发货 30部分发货) |
|||
deliveryStatus: undefined, |
|||
// 发货时间 |
|||
deliveryTime: undefined, |
|||
// 优惠类型:0无、1抵扣优惠券、2折扣优惠券、3、VIP月卡、4VIP年卡,5VIP次卡、6VIP会员卡、7IC月卡、8IC年卡、9IC次卡、10IC会员卡、11免费订单、12VIP充值卡、13IC充值卡、14VIP季卡、15IC季卡 |
|||
couponType: undefined, |
|||
// 优惠说明 |
|||
couponDesc: undefined, |
|||
// 二维码地址,保存订单号,支付成功后才生成 |
|||
qrcode: undefined, |
|||
// vip月卡年卡、ic月卡年卡回退次数 |
|||
returnNum: undefined, |
|||
// vip充值回退金额 |
|||
returnMoney: undefined, |
|||
// 预约详情开始时间数组 |
|||
startTime: undefined, |
|||
// 是否已开具发票:0未开发票,1已开发票,2不能开具发票 |
|||
isInvoice: undefined, |
|||
// 发票流水号 |
|||
invoiceNo: undefined, |
|||
// 支付时间 |
|||
payTime: undefined, |
|||
// 退款时间 |
|||
refundTime: undefined, |
|||
// 申请退款时间 |
|||
refundApplyTime: undefined, |
|||
// 过期时间 |
|||
expirationTime: undefined, |
|||
// 对账情况:0=未对账;1=已对账;3=已对账,金额对不上;4=未查询到该订单 |
|||
checkBill: undefined, |
|||
// 订单是否已结算(0未结算 1已结算) |
|||
isSettled: undefined, |
|||
// 系统版本号 0当前版本 value=其他版本 |
|||
version: undefined, |
|||
// 用户id |
|||
userId: undefined, |
|||
// 备注 |
|||
comments: undefined, |
|||
// 排序号 |
|||
sortNumber: undefined, |
|||
// 是否删除, 0否, 1是 |
|||
deleted: undefined, |
|||
// 租户id |
|||
tenantId: undefined, |
|||
// 修改时间 |
|||
updateTime: undefined, |
|||
// 创建时间 |
|||
createTime: undefined, |
|||
// 自提码 |
|||
selfTakeCode: undefined, |
|||
// 是否已收到赠品 |
|||
hasTakeGift: undefined, |
|||
}); |
|||
|
|||
// 请求状态 |
|||
const loading = ref(true); |
|||
|
|||
const {resetFields} = useForm(form); |
|||
|
|||
/* 更新visible */ |
|||
const updateVisible = (value: boolean) => { |
|||
emit('update:visible', value); |
|||
}; |
|||
|
|||
const columns = ref<ColumnItem[]>([ |
|||
{ |
|||
title: '商品名称', |
|||
dataIndex: 'formName', |
|||
key: 'formName', |
|||
align: 'center', |
|||
width: 280 |
|||
}, |
|||
{ |
|||
title: '金额', |
|||
dataIndex: 'price', |
|||
align: 'center' |
|||
}, |
|||
{ |
|||
title: '备注', |
|||
dataIndex: 'comments', |
|||
key: 'comments', |
|||
align: 'center' |
|||
}, |
|||
{ |
|||
title: '操作', |
|||
dataIndex: 'isFree', |
|||
align: 'center' |
|||
} |
|||
]); |
|||
|
|||
/* 制作步骤条 */ |
|||
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); |
|||
pageBszxPay({orderNo: form.orderNo}).then((res) => { |
|||
if (res?.list) { |
|||
orderInfo.value = res?.list; |
|||
} |
|||
loading.value = false; |
|||
}); |
|||
loadSteps(props.data); |
|||
} |
|||
} else { |
|||
resetFields(); |
|||
} |
|||
} |
|||
); |
|||
</script> |
|||
|
|||
<script lang="ts"> |
|||
import * as MenuIcons from '@/layout/menu-icons'; |
|||
|
|||
export default { |
|||
name: 'BszxOrderInfo', |
|||
components: MenuIcons |
|||
}; |
|||
</script> |
@ -0,0 +1,204 @@ |
|||
<!-- 搜索表单 --> |
|||
<template> |
|||
<a-space :size="10" style="flex-wrap: wrap"> |
|||
<a-select |
|||
v-model:value="where.payStatus" |
|||
style="width: 150px" |
|||
placeholder="付款状态" |
|||
@change="search" |
|||
> |
|||
<a-select-option value="">全部</a-select-option> |
|||
<a-select-option :value="1">已付款</a-select-option> |
|||
<a-select-option :value="0">未付款</a-select-option> |
|||
</a-select> |
|||
<a-select |
|||
v-model:value="where.orderStatus" |
|||
style="width: 150px" |
|||
placeholder="订单状态" |
|||
@change="search" |
|||
> |
|||
<a-select-option value="">全部</a-select-option> |
|||
<a-select-option :value="1">已完成</a-select-option> |
|||
<a-select-option :value="0">未完成</a-select-option> |
|||
<a-select-option :value="2">未使用</a-select-option> |
|||
<a-select-option :value="3">已取消</a-select-option> |
|||
<a-select-option :value="4">退款中</a-select-option> |
|||
<a-select-option :value="5">退款被拒</a-select-option> |
|||
<a-select-option :value="6">退款成功</a-select-option> |
|||
</a-select> |
|||
<a-select |
|||
:options="getPayType()" |
|||
v-model:value="where.payType" |
|||
style="width: 150px" |
|||
placeholder="付款方式" |
|||
@change="search" |
|||
/> |
|||
<a-select |
|||
v-model:value="where.isInvoice" |
|||
style="width: 150px" |
|||
placeholder="开票状态" |
|||
@change="search" |
|||
> |
|||
<a-select-option :value="1">已开票</a-select-option> |
|||
<a-select-option :value="0">未开票</a-select-option> |
|||
<a-select-option :value="2">不能开票</a-select-option> |
|||
</a-select> |
|||
<a-range-picker |
|||
v-model:value="dateRange" |
|||
@change="search" |
|||
value-format="YYYY-MM-DD" |
|||
/> |
|||
<a-input-search |
|||
allow-clear |
|||
placeholder="请输入关键词" |
|||
style="width: 280px" |
|||
v-model:value="where.keywords" |
|||
@search="reload" |
|||
/> |
|||
<a-button @click="reset">重置</a-button> |
|||
<a-button @click="handleExport">导出</a-button> |
|||
</a-space> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, watch } from 'vue'; |
|||
import { utils, writeFile } from 'xlsx'; |
|||
import { message } from 'ant-design-vue'; |
|||
import useSearch from "@/utils/use-search"; |
|||
import {ShopOrder, ShopOrderParam} from "@/api/shop/shopOrder/model"; |
|||
import {listShopOrder} from "@/api/shop/shopOrder"; |
|||
import {getPayType} from "@/utils/shop"; |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
// 选中的角色 |
|||
selection?: []; |
|||
}>(), |
|||
{} |
|||
); |
|||
|
|||
const emit = defineEmits<{ |
|||
(e: 'search', where?: ShopOrderParam): void; |
|||
(e: 'add'): void; |
|||
(e: 'remove'): void; |
|||
(e: 'batchMove'): void; |
|||
}>(); |
|||
|
|||
// 表单数据 |
|||
const { where, resetFields } = useSearch<ShopOrderParam>({ |
|||
keywords: '', |
|||
orderId: undefined, |
|||
orderNo: undefined, |
|||
createTimeStart: undefined, |
|||
createTimeEnd: undefined, |
|||
userId: undefined, |
|||
phone: undefined, |
|||
payStatus: undefined, |
|||
orderStatus: undefined, |
|||
payType: undefined, |
|||
isInvoice: undefined, |
|||
}); |
|||
|
|||
const reload = () => { |
|||
emit('search', where); |
|||
}; |
|||
|
|||
/* 搜索 */ |
|||
const search = () => { |
|||
const [d1, d2] = dateRange.value ?? []; |
|||
xlsFileName.value = `${d1}至${d2}`; |
|||
where.createTimeStart = d1 ? d1 + ' 00:00:00' : undefined; |
|||
where.createTimeEnd = d2 ? d2 + ' 23:59:59' : undefined; |
|||
emit('search', { |
|||
...where |
|||
}); |
|||
}; |
|||
|
|||
/* 重置 */ |
|||
const reset = () => { |
|||
resetFields(); |
|||
search(); |
|||
}; |
|||
|
|||
const dateRange = ref<[string, string]>(['', '']); |
|||
// 变量 |
|||
const loading = ref(false); |
|||
const orders = ref<ShopOrder[]>([]) |
|||
const xlsFileName = ref<string>(); |
|||
|
|||
// 导出 |
|||
const handleExport = async () => { |
|||
loading.value = true; |
|||
const array: (string | number)[][] = [ |
|||
[ |
|||
'订单编号', |
|||
'订单标题', |
|||
'买家姓名', |
|||
'手机号码', |
|||
'实付金额(元)', |
|||
'支付方式', |
|||
'付款时间', |
|||
'下单时间' |
|||
] |
|||
]; |
|||
|
|||
await listShopOrder(where) |
|||
.then((list) => { |
|||
orders.value = list; |
|||
list?.forEach((d: ShopOrder) => { |
|||
array.push([ |
|||
`${d.orderNo}`, |
|||
`${d.comments}`, |
|||
`${d.realName}`, |
|||
`${d.phone}`, |
|||
`${d.payPrice}`, |
|||
`${getPayType(d.payType)}`, |
|||
`${d.payTime || ''}`, |
|||
`${d.createTime}` |
|||
]); |
|||
}); |
|||
const sheetName = `订单数据`; |
|||
const workbook = { |
|||
SheetNames: [sheetName], |
|||
Sheets: {} |
|||
}; |
|||
const sheet = utils.aoa_to_sheet(array); |
|||
workbook.Sheets[sheetName] = sheet; |
|||
// 设置列宽 |
|||
sheet['!cols'] = [ |
|||
{ wch: 10 }, |
|||
{ wch: 40 }, |
|||
{ wch: 20 }, |
|||
{ wch: 20 }, |
|||
{ wch: 60 }, |
|||
{ wch: 15 }, |
|||
{ wch: 10 }, |
|||
{ wch: 10 }, |
|||
{ wch: 20 }, |
|||
{ wch: 10 }, |
|||
{ wch: 20 } |
|||
]; |
|||
message.loading('正在导出...'); |
|||
setTimeout(() => { |
|||
writeFile( |
|||
workbook, |
|||
`${ |
|||
where.createTimeEnd ? xlsFileName.value + '_' : '' |
|||
}${sheetName}.xlsx` |
|||
); |
|||
loading.value = false; |
|||
}, 1000); |
|||
}) |
|||
.catch((msg) => { |
|||
message.error(msg); |
|||
loading.value = false; |
|||
}) |
|||
.finally(() => {}); |
|||
|
|||
}; |
|||
|
|||
watch( |
|||
() => props.selection, |
|||
() => {} |
|||
); |
|||
</script> |
@ -0,0 +1,307 @@ |
|||
<template> |
|||
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)"> |
|||
<template #extra> |
|||
<Extra/> |
|||
</template> |
|||
<a-card :bordered="false" :body-style="{ padding: '16px' }"> |
|||
<ele-pro-table |
|||
ref="tableRef" |
|||
row-key="orderId" |
|||
:columns="columns" |
|||
:datasource="datasource" |
|||
:customRow="customRow" |
|||
tool-class="ele-toolbar-form" |
|||
class="sys-org-table" |
|||
> |
|||
<template #toolbar> |
|||
<search |
|||
@search="reload" |
|||
:selection="selection" |
|||
@add="openEdit" |
|||
@batchMove="openMove" |
|||
/> |
|||
</template> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column.key === 'name'"> |
|||
<div @click="onSearch(record)" class="cursor-pointer">{{ record.name || '匿名' }}</div> |
|||
</template> |
|||
<template v-if="column.key === 'phone'"> |
|||
<div v-if="record.mobile" class="text-gray-400">{{ record.mobile }}</div> |
|||
<div v-else class="text-gray-600">{{ record.phone }}</div> |
|||
</template> |
|||
<template v-if="column.key === 'payType'"> |
|||
<template v-for="item in getPayType()"> |
|||
<template v-if="record.payStatus == 1"> |
|||
<span v-if="item.value == record.payType">{{ item.label }}</span> |
|||
</template> |
|||
<template v-else> |
|||
<span></span> |
|||
</template> |
|||
</template> |
|||
</template> |
|||
<template v-if="column.key === 'payStatus'"> |
|||
<a-tag v-if="record.payStatus == 1" color="green" @click="updatePayStatus(record)">已付款</a-tag> |
|||
<a-tag v-if="record.payStatus == 0" @click="updatePayStatus(record)">未付款</a-tag> |
|||
<a-tag v-if="record.payStatus == 3">未付款,占场中</a-tag> |
|||
</template> |
|||
<template v-if="column.key === 'image'"> |
|||
<a-image :src="record.image" :width="50"/> |
|||
</template> |
|||
<template v-if="column.key === 'sex'"> |
|||
<a-tag v-if="record.sex === 1">男</a-tag> |
|||
<a-tag v-if="record.sex === 2">女</a-tag> |
|||
</template> |
|||
<template v-if="column.key === 'deliveryStatus'"> |
|||
<a-tag v-if="record.deliveryStatus == 10">未核销</a-tag> |
|||
<a-tag v-if="record.deliveryStatus == 20" color="green">已核销</a-tag> |
|||
<a-tag v-if="record.deliveryStatus == 30" color="bule">部分核销</a-tag> |
|||
</template> |
|||
<template v-if="column.key === 'orderStatus'"> |
|||
<a-tag v-if="record.orderStatus === 0">未完成</a-tag> |
|||
<a-tag v-if="record.orderStatus === 1" color="green">已完成</a-tag> |
|||
<a-tag v-if="record.orderStatus === 2" color="red">已取消</a-tag> |
|||
<a-tag v-if="record.orderStatus === 3" color="red">取消中</a-tag> |
|||
<a-tag v-if="record.orderStatus === 4" color="red">退款申请中</a-tag> |
|||
<a-tag v-if="record.orderStatus === 5" color="red">退款被拒绝</a-tag> |
|||
<a-tag v-if="record.orderStatus === 6" color="orange">退款成功</a-tag> |
|||
<a-tag v-if="record.orderStatus === 7" color="pink">客户端申请退款</a-tag> |
|||
</template> |
|||
<template v-if="column.key === 'isInvoice'"> |
|||
<a-tag v-if="record.isInvoice == 0">未开具</a-tag> |
|||
<a-tag v-if="record.isInvoice == 1" color="green">已开具</a-tag> |
|||
<a-tag v-if="record.isInvoice == 2" color="blue">不能开具</a-tag> |
|||
</template> |
|||
<template v-if="column.key === 'status'"> |
|||
<a-tag v-if="record.status === 0" color="green">显示</a-tag> |
|||
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag> |
|||
</template> |
|||
<template v-if="column.key === 'action'"> |
|||
<a-space> |
|||
<a @click="openEdit(record)">修改</a> |
|||
<a-divider type="vertical"/> |
|||
<a-popconfirm |
|||
title="确定要删除此记录吗?" |
|||
@confirm="remove(record)" |
|||
> |
|||
<a class="ele-text-danger">删除</a> |
|||
</a-popconfirm> |
|||
</a-space> |
|||
</template> |
|||
</template> |
|||
</ele-pro-table> |
|||
</a-card> |
|||
|
|||
<!-- 编辑弹窗 --> |
|||
<OrderInfo v-model:visible="showEdit" :data="current" @done="reload"/> |
|||
</a-page-header> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import {ref} from 'vue'; |
|||
import type {EleProTable} from 'ele-admin-pro'; |
|||
import type { |
|||
DatasourceFunction, |
|||
ColumnItem |
|||
} from 'ele-admin-pro/es/ele-pro-table/types'; |
|||
import Search from './components/search.vue'; |
|||
import {getPageTitle} from "@/utils/common"; |
|||
import Extra from "@/views/bszx/extra.vue"; |
|||
import {pageBszxOrder} from "@/api/bszx/bszxOrder"; |
|||
import OrderInfo from './components/orderInfo.vue'; |
|||
import {ShopOrder, ShopOrderParam} from "@/api/shop/shopOrder/model"; |
|||
import {updateShopOrder} from "@/api/shop/shopOrder"; |
|||
import {message} from "ant-design-vue"; |
|||
import {updateUser} from "@/api/system/user"; |
|||
import {getPayType} from '@/utils/shop'; |
|||
import {repairOrder} from "@/api/bszx/bszxPay"; |
|||
|
|||
// 表格实例 |
|||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null); |
|||
|
|||
// 表格选中数据 |
|||
const selection = ref<ShopOrder[]>([]); |
|||
// 当前编辑数据 |
|||
const current = ref<ShopOrder | null>(null); |
|||
// 是否显示编辑弹窗 |
|||
const showEdit = ref(false); |
|||
// 是否显示批量移动弹窗 |
|||
const showMove = ref(false); |
|||
// 加载状态 |
|||
const loading = ref(true); |
|||
|
|||
// 表格数据源 |
|||
const datasource: DatasourceFunction = ({ |
|||
page, |
|||
limit, |
|||
where, |
|||
orders, |
|||
filters |
|||
}) => { |
|||
if (filters) { |
|||
where.status = filters.status; |
|||
} |
|||
return pageBszxOrder({ |
|||
...where, |
|||
...orders, |
|||
page, |
|||
limit |
|||
}); |
|||
}; |
|||
|
|||
// 表格列配置 |
|||
const columns = ref<ColumnItem[]>([ |
|||
{ |
|||
title: '订单号', |
|||
dataIndex: 'orderNo', |
|||
key: 'orderNo', |
|||
align: 'center', |
|||
width: 200, |
|||
}, |
|||
{ |
|||
title: '姓名', |
|||
dataIndex: 'realName', |
|||
key: 'realName', |
|||
align: 'center' |
|||
}, |
|||
{ |
|||
title: '手机号码', |
|||
dataIndex: 'phone', |
|||
key: 'phone', |
|||
align: 'center' |
|||
}, |
|||
{ |
|||
title: '实付金额', |
|||
dataIndex: 'payPrice', |
|||
key: 'payPrice', |
|||
align: 'center', |
|||
customRender: ({text}) => '¥' + text |
|||
}, |
|||
{ |
|||
title: '支付方式', |
|||
dataIndex: 'payType', |
|||
key: 'payType', |
|||
align: 'center' |
|||
}, |
|||
{ |
|||
title: '支付状态', |
|||
dataIndex: 'payStatus', |
|||
key: 'payStatus', |
|||
align: 'center' |
|||
}, |
|||
{ |
|||
title: '核销状态', |
|||
dataIndex: 'deliveryStatus', |
|||
key: 'deliveryStatus', |
|||
align: 'center', |
|||
}, |
|||
{ |
|||
title: '开票状态', |
|||
dataIndex: 'isInvoice', |
|||
key: 'isInvoice', |
|||
align: 'center', |
|||
}, |
|||
{ |
|||
title: '订单状态', |
|||
dataIndex: 'orderStatus', |
|||
key: 'orderStatus', |
|||
align: 'center', |
|||
}, |
|||
// { |
|||
// title: '支付时间', |
|||
// dataIndex: 'payTime', |
|||
// key: 'payTime', |
|||
// align: 'center', |
|||
// width: 180, |
|||
// sorter: true, |
|||
// ellipsis: true |
|||
// }, |
|||
{ |
|||
title: '下单时间', |
|||
dataIndex: 'createTime', |
|||
key: 'createTime', |
|||
align: 'center', |
|||
width: 180, |
|||
sorter: true, |
|||
ellipsis: true |
|||
}, |
|||
// { |
|||
// title: '操作', |
|||
// key: 'action', |
|||
// width: 180, |
|||
// fixed: 'right', |
|||
// align: 'center', |
|||
// hideInSetting: true |
|||
// } |
|||
]); |
|||
|
|||
/* 搜索 */ |
|||
const reload = (where?: ShopOrderParam) => { |
|||
selection.value = []; |
|||
tableRef?.value?.reload({where: where}); |
|||
}; |
|||
|
|||
const onSearch = (item: ShopOrder) => { |
|||
reload({userId: item.userId}) |
|||
} |
|||
|
|||
/* 打开编辑弹窗 */ |
|||
const openEdit = (row?: ShopOrder) => { |
|||
current.value = row ?? null; |
|||
showEdit.value = true; |
|||
}; |
|||
|
|||
/* 打开批量移动弹窗 */ |
|||
const openMove = () => { |
|||
showMove.value = true; |
|||
}; |
|||
|
|||
/** |
|||
* 修复订单支付状态 |
|||
*/ |
|||
const updatePayStatus = (record: ShopOrder) => { |
|||
// 修复订单 |
|||
repairOrder(record).then(() => { |
|||
message.success('修复成功'); |
|||
}).then(() => { |
|||
if(record.realName == '' || record.realName == undefined){ |
|||
// 更新用户真实姓名 |
|||
updateUser({ |
|||
userId: record.userId, |
|||
realName: record.realName |
|||
}) |
|||
} |
|||
reload(); |
|||
}) |
|||
} |
|||
|
|||
/* 查询 */ |
|||
const query = () => { |
|||
loading.value = true; |
|||
}; |
|||
|
|||
/* 自定义行属性 */ |
|||
const customRow = (record: ShopOrder) => { |
|||
return { |
|||
// 行点击事件 |
|||
onClick: () => { |
|||
// console.log(record); |
|||
}, |
|||
// 行双击事件 |
|||
onDblclick: () => { |
|||
openEdit(record); |
|||
} |
|||
}; |
|||
}; |
|||
query(); |
|||
</script> |
|||
|
|||
<script lang="ts"> |
|||
import * as MenuIcons from '@/layout/menu-icons'; |
|||
|
|||
export default { |
|||
name: 'BszxOrder', |
|||
components: MenuIcons |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped></style> |
Loading…
Reference in new issue