feat: 订单管理页面显示购买商品信息

- 前端 OrdersView 显示订单商品列表（图片、名称、数量、价格）
- 后端 OrderItem 添加 productImage 字段
- 更新购物车结算和立即购买逻辑保存商品图片
- 加载订单时同时加载订单商品详情

backend/src/main/java/com/maternalmall/domain/OrderItem.java

@@ -27,4 +27,7 @@ public class OrderItem {
 
     @Column(nullable = false, precision = 10, scale = 2)
     private BigDecimal unitPrice;
+
+    @Column(length = 255)
+    private String productImage;
 }

backend/src/main/java/com/maternalmall/service/MallService.java

@@ -189,6 +189,7 @@ public class MallService {
             item.setProductName(product.getName());
             item.setQuantity(cartItem.getQuantity());
             item.setUnitPrice(product.getPrice());
+            item.setProductImage(product.getImageUrl());
             orderItemRepository.save(item);
         }
         cartItemRepository.deleteByCustomerId(customerId);
@@ -233,6 +234,7 @@ public class MallService {
         item.setProductName(product.getName());
         item.setQuantity(quantity);
         item.setUnitPrice(product.getPrice());
+        item.setProductImage(product.getImageUrl());
         orderItemRepository.save(item);
 
         return order;

frontend/src/views/OrdersView.vue

@@ -45,9 +45,21 @@
           </div>
 
           <div class="order-items">
-            <div class="order-item-preview">
+            <div v-if="order.items && order.items.length > 0" class="order-items-list">
+              <div v-for="item in order.items" :key="item.id" class="order-item">
+                <img :src="item.productImage || 'https://via.placeholder.com/60x60?text=商品'" class="item-image" alt="商品图片">
+                <div class="item-details">
+                  <div class="item-name">{{ item.productName }}</div>
+                  <div class="item-meta">
+                    <span class="item-quantity">x{{ item.quantity }}</span>
+                    <span class="item-price">¥{{ item.unitPrice }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div v-else class="order-item-preview">
               <span class="item-label">商品信息</span>
-              <span class="item-value">查看详情</span>
+              <span class="item-value">暂无商品信息</span>
             </div>
           </div>
 
@@ -151,7 +163,18 @@ const goProducts = () => router.push('/products')
 const goCart = () => router.push('/cart')
 
 const loadOrders = async () => {
-  orders.value = await api.customerOrders()
+  const orderList = await api.customerOrders()
+  // 为每个订单加载商品详情
+  for (const order of orderList) {
+    try {
+      const items = await api.orderItems(order.id)
+      order.items = items
+    } catch (e) {
+      console.error('加载订单商品失败:', order.id, e)
+      order.items = []
+    }
+  }
+  orders.value = orderList
 }
 
 const formatDate = (date) => {
@@ -368,6 +391,62 @@ onMounted(async () => {
   margin-bottom: 16px;
 }
 
+.order-items-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.order-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: #f9f9f9;
+  border-radius: 8px;
+}
+
+.item-image {
+  width: 60px;
+  height: 60px;
+  object-fit: cover;
+  border-radius: 6px;
+  background: #fff;
+}
+
+.item-details {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.item-name {
+  font-weight: 500;
+  color: #333;
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.item-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.item-quantity {
+  color: #666;
+  font-size: 13px;
+}
+
+.item-price {
+  color: #ff4d4f;
+  font-weight: 600;
+  font-size: 14px;
+}
+
 .order-item-preview {
   display: flex;
   justify-content: space-between;