fix(shopOrder): 默认tab改为全部,订单详情页增支付凭证图
- 将 shopOrder 选项卡默认值从 'undelivered' 改为 'all',确保首页展示全部订单数据 - 修正初次加载时因缺少 statusFilter 导致数据不符的问题 - 订单详情页新增“支付凭证”显示,支持线下付款上传凭证图片预览 - 引入确保完整URL显示的工具函数 ensureFullUrl,配合压缩图像展示 - form reactive 新增 paymentVoucher 字段,符合 ShopOrder 模型定义 - 仅线下付款订单显示该凭证图,条件渲染自然处理
This commit is contained in:
@@ -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)的订单才有此凭证图,条件渲染自然处理。
|
||||
|
||||
@@ -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,
|
||||
// 申请退款时间
|
||||
|
||||
@@ -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'
|
||||
);
|
||||
|
||||
// ============ 新订单提醒 ============
|
||||
|
||||
Reference in New Issue
Block a user