feat(shopOrder): 新增确认线下收款上传支付凭证功能
- 重构确认线下收款为独立组件 OfflinePaymentModal.vue - 新增支付凭证字段 paymentVoucher,支持图片上传与预览 - 上传限制为 jpg/png 格式,单张图片最大 10MB - API confirmOfflinePayment 新增 paymentVoucher 参数 - 页面移除原 Modal.confirm 逻辑,改为调用新组件弹窗 - 修复 buyerRemarks 和 merchantRemarks 类型错误 - 后端 shop_order 表待新增 payment_voucher 字段和接口支持 - 同步更新相关接口模型与视图交互逻辑 feat(shopGoodsBrowse): 新增用户商品浏览记录管理功能 - 新增 ShopGoodsBrowse 接口模型及分页查询、删除接口 - 前端新增浏览记录管理页面,实现列表展示和删除 - 支持基于用户ID、商品ID、浏览来源和日期范围搜索 - 列表显示商品图片、名称、价格、浏览次数及时间等信息 - 添加图片预览和操作确认弹窗,保障操作体验和安全
This commit is contained in:
@@ -41,3 +41,17 @@
|
|||||||
- 后端无 context-path;baseURL=`https://websopy-api.websoft.top/api`,接口路径用 `/app/subscription/xxx`。
|
- 后端无 context-path;baseURL=`https://websopy-api.websoft.top/api`,接口路径用 `/app/subscription/xxx`。
|
||||||
- 后端 `BaseController` 成功 code=0;`success(IPage)` 转成 `PageResult{list,count}`,与项目 `@/api` 的 PageResult 结构一致。
|
- 后端 `BaseController` 成功 code=0;`success(IPage)` 转成 `PageResult{list,count}`,与项目 `@/api` 的 PageResult 结构一致。
|
||||||
- 新增 `src/store/modules/appSubscription.ts`:`useAppSubscriptionStore`(Pinia Options API 风格,对齐 site.ts/statistics.ts),聚合列表/详情/支付状态/订阅管理方法。列表/详情缓存5分钟;`checkStatus`/`checkPurchased` 实时请求;订阅/支付/管理类操作成功后调 `invalidateCache()` 失效缓存。
|
- 新增 `src/store/modules/appSubscription.ts`:`useAppSubscriptionStore`(Pinia Options API 风格,对齐 site.ts/statistics.ts),聚合列表/详情/支付状态/订阅管理方法。列表/详情缓存5分钟;`checkStatus`/`checkPurchased` 实时请求;订阅/支付/管理类操作成功后调 `invalidateCache()` 失效缓存。
|
||||||
|
|
||||||
|
## 确认线下收款新增上传凭证功能
|
||||||
|
|
||||||
|
- 背景:原"确认线下收款"用 `Modal.confirm` + `createVNode` 动态拼一个 input,只有备注,没有上传凭证。用户需要加凭证上传。
|
||||||
|
- 字段决策:新增 `paymentVoucher?: string` 字段(不复用 comments/merchantRemarks,因为凭证是图片URL非文本)。顺带修复 `buyerRemarks`/`merchantRemarks` 类型 bug(`undefined` → `string?`)。
|
||||||
|
- 重构为独立组件 `src/views/shop/shopOrder/components/OfflinePaymentModal.vue`:
|
||||||
|
- 用 `<a-modal>` + `<a-form>` + `<a-upload list-type="picture-card">` 单张图片上传。
|
||||||
|
- 上传走 `uploadOss`(`src/api/system/file`),存储返回的 `path`(与项目 `UploadCert` 组件约定一致),预览用 `getUrl(path)` 补全。
|
||||||
|
- 凭证必填,备注可选;校验 jpg/png、≤10MB;支持点击预览大图。
|
||||||
|
- API `confirmOfflinePayment(id, remarks?, paymentVoucher?)` 新增第三参数,通过 query params 传给后端。
|
||||||
|
- `index.vue`:移除原 `Modal.confirm`/`createVNode` 逻辑,改为打开新组件(`v-model:visible` + `:data="current"` + `@done="reload"`),与 `DeliveryModal` 模式一致。
|
||||||
|
- 类型检查:新增 0 错误,顺带消掉原 `okType: 'success'` 的类型错误(antdv4 ButtonType 不含 success,新组件去掉了 ok-type)。
|
||||||
|
- 改动文件:`src/api/shop/shopOrder/model/index.ts`、`src/api/shop/shopOrder/index.ts`、`src/views/shop/shopOrder/components/OfflinePaymentModal.vue`(新增)、`src/views/shop/shopOrder/index.vue`
|
||||||
|
- 后端待办:`shop_order` 表需新增 `payment_voucher` 字段;`confirm-offline-payment` 接口需接收并持久化 `paymentVoucher` 参数。
|
||||||
|
|||||||
30
src/api/shop/shopGoodsBrowse/index.ts
Normal file
30
src/api/shop/shopGoodsBrowse/index.ts
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
import request from '@/utils/request';
|
||||||
|
import type { ApiResult, PageResult } from '@/api';
|
||||||
|
import type { ShopGoodsBrowse, ShopGoodsBrowseParam } from './model';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 后台管理:分页查询浏览记录
|
||||||
|
*/
|
||||||
|
export async function pageShopGoodsBrowse(params: ShopGoodsBrowseParam) {
|
||||||
|
const res = await request.get<ApiResult<PageResult<ShopGoodsBrowse>>>(
|
||||||
|
'/shop/shop-goods-browse/admin/page',
|
||||||
|
{ params }
|
||||||
|
);
|
||||||
|
if (res.data.code === 0) {
|
||||||
|
return res.data.data;
|
||||||
|
}
|
||||||
|
return Promise.reject(new Error(res.data.message));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 后台管理:删除单条浏览记录
|
||||||
|
*/
|
||||||
|
export async function removeShopGoodsBrowse(id?: number) {
|
||||||
|
const res = await request.delete<ApiResult<unknown>>(
|
||||||
|
'/shop/shop-goods-browse/admin/' + id
|
||||||
|
);
|
||||||
|
if (res.data.code === 0) {
|
||||||
|
return res.data.message;
|
||||||
|
}
|
||||||
|
return Promise.reject(new Error(res.data.message));
|
||||||
|
}
|
||||||
42
src/api/shop/shopGoodsBrowse/model/index.ts
Normal file
42
src/api/shop/shopGoodsBrowse/model/index.ts
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
import type { PageParam } from '@/api';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 用户商品浏览记录
|
||||||
|
*/
|
||||||
|
export interface ShopGoodsBrowse {
|
||||||
|
id?: number;
|
||||||
|
userId?: number;
|
||||||
|
goodsId?: number;
|
||||||
|
tenantId?: number;
|
||||||
|
merchantId?: number;
|
||||||
|
/** 浏览次数 */
|
||||||
|
visitCount?: number;
|
||||||
|
/** 最后浏览时间 */
|
||||||
|
lastVisitTime?: string;
|
||||||
|
/** 浏览来源 */
|
||||||
|
browseSource?: string;
|
||||||
|
createTime?: string;
|
||||||
|
updateTime?: string;
|
||||||
|
/** 商品名称(关联查询) */
|
||||||
|
goodsName?: string;
|
||||||
|
/** 商品封面图(关联查询) */
|
||||||
|
goodsImage?: string;
|
||||||
|
/** 商品价格(关联查询) */
|
||||||
|
price?: string;
|
||||||
|
/** 市场价(关联查询) */
|
||||||
|
salePrice?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 浏览记录查询参数
|
||||||
|
*/
|
||||||
|
export interface ShopGoodsBrowseParam extends PageParam {
|
||||||
|
id?: number;
|
||||||
|
userId?: number;
|
||||||
|
goodsId?: number;
|
||||||
|
merchantId?: number;
|
||||||
|
tenantId?: number;
|
||||||
|
browseSource?: string;
|
||||||
|
startTime?: string;
|
||||||
|
endTime?: string;
|
||||||
|
}
|
||||||
@@ -154,12 +154,19 @@ export async function refundShopOrder(data: ShopOrder) {
|
|||||||
/**
|
/**
|
||||||
* 确认线下付款收款
|
* 确认线下付款收款
|
||||||
* 商家确认已收到线下转账(微信转账/银行汇款等),确认后订单进入待发货状态
|
* 商家确认已收到线下转账(微信转账/银行汇款等),确认后订单进入待发货状态
|
||||||
|
* @param id 订单ID
|
||||||
|
* @param remarks 备注(可选)
|
||||||
|
* @param paymentVoucher 支付凭证图片地址(可选)
|
||||||
*/
|
*/
|
||||||
export async function confirmOfflinePayment(id: number, remarks?: string) {
|
export async function confirmOfflinePayment(
|
||||||
|
id: number,
|
||||||
|
remarks?: string,
|
||||||
|
paymentVoucher?: string
|
||||||
|
) {
|
||||||
const res = await request.put<ApiResult<unknown>>(
|
const res = await request.put<ApiResult<unknown>>(
|
||||||
MODULES_API_URL + '/shop/shop-order/confirm-offline-payment/' + id,
|
MODULES_API_URL + '/shop/shop-order/confirm-offline-payment/' + id,
|
||||||
null,
|
null,
|
||||||
{ params: { remarks } }
|
{ params: { remarks, paymentVoucher } }
|
||||||
);
|
);
|
||||||
if (res.data.code === 0) {
|
if (res.data.code === 0) {
|
||||||
return res.data.message;
|
return res.data.message;
|
||||||
|
|||||||
@@ -129,6 +129,8 @@ export interface ShopOrder {
|
|||||||
invoiceNo?: string;
|
invoiceNo?: string;
|
||||||
// 支付时间
|
// 支付时间
|
||||||
payTime?: string;
|
payTime?: string;
|
||||||
|
// 线下收款支付凭证(图片地址,确认线下收款时上传)
|
||||||
|
paymentVoucher?: string;
|
||||||
// 退款时间
|
// 退款时间
|
||||||
refundTime?: string;
|
refundTime?: string;
|
||||||
// 申请退款时间
|
// 申请退款时间
|
||||||
@@ -142,9 +144,9 @@ export interface ShopOrder {
|
|||||||
// 系统版本号 0当前版本 value=其他版本
|
// 系统版本号 0当前版本 value=其他版本
|
||||||
version?: number;
|
version?: number;
|
||||||
// 买家备注
|
// 买家备注
|
||||||
buyerRemarks: undefined;
|
buyerRemarks?: string;
|
||||||
// 商家备注
|
// 商家备注
|
||||||
merchantRemarks: undefined;
|
merchantRemarks?: string;
|
||||||
// 用户id
|
// 用户id
|
||||||
userId?: number;
|
userId?: number;
|
||||||
// 备注
|
// 备注
|
||||||
|
|||||||
87
src/views/shop/shopGoodsBrowse/components/search.vue
Normal file
87
src/views/shop/shopGoodsBrowse/components/search.vue
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
<!-- 搜索表单 -->
|
||||||
|
<template>
|
||||||
|
<a-space :size="10" style="flex-wrap: wrap">
|
||||||
|
<a-input
|
||||||
|
v-model:value="where.userId"
|
||||||
|
placeholder="用户ID"
|
||||||
|
allow-clear
|
||||||
|
style="width: 130px"
|
||||||
|
@press-enter="search"
|
||||||
|
/>
|
||||||
|
<a-input
|
||||||
|
v-model:value="where.goodsId"
|
||||||
|
placeholder="商品ID"
|
||||||
|
allow-clear
|
||||||
|
style="width: 130px"
|
||||||
|
@press-enter="search"
|
||||||
|
/>
|
||||||
|
<a-select
|
||||||
|
v-model:value="where.browseSource"
|
||||||
|
placeholder="浏览来源"
|
||||||
|
allow-clear
|
||||||
|
style="width: 130px"
|
||||||
|
>
|
||||||
|
<a-select-option value="detail">商品详情</a-select-option>
|
||||||
|
<a-select-option value="home">首页</a-select-option>
|
||||||
|
<a-select-option value="category">分类</a-select-option>
|
||||||
|
<a-select-option value="search">搜索</a-select-option>
|
||||||
|
<a-select-option value="share">分享</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
<a-range-picker
|
||||||
|
v-model:value="dateRange"
|
||||||
|
value-format="YYYY-MM-DD"
|
||||||
|
:placeholder="['开始日期', '结束日期']"
|
||||||
|
@change="onDateChange"
|
||||||
|
/>
|
||||||
|
<a-button type="primary" class="ele-btn-icon" @click="search">
|
||||||
|
<template #icon>
|
||||||
|
<SearchOutlined />
|
||||||
|
</template>
|
||||||
|
<span>查询</span>
|
||||||
|
</a-button>
|
||||||
|
<a-button @click="reset">重置</a-button>
|
||||||
|
</a-space>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, computed } from 'vue';
|
||||||
|
import { SearchOutlined } from '@ant-design/icons-vue';
|
||||||
|
import type { Dayjs } from 'dayjs';
|
||||||
|
import type { ShopGoodsBrowseParam } from '@/api/shop/shopGoodsBrowse/model';
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
where?: ShopGoodsBrowseParam;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'search', where?: ShopGoodsBrowseParam): void;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
// 搜索条件(双向绑定)
|
||||||
|
const where = computed(() => props.where ?? {});
|
||||||
|
|
||||||
|
// 日期范围
|
||||||
|
const dateRange = ref<[Dayjs, Dayjs] | undefined>();
|
||||||
|
|
||||||
|
// 日期变化
|
||||||
|
const onDateChange = (_dates: any, formatStrings: [string, string]) => {
|
||||||
|
where.value.startTime = formatStrings[0] || undefined;
|
||||||
|
where.value.endTime = formatStrings[1] || undefined;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 搜索
|
||||||
|
const search = () => {
|
||||||
|
emit('search', { ...where.value });
|
||||||
|
};
|
||||||
|
|
||||||
|
// 重置
|
||||||
|
const reset = () => {
|
||||||
|
where.value.userId = undefined;
|
||||||
|
where.value.goodsId = undefined;
|
||||||
|
where.value.browseSource = undefined;
|
||||||
|
where.value.startTime = undefined;
|
||||||
|
where.value.endTime = undefined;
|
||||||
|
dateRange.value = undefined;
|
||||||
|
emit('search', {});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
196
src/views/shop/shopGoodsBrowse/index.vue
Normal file
196
src/views/shop/shopGoodsBrowse/index.vue
Normal file
@@ -0,0 +1,196 @@
|
|||||||
|
<template>
|
||||||
|
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||||
|
<ele-pro-table
|
||||||
|
ref="tableRef"
|
||||||
|
row-key="id"
|
||||||
|
:columns="columns"
|
||||||
|
:datasource="datasource"
|
||||||
|
tool-class="ele-toolbar-form"
|
||||||
|
class="shop-goods-browse-table"
|
||||||
|
>
|
||||||
|
<template #toolbar>
|
||||||
|
<search @search="reload" />
|
||||||
|
</template>
|
||||||
|
<template #bodyCell="{ column, record }">
|
||||||
|
<template v-if="column.key === 'goodsImage'">
|
||||||
|
<a-image
|
||||||
|
v-if="record.goodsImage"
|
||||||
|
:src="record.goodsImage"
|
||||||
|
:width="50"
|
||||||
|
:height="50"
|
||||||
|
style="border-radius: 4px; object-fit: cover"
|
||||||
|
/>
|
||||||
|
<span v-else class="ele-text-placeholder">无图</span>
|
||||||
|
</template>
|
||||||
|
<template v-if="column.key === 'browseSource'">
|
||||||
|
<a-tag v-if="record.browseSource === 'detail'" color="blue">商品详情</a-tag>
|
||||||
|
<a-tag v-else-if="record.browseSource === 'home'" color="green">首页</a-tag>
|
||||||
|
<a-tag v-else-if="record.browseSource === 'category'" color="cyan">分类</a-tag>
|
||||||
|
<a-tag v-else-if="record.browseSource === 'search'" color="orange">搜索</a-tag>
|
||||||
|
<a-tag v-else-if="record.browseSource === 'share'" color="purple">分享</a-tag>
|
||||||
|
<span v-else>{{ record.browseSource || '-' }}</span>
|
||||||
|
</template>
|
||||||
|
<template v-if="column.key === 'visitCount'">
|
||||||
|
<a-tag color="red">{{ record.visitCount || 1 }}</a-tag>
|
||||||
|
</template>
|
||||||
|
<template v-if="column.key === 'lastVisitTime'">
|
||||||
|
{{ toDateString(record.lastVisitTime, 'yyyy-MM-dd HH:mm') }}
|
||||||
|
</template>
|
||||||
|
<template v-if="column.key === 'createTime'">
|
||||||
|
{{ toDateString(record.createTime, 'yyyy-MM-dd HH:mm') }}
|
||||||
|
</template>
|
||||||
|
<template v-if="column.key === 'action'">
|
||||||
|
<a-popconfirm
|
||||||
|
title="确定要删除此浏览记录吗?"
|
||||||
|
@confirm="remove(record)"
|
||||||
|
>
|
||||||
|
<a class="ele-text-danger">删除</a>
|
||||||
|
</a-popconfirm>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</ele-pro-table>
|
||||||
|
</a-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
|
import type { EleProTable } from 'ele-admin-pro';
|
||||||
|
import { toDateString } from 'ele-admin-pro';
|
||||||
|
import type {
|
||||||
|
DatasourceFunction,
|
||||||
|
ColumnItem
|
||||||
|
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||||
|
import Search from './components/search.vue';
|
||||||
|
import {
|
||||||
|
pageShopGoodsBrowse,
|
||||||
|
removeShopGoodsBrowse
|
||||||
|
} from '@/api/shop/shopGoodsBrowse';
|
||||||
|
import type {
|
||||||
|
ShopGoodsBrowse,
|
||||||
|
ShopGoodsBrowseParam
|
||||||
|
} from '@/api/shop/shopGoodsBrowse/model';
|
||||||
|
|
||||||
|
// 表格实例
|
||||||
|
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||||
|
|
||||||
|
// 表格数据源
|
||||||
|
const datasource: DatasourceFunction = ({
|
||||||
|
page,
|
||||||
|
limit,
|
||||||
|
where,
|
||||||
|
orders
|
||||||
|
}) => {
|
||||||
|
return pageShopGoodsBrowse({
|
||||||
|
...where,
|
||||||
|
...orders,
|
||||||
|
page,
|
||||||
|
limit
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 表格列配置
|
||||||
|
const columns = ref<ColumnItem[]>([
|
||||||
|
{
|
||||||
|
title: 'ID',
|
||||||
|
dataIndex: 'id',
|
||||||
|
key: 'id',
|
||||||
|
align: 'center',
|
||||||
|
width: 70
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '用户ID',
|
||||||
|
dataIndex: 'userId',
|
||||||
|
key: 'userId',
|
||||||
|
align: 'center',
|
||||||
|
width: 90
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '商品图片',
|
||||||
|
key: 'goodsImage',
|
||||||
|
align: 'center',
|
||||||
|
width: 80
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '商品名称',
|
||||||
|
dataIndex: 'goodsName',
|
||||||
|
key: 'goodsName',
|
||||||
|
align: 'center',
|
||||||
|
ellipsis: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '商品价格',
|
||||||
|
dataIndex: 'price',
|
||||||
|
key: 'price',
|
||||||
|
align: 'center',
|
||||||
|
width: 100,
|
||||||
|
customRender: ({ text }) => (text ? `¥${text}` : '-')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '浏览次数',
|
||||||
|
dataIndex: 'visitCount',
|
||||||
|
key: 'visitCount',
|
||||||
|
align: 'center',
|
||||||
|
width: 90,
|
||||||
|
sorter: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '浏览来源',
|
||||||
|
dataIndex: 'browseSource',
|
||||||
|
key: 'browseSource',
|
||||||
|
align: 'center',
|
||||||
|
width: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '最后浏览时间',
|
||||||
|
dataIndex: 'lastVisitTime',
|
||||||
|
key: 'lastVisitTime',
|
||||||
|
align: 'center',
|
||||||
|
width: 160,
|
||||||
|
sorter: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '首次浏览',
|
||||||
|
dataIndex: 'createTime',
|
||||||
|
key: 'createTime',
|
||||||
|
align: 'center',
|
||||||
|
width: 160
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
width: 100,
|
||||||
|
fixed: 'right',
|
||||||
|
align: 'center',
|
||||||
|
hideInSetting: true
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
/* 搜索 */
|
||||||
|
const reload = (where?: ShopGoodsBrowseParam) => {
|
||||||
|
tableRef?.value?.reload({ where: where });
|
||||||
|
};
|
||||||
|
|
||||||
|
/* 删除单条 */
|
||||||
|
const remove = (row: ShopGoodsBrowse) => {
|
||||||
|
const hide = message.loading('请求中..', 0);
|
||||||
|
removeShopGoodsBrowse(row.id)
|
||||||
|
.then((msg) => {
|
||||||
|
hide();
|
||||||
|
message.success(msg);
|
||||||
|
reload();
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
hide();
|
||||||
|
message.error(e.message);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
name: 'ShopGoodsBrowse'
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
241
src/views/shop/shopOrder/components/OfflinePaymentModal.vue
Normal file
241
src/views/shop/shopOrder/components/OfflinePaymentModal.vue
Normal file
@@ -0,0 +1,241 @@
|
|||||||
|
<!-- 确认线下收款弹窗 -->
|
||||||
|
<template>
|
||||||
|
<a-modal
|
||||||
|
:visible="visible"
|
||||||
|
title="确认线下收款"
|
||||||
|
:width="520"
|
||||||
|
:confirm-loading="loading"
|
||||||
|
ok-text="确认收款"
|
||||||
|
@update:visible="updateVisible"
|
||||||
|
@ok="handleSubmit"
|
||||||
|
@cancel="handleCancel"
|
||||||
|
>
|
||||||
|
<a-alert
|
||||||
|
type="info"
|
||||||
|
show-icon
|
||||||
|
message="确认已收到该订单的线下付款(微信转账/银行汇款等),确认后订单将进入待发货状态。"
|
||||||
|
style="margin-bottom: 16px"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<a-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="form"
|
||||||
|
:rules="rules"
|
||||||
|
:label-col="{ span: 5 }"
|
||||||
|
:wrapper-col="{ span: 18 }"
|
||||||
|
>
|
||||||
|
<!-- 订单号 -->
|
||||||
|
<a-form-item label="订单号">
|
||||||
|
<span style="color: #999">{{ form.orderNo || '-' }}</span>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<!-- 支付凭证 -->
|
||||||
|
<a-form-item label="支付凭证" name="paymentVoucher">
|
||||||
|
<a-upload
|
||||||
|
list-type="picture-card"
|
||||||
|
:max-count="1"
|
||||||
|
:file-list="fileList"
|
||||||
|
:custom-request="handleUpload"
|
||||||
|
:before-upload="beforeUpload"
|
||||||
|
@remove="handleRemove"
|
||||||
|
@preview="handlePreview"
|
||||||
|
>
|
||||||
|
<div v-if="!fileList.length">
|
||||||
|
<PlusOutlined />
|
||||||
|
<div class="ant-upload-text">上传凭证</div>
|
||||||
|
</div>
|
||||||
|
</a-upload>
|
||||||
|
<div class="voucher-tip">支持 jpg/png 图片,单张不超过 10MB</div>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<!-- 备注 -->
|
||||||
|
<a-form-item label="备注" name="remarks">
|
||||||
|
<a-textarea
|
||||||
|
v-model:value="form.remarks"
|
||||||
|
placeholder="可填写备注(如:微信转账已收到)"
|
||||||
|
:rows="3"
|
||||||
|
:maxlength="200"
|
||||||
|
show-count
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
|
||||||
|
<!-- 图片预览 -->
|
||||||
|
<a-modal
|
||||||
|
:visible="previewVisible"
|
||||||
|
:footer="null"
|
||||||
|
title="凭证预览"
|
||||||
|
@cancel="previewVisible = false"
|
||||||
|
>
|
||||||
|
<img :src="previewImage" alt="支付凭证" style="width: 100%" />
|
||||||
|
</a-modal>
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, reactive, watch } from 'vue';
|
||||||
|
import { Form, message } from 'ant-design-vue';
|
||||||
|
import { PlusOutlined } from '@ant-design/icons-vue';
|
||||||
|
import type { UploadFile, UploadProps } from 'ant-design-vue';
|
||||||
|
import { ShopOrder } from '@/api/shop/shopOrder/model';
|
||||||
|
import { confirmOfflinePayment } from '@/api/shop/shopOrder';
|
||||||
|
import { uploadOss } from '@/api/system/file';
|
||||||
|
import { getUrl } from '@/utils/common';
|
||||||
|
|
||||||
|
const useForm = Form.useForm;
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
visible: boolean;
|
||||||
|
data?: ShopOrder | null;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'update:visible', visible: boolean): void;
|
||||||
|
(e: 'done'): void;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
// 表单数据
|
||||||
|
const form = reactive({
|
||||||
|
orderId: undefined as number | undefined,
|
||||||
|
orderNo: '' as string,
|
||||||
|
paymentVoucher: '' as string,
|
||||||
|
remarks: '' as string
|
||||||
|
});
|
||||||
|
|
||||||
|
// 表单验证规则
|
||||||
|
const rules = {
|
||||||
|
paymentVoucher: [
|
||||||
|
{ required: true, message: '请上传支付凭证' }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
const formRef = ref();
|
||||||
|
const { resetFields, validate } = useForm(form, rules);
|
||||||
|
|
||||||
|
// 状态
|
||||||
|
const loading = ref(false);
|
||||||
|
const fileList = ref<UploadFile[]>([]);
|
||||||
|
const previewVisible = ref(false);
|
||||||
|
const previewImage = ref('');
|
||||||
|
|
||||||
|
// 上传前校验
|
||||||
|
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
|
||||||
|
const isImage = ['image/jpeg', 'image/png', 'image/jpg'].includes(
|
||||||
|
file.type
|
||||||
|
);
|
||||||
|
if (!isImage) {
|
||||||
|
message.error('仅支持 jpg/png 格式图片');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const isLt10M = file.size / 1024 / 1024 < 10;
|
||||||
|
if (!isLt10M) {
|
||||||
|
message.error('图片大小不能超过 10MB');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 自定义上传
|
||||||
|
const handleUpload: UploadProps['customRequest'] = (options) => {
|
||||||
|
const { file, onSuccess, onError } = options;
|
||||||
|
uploadOss(file as File)
|
||||||
|
.then((data) => {
|
||||||
|
// 存储返回的 path(与项目 UploadCert 组件约定一致)
|
||||||
|
form.paymentVoucher = data.path || '';
|
||||||
|
fileList.value = [
|
||||||
|
{
|
||||||
|
uid: String(data.id || Date.now()),
|
||||||
|
name: data.name || '支付凭证',
|
||||||
|
status: 'done',
|
||||||
|
url: data.url || getUrl(data.path || '')
|
||||||
|
}
|
||||||
|
];
|
||||||
|
onSuccess?.(data, file as any);
|
||||||
|
// 触发表单校验清除错误
|
||||||
|
formRef.value?.validateFields(['paymentVoucher']);
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
message.error(e.message || '上传失败');
|
||||||
|
onError?.(e as any);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 删除凭证
|
||||||
|
const handleRemove = () => {
|
||||||
|
form.paymentVoucher = '';
|
||||||
|
fileList.value = [];
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 预览凭证
|
||||||
|
const handlePreview = (file: UploadFile) => {
|
||||||
|
previewImage.value = file.url || '';
|
||||||
|
previewVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 更新弹窗显示状态
|
||||||
|
const updateVisible = (visible: boolean) => {
|
||||||
|
emit('update:visible', visible);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 取消
|
||||||
|
const handleCancel = () => {
|
||||||
|
updateVisible(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 提交确认收款
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
try {
|
||||||
|
await validate();
|
||||||
|
if (!form.orderId) {
|
||||||
|
message.error('订单信息缺失');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
loading.value = true;
|
||||||
|
await confirmOfflinePayment(
|
||||||
|
form.orderId,
|
||||||
|
form.remarks || undefined,
|
||||||
|
form.paymentVoucher || undefined
|
||||||
|
);
|
||||||
|
message.success('确认收款成功,订单已进入待发货状态');
|
||||||
|
emit('done');
|
||||||
|
updateVisible(false);
|
||||||
|
} catch (error: any) {
|
||||||
|
if (error?.errorFields) return; // 表单校验失败,不弹错误
|
||||||
|
message.error(error.message || '确认收款失败');
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 监听弹窗显示状态
|
||||||
|
watch(
|
||||||
|
() => props.visible,
|
||||||
|
(visible) => {
|
||||||
|
if (visible) {
|
||||||
|
// 初始化表单
|
||||||
|
form.orderId = props.data?.orderId;
|
||||||
|
form.orderNo = props.data?.orderNo || '';
|
||||||
|
form.paymentVoucher = '';
|
||||||
|
form.remarks = '';
|
||||||
|
fileList.value = [];
|
||||||
|
} else {
|
||||||
|
resetFields();
|
||||||
|
fileList.value = [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.voucher-tip {
|
||||||
|
color: #999;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-upload-text {
|
||||||
|
margin-top: 8px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -369,6 +369,13 @@
|
|||||||
:data="current"
|
:data="current"
|
||||||
@done="reload"
|
@done="reload"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<!-- 确认线下收款弹窗 -->
|
||||||
|
<OfflinePaymentModal
|
||||||
|
v-model:visible="showOfflinePayment"
|
||||||
|
:data="current"
|
||||||
|
@done="reload"
|
||||||
|
/>
|
||||||
</a-page-header>
|
</a-page-header>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -399,14 +406,14 @@
|
|||||||
import { toDateString } from 'ele-admin-pro';
|
import { toDateString } from 'ele-admin-pro';
|
||||||
import OrderInfo from './components/orderInfo.vue';
|
import OrderInfo from './components/orderInfo.vue';
|
||||||
import DeliveryModal from './components/deliveryModal.vue';
|
import DeliveryModal from './components/deliveryModal.vue';
|
||||||
|
import OfflinePaymentModal from './components/OfflinePaymentModal.vue';
|
||||||
import { ShopOrder, ShopOrderParam } from '@/api/shop/shopOrder/model';
|
import { ShopOrder, ShopOrderParam } from '@/api/shop/shopOrder/model';
|
||||||
import {
|
import {
|
||||||
pageShopOrder,
|
pageShopOrder,
|
||||||
repairOrder,
|
repairOrder,
|
||||||
removeShopOrder,
|
removeShopOrder,
|
||||||
removeBatchShopOrder,
|
removeBatchShopOrder,
|
||||||
updateShopOrder, refundShopOrder,
|
updateShopOrder, refundShopOrder
|
||||||
confirmOfflinePayment
|
|
||||||
} from '@/api/shop/shopOrder';
|
} from '@/api/shop/shopOrder';
|
||||||
import { updateUser } from '@/api/system/user';
|
import { updateUser } from '@/api/system/user';
|
||||||
import { getPayType } from '@/utils/shop';
|
import { getPayType } from '@/utils/shop';
|
||||||
@@ -427,6 +434,8 @@
|
|||||||
const showMove = ref(false);
|
const showMove = ref(false);
|
||||||
// 是否显示发货弹窗
|
// 是否显示发货弹窗
|
||||||
const showDelivery = ref(false);
|
const showDelivery = ref(false);
|
||||||
|
// 是否显示确认线下收款弹窗
|
||||||
|
const showOfflinePayment = ref(false);
|
||||||
// 加载状态
|
// 加载状态
|
||||||
const loading = ref(true);
|
const loading = ref(true);
|
||||||
// 激活的标签(支持从路由参数初始化,如 /shop/shopOrder?tab=all)
|
// 激活的标签(支持从路由参数初始化,如 /shop/shopOrder?tab=all)
|
||||||
@@ -647,31 +656,8 @@
|
|||||||
|
|
||||||
// 确认线下付款收款
|
// 确认线下付款收款
|
||||||
const handleConfirmOfflinePayment = (record: ShopOrder) => {
|
const handleConfirmOfflinePayment = (record: ShopOrder) => {
|
||||||
let remarksValue = '';
|
current.value = record;
|
||||||
Modal.confirm({
|
showOfflinePayment.value = true;
|
||||||
title: '确认线下收款',
|
|
||||||
content: createVNode('div', null, [
|
|
||||||
createVNode('p', { style: 'margin-bottom: 8px' }, '确认已收到该订单的线下付款(微信转账/银行汇款等)?'),
|
|
||||||
createVNode('p', { style: 'margin-bottom: 8px; color: #999; font-size: 12px' }, `订单号:${record.orderNo}`),
|
|
||||||
createVNode('input', {
|
|
||||||
id: 'offline-remarks-input',
|
|
||||||
placeholder: '可填写备注(如:微信转账已收到)',
|
|
||||||
style: 'width: 100%; padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px;',
|
|
||||||
onInput: (e: any) => { remarksValue = e.target.value; }
|
|
||||||
})
|
|
||||||
]),
|
|
||||||
okText: '确认收款',
|
|
||||||
okType: 'success',
|
|
||||||
onOk: async () => {
|
|
||||||
try {
|
|
||||||
await confirmOfflinePayment(record.orderId!, remarksValue || undefined);
|
|
||||||
message.success('确认收款成功,订单已进入待发货状态');
|
|
||||||
reload();
|
|
||||||
} catch (error: any) {
|
|
||||||
message.error(error.message || '确认收款失败');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// 发货处理
|
// 发货处理
|
||||||
|
|||||||
Reference in New Issue
Block a user