fix(shopOrder): 默认tab改为全部,订单详情页增支付凭证图

- 将 shopOrder 选项卡默认值从 'undelivered' 改为 'all',确保首页展示全部订单数据
- 修正初次加载时因缺少 statusFilter 导致数据不符的问题
- 订单详情页新增“支付凭证”显示,支持线下付款上传凭证图片预览
- 引入确保完整URL显示的工具函数 ensureFullUrl,配合压缩图像展示
- form reactive 新增 paymentVoucher 字段,符合 ShopOrder 模型定义
- 仅线下付款订单显示该凭证图,条件渲染自然处理
This commit is contained in:
2026-07-15 15:53:14 +08:00
parent d5e040b1e6
commit 071a3bf110
3 changed files with 34 additions and 2 deletions

View File

@@ -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的订单才有此凭证图条件渲染自然处理。