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`。
|
||||
- 后端 `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()` 失效缓存。
|
||||
|
||||
## 确认线下收款新增上传凭证功能
|
||||
|
||||
- 背景：原"确认线下收款"用 `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>>(
|
||||
MODULES_API_URL + '/shop/shop-order/confirm-offline-payment/' + id,
|
||||
null,
|
||||
{ params: { remarks } }
|
||||
{ params: { remarks, paymentVoucher } }
|
||||
);
|
||||
if (res.data.code === 0) {
|
||||
return res.data.message;
|
||||
|
||||
@@ -129,6 +129,8 @@ export interface ShopOrder {
|
||||
invoiceNo?: string;
|
||||
// 支付时间
|
||||
payTime?: string;
|
||||
// 线下收款支付凭证（图片地址，确认线下收款时上传）
|
||||
paymentVoucher?: string;
|
||||
// 退款时间
|
||||
refundTime?: string;
|
||||
// 申请退款时间
|
||||
@@ -142,9 +144,9 @@ export interface ShopOrder {
|
||||
// 系统版本号 0当前版本 value=其他版本
|
||||
version?: number;
|
||||
// 买家备注
|
||||
buyerRemarks: undefined;
|
||||
buyerRemarks?: string;
|
||||
// 商家备注
|
||||
merchantRemarks: undefined;
|
||||
merchantRemarks?: string;
|
||||
// 用户id
|
||||
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"
|
||||
@done="reload"
|
||||
/>
|
||||
|
||||
<!-- 确认线下收款弹窗 -->
|
||||
<OfflinePaymentModal
|
||||
v-model:visible="showOfflinePayment"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
</a-page-header>
|
||||
</template>
|
||||
|
||||
@@ -399,14 +406,14 @@
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import OrderInfo from './components/orderInfo.vue';
|
||||
import DeliveryModal from './components/deliveryModal.vue';
|
||||
import OfflinePaymentModal from './components/OfflinePaymentModal.vue';
|
||||
import { ShopOrder, ShopOrderParam } from '@/api/shop/shopOrder/model';
|
||||
import {
|
||||
pageShopOrder,
|
||||
repairOrder,
|
||||
removeShopOrder,
|
||||
removeBatchShopOrder,
|
||||
updateShopOrder, refundShopOrder,
|
||||
confirmOfflinePayment
|
||||
updateShopOrder, refundShopOrder
|
||||
} from '@/api/shop/shopOrder';
|
||||
import { updateUser } from '@/api/system/user';
|
||||
import { getPayType } from '@/utils/shop';
|
||||
@@ -427,6 +434,8 @@
|
||||
const showMove = ref(false);
|
||||
// 是否显示发货弹窗
|
||||
const showDelivery = ref(false);
|
||||
// 是否显示确认线下收款弹窗
|
||||
const showOfflinePayment = ref(false);
|
||||
// 加载状态
|
||||
const loading = ref(true);
|
||||
// 激活的标签（支持从路由参数初始化，如 /shop/shopOrder?tab=all）
|
||||
@@ -647,31 +656,8 @@
|
||||
|
||||
// 确认线下付款收款
|
||||
const handleConfirmOfflinePayment = (record: ShopOrder) => {
|
||||
let remarksValue = '';
|
||||
Modal.confirm({
|
||||
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 || '确认收款失败');
|
||||
}
|
||||
}
|
||||
});
|
||||
current.value = record;
|
||||
showOfflinePayment.value = true;
|
||||
};
|
||||
|
||||
// 发货处理
|
||||
|
||||
Reference in New Issue
Block a user