From a59d428e788b3c1f68f83d0cd56d6cb42b82e622 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Wed, 15 Jul 2026 13:30:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(shopOrder):=20=E6=96=B0=E5=A2=9E=E7=A1=AE?=
 =?UTF-8?q?=E8=AE=A4=E7=BA=BF=E4=B8=8B=E6=94=B6=E6=AC=BE=E4=B8=8A=E4=BC=A0?=
 =?UTF-8?q?=E6=94=AF=E4=BB=98=E5=87=AD=E8=AF=81=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 重构确认线下收款为独立组件 OfflinePaymentModal.vue
- 新增支付凭证字段 paymentVoucher，支持图片上传与预览
- 上传限制为 jpg/png 格式，单张图片最大 10MB
- API confirmOfflinePayment 新增 paymentVoucher 参数
- 页面移除原 Modal.confirm 逻辑，改为调用新组件弹窗
- 修复 buyerRemarks 和 merchantRemarks 类型错误
- 后端 shop_order 表待新增 payment_voucher 字段和接口支持
- 同步更新相关接口模型与视图交互逻辑

feat(shopGoodsBrowse): 新增用户商品浏览记录管理功能

- 新增 ShopGoodsBrowse 接口模型及分页查询、删除接口
- 前端新增浏览记录管理页面，实现列表展示和删除
- 支持基于用户ID、商品ID、浏览来源和日期范围搜索
- 列表显示商品图片、名称、价格、浏览次数及时间等信息
- 添加图片预览和操作确认弹窗，保障操作体验和安全
---
 .workbuddy/memory/2026-07-15.md               |  14 +
 src/api/shop/shopGoodsBrowse/index.ts         |  30 +++
 src/api/shop/shopGoodsBrowse/model/index.ts   |  42 +++
 src/api/shop/shopOrder/index.ts               |  11 +-
 src/api/shop/shopOrder/model/index.ts         |   6 +-
 .../shopGoodsBrowse/components/search.vue     |  87 +++++++
 src/views/shop/shopGoodsBrowse/index.vue      | 196 ++++++++++++++
 .../components/OfflinePaymentModal.vue        | 241 ++++++++++++++++++
 src/views/shop/shopOrder/index.vue            |  40 +--
 9 files changed, 636 insertions(+), 31 deletions(-)
 create mode 100644 src/api/shop/shopGoodsBrowse/index.ts
 create mode 100644 src/api/shop/shopGoodsBrowse/model/index.ts
 create mode 100644 src/views/shop/shopGoodsBrowse/components/search.vue
 create mode 100644 src/views/shop/shopGoodsBrowse/index.vue
 create mode 100644 src/views/shop/shopOrder/components/OfflinePaymentModal.vue

diff --git a/.workbuddy/memory/2026-07-15.md b/.workbuddy/memory/2026-07-15.md
index 15f2031..6eb248c 100644
--- a/.workbuddy/memory/2026-07-15.md
+++ b/.workbuddy/memory/2026-07-15.md
@@ -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` 参数。
diff --git a/src/api/shop/shopGoodsBrowse/index.ts b/src/api/shop/shopGoodsBrowse/index.ts
new file mode 100644
index 0000000..4c6b0dd
--- /dev/null
+++ b/src/api/shop/shopGoodsBrowse/index.ts
@@ -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));
+}
diff --git a/src/api/shop/shopGoodsBrowse/model/index.ts b/src/api/shop/shopGoodsBrowse/model/index.ts
new file mode 100644
index 0000000..4b7e25c
--- /dev/null
+++ b/src/api/shop/shopGoodsBrowse/model/index.ts
@@ -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;
+}
diff --git a/src/api/shop/shopOrder/index.ts b/src/api/shop/shopOrder/index.ts
index c58b7d1..0bd2ab3 100644
--- a/src/api/shop/shopOrder/index.ts
+++ b/src/api/shop/shopOrder/index.ts
@@ -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;
diff --git a/src/api/shop/shopOrder/model/index.ts b/src/api/shop/shopOrder/model/index.ts
index e89add4..255b079 100644
--- a/src/api/shop/shopOrder/model/index.ts
+++ b/src/api/shop/shopOrder/model/index.ts
@@ -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;
   // 备注
diff --git a/src/views/shop/shopGoodsBrowse/components/search.vue b/src/views/shop/shopGoodsBrowse/components/search.vue
new file mode 100644
index 0000000..ac76ef3
--- /dev/null
+++ b/src/views/shop/shopGoodsBrowse/components/search.vue
@@ -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>
diff --git a/src/views/shop/shopGoodsBrowse/index.vue b/src/views/shop/shopGoodsBrowse/index.vue
new file mode 100644
index 0000000..3ba9c22
--- /dev/null
+++ b/src/views/shop/shopGoodsBrowse/index.vue
@@ -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>
diff --git a/src/views/shop/shopOrder/components/OfflinePaymentModal.vue b/src/views/shop/shopOrder/components/OfflinePaymentModal.vue
new file mode 100644
index 0000000..2782f1d
--- /dev/null
+++ b/src/views/shop/shopOrder/components/OfflinePaymentModal.vue
@@ -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>
diff --git a/src/views/shop/shopOrder/index.vue b/src/views/shop/shopOrder/index.vue
index 4418283..4b87ac7 100644
--- a/src/views/shop/shopOrder/index.vue
+++ b/src/views/shop/shopOrder/index.vue
@@ -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;
   };
 
   // 发货处理