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

View File

@@ -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,
// 申请退款时间

View File

@@ -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'
);
// ============ 新订单提醒 ============