From 071a3bf110b5d33de2a6b430b6fee961e20ca737 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 15:53:14 +0800
Subject: [PATCH] =?UTF-8?q?fix(shopOrder):=20=E9=BB=98=E8=AE=A4tab?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA=E5=85=A8=E9=83=A8=EF=BC=8C=E8=AE=A2=E5=8D=95?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E5=A2=9E=E6=94=AF=E4=BB=98=E5=87=AD?=
 =?UTF-8?q?=E8=AF=81=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将 shopOrder 选项卡默认值从 'undelivered' 改为 'all'，确保首页展示全部订单数据
- 修正初次加载时因缺少 statusFilter 导致数据不符的问题
- 订单详情页新增“支付凭证”显示，支持线下付款上传凭证图片预览
- 引入确保完整URL显示的工具函数 ensureFullUrl，配合压缩图像展示
- form reactive 新增 paymentVoucher 字段，符合 ShopOrder 模型定义
- 仅线下付款订单显示该凭证图，条件渲染自然处理
---
 .workbuddy/memory/2026-07-15.md                 | 17 +++++++++++++++++
 .../shop/shopOrder/components/orderInfo.vue     | 17 ++++++++++++++++-
 src/views/shop/shopOrder/index.vue              |  2 +-
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/.workbuddy/memory/2026-07-15.md b/.workbuddy/memory/2026-07-15.md
index 567b9aa..30c6b51 100644
--- a/.workbuddy/memory/2026-07-15.md
+++ b/.workbuddy/memory/2026-07-15.md
@@ -1,5 +1,11 @@
 # 2026-07-15
 
+## shopOrder 选项卡默认改为全部
+
+- 需求：`/shop/shopOrder` 选项卡默认从"待发货"改为"全部"。
+- 改动 `src/views/shop/shopOrder/index.vue`：`activeKey` 初始值在路由参数 `tab` 无效时的回退值由 `'undelivered'` 改为 `'all'`。
+- `datasource` 中 `getStatusFilterByTab('all')` 返回 `undefined`，即不传 `statusFilter`，查全部订单，符合预期。
+
 ## 修复 shopOrder 页面默认待发货tab数据不正确
 
 - 根因：`activeKey` 默认为 `'undelivered'`，但 `datasource` 函数只设了 `where.type = 0`，没有设 `statusFilter`。`statusFilter` 只在用户点击 tab 触发 `onTabs` 时才设置。所以页面初次加载时查的是全部订单而非待发货订单。
@@ -129,3 +135,14 @@
 - `src/views/shop/dashboard/index.vue`：`quickLinks` 改 computed，订单管理项 `badge: hasNewOrder.value`；`quick-icon` 加红点 span + pulse 动画样式。
 - 决策（用户确认）：红点=新订单未查看（进订单页清除）；位置=订单管理菜单+dashboard快速入口订单管理图标；声音保留并全局化。
 - 构建验证：`vite build --outDir dist_verify` 通过（EXIT:0）。原 `pnpm build` 失败仅因 vite 清空 `dist/assets` 被安全删除保护拦截（83文件>50阈值），与代码无关。
+
+## shopOrder 订单详情页（orderInfo.vue）支付方式下增加支付凭证图
+
+- 背景：之前 `OfflinePaymentModal` 确认线下收款时已支持上传 `paymentVoucher`（OSS path），但订单详情页只展示「线下付款」tag，看不到凭证图。
+- 改动 `src/views/shop/shopOrder/components/orderInfo.vue`：
+  - 模板：在「支付方式」`<a-descriptions-item>` 之后、「开票状态」之前新增「支付凭证」项，`v-if="form.paymentVoucher"`，`:span="3"` 占满整行。
+  - 缩略图用 `a-image`，`:width="120"`，`getCompressedImageUrl(form.paymentVoucher, { width: 750 })`（按用户要求宽度 750），`preview-src-list` 用 `ensureFullUrl(form.paymentVoucher)` 给原图预览。
+  - 引入 `ensureFullUrl` 来自 `@/utils/image`（已有 `getCompressedImageUrl`）。
+  - form reactive 默认值新增 `paymentVoucher: undefined`，对齐 `ShopOrder` model。
+- `ShopOrder` model 中 `paymentVoucher?: string` 字段早就存在（payTime 之后），无需改 model/API。
+- 用户场景：仅线下付款（payType=9）的订单才有此凭证图，条件渲染自然处理。
diff --git a/src/views/shop/shopOrder/components/orderInfo.vue b/src/views/shop/shopOrder/components/orderInfo.vue
index b5b18da..78e3ac8 100644
--- a/src/views/shop/shopOrder/components/orderInfo.vue
+++ b/src/views/shop/shopOrder/components/orderInfo.vue
@@ -202,6 +202,19 @@
             </template>
           </a-tooltip>
         </a-descriptions-item>
+        <a-descriptions-item
+          v-if="form.paymentVoucher"
+          label="支付凭证"
+          :span="3"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          <a-image
+            :width="120"
+            :src="getCompressedImageUrl(form.paymentVoucher, { width: 750 })"
+            :preview-src-list="[ensureFullUrl(form.paymentVoucher)]"
+            style="cursor: pointer"
+          />
+        </a-descriptions-item>
         <a-descriptions-item
           label="开票状态"
           :labelStyle="{ width: '90px', color: '#808080' }"
@@ -425,7 +438,7 @@
   import { updateShopOrder, removeShopOrder, refundShopOrder } from '@/api/shop/shopOrder';
   import { message, Modal } from 'ant-design-vue';
   import DeliveryModal from './deliveryModal.vue';
-  import {getCompressedImageUrl} from "@/utils/image";
+  import {getCompressedImageUrl, ensureFullUrl} from "@/utils/image";
 
   const useForm = Form.useForm;
 
@@ -593,6 +606,8 @@
     invoiceNo: undefined,
     // 支付时间
     payTime: undefined,
+    // 线下收款支付凭证（图片地址，确认线下收款时上传）
+    paymentVoucher: undefined,
     // 退款时间
     refundTime: undefined,
     // 申请退款时间
diff --git a/src/views/shop/shopOrder/index.vue b/src/views/shop/shopOrder/index.vue
index 284523f..110b834 100644
--- a/src/views/shop/shopOrder/index.vue
+++ b/src/views/shop/shopOrder/index.vue
@@ -443,7 +443,7 @@
   const validTabs = ['all', 'unpaid', 'undelivered', 'unreceived', 'completed', 'refunded', 'cancelled'];
   const tabFromQuery = route.query.tab as string;
   const activeKey = ref<string>(
-    validTabs.includes(tabFromQuery) ? tabFromQuery : 'undelivered'
+    validTabs.includes(tabFromQuery) ? tabFromQuery : 'all'
   );
 
   // ============ 新订单提醒 ============