diff --git a/apps/mini-user/src/pages/orders/index.tsx b/apps/mini-user/src/pages/orders/index.tsx index bbd0cc3..b08c584 100644 --- a/apps/mini-user/src/pages/orders/index.tsx +++ b/apps/mini-user/src/pages/orders/index.tsx @@ -1,9 +1,10 @@ import { useCallback, useEffect, useState } from 'react'; -import { View, Text } from '@tarojs/components'; +import { View, Text, Image } from '@tarojs/components'; import Taro, { usePullDownRefresh, useRouter } from '@tarojs/taro'; import PageShell from '../../components/PageShell'; import SubPageHeader from '../../components/SubPageHeader'; import { request, toast } from '../../lib/api'; +import { buildPayUrl } from '../../lib/checkout-nav'; const TABS = [ { key: 'all', label: '全部订单' }, @@ -30,6 +31,13 @@ function orderStatusLabel(tab: string, status?: string): string { return STATUS_LABELS[status] || status; } +type OrderItem = { + productName?: string; + productImage?: string; + unitPrice?: number; + quantity?: number; +}; + type OrderRow = { id: string; orderNo?: string; @@ -37,7 +45,9 @@ type OrderRow = { payAmount?: number; productName?: string; qty?: number; - createdAt?: string; + quantity?: number; + originOrderId?: string | null; + items?: OrderItem[]; }; export default function OrdersPage() { @@ -71,6 +81,10 @@ export default function OrdersPage() { void loadOrders().finally(() => Taro.stopPullDownRefresh()); }); + function goPay(orderId: string) { + Taro.navigateTo({ url: buildPayUrl({ orderId }) }); + } + return ( @@ -89,35 +103,62 @@ export default function OrdersPage() { {loading ? 加载中… : null} {!loading && orders.length === 0 ? 暂无订单 : null} {!loading && - orders.map((o) => ( - Taro.navigateTo({ url: `/pages/order-detail/index?id=${o.id}` })} - > - - {o.orderNo || o.id} - - {orderStatusLabel(tab, o.status)} - - - - - - {o.productName || '杜康商品'} - - 数量 {o.qty ?? 1} · {o.createdAt ? String(o.createdAt).slice(0, 10) : ''} + orders.map((o) => { + const item = o.items?.[0]; + const productName = item?.productName || o.productName || '杜康商品'; + const productImage = (item?.productImage || '').trim(); + const qty = item?.quantity ?? o.quantity ?? o.qty ?? 1; + const unitPrice = Number(item?.unitPrice ?? 0); + const canPay = o.status === 'PENDING_PAY' && !o.originOrderId; + + return ( + Taro.navigateTo({ url: `/pages/order-detail/index?id=${o.id}` })} + > + + {o.orderNo || o.id} + + {orderStatusLabel(tab, o.status)} + + + {productImage ? ( + + ) : null} + + + {productName} + + 数量 {qty} + 单价 ¥{unitPrice.toFixed(2)} + + + + + + 实付 + + ¥{Number(o.payAmount ?? 0).toFixed(2)} + + + {canPay ? ( + { + e.stopPropagation(); + goPay(o.id); + }} + > + 付款 + + ) : null} + - - 实付 - - ¥{Number(o.payAmount ?? 0).toFixed(2)} - - - - ))} + ); + })} ); } diff --git a/apps/mini-user/src/styles/order.css b/apps/mini-user/src/styles/order.css index 6d4432d..842c249 100644 --- a/apps/mini-user/src/styles/order.css +++ b/apps/mini-user/src/styles/order.css @@ -314,6 +314,13 @@ background: var(--color-surface-container); margin-right: 12px; flex-shrink: 0; + overflow: hidden; +} + +.order-list-thumb-img { + width: 100%; + height: 100%; + display: block; } .order-list-name { @@ -323,6 +330,12 @@ margin-bottom: 4px; } +.order-list-meta-row { + display: flex; + align-items: center; + gap: 12px; +} + .order-list-meta { display: block; font-size: 12px; @@ -336,6 +349,28 @@ margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-surface-container); + gap: 12px; +} + +.order-list-pay-amount { + display: flex; + align-items: baseline; + gap: 6px; + min-width: 0; +} + +.order-list-pay-btn { + flex-shrink: 0; + height: 32px; + padding: 0 16px; + border-radius: 999px; + background: var(--color-heritage-red); + color: #fff; + font-size: 13px; + font-weight: 600; + display: flex; + align-items: center; + justify-content: center; } .pay-status {