用户端修改：付款按钮，显示单价，订单的图片

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 (
     <PageShell variant="sub" className="orders-page">
       <SubPageHeader title="我的订单" />
@@ -89,35 +103,62 @@ export default function OrdersPage() {
       {loading ? <View className="u-empty">加载中…</View> : null}
       {!loading && orders.length === 0 ? <View className="u-empty">暂无订单</View> : null}
       {!loading &&
-        orders.map((o) => (
-          <View
-            key={o.id}
-            className="order-list-item"
-            onClick={() => Taro.navigateTo({ url: `/pages/order-detail/index?id=${o.id}` })}
-          >
-            <View className="order-list-head">
-              <Text className="order-list-no">{o.orderNo || o.id}</Text>
-              <Text className="order-list-status">
-                {orderStatusLabel(tab, o.status)}
-              </Text>
-            </View>
-            <View className="order-list-body">
-              <View className="order-list-thumb" />
-              <View style={{ flex: 1 }}>
-                <Text className="order-list-name">{o.productName || '杜康商品'}</Text>
-                <Text className="order-list-meta">
-                  数量 {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 (
+            <View
+              key={o.id}
+              className="order-list-item"
+              onClick={() => Taro.navigateTo({ url: `/pages/order-detail/index?id=${o.id}` })}
+            >
+              <View className="order-list-head">
+                <Text className="order-list-no">{o.orderNo || o.id}</Text>
+                <Text className="order-list-status">
+                  {orderStatusLabel(tab, o.status)}
                 </Text>
               </View>
+              <View className="order-list-body">
+                <View className="order-list-thumb">
+                  {productImage ? (
+                    <Image className="order-list-thumb-img" src={productImage} mode="aspectFill" />
+                  ) : null}
+                </View>
+                <View style={{ flex: 1, minWidth: 0 }}>
+                  <Text className="order-list-name">{productName}</Text>
+                  <View className="order-list-meta-row">
+                    <Text className="order-list-meta">数量 {qty}</Text>
+                    <Text className="order-list-meta">单价 ¥{unitPrice.toFixed(2)}</Text>
+                  </View>
+                </View>
+              </View>
+              <View className="order-list-footer">
+                <View className="order-list-pay-amount">
+                  <Text className="order-list-meta">实付</Text>
+                  <Text className="order-product-price">
+                    ¥{Number(o.payAmount ?? 0).toFixed(2)}
+                  </Text>
+                </View>
+                {canPay ? (
+                  <View
+                    className="order-list-pay-btn"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      goPay(o.id);
+                    }}
+                  >
+                    付款
+                  </View>
+                ) : null}
+              </View>
             </View>
-            <View className="order-list-footer">
-              <Text className="order-list-meta">实付</Text>
-              <Text className="order-product-price">
-                ¥{Number(o.payAmount ?? 0).toFixed(2)}
-              </Text>
-            </View>
-          </View>
-        ))}
+          );
+        })}
     </PageShell>
   );
 }

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 {