feat(shop): 新增Dashboard待付款订单统计及支持

- Dashboard待处理事项新增“待付款订单”项,使用statusFilter=0查询
- 点击待付款订单跳转至/shop/shopOrder?tab=unpaid页面
- shopOrder页面恢复“待付款”标签页,validTabs列表包含unpaid
- shopOrder页面根据路由query初始化活动标签,支持unpaid选项
- 新增dot-gold样式用于待付款订单高亮显示
- 订单数量接口新增待付款订单数获取及异常处理逻辑
- 调整组件中待处理事项列表,支持待付款订单数据响应式更新
This commit is contained in:
2026-07-15 03:46:23 +08:00
parent 57b584df1b
commit b0ff82599a
3 changed files with 27 additions and 3 deletions

View File

@@ -11,3 +11,10 @@
- Dashboard 中"订单总数"/"总营业额"跳转链接改为 `/shop/shopOrder?tab=all`"待发货订单"改为 `?tab=undelivered`"退款申请"改为 `?tab=refunded` - Dashboard 中"订单总数"/"总营业额"跳转链接改为 `/shop/shopOrder?tab=all`"待发货订单"改为 `?tab=undelivered`"退款申请"改为 `?tab=refunded`
- shopOrder 页面读取 `route.query.tab` 初始化 `activeKey`,无效值回退到 `'undelivered'` - shopOrder 页面读取 `route.query.tab` 初始化 `activeKey`,无效值回退到 `'undelivered'`
- 文件:`src/views/shop/dashboard/index.vue``src/views/shop/shopOrder/index.vue` - 文件:`src/views/shop/dashboard/index.vue``src/views/shop/shopOrder/index.vue`
## Dashboard 待处理事项新增"待付款订单"
- 在待发货订单上方新增"待付款订单"统计项,使用 `statusFilter=0` 查询,点击跳转 `/shop/shopOrder?tab=unpaid`
- shopOrder 页面取消注释"待付款"tab`validTabs` 加入 `unpaid`
- 新增 `dot-gold` 样式。
- 文件:`src/views/shop/dashboard/index.vue``src/views/shop/shopOrder/index.vue`

View File

@@ -288,14 +288,16 @@ const coreStats = computed(() => [
]); ]);
// 待处理事项数据 // 待处理事项数据
const pendingPaymentCount = ref(0);
const pendingShipmentCount = ref(0); const pendingShipmentCount = ref(0);
const pendingRefundCount = ref(0); const pendingRefundCount = ref(0);
const couponUsedCount = computed(() => statisticsStore.safeCouponUsedCount); const couponUsedCount = computed(() => statisticsStore.safeCouponUsedCount);
// 待处理事项使用computed确保响应式更新 // 待处理事项使用computed确保响应式更新
const todoItems = computed(() => [ const todoItems = computed(() => [
{ label: '待付款订单', value: pendingPaymentCount.value, to: '/shop/shopOrder?tab=unpaid', tagColor: 'gold', dotColor: 'dot-gold', urgent: pendingPaymentCount.value > 0 },
{ label: '待发货订单', value: pendingShipmentCount.value, to: '/shop/shopOrder?tab=undelivered', tagColor: 'blue', dotColor: 'dot-blue', urgent: pendingShipmentCount.value > 0 }, { label: '待发货订单', value: pendingShipmentCount.value, to: '/shop/shopOrder?tab=undelivered', tagColor: 'blue', dotColor: 'dot-blue', urgent: pendingShipmentCount.value > 0 },
{ label: '退款申请', value: pendingRefundCount.value, to: '/shop/shopOrder?tab=refunded', tagColor: 'orange', dotColor: 'dot-orange', urgent: pendingRefundCount.value > 0 }, // { label: '退款申请', value: pendingRefundCount.value, to: '/shop/shopOrder?tab=refunded', tagColor: 'orange', dotColor: 'dot-orange', urgent: pendingRefundCount.value > 0 },
// { label: '优惠券使用', value: couponUsedCount.value, to: '/market/coupon', tagColor: 'cyan', dotColor: 'dot-cyan', urgent: false }, // { label: '优惠券使用', value: couponUsedCount.value, to: '/market/coupon', tagColor: 'cyan', dotColor: 'dot-cyan', urgent: false },
]); ]);
@@ -375,6 +377,20 @@ const loadData = async () => {
]); ]);
// 获取待处理事项数据 // 获取待处理事项数据
try {
// 获取待付款订单数type=0商城订单, statusFilter=0待付款
const paymentResult = await pageShopOrder({
type: 0,
statusFilter: 0,
page: 1,
limit: 1
});
pendingPaymentCount.value = paymentResult?.count || 0;
} catch (e) {
console.warn('获取待付款订单数失败:', e);
pendingPaymentCount.value = 0;
}
try { try {
// 获取待发货订单数type=0商城订单, statusFilter=1待发货 // 获取待发货订单数type=0商城订单, statusFilter=1待发货
const shipmentResult = await pageShopOrder({ const shipmentResult = await pageShopOrder({
@@ -511,6 +527,7 @@ onUnmounted(() => {
.todo-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .todo-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-orange { background: #f97316; } .dot-orange { background: #f97316; }
.dot-blue { background: #3b82f6; } .dot-blue { background: #3b82f6; }
.dot-gold { background: #faad14; }
.dot-cyan { background: #06b6d4; } .dot-cyan { background: #06b6d4; }
.dot-purple { background: #a855f7; } .dot-purple { background: #a855f7; }
.todo-content { flex: 1; display: flex; align-items: center; } .todo-content { flex: 1; display: flex; align-items: center; }

View File

@@ -36,10 +36,10 @@
</div> </div>
<a-tabs type="card" v-model:activeKey="activeKey" @change="onTabs"> <a-tabs type="card" v-model:activeKey="activeKey" @change="onTabs">
<a-tab-pane key="all" tab="全部" /> <a-tab-pane key="all" tab="全部" />
<a-tab-pane key="unpaid" tab="待付款" />
<a-tab-pane key="undelivered" tab="待发货" /> <a-tab-pane key="undelivered" tab="待发货" />
<a-tab-pane key="unreceived" tab="待收货" /> <a-tab-pane key="unreceived" tab="待收货" />
<a-tab-pane key="completed" tab="已完成" /> <a-tab-pane key="completed" tab="已完成" />
<!-- <a-tab-pane key="unpaid" tab="待付款" />-->
<a-tab-pane key="refunded" tab="退货/售后" /> <a-tab-pane key="refunded" tab="退货/售后" />
<a-tab-pane key="cancelled" tab="已关闭" /> <a-tab-pane key="cancelled" tab="已关闭" />
</a-tabs> </a-tabs>
@@ -431,7 +431,7 @@
const loading = ref(true); const loading = ref(true);
// 激活的标签(支持从路由参数初始化,如 /shop/shopOrder?tab=all // 激活的标签(支持从路由参数初始化,如 /shop/shopOrder?tab=all
const route = useRoute(); const route = useRoute();
const validTabs = ['all', 'undelivered', 'unreceived', 'completed', 'refunded', 'cancelled']; const validTabs = ['all', 'unpaid', 'undelivered', 'unreceived', 'completed', 'refunded', 'cancelled'];
const tabFromQuery = route.query.tab as string; const tabFromQuery = route.query.tab as string;
const activeKey = ref<string>( const activeKey = ref<string>(
validTabs.includes(tabFromQuery) ? tabFromQuery : 'undelivered' validTabs.includes(tabFromQuery) ? tabFromQuery : 'undelivered'