From b532744fe900f5f2893aba349ab46d0d711e9d2b Mon Sep 17 00:00:00 2001
From: wangziqi <wangziqi@neuz.cn>
Date: Tue, 10 Feb 2026 15:36:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AE=A2=E5=8D=95=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=98=BE=E7=A4=BA=E8=B4=AD=E4=B9=B0=E5=95=86?=
 =?UTF-8?q?=E5=93=81=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 前端 OrdersView 显示订单商品列表（图片、名称、数量、价格）
- 后端 OrderItem 添加 productImage 字段
- 更新购物车结算和立即购买逻辑保存商品图片
- 加载订单时同时加载订单商品详情
---
 .../com/maternalmall/domain/OrderItem.java    |  3 +
 .../com/maternalmall/service/MallService.java |  2 +
 frontend/src/views/OrdersView.vue             | 85 ++++++++++++++++++-
 3 files changed, 87 insertions(+), 3 deletions(-)

diff --git a/backend/src/main/java/com/maternalmall/domain/OrderItem.java b/backend/src/main/java/com/maternalmall/domain/OrderItem.java
index 000bd5c..1e7a2d9 100644
--- a/backend/src/main/java/com/maternalmall/domain/OrderItem.java
+++ b/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;
 }
diff --git a/backend/src/main/java/com/maternalmall/service/MallService.java b/backend/src/main/java/com/maternalmall/service/MallService.java
index 1a7a97f..fa2253c 100644
--- a/backend/src/main/java/com/maternalmall/service/MallService.java
+++ b/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;
diff --git a/frontend/src/views/OrdersView.vue b/frontend/src/views/OrdersView.vue
index c47e7a4..b41467b 100644
--- a/frontend/src/views/OrdersView.vue
+++ b/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;