优化

mallApp/src/components/order/order-item.vue

@@ -26,11 +26,11 @@
       <text class="meta-text">{{ formatAddTime }}</text>
     </view>
 
-    <!-- 商品明细 -->
+    <!-- 商品明细：超过 2 件默认折叠，点箭头展开全部 -->
     <view class="goods-section">
       <block v-if="!$util.isEmpty(displayGoodsList)">
         <view
-          v-for="(goods, gIndex) in displayGoodsList"
+          v-for="(goods, gIndex) in visibleGoodsList"
           :key="gIndex"
           class="goods-row"
         >
@@ -54,6 +54,19 @@
           <!-- 数量独立在整行右侧垂直居中 -->
           <text class="goods-num">x{{ getGoodsNum(goods) }}</text>
         </view>
+        <!-- 多于 2 件：折叠朝下、展开朝上；阻止冒泡以免误进详情 -->
+        <view
+          v-if="showGoodsToggle"
+          class="goods-toggle"
+          @click.stop="toggleGoodsExpand"
+        >
+          <view class="goods-toggle-btn">
+            <view
+              class="goods-chevron"
+              :class="goodsExpanded ? 'goods-chevron--up' : 'goods-chevron--down'"
+            ></view>
+          </view>
+        </view>
       </block>
       <block v-else>
         <view class="goods-row">
@@ -109,6 +122,18 @@ export default {
       required: true
     }
   },
+  data() {
+    return {
+      /** 商品列表是否已展开（超过折叠上限时） */
+      goodsExpanded: false
+    }
+  },
+  watch: {
+    // 列表复用同一组件实例时，换单后恢复折叠
+    'info.orderSn'() {
+      this.goodsExpanded = false
+    }
+  },
   computed: {
     /** 订单状态文案（优先接口 statusDesc，与 OrderStatusUtil::getSystemStatusDesc 一致） */
     getStatusName() {
@@ -161,11 +186,27 @@ export default {
         ? this.info.addTime.substring(0, 16)
         : this.info.addTime;
     },
-    /** 展示用商品列表（兼容接口字段差异） */
+    /** 完整商品列表（兼容接口字段差异） */
     displayGoodsList() {
       const list = this.info.goodsInfoList;
       return Array.isArray(list) ? list : [];
     },
+    /** 折叠上限：默认只展示前 2 件 */
+    goodsFoldLimit() {
+      return 2
+    },
+    /** 是否显示展开/收起箭头 */
+    showGoodsToggle() {
+      return this.displayGoodsList.length > this.goodsFoldLimit
+    },
+    /** 当前可见商品：未展开时截断，展开后全部 */
+    visibleGoodsList() {
+      const list = this.displayGoodsList
+      if (this.goodsExpanded || list.length <= this.goodsFoldLimit) {
+        return list
+      }
+      return list.slice(0, this.goodsFoldLimit)
+    },
     /** 商品件数 */
     goodsCount() {
       if (!this.$util.isEmpty(this.displayGoodsList)) {
@@ -184,6 +225,10 @@ export default {
     }
   },
   methods: {
+    /** 展开或收起超出折叠上限的商品 */
+    toggleGoodsExpand() {
+      this.goodsExpanded = !this.goodsExpanded
+    },
     /** 点击整行跳转详情 */
     clickItemEvent() {
       this.$emit("click", this.info);
@@ -348,6 +393,45 @@ export default {
   }
 }
 
+/* 商品过多：轻量胶囊 + CSS 尖角箭头（折叠朝下、展开朝上） */
+.goods-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 8upx;
+  padding: 4upx 0 0;
+}
+
+.goods-toggle-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 72upx;
+  height: 40upx;
+  border-radius: 20upx;
+  background: #f5f6f8;
+}
+
+.goods-chevron {
+  width: 14upx;
+  height: 14upx;
+  border-right: 3upx solid #b0b3b8;
+  border-bottom: 3upx solid #b0b3b8;
+  box-sizing: border-box;
+}
+
+/* 未展开：箭头朝下，提示下方还有商品 */
+.goods-chevron--down {
+  margin-top: -4upx;
+  transform: rotate(45deg);
+}
+
+/* 已展开：箭头朝上，提示可收起 */
+.goods-chevron--up {
+  margin-top: 4upx;
+  transform: rotate(-135deg);
+}
+
 .goods-cover {
   flex-shrink: 0;
   width: 140upx;