From 867b03ebfcf6bdf753dde27247657aa24f3d612c Mon Sep 17 00:00:00 2001
From: "pikachu1995@126.com" <pikachu1995@126.com>
Date: Tue, 29 Sep 2026 10:48:44 +0800
Subject: [PATCH] =?UTF-8?q?refactor(buyer):=20=E4=BC=98=E5=8C=96=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E7=BB=93=E6=9E=84=E5=B9=B6=E6=8F=90=E5=8D=87=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Main.vue 路由逻辑改为使用当前路由信息
- 简化 Header.vue 中的购物车展示，优化布局与可访问性
- GoodsClassNav.vue 改为按条件渲染分类信息
- 完善 MyOrder.vue 的订单展示与交互，优化样式与结构
- 调整 message.js，更稳妥地处理 Promise 拒绝

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 buyer/src/components/drawer/Main.vue         |   6 +-
 buyer/src/components/header/Header.vue       | 164 ++++++-----
 buyer/src/components/nav/GoodsClassNav.vue   |  79 ++---
 buyer/src/pages/home/orderCenter/MyOrder.vue | 288 +++++++++++++------
 buyer/src/utils/message.js                   |   5 +-
 5 files changed, 336 insertions(+), 206 deletions(-)

diff --git a/buyer/src/components/drawer/Main.vue b/buyer/src/components/drawer/Main.vue
index 352e169c1..0e0ec5f0c 100644
--- a/buyer/src/components/drawer/Main.vue
+++ b/buyer/src/components/drawer/Main.vue
@@ -65,9 +65,9 @@ export default {
             this.$router.push({
               path: '/login',
               query: {
-                rePath: this.$router.history.current.path,
-                query: JSON.stringify(this.$router.history.current.query)
-              }
+                rePath: this.$route.path,
+                query: JSON.stringify(this.$route.query || {}),
+              },
             });
           }
         });
diff --git a/buyer/src/components/header/Header.vue b/buyer/src/components/header/Header.vue
index 31662b75d..2fc341d40 100644
--- a/buyer/src/components/header/Header.vue
+++ b/buyer/src/components/header/Header.vue
@@ -52,7 +52,7 @@
               购物车（{{ cartNum < 100 ? cartNum : '99' }}）
             </span>
             <template #dropdown>
-              <div class="shopping-cart-null" style="width:200px" v-show="shoppingCart.length <= 0">
+              <div class="shopping-cart-null" v-show="shoppingCart.length <= 0">
                 <el-icon class="cart-null-icon"><ShoppingCart /></el-icon>
                 <span>你的购物车没有宝贝哦</span>
                 <span>赶快去添加商品吧~</span>
@@ -60,20 +60,13 @@
               <div class="shopping-cart-list" v-show="shoppingCart.length > 0">
                 <div class="shopping-cart-box" v-for="(item, index) in shoppingCart" @click="goToPay" :key="index">
                   <div class="shopping-cart-img">
-                    <img :src="item.goodsSku.thumbnail" class="hover-pointer"/>
+                    <img :src="item.goodsSku.thumbnail" alt="" />
                   </div>
                   <div class="shopping-cart-info">
-                    <div class="shopping-cart-title ">
-                      <p class="hover-pointer goods-title ellipsis">{{ item.goodsSku.goodsName }}</p>
-                    </div>
+                    <p class="goods-title">{{ item.goodsSku.goodsName }}</p>
                     <div class="shopping-cart-detail">
-                      <div>
-                        数量:
-                        <span class="shopping-cart-text">{{ item.num }}</span>
-                      </div>
-                      <div class="shopping-price">
-                        {{ $filters.unitPrice(item.purchasePrice, '￥') }}
-                      </div>
+                      <span>数量 {{ item.num }}</span>
+                      <span class="shopping-price">{{ $filters.unitPrice(item.purchasePrice, '￥') }}</span>
                     </div>
                   </div>
                 </div>
@@ -178,9 +171,9 @@ export default {
             this.$router.push({
               path: '/login',
               query: {
-                rePath: this.$router.history.current.path,
-                query: JSON.stringify(this.$router.history.current.query)
-              }
+                rePath: this.$route.path,
+                query: JSON.stringify(this.$route.query || {}),
+              },
             });
           }
         });
@@ -346,30 +339,10 @@ export default {
 }
 
 
-.shopping-cart-img {
-  margin-right: 15px;
-  width: 40px;
-  height: 40px;
-}
-
-.shopping-cart-img img {
-  width: 100%;
-}
-
-.shopping-cart-info {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-content: space-between;
-  width: 200px;
-  overflow: hidden;
-  font-size: 12px;
-  line-height: 20px;
-}
-
-
 .shopping-cart-null {
-  padding: 15px;
+  width: 320px;
+  padding: 28px 16px;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -377,13 +350,92 @@ export default {
 }
 
 .cart-null-icon {
-  font-size: 38px;
-  margin-bottom: 15px;
+  font-size: 36px;
+  margin-bottom: 12px;
+  color: #ccc;
 }
 
 .shopping-cart-null span {
+  font-size: 13px;
+  line-height: 1.6;
+  color: #999;
+}
+
+.shopping-cart-list {
+  width: 320px;
+  max-height: 320px;
+  overflow-y: auto;
+  padding: 4px 0;
+  box-sizing: border-box;
+  color: #333;
+}
+
+.shopping-cart-box {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px 16px;
+  cursor: pointer;
+
+  &:hover {
+    background: #fafafa;
+  }
+
+  & + .shopping-cart-box {
+    border-top: 1px solid #f2f2f2;
+  }
+}
+
+.shopping-cart-img {
+  width: 64px;
+  height: 64px;
+  flex-shrink: 0;
+  border-radius: 6px;
+  overflow: hidden;
+  background: #f5f5f5;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+}
+
+.shopping-cart-info {
+  flex: 1;
+  min-width: 0;
+  min-height: 64px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.shopping-cart-info .goods-title {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.4;
+  color: #333;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  white-space: normal;
+}
+
+.shopping-cart-detail {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 8px;
+  color: #999;
   font-size: 12px;
-  line-height: 16px;
+}
+
+.shopping-price {
+  color: $theme_color;
+  font-size: 14px;
+  font-weight: 600;
 }
 
 .username-p {
@@ -546,34 +598,4 @@ export default {
   z-index: 3;
   top: 3px;
 }
-
-.shopping-cart-box {
-  padding: 8px 0;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  border-bottom: 1px #ccc dotted;
-}
-
-.shopping-cart-list {
-  padding: 10px 10px;
-  box-sizing: border-box;
-  max-height: 300px;
-  overflow-y: scroll;
-  color: #333;
-
-}
-
-.shopping-cart-detail {
-  color: #999;
-  font-size: 12px;
-
-}
-
-.shopping-price {
-  color: $theme_color;
-  font-size: 14px;
-  font-weight: bold;
-}
-
 </style>
diff --git a/buyer/src/components/nav/GoodsClassNav.vue b/buyer/src/components/nav/GoodsClassNav.vue
index baefe88e3..5f7fe2277 100644
--- a/buyer/src/components/nav/GoodsClassNav.vue
+++ b/buyer/src/components/nav/GoodsClassNav.vue
@@ -3,29 +3,29 @@
     <div class="head-bar">
       <!-- 有商品分类展示商品分类 -->
       <template v-if="$route.query.categoryId">
-        <!-- 头部展示筛选信息 -->
-        <div @click="cateClick(tabBar,1)">{{ tabBar.name }}</div>
-        <el-icon><ArrowRight /></el-icon>
-
-        <div class="bar" v-if="tabBar.first">
-          {{ tabBar.first.name }} <el-icon><ArrowDown /></el-icon>
-          <ul>
-            <li v-for="item in tabBar.children" :key="item.id"  @click="cateClick(item,2)">
-              {{ item.name }}
-            </li>
-          </ul>
-        </div>
-        <el-icon :v-if="tabBar.first"><ArrowRight /></el-icon>
-
-        <div class="bar" v-if="tabBar.second">
-          {{ tabBar.second.name }} <el-icon><ArrowDown /></el-icon>
-          <ul>
-            <li v-for="item in tabBar.first.children" :key="item.id"  @click="cateClick(item,3)">
-              {{ item.name }}
-            </li>
-          </ul>
-        </div>
-        <el-icon :v-if="tabBar.second"><ArrowRight /></el-icon>
+        <div @click="cateClick(tabBar, 1)">{{ tabBar.name }}</div>
+        <template v-if="tabBar.first && tabBar.first.name">
+          <el-icon><ArrowRight /></el-icon>
+          <div class="bar">
+            {{ tabBar.first.name }} <el-icon><ArrowDown /></el-icon>
+            <ul>
+              <li v-for="item in tabBar.children" :key="item.id" @click="cateClick(item, 2)">
+                {{ item.name }}
+              </li>
+            </ul>
+          </div>
+        </template>
+        <template v-if="tabBar.second && tabBar.second.name">
+          <el-icon><ArrowRight /></el-icon>
+          <div class="bar">
+            {{ tabBar.second.name }} <el-icon><ArrowDown /></el-icon>
+            <ul>
+              <li v-for="item in tabBar.first.children" :key="item.id" @click="cateClick(item, 3)">
+                {{ item.name }}
+              </li>
+            </ul>
+          </div>
+        </template>
       </template>
       <!-- 无商品分类，展示搜索结果 -->
       <template v-else>
@@ -164,10 +164,11 @@ export default {
   name: 'GoodsClassNav',
   data () {
     return {
-      tabBar: { // 分类数据
+      tabBar: {
         name: '',
-        first: {},
-        second: {}
+        children: [],
+        first: null,
+        second: null
       },
       showTagCount: 5, // 展示的搜索项数量
       multiple: false, // 多选
@@ -239,23 +240,23 @@ export default {
         return
       }
       const arr = this.$route.query.categoryId.split(',')
-      if (arr.length > 0) {
-        this.tabBar = this.cateList.filter(e => {
-          return e.id === arr[0]
-        })[0]
+      const source = this.cateList.find((e) => e.id === arr[0])
+      if (!source) return
+      const tabBar = {
+        id: source.id,
+        name: source.name,
+        parentId: source.parentId,
+        children: source.children || [],
+        first: null,
+        second: null,
       }
       if (arr.length > 1) {
-        const first = this.tabBar.children.filter(e => {
-          return e.id === arr[1]
-        })[0]
-        this.tabBar['first'] = first
+        tabBar.first = tabBar.children.find((e) => e.id === arr[1]) || null
       }
-      if (arr.length > 2) {
-        const second = this.tabBar.first.children.filter(e => {
-          return e.id === arr[2]
-        })[0]
-        this.tabBar['second'] = second
+      if (arr.length > 2 && tabBar.first && tabBar.first.children) {
+        tabBar.second = tabBar.first.children.find((e) => e.id === arr[2]) || null
       }
+      this.tabBar = tabBar
     },
     cateClick (item, index) { // 点选分类
       switch (index) {
diff --git a/buyer/src/pages/home/orderCenter/MyOrder.vue b/buyer/src/pages/home/orderCenter/MyOrder.vue
index d9b441ed5..28571408e 100644
--- a/buyer/src/pages/home/orderCenter/MyOrder.vue
+++ b/buyer/src/pages/home/orderCenter/MyOrder.vue
@@ -29,18 +29,20 @@
           :key="onderIndex"
         >
           <div class="order-header">
-            <div>
-              <div>{{ order.isAfterSale ? filterAfterSaleStatus(order.serviceStatus) : filterOrderStatus(order.orderStatus) }}</div>
-              <div v-if="order.isAfterSale">
-                售后单号：{{ order.serviceSn }} &nbsp; &nbsp; &nbsp;{{ order.createTime }}
+            <div class="order-header-main">
+              <div class="order-status">{{ order.isAfterSale ? filterAfterSaleStatus(order.serviceStatus) : filterOrderStatus(order.orderStatus) }}</div>
+              <div class="order-sn" v-if="order.isAfterSale">
+                售后单号：{{ order.serviceSn }}<span>{{ order.createTime }}</span>
               </div>
-              <div v-else>
-                订单号：{{ order.sn }} &nbsp; &nbsp; &nbsp;{{order.createTime}}
+              <div class="order-sn" v-else>
+                订单号：{{ order.sn }}<span>{{ order.createTime }}</span>
               </div>
             </div>
-            <div>
-              <el-button v-if="!order.isAfterSale && order.orderStatus === 'COMPLETED'" @click="delOrder(order.sn)" class="del-btn mr_10 fontsize_16" style="margin-top:-5px;" type="text" icon="ios-trash-outline" size="small"></el-button>
-              <span>{{ $filters.unitPrice(order.flowPrice, "￥") }}</span>
+            <div class="order-header-side">
+              <el-button v-if="!order.isAfterSale && order.orderStatus === 'COMPLETED'" class="del-btn" link @click="delOrder(order.sn)">
+                <el-icon><Delete /></el-icon>
+              </el-button>
+              <span class="order-amount">{{ $filters.unitPrice(order.flowPrice, "￥") }}</span>
             </div>
           </div>
           <div class="order-body">
@@ -48,6 +50,7 @@
               <div
                 v-for="(goods, goodsIndex) in order.orderItems"
                 :key="goodsIndex"
+                class="goods-item"
               >
                 <img
                   @click="goodsDetail(goods.skuId, goods.goodsId)"
@@ -55,30 +58,31 @@
                   :src="goods.image"
                   alt=""
                 />
-                <div>
-                  <div class="hover-color" @click="goodsDetail(goods.skuId, goods.goodsId)">{{ goods.name }}</div>
-                  <div class="mt_10">
-                    <span class="global_color">{{ $filters.unitPrice(goods.goodsPrice, "￥") }} </span> x {{ goods.num }}
-                    <span style="margin-left: 10px;color: #ff9900;">{{refundPriceList(goods.isRefund)}}</span>
+                <div class="goods-info">
+                  <div class="goods-name hover-color" @click="goodsDetail(goods.skuId, goods.goodsId)">{{ goods.name }}</div>
+                  <div class="goods-meta">
+                    <span class="global_color">{{ $filters.unitPrice(goods.goodsPrice, "￥") }}</span>
+                    <span class="goods-num">x {{ goods.num }}</span>
+                    <span v-if="refundPriceList(goods.isRefund)" class="refund-tag">{{ refundPriceList(goods.isRefund) }}</span>
+                  </div>
+                  <div class="goods-ops" v-if="goods.commentStatus == 'UNFINISHED' || goods.complainStatus == 'NO_APPLY'">
+                    <el-button v-if="goods.commentStatus == 'UNFINISHED'" @click="comment(order.sn, goodsIndex)" size="small" type="success">评价</el-button>
+                    <el-button v-if="goods.complainStatus == 'NO_APPLY'" @click="complain(order.sn, goodsIndex)" type="danger" size="small">投诉</el-button>
                   </div>
-                  <el-button v-if="goods.commentStatus == 'UNFINISHED'" @click="comment(order.sn, goodsIndex)" size="small" type="success" class="fontsize_12" style="position:relative;top:-22px;left:190px;margin-right:10px">评价</el-button>
-                  <el-button v-if="goods.complainStatus == 'NO_APPLY'" @click="complain(order.sn, goodsIndex)" type="danger" class="fontsize_12" size="small" style="position:relative;top:-22px;left:190px">投诉</el-button>
                 </div>
               </div>
             </div>
-            <div>
+            <div class="store-name">
               <span @click="shopPage(order.storeId)">{{ order.storeName }}</span>
             </div>
             <div class="order-actions" v-if="order.isAfterSale">
               <el-button @click="goAfterSaleDetail(order.serviceSn)" type="warning" size="small">售后详情</el-button>
             </div>
             <div class="order-actions" v-else>
-              <!-- 订单基础操作 -->
               <el-button @click="orderDetail(order.sn)" type="warning" size="small">订单详情</el-button>
               <el-button @click="handleCancelOrder(order.sn)" type="danger" v-if="order.allowOperationVO.cancel" size="small">取消订单</el-button>
               <el-button @click="goPay(order.sn)" size="small" type="success" v-if="order.allowOperationVO.pay">去支付</el-button>
               <el-button @click="received(order.sn)" size="small" type="primary" v-if="order.allowOperationVO.rog">确认收货</el-button>
-              <!-- 售后（E_COUPON 卡密已交付不支持售后 FR-B-04） -->
               <el-button v-if="order.orderType !== 'E_COUPON' && order.groupAfterSaleStatus && (order.groupAfterSaleStatus.includes('NOT_APPLIED')|| order.groupAfterSaleStatus.includes('PART_AFTER_SALE'))"
                       @click="applyAfterSale(order.orderItems)" size="small">申请售后</el-button>
             </div>
@@ -104,18 +108,20 @@
         :key="onderIndex"
       >
         <div class="order-header">
-          <div>
-            <div>{{ order.isAfterSale ? filterAfterSaleStatus(order.serviceStatus) : filterOrderStatus(order.orderStatus) }}</div>
-            <div v-if="order.isAfterSale">
-              售后单号：{{ order.serviceSn }} &nbsp; &nbsp; &nbsp;{{ order.createTime }}
+          <div class="order-header-main">
+            <div class="order-status">{{ order.isAfterSale ? filterAfterSaleStatus(order.serviceStatus) : filterOrderStatus(order.orderStatus) }}</div>
+            <div class="order-sn" v-if="order.isAfterSale">
+              售后单号：{{ order.serviceSn }}<span>{{ order.createTime }}</span>
             </div>
-            <div v-else>
-              订单号：{{ order.sn }} &nbsp; &nbsp; &nbsp;{{order.createTime}}
+            <div class="order-sn" v-else>
+              订单号：{{ order.sn }}<span>{{ order.createTime }}</span>
             </div>
           </div>
-          <div>
-            <el-button v-if="!order.isAfterSale && order.orderStatus === 'COMPLETED'" @click="delOrder(order.sn)" class="del-btn mr_10 fontsize_16" style="margin-top:-5px;" type="text" icon="ios-trash-outline" size="small"></el-button>
-            <span>{{ $filters.unitPrice(order.flowPrice, "￥") }}</span>
+          <div class="order-header-side">
+            <el-button v-if="!order.isAfterSale && order.orderStatus === 'COMPLETED'" class="del-btn" link @click="delOrder(order.sn)">
+              <el-icon><Delete /></el-icon>
+            </el-button>
+            <span class="order-amount">{{ $filters.unitPrice(order.flowPrice, "￥") }}</span>
           </div>
         </div>
         <div class="order-body">
@@ -123,6 +129,7 @@
             <div
               v-for="(goods, goodsIndex) in order.orderItems"
               :key="goodsIndex"
+              class="goods-item"
             >
               <img
                 @click="goodsDetail(goods.skuId, goods.goodsId)"
@@ -130,30 +137,31 @@
                 :src="goods.image"
                 alt=""
               />
-              <div>
-                <div class="hover-color" @click="goodsDetail(goods.skuId, goods.goodsId)">{{ goods.name }}</div>
-                <div class="mt_10">
-                  <span class="global_color">{{ $filters.unitPrice(goods.goodsPrice, "￥") }} </span>x {{ goods.num }}
-                  <span style="margin-left: 10px;color: #ff9900;">{{refundPriceList(goods.isRefund)}}</span>
+              <div class="goods-info">
+                <div class="goods-name hover-color" @click="goodsDetail(goods.skuId, goods.goodsId)">{{ goods.name }}</div>
+                <div class="goods-meta">
+                  <span class="global_color">{{ $filters.unitPrice(goods.goodsPrice, "￥") }}</span>
+                  <span class="goods-num">x {{ goods.num }}</span>
+                  <span v-if="refundPriceList(goods.isRefund)" class="refund-tag">{{ refundPriceList(goods.isRefund) }}</span>
+                </div>
+                <div class="goods-ops" v-if="goods.commentStatus == 'UNFINISHED' || goods.complainStatus == 'NO_APPLY'">
+                  <el-button v-if="goods.commentStatus == 'UNFINISHED'" @click="comment(order.sn, goodsIndex)" size="small" type="success">评价</el-button>
+                  <el-button v-if="goods.complainStatus == 'NO_APPLY'" @click="complain(order.sn, goodsIndex)" type="danger" size="small">投诉</el-button>
                 </div>
-                <el-button v-if="goods.commentStatus == 'UNFINISHED'" @click="comment(order.sn, goodsIndex)" size="small" type="success" class="fontsize_12" style="position:relative;top:-22px;left:190px;margin-right:10px">评价</el-button>
-                <el-button v-if="goods.complainStatus == 'NO_APPLY'" @click="complain(order.sn, goodsIndex)" type="danger" class="fontsize_12" size="small" style="position:relative;top:-22px;left:190px">投诉</el-button>
               </div>
             </div>
           </div>
-          <div>
+          <div class="store-name">
             <span @click="shopPage(order.storeId)">{{ order.storeName }}</span>
           </div>
           <div class="order-actions" v-if="order.isAfterSale">
             <el-button @click="goAfterSaleDetail(order.serviceSn)" type="warning" size="small">售后详情</el-button>
           </div>
           <div class="order-actions" v-else>
-            <!-- 订单基础操作 -->
             <el-button @click="orderDetail(order.sn)" type="warning" size="small">订单详情</el-button>
             <el-button @click="handleCancelOrder(order.sn)" type="danger" v-if="order.allowOperationVO.cancel" size="small">取消订单</el-button>
             <el-button @click="goPay(order.sn)" size="small" type="success" v-if="order.allowOperationVO.pay">去支付</el-button>
             <el-button @click="received(order.sn)" size="small" type="primary" v-if="order.allowOperationVO.rog">确认收货</el-button>
-            <!-- 售后（E_COUPON 不支持买家售后 FR-B-04） -->
             <el-button v-if="order.orderType !== 'E_COUPON' && order.groupAfterSaleStatus && (order.groupAfterSaleStatus.includes('NOT_APPLIED')|| order.groupAfterSaleStatus.includes('PART_AFTER_SALE'))"
                     @click="applyAfterSale(order.orderItems)" size="small">申请售后</el-button>
           </div>
@@ -192,8 +200,10 @@ import { Message, Modal } from "@/utils/message";
 import { getOrderList, sureReceived, cancelOrder, delOrder } from '@/api/order';
 import { afterSaleReason, afterSaleList } from '@/api/member';
 import { orderStatusList, afterSaleStatusList } from '../enumeration.js'
+import { Delete } from '@element-plus/icons-vue'
 export default {
   name: 'MyOrder',
+  components: { Delete },
   props: {
     homePage: { // 判断是否个人中心首页展示内容
       type: Boolean,
@@ -457,80 +467,174 @@ export default {
 }
 /** 订单列表 */
 .order-list {
-  border: 1px solid #ddd;
-  border-radius: 3px;
-  margin-bottom: 10px;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  margin-bottom: 12px;
+  background: #fff;
+  overflow: hidden;
 
-  &:hover{
-    .del-btn{visibility: visible;}
+  &:hover {
+    .del-btn { visibility: visible; }
   }
-  .del-btn{
+
+  .del-btn {
     visibility: hidden;
+    padding: 0;
+    height: auto;
+    color: #999;
   }
 
   .order-header {
     display: flex;
     align-items: center;
-    padding: 10px;
     justify-content: space-between;
-    border-bottom: 1px solid #ddd;
-    > div:nth-child(1) > div:nth-child(2) {
-      font-size: 12px;
-      color: #999;
-      margin-top: 3px;
+    gap: 16px;
+    padding: 12px 16px;
+    background: #fafafa;
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  .order-header-main {
+    min-width: 0;
+  }
+
+  .order-status {
+    font-size: 14px;
+    font-weight: 600;
+    color: #333;
+    line-height: 1.4;
+  }
+
+  .order-sn {
+    margin-top: 4px;
+    font-size: 12px;
+    color: #999;
+    line-height: 1.4;
+
+    span {
+      margin-left: 16px;
     }
   }
-  .order-body {
+
+  .order-header-side {
     display: flex;
-    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+    gap: 8px;
+  }
+
+  .order-amount {
+    min-width: 88px;
+    text-align: right;
+    font-size: 16px;
+    font-weight: 600;
+    color: $theme_color;
+  }
+
+  .order-body {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 120px 100px;
+    gap: 12px;
+    align-items: start;
+    padding: 14px 16px;
     color: #999;
-    padding: 10px;
+  }
 
-    .goods-list > div {
-      width: 500px;
-      display: flex;
-      margin-bottom: 10px;
-      img {
-        width: 60px;
-        height: 60px;
-        margin-right: 10px;
-      }
-      > div {
-        flex: 1;
-      }
+  .goods-item {
+    display: flex;
+    align-items: flex-start;
+    min-width: 0;
+
+    & + .goods-item {
+      margin-top: 12px;
     }
 
-    > div:nth-child(2) {
-      width: 150px;
-      text-align: center;
-      span {
-        color: #438cde;
-        cursor: pointer;
-        &:hover {
-          color: $theme_color;
-        }
-      }
-      .el-icon {
-        color: #ff8f23;
-        cursor: pointer;
-        &:hover {
-          color: $theme_color;
-        }
+    img {
+      width: 72px;
+      height: 72px;
+      margin-right: 12px;
+      border-radius: 6px;
+      object-fit: cover;
+      flex-shrink: 0;
+      background: #f5f5f5;
+    }
+  }
+
+  .goods-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .goods-name {
+    color: #333;
+    font-size: 14px;
+    line-height: 1.4;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+
+  .goods-meta {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 8px;
+    font-size: 13px;
+    line-height: 1.4;
+  }
+
+  .goods-num {
+    color: #666;
+  }
+
+  .refund-tag {
+    padding: 0 6px;
+    border-radius: 4px;
+    background: #fff7e8;
+    color: #ff9900;
+    font-size: 12px;
+    line-height: 20px;
+  }
+
+  .goods-ops {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 8px;
+
+    .el-button {
+      margin: 0;
+    }
+  }
+
+  .store-name {
+    padding-top: 4px;
+    text-align: center;
+    font-size: 13px;
+    line-height: 1.4;
+    word-break: break-all;
+
+    span {
+      color: #438cde;
+      cursor: pointer;
+
+      &:hover {
+        color: $theme_color;
       }
     }
+  }
 
-    .order-actions {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-      min-width: 100px;
+  .order-actions {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
 
-      .el-button {
-        margin: 0;
-        min-width: 88px;
-      }
+    .el-button {
+      margin: 0;
+      width: 100%;
     }
   }
 }
diff --git a/buyer/src/utils/message.js b/buyer/src/utils/message.js
index 8102c64b1..2ab7e6b70 100644
--- a/buyer/src/utils/message.js
+++ b/buyer/src/utils/message.js
@@ -104,7 +104,10 @@ export const Modal = {
           return options.onOk();
         }
       })
-      .catch(() => {
+      .catch((reason) => {
+        if (reason !== "cancel" && reason !== "close") {
+          return;
+        }
         if (typeof options.onCancel === "function") {
           options.onCancel();
         }