账单与支付

src/pages/order-list/index.tsx

@@ -1,10 +1,11 @@
 import { useCallback, useRef, useState } from 'react'
 import Taro, { useDidShow, useReachBottom, useRouter } from '@tarojs/taro'
-import { View, Text, ScrollView } from '@tarojs/components'
+import { View, Text, Image, ScrollView } from '@tarojs/components'
 import { Empty, Popup } from '@antmjs/vantui'
 import useAuthStore from '@/stores/auth/useAuthStore'
 import { cancelOrderApi, getOrderDetailApi, getOrderListApi } from '@/services/order'
 import { ORDER_STATUS_FILTERS, ORDER_STATUS_TEXT } from '@/types/order'
+import { resolveFileUrl } from '@/utils/format'
 import type { OrderDetail, OrderListItem, OrderStatus } from '@/types/order'
 import './index.less'
 
@@ -167,11 +168,33 @@ export default function OrderListPage() {
                 {order.status_name}
               </Text>
             </View>
-            {/* 商品预览（仅前 3 条，完整明细见详情） */}
-            <Text className='order-item__preview'>
-              {order.items.map(i => `${i.product_name}×${i.quantity}`).join('、')}
-              {order.item_count > 3 ? ` 等${order.item_count}种` : ''}
-            </Text>
+            {/* 商品预览 */}
+            <View className='order-item__preview'>
+              {order.items.map((i, idx) => (
+                <View key={idx} className='order-item__goods'>
+                  {i.image ? (
+                    <Image
+                      className='order-item__goods-img'
+                      src={resolveFileUrl(i.image)}
+                      mode='aspectFill'
+                      lazyLoad
+                    />
+                  ) : (
+                    <View className='order-item__goods-img order-item__goods-img--empty' />
+                  )}
+                  <View className='order-item__goods-info'>
+                    <Text className='order-item__goods-name'>{i.product_name}</Text>
+                    {!!i.product_spec && (
+                      <Text className='order-item__goods-spec'>{i.product_spec} {i.unit}</Text>
+                    )}
+                  </View>
+                  <Text className='order-item__goods-qty'>×{i.quantity} </Text>
+                </View>
+              ))}
+              {order.item_count > 3 && (
+                <Text className='order-item__more'>等 {order.item_count} 种商品</Text>
+              )}
+            </View>
             <View className='order-item__body'>
               <Text className='order-item__date'>订货日期 {order.order_date}</Text>
               <View className='order-item__amounts'>
@@ -239,7 +262,7 @@ export default function OrderListPage() {
                   <View className='detail-popup__item-info'>
                     <Text className='detail-popup__item-name'>{item.product_name}</Text>
                     <Text className='detail-popup__item-spec'>
-                      {item.product_spec ? `${item.product_spec} ` : ''}￥{item.price}/{item.unit} × {item.quantity}
+                      {item.product_spec ? `${item.product_spec}${item.unit} ` : ''}￥{item.price} × {item.quantity}
                     </Text>
                   </View>
                   <Text className='detail-popup__item-amount'>￥{item.amount}</Text>