fix: 增强错误处理与组件逻辑优化

- 在 App.vue 中添加 JSON 解析错误处理，确保站点信息获取的稳定性。
- 更新多个 API 请求，添加 loading 状态管理，提升用户体验。
- 在 Search.vue 中优化热词列表的解析逻辑，增强容错性。
- 改进购物车、地址管理等 API 请求参数，确保一致性与可用性。
- 新增用户中心布局组件，提升用户界面的一致性与可读性。

buyer/src/App.vue

@@ -46,10 +46,14 @@ export default {
     getSite() {
       getBaseSite().then((res) => {
         if (res.success && res.result.settingValue) {
-          const data = JSON.parse(res.result.settingValue);
-          this.applySiteInfo(data);
+          try {
+            const data = JSON.parse(res.result.settingValue);
+            this.applySiteInfo(data);
+          } catch {
+            // 站点配置解析失败时使用缓存
+          }
         }
-      });
+      }).catch(() => {});
     },
   },
 };

buyer/src/api/account.js

@@ -44,7 +44,8 @@ export function editMemberInfo (params) {
     url: '/buyer/passport/member/editOwn',
     method: Method.PUT,
     needToken: true,
-    data: params
+    data: params,
+    loading: false
   })
 }
 

buyer/src/api/address.js

@@ -17,7 +17,8 @@ export function newMemberAddress (params) {
     url: '/buyer/member/address',
     needToken: true,
     method: Method.POST,
-    data: params
+    data: params,
+    loading: false
   });
 }
 
@@ -27,7 +28,8 @@ export function editMemberAddress (params) {
     url: '/buyer/member/address',
     needToken: true,
     method: Method.PUT,
-    params
+    params,
+    loading: false
   });
 }
 
@@ -36,7 +38,8 @@ export function delMemberAddress (id) {
   return request({
     url: `/buyer/member/address/delById/${id}`,
     needToken: true,
-    method: Method.DELETE
+    method: Method.DELETE,
+    loading: false
   });
 }
 

buyer/src/api/cart.js

@@ -20,7 +20,8 @@ export function cartGoodsAll () {
   return request({
     url: '/buyer/trade/carts/all',
     method: Method.GET,
-    needToken: true
+    needToken: true,
+    loading: false
   });
 }
 

buyer/src/api/common.js

@@ -38,7 +38,8 @@ export function getRegion (id) {
   return request({
     url: `${commonUrl}/common/common/region/item/${id}`,
     needToken: true,
-    method: Method.GET
+    method: Method.GET,
+    loading: false
   });
 }
 

buyer/src/api/goods.js

@@ -8,6 +8,7 @@ export function goodsList (params) {
     url: '/buyer/goods/goods/es',
     method: Method.GET,
     needToken: false,
+    optionalToken: true,
     params
   });
 }
@@ -18,6 +19,7 @@ export function filterList (params) {
     url: '/buyer/goods/goods/es/related',
     method: Method.GET,
     needToken: false,
+    optionalToken: true,
     params
   });
 }

buyer/src/api/member.js

@@ -298,7 +298,8 @@ export function cancelAfterSale (afterSaleSn) {
   return request({
     url: `/buyer/order/afterSale/cancel/${afterSaleSn}`,
     method: Method.POST,
-    needToken: true
+    needToken: true,
+    loading: false
   });
 }
 

buyer/src/components/Search.vue

@@ -128,10 +128,14 @@ export default {
   },
   computed: {
     promotionTags() {
-      if (this.$store.state.hotWordsList) {
-        return JSON.parse(this.$store.state.hotWordsList)
-      } else {
-        return []
+      const raw = this.$store.state.hotWordsList;
+      if (!raw) {
+        return [];
+      }
+      try {
+        return typeof raw === "string" ? JSON.parse(raw) : raw;
+      } catch {
+        return [];
       }
     }
   },
@@ -145,12 +149,12 @@ export default {
       if (!reloadTime) {
         hotWords({count: 5}).then(res => {
           if (res.success && res.result) storage.setItem('hotWordsList', res.result)
-        })
+        }).catch(() => {})
         storage.setItem('hotWordsReloadTime', new Date().getTime())
       } else if (reloadTime && time > reloadTime) {
         hotWords({count: 5}).then(res => {
           if (res.success && res.result) storage.setItem('hotWordsList', res.result)
-        })
+        }).catch(() => {})
         storage.setItem('hotWordsReloadTime', new Date().getTime())
       }
     }

buyer/src/components/advertising/FixedTop.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 头部广告 -->
-  <div class="advertising" v-if="show" :style="{'background-color': data.bgColor}">
+  <div class="advertising" v-if="show && data" :style="{'background-color': data.bgColor}">
     <img :src="data.img" class="hover-pointer" @click="linkTo(data.url)"/>
     <el-icon :size="20" @click="show = false"><CircleClose /></el-icon>
   </div>

buyer/src/components/global.js

@@ -6,6 +6,7 @@ import Footer from "@/components/footer/Footer.vue";
 import Search from "@/components/Search.vue";
 import card from "@/components/card/index.vue";
 import cateNav from "@/components/nav/CateNav.vue";
+import UserCenterLayout from "@/components/userCenter/Layout.vue";
 
 export function registerGlobalComponents(app) {
   app.component("empty", empty);
@@ -15,5 +16,6 @@ export function registerGlobalComponents(app) {
   app.component("BaseFooter", Footer);
   app.component("Search", Search);
   app.component("card", card);
+  app.component("UserCenterLayout", UserCenterLayout);
   app.component("cateNav", cateNav);
 }

buyer/src/components/header/Header.vue

@@ -29,7 +29,7 @@
             </div>
             <transition name='fade'>
               <ul class="drop-items">
-                <li @click="goUserCenter('/home')">我的主页</li>
+                <li @click="goUserCenter('/home/MyOrder')">我的主页</li>
                 <li @click="goUserCenter('/home/Coupons')">优惠券</li>
                 <li @click="goUserCenter('/home/Favorites')">我的收藏</li>
                 <li @click="signOutFun">退出登录</li>
@@ -40,14 +40,17 @@
         <li @click="goUserCenter('/home/MyOrder')"><span class="nav-item">我的订单</span></li>
         <li @click="goUserCenter('/home/MyTracks')"><span class="nav-item">我的足迹</span></li>
         <li @click="goUserCenter('/home/MsgList')"><span class="nav-item">我的消息</span></li>
-        <li v-if="$route.name !== 'Cart'" style="position:relative;">
-          <el-dropdown placement="bottom-start" trigger="hover" @visible-change="handleCartDropdownVisible">
-            <router-link to="/cart" target="_blank">
-              <span class="nav-item">
-                <el-icon :size="18"><ShoppingCart /></el-icon>
-                购物车（{{ cartNum < 100 ? cartNum : '99' }}）
-              </span>
-            </router-link>
+        <li v-if="$route.name !== 'Cart'" class="cart-nav-item">
+          <el-dropdown
+            class="cart-nav-dropdown"
+            placement="bottom-start"
+            trigger="hover"
+            @visible-change="handleCartDropdownVisible"
+          >
+            <span class="nav-item" @click="goToPay">
+              <el-icon :size="18"><ShoppingCart /></el-icon>
+              购物车（{{ cartNum < 100 ? cartNum : '99' }}）
+            </span>
             <template #dropdown>
               <div class="shopping-cart-null" style="width:200px" v-show="shoppingCart.length <= 0">
                 <el-icon class="cart-null-icon"><ShoppingCart /></el-icon>
@@ -128,7 +131,7 @@ export default {
     },
     myInfo() { // 跳转会员中心
       let url = this.$router.resolve({
-        path: '/home'
+        path: '/home/MyOrder'
       });
       window.open(url.href, '_blank');
     },
@@ -258,6 +261,27 @@ export default {
 
 .nav-item {
   padding-left: 20px;
+  gap: 4px;
+}
+
+.cart-nav-item {
+  :deep(.cart-nav-dropdown),
+  :deep(.el-dropdown) {
+    display: inline-flex;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    vertical-align: middle;
+    line-height: 36px;
+  }
+
+  :deep(.el-tooltip__trigger),
+  :deep(.el-dropdown-selfdefine),
+  :deep([aria-expanded="true"]) {
+    outline: none !important;
+    border: none !important;
+    box-shadow: none !important;
+  }
 }
 
 .location a {

buyer/src/components/indexDecorate/ModelFormItem.vue

@@ -229,11 +229,11 @@ export default {
 .advert-list {
   width: 100%;
   margin: 0;
-  padding: 5px 0;
+  padding: 10px;
   list-style: none;
   box-sizing: border-box;
   background: $theme_color;
-  height: 200px;
+  height: 210px;
   display: flex;
   gap: 10px;
   align-items: center;

buyer/src/components/indexDecorate/modelList/NewGoodsSort.vue

@@ -57,12 +57,14 @@
           class="hover-pointer"
           @click="linkTo(item.url)"
         >
-          <img :src="item.img" alt="" />
+          <div class="img-wrap">
+            <img :src="item.img" alt="" />
+            <div class="jiaobiao" :class="'jiaobiao' + (index + 1)">
+              {{ index + 1 }}
+            </div>
+          </div>
           <p>{{ item.name }}</p>
           <p>{{ $filters.unitPrice(item.price, "￥") }}</p>
-          <div class="jiaobiao" :class="'jiaobiao' + (index + 1)">
-            {{ index + 1 }}
-          </div>
         </div>
       </div>
     </div>
@@ -220,16 +222,52 @@ export default {
       flex-direction: column;
       align-items: center;
       overflow: hidden;
-      img {
+      border-bottom: 1px solid #eee;
+      border-right: 1px solid #eee;
+      .img-wrap {
+        position: relative;
         width: 80px;
         height: 80px;
         flex-shrink: 0;
-        display: block;
-        object-fit: cover;
+        img {
+          width: 100%;
+          height: 100%;
+          display: block;
+          object-fit: cover;
+        }
+        .jiaobiao {
+          position: absolute;
+          width: 23px;
+          height: 23px;
+          top: 0;
+          right: 0;
+          margin: 0;
+          padding: 0;
+          max-height: none;
+          overflow: visible;
+          display: block;
+          background: url(../../../assets/images/festival_icon.png) no-repeat;
+          color: #fff;
+          text-align: center;
+          line-height: 23px;
+          font-size: 12px;
+          -webkit-line-clamp: unset;
+          -webkit-box-orient: unset;
+        }
+        .jiaobiao1,
+        .jiaobiao4 {
+          background-position: -2px -30px;
+        }
+        .jiaobiao2,
+        .jiaobiao5 {
+          background-position: -31px -30px;
+        }
+        .jiaobiao3,
+        .jiaobiao6 {
+          background-position: -60px -30px;
+        }
       }
-      border-bottom: 1px solid #eee;
-      border-right: 1px solid #eee;
-      :nth-child(2) {
+      > p:nth-child(2) {
         width: 100%;
         height: auto;
         max-height: 32px;
@@ -241,34 +279,12 @@ export default {
         -webkit-box-orient: vertical;
         text-align: center;
       }
-      :nth-child(3) {
+      > p:nth-child(3) {
         color: $theme_color;
         margin-top: 2px;
         line-height: 1.2;
         flex-shrink: 0;
       }
-      .jiaobiao {
-        position: absolute;
-        width: 23px;
-        height: 23px;
-        top: 6px;
-        right: 6px;
-        background: url(../../../assets/images/festival_icon.png);
-        color: #fff;
-        text-align: center;
-      }
-      .jiaobiao1,
-      .jiaobiao4 {
-        background-position: -2px -30px;
-      }
-      .jiaobiao2,
-      .jiaobiao5 {
-        background-position: -31px -30px;
-      }
-      .jiaobiao3,
-      .jiaobiao6 {
-        background-position: -60px -30px;
-      }
     }
     > div:nth-child(3n) {
       border-right: none;

buyer/src/components/indexDecorate/modelList/Recommend.vue

@@ -83,12 +83,17 @@ export default {
     width: 595px;
     .content-left {
       display: flex;
+      align-items: stretch;
       padding-top: 10px;
       font-size: 12px;
+      box-sizing: content-box;
       > div:nth-child(1) {
         width: 189px;
         border-right: 1px solid #eee;
         height: 360px;
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
         img {
           margin: 40px 0 0 15px;
         }
@@ -106,15 +111,20 @@ export default {
           color: #999;
         }
         .view-btn {
-          margin-left: 15px;
-          margin-top: 10px;
+          align-self: center;
+          width: 145px;
+          margin-top: auto;
+          margin-bottom: 15px;
           color: #fff;
         }
       }
       > div:nth-child(2) {
         width: 405px;
+        height: 360px;
         display: flex;
         flex-wrap: wrap;
+        align-content: flex-start;
+        box-sizing: border-box;
         > div {
           display: flex;
           align-items: center;
@@ -145,7 +155,7 @@ export default {
       grid-template-rows: repeat(2, 1fr);
       height: 360px;
       padding-top: 10px;
-      box-sizing: border-box;
+      box-sizing: content-box;
 
       > div {
         width: 100%;

buyer/src/components/indexDecorate/modelList/forYour.vue

@@ -2,14 +2,14 @@
   <div class="model" v-if="data">
     <div class="for-your">{{ data.options.title }}</div>
     <div class="flex card">
-      <div class="left">
+      <div class="left hover-pointer" @click="linkTo(data.options.data.image.url)">
         <img :src="data.options.data.image.src" alt="" />
       </div>
       <div class="right flex">
         <!-- 商品区 -->
-        <div class="goods-list">
+        <div class="for-your-goods-list">
           <div
-            class="goods-item"
+            class="for-your-goods-item"
             :key="index"
             v-for="(item, index) in data.options.data.list"
             @click="linkTo(item.url)"
@@ -65,14 +65,18 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.goods-list {
+.for-your-goods-list {
   display: flex;
+  flex: 0 0 558px;
   width: 558px;
   flex-wrap: wrap;
+  column-gap: 0;
 }
-.goods-item {
+.for-your-goods-item {
+  flex: 0 0 278px;
   width: 278px;
   height: 277px;
+  min-width: 0;
   text-align: center;
   box-sizing: border-box;
   cursor: pointer;
@@ -84,10 +88,8 @@ export default {
     border-top: 1.4px solid #e2e2e2;
   }
   &:hover {
-    :deep .goods-name {
-      color: $theme_color;
-    }
-    :deep .goods-desc {
+    .goods-name,
+    .goods-desc {
       color: $theme_color;
     }
   }
@@ -105,10 +107,12 @@ export default {
   color: #333333;
 }
 .goods-img {
+  display: block;
   width: 190px;
   height: 156px;
-  margin-top: 19px;
+  margin: 19px auto 0;
   border-radius: 10px;
+  object-fit: contain;
 }
 .goods-desc {
   font-size: 14px;
@@ -137,6 +141,8 @@ export default {
   background: #ffffff;
   border-radius: 10px;
   position: relative;
+  overflow: hidden;
+  flex-shrink: 0;
   box-shadow: 0px 1px 13px 0px #E5E5E5;
 
   &:hover {
@@ -159,20 +165,27 @@ export default {
   }
 }
 .left {
+  flex: 0 0 346px;
   width: 346px;
   height: 554px;
   border-radius: 9.8px 0px 0px 9.8px;
+  overflow: hidden;
   > img {
-    max-width: 100%;
+    display: block;
+    width: 100%;
     height: 100%;
+    object-fit: cover;
   }
 }
 .right {
+  flex: 0 0 839px;
   width: 839px;
   height: 554px;
   border-radius: 0px 9.8px 9.8px 0px;
+  overflow: hidden;
 }
 .hot-list {
+  flex: 0 0 279px;
   width: 279px;
 }
 .hot-title {
@@ -201,8 +214,11 @@ export default {
   }
 
   > img {
+    flex-shrink: 0;
+    display: block;
     width: 76.3px;
     height: 77.7px;
+    object-fit: contain;
   }
 }
 .hot-goods {

buyer/src/components/indexDecorate/modelList/mixModel.vue

@@ -49,5 +49,6 @@ export default {
   background: #FFFFFF;
   box-shadow: 0px 1px 13px 0px #E5E5E5;
   position: relative;
+  overflow: hidden;
 }
 </style>

buyer/src/components/indexDecorate/modelList/mixs/mix-brand.vue

@@ -1,20 +1,23 @@
 <template>
-  <div class="flex" v-if="data.options.right.model == 'brand'">
-    <div class="left-side" @click="linkTo(data.options.right.data.image.url)">
-      <img :src="data.options.right.data.image.src" alt="">
+  <div class="mix-panel flex" v-if="data.options.right.model == 'brand'">
+    <div class="left-side hover-pointer" @click="linkTo(data.options.right.data.image.url)">
+      <img :src="data.options.right.data.image.src" alt="" />
     </div>
     <div class="right-side">
       <div class="badge-box flex">
         <div class="round">
           <el-icon><ArrowRight /></el-icon>
         </div>
-
-
       </div>
       <div class="flex goods-list">
-        <div class="goods-item flex" @click="linkTo(item.url)" :key="index" v-for="(item,index) in data.options.right.data.list">
+        <div
+          class="goods-item flex hover-pointer"
+          @click="linkTo(item.url)"
+          :key="index"
+          v-for="(item, index) in data.options.right.data.list"
+        >
           <div class="goods-thumbnail">
-            <img :src="item.img" alt="">
+            <img :src="item.img" alt="" />
           </div>
         </div>
       </div>
@@ -23,63 +26,60 @@
 </template>
 
 <script>
-import { ArrowRight } from '@element-plus/icons-vue';
+import { ArrowRight } from "@element-plus/icons-vue";
+
 export default {
-  name: "mix-goods",
-  data() {
-    return {}
-  },
+  name: "mix-brand",
+  components: { ArrowRight },
   props: {
     data: {
       type: Object,
-      default: {}
-    }
+      default: () => ({}),
+    },
   },
-  components: { ArrowRight },
-  mounted() {
-
-  },
-  methods: {}
-}
+};
 </script>
 
 <style scoped lang="scss">
-.right-side{
-  width: 330px;
+.mix-panel {
+  height: 100%;
+  align-items: stretch;
+  overflow: hidden;
 }
-.goods-detail-title{
-  font-size: 13px;
-  font-weight: normal;
-  line-height: 16px;
-  text-align: center;
-  letter-spacing: 0px;
-  color: #333333;
-}
-.goods-detail-price{
-  font-size: 14px;
-  font-weight: normal;
-  line-height: 17px;
-  letter-spacing: 0px;
-  color: $theme_color;
-  margin-top: 8px;
-  margin-bottom:10px;
-}
-.goods-thumbnail{
-  margin-left: 7px;
-  display: flex;
-  align-items: center;
-  >img{
-    width:90px;
-    height: 90px;
+
+.left-side {
+  flex-shrink: 0;
+  width: 254px;
+  height: 344px;
+
+  > img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 9.8px 0 0 9.8px;
   }
 }
-.badge-box{
-  margin-top: 33px;
-  justify-content:right;
-  >.round{
+
+.right-side {
+  flex: 1;
+  min-width: 0;
+  height: 344px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.badge-box {
+  margin-top: 24px;
+  margin-bottom: 8px;
+  justify-content: flex-end;
+  flex-shrink: 0;
+
+  > .round {
     width: 17.5px;
     height: 17.5px;
-    opacity: 1;
     border-radius: 50%;
     text-align: center;
     line-height: 17.5px;
@@ -87,47 +87,48 @@ export default {
     margin-right: 17.5px;
   }
 }
-.goods-list{
-   width: 330px;
+
+.goods-list {
+  width: 100%;
+  box-sizing: border-box;
   flex-wrap: wrap;
-  justify-content:space-between;
-  padding: 0 16px;
+  justify-content: space-between;
+  align-content: flex-start;
+  padding: 0 16px 12px;
+  gap: 8px 0;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
 }
-.goods-item{
+
+.goods-item {
   display: flex;
   align-items: center;
   justify-content: center;
-  width:50%;
-  height: 85px;
+  flex: 0 0 calc(50% - 4px);
+  width: calc(50% - 4px);
+  height: 82px;
   border-radius: 9.8px;
-  opacity: 1;
-  transition: .35s;
-  background: #FFFFFF;
-  margin-bottom:9px;
-
-
+  box-sizing: border-box;
+  overflow: hidden;
+  background: #ffffff;
+  transition: 0.35s;
+  cursor: pointer;
 }
-.left-side {
-  >img{
-    width: 254px;
-    height: 344px;
-    border-radius: 9.8px 0px 0px 9.8px;
-    opacity: 1;
+
+.goods-thumbnail {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  > img {
+    max-width: 80px;
+    max-height: 76px;
+    width: auto;
+    height: auto;
+    object-fit: contain;
   }
 }
-.badge {
-  width: 50px;
-  height: 27px;
-  line-height:27px;
-  border-radius: 13.3px 0px 0px 13.3px;
-  opacity: 1;
-  background: #F31947;
-  font-size: 12.6px;
-  font-weight: normal;
-  text-align: center;
-  letter-spacing: 0px;
-  color: #FFFFFF;
-  margin-top: 26px;
-  margin-bottom:17px;
-}
 </style>

buyer/src/components/indexDecorate/modelList/mixs/mix-goods.vue

@@ -1,127 +1,149 @@
 <template>
-    <div class="flex" v-if="data.options.left.model == 'goods'">
-      <div class="left-side"  @click="linkTo(data.options.right.data.image.url)">
-        <img :src="data.options.left.data.image.src" alt="">
+  <div class="mix-panel flex" v-if="data.options.left.model == 'goods'">
+    <div class="left-side hover-pointer" @click="linkTo(data.options.left.data.image.url)">
+      <img :src="data.options.left.data.image.src" alt="" />
+    </div>
+    <div class="right-side">
+      <div class="badge-box flex">
+        <div class="badge hover-pointer" @click="linkTo(data.options.left.data.badge.url)">
+          {{ data.options.left.data.badge.label }}
+        </div>
       </div>
-      <div class="right-side">
-          <div class="badge-box flex">
-            <div class="badge"  @click="linkTo(data.options.right.data.image.url)">
-              {{data.options.left.data.badge.label}}
-            </div>
+      <div class="flex goods-list">
+        <div
+          class="goods-item flex hover-pointer"
+          @click="linkTo(item.url)"
+          :key="index"
+          v-for="(item, index) in data.options.left.data.list"
+        >
+          <div class="goods-thumbnail">
+            <img :src="item.img" alt="" />
           </div>
-          <div class="flex goods-list">
-
-            <div class="goods-item flex"  @click="linkTo(item.url)" :key="index" v-for="(item,index) in data.options.left.data.list">
-              <div class="goods-thumbnail">
-                <img :src="item.img" alt="">
-              </div>
-              <div class="goods-detail">
-                <div class="goods-detail-title">{{item.title}}</div>
-                <div class="goods-detail-price">{{ $filters.unitPrice(item.price, '¥') }}</div>
-              </div>
-            </div>
+          <div class="goods-detail">
+            <div class="goods-detail-title">{{ item.title }}</div>
+            <div class="goods-detail-price">{{ $filters.unitPrice(item.price, '¥') }}</div>
           </div>
+        </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
 export default {
   name: "mix-goods",
-  data() {
-    return {}
-  },
   props: {
     data: {
       type: Object,
-      default: {}
-    }
+      default: () => ({}),
+    },
   },
-  components: {},
-  mounted() {
-
-  },
-  methods: {}
-}
+};
 </script>
 
 <style scoped lang="scss">
-.right-side{
-  width: 387px;
+.mix-panel {
+  height: 100%;
+  align-items: stretch;
+  overflow: hidden;
 }
-.goods-detail-title{
+
+.left-side {
+  flex-shrink: 0;
+  width: 196.7px;
+  height: 344px;
+
+  > img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 10px 0 0 10px;
+  }
+}
+
+.right-side {
+  flex: 1;
+  min-width: 0;
+  height: 344px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.goods-detail-title {
   font-size: 13px;
   font-weight: normal;
   line-height: 16px;
   text-align: center;
-  letter-spacing: 0px;
   color: #333333;
 }
-.goods-detail-price{
+
+.goods-detail-price {
   font-size: 14px;
   font-weight: normal;
   line-height: 17px;
-  letter-spacing: 0px;
-  color: #F31947;
+  color: #f31947;
   margin-top: 8px;
-  margin-bottom:10px;
 }
-.goods-thumbnail{
+
+.goods-thumbnail {
   margin-left: 7px;
   display: flex;
   align-items: center;
-  >img{
-    width:90px;
+  flex-shrink: 0;
+
+  > img {
+    width: 90px;
     height: 90px;
+    object-fit: contain;
   }
 }
-.badge-box{
 
-  justify-content:right;
+.badge-box {
+  justify-content: flex-end;
+  flex-shrink: 0;
 }
-.goods-list{
-  width: 387px;
+
+.goods-list {
+  width: 100%;
+  box-sizing: border-box;
   flex-wrap: wrap;
-  justify-content:space-between;
+  justify-content: space-between;
   padding: 0 16px;
+  gap: 9px 0;
 }
-.goods-item{
+
+.goods-item {
   cursor: pointer;
   display: flex;
   align-items: center;
-  width: 173.6px;
+  flex: 0 0 calc(50% - 4px);
+  width: calc(50% - 4px);
   height: 119px;
   border-radius: 9.8px;
-  opacity: 1;
-  transition: .35s;
-  background: #FFFFFF;
-  margin-bottom:9px;
-  &:hover{
-    box-shadow: 0px 1px 6px 0px #E5E5E5;
-  }
+  box-sizing: border-box;
+  overflow: hidden;
+  background: #ffffff;
+  transition: 0.35s;
 
-}
-.left-side {
-  >img{
-    border-radius: 10px 0px 0px 10px;
-    display: block;
-    width: 196.7px;
-    height: 343.7px;
+  &:hover {
+    box-shadow: 0 1px 6px 0 #e5e5e5;
   }
 }
+
 .badge {
   width: 50px;
   height: 27px;
-  line-height:27px;
-  border-radius: 13.3px 0px 0px 13.3px;
-  opacity: 1;
-  background: #F31947;
+  line-height: 27px;
+  border-radius: 13.3px 0 0 13.3px;
+  background: #f31947;
   font-size: 12.6px;
-  font-weight: normal;
   text-align: center;
-  letter-spacing: 0px;
-  color: #FFFFFF;
+  color: #ffffff;
   margin-top: 26px;
-  margin-bottom:17px;
+  margin-bottom: 17px;
 }
 </style>

buyer/src/components/indexDecorate/modelList/oneRowThreeColumns.vue

@@ -1,7 +1,12 @@
 <template>
     <div class="line flex flex-a-c flex-j-sb">
-        <div class="column" v-for="(item,index) in data.options.list" :key="index">
-          <img  :src="item.img" class="three-column-img">
+        <div
+          class="column hover-pointer"
+          v-for="(item, index) in data.options.list"
+          :key="index"
+          @click="linkTo(item.url)"
+        >
+          <img :src="item.img" class="three-column-img" alt="" />
         </div>
     </div>
 </template>
@@ -25,12 +30,18 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.column{
+.line {
+  width: 100%;
+}
+.column {
   width: 385px;
   height: 165px;
-  >img{
+  cursor: pointer;
+  > img {
+    display: block;
     width: 100%;
     height: 100%;
+    object-fit: cover;
   }
 }
 </style>

buyer/src/components/nav/CateNav.vue

@@ -184,7 +184,7 @@ export default {
           // 存放分类信息
           localStorage.setItem("category", JSON.stringify(res.result));
         }
-      });
+      }).catch(() => {});
     },
     showDetail(index) {
       // 展示全部分类

buyer/src/components/userCenter/Layout.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="user-center-page">
+    <div class="user-center-title">{{ title }}</div>
+    <div class="user-center-panel">
+      <div v-if="showToolbar" class="user-center-toolbar">
+        <div class="user-center-tabs">
+          <div
+            v-for="(item, index) in tabs"
+            :key="index"
+            class="user-center-tab"
+            :class="{ active: activeTab === index }"
+            @click="$emit('tab-change', index)"
+          >
+            {{ item }}
+          </div>
+        </div>
+        <div class="user-center-extra">
+          <slot name="extra">
+            <el-button v-if="moreText" type="primary" @click="handleMore">{{ moreText }}</el-button>
+          </slot>
+        </div>
+      </div>
+      <div class="user-center-content">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "UserCenterLayout",
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    tabs: {
+      type: Array,
+      default: () => [],
+    },
+    activeTab: {
+      type: Number,
+      default: 0,
+    },
+    moreText: {
+      type: String,
+      default: "",
+    },
+    moreTo: {
+      type: [String, Object],
+      default: "",
+    },
+  },
+  emits: ["tab-change", "more"],
+  computed: {
+    showToolbar() {
+      return this.tabs.length || this.moreText || this.$slots.extra;
+    },
+  },
+  methods: {
+    handleMore() {
+      this.$emit("more");
+      if (!this.moreTo) return;
+      if (typeof this.moreTo === "string") {
+        this.$router.push(this.moreTo);
+      } else {
+        this.$router.push(this.moreTo);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.user-center-page {
+  margin-bottom: 40px;
+}
+
+.user-center-title {
+  height: 54px;
+  line-height: 54px;
+  padding: 0 20px;
+  margin-bottom: 12px;
+  background: #fff;
+  border: 1px solid #eee;
+  color: #333;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.user-center-panel {
+  padding: 0 16px 16px;
+  background: #fff;
+  border: 1px solid #eee;
+}
+
+.user-center-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 54px;
+  border-bottom: 1px solid #eee;
+}
+
+.user-center-tabs {
+  display: flex;
+  align-items: center;
+  height: 54px;
+}
+
+.user-center-tab {
+  position: relative;
+  height: 54px;
+  line-height: 54px;
+  margin-right: 28px;
+  color: #333;
+  cursor: pointer;
+
+  &:hover,
+  &.active {
+    color: $theme_color;
+  }
+
+  &.active::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -1px;
+    height: 2px;
+    background: $theme_color;
+  }
+}
+
+.user-center-extra {
+  display: flex;
+  align-items: center;
+}
+
+.user-center-content {
+  padding-top: 14px;
+}
+</style>

buyer/src/main.js

@@ -33,6 +33,7 @@ app.config.globalProperties.Cookies = storage;
 app.config.globalProperties.$inputMaxLength = inputMaxLength;
 
 app.config.globalProperties.linkTo = function (url) {
+  if (!url) return;
   if (url.substr(0, 1) === "/") {
     window.open(location.origin + url, "_blank");
   } else {

buyer/src/pages/GoodsDetail.vue

@@ -12,9 +12,9 @@
         </el-breadcrumb>
         <div class="store-collect" v-if="!takeDownSale && goodsMsg.data">
           <span class="mr_10" v-if="goodsMsg.data">
-            <router-link :to="'Merchant?id=' + goodsMsg.data.storeId">{{
-              goodsMsg.data.storeName
-            }}</router-link>
+            <router-link
+              :to="{ path: '/merchant', query: { id: goodsMsg.data.storeId } }"
+            >{{ goodsMsg.data.storeName }}</router-link>
           </span>
           <span @click="collect">
             <el-icon :color="storeCollected ? '#ed3f14' : '#666'"><StarFilled /></el-icon>

buyer/src/pages/GoodsList.vue

@@ -67,16 +67,16 @@
                 已有<span>{{ item.commentNum || 0 }}</span>人评价
               </div>
               <div class="goods-show-seller">
-                <span class="text-bottom" style="color: #e4393c">{{
-                  item.storeName
-                }}</span>
+                <span
+                  class="text-bottom hover-pointer"
+                  style="color: #e4393c"
+                  @click.stop="goShopPage(item.storeId)"
+                >{{ item.storeName }}</span>
               </div>
 
               <div class="goods-show-right">
                 <el-tag
                   class="goods-show-tag goods-show-tag-self"
-                  color="red"
-                  effect="dark"
                   v-if="item.selfOperated"
                 >
                   自营
@@ -200,6 +200,17 @@ export default {
       });
       window.open(routeUrl.href, "_blank");
     },
+    goShopPage(id) {
+      if (!id) {
+        this.$Message.warning("店铺信息不存在");
+        return;
+      }
+      const routeUrl = this.$router.resolve({
+        path: "/merchant",
+        query: { id },
+      });
+      window.open(routeUrl.href, "_blank");
+    },
     // 分页 修改页码
     changePageNum(val) {
       this.params.pageNumber = val;
@@ -279,6 +290,11 @@ export default {
 }
 
 .goods-show-tag-self {
+  --el-tag-bg-color: #fa2c19;
+  --el-tag-border-color: #fa2c19;
+  --el-tag-text-color: #fff;
+  background-color: #fa2c19;
+  border-color: #fa2c19;
   color: #fff;
 
   :deep(.el-tag__content) {

buyer/src/pages/Index.vue

@@ -125,7 +125,6 @@ export default {
       }
     },
     getcps(){
-      console.log(123123)
       let data = new Date()
       let datas = data.getDate()
       getAutoCoup().then(res=>{ //调用自动发券
@@ -146,27 +145,34 @@ export default {
               }
               storage.setItem('getTimes',datas)//存储缓存
             }
-      })
+      }).catch(() => {});
     },
     handleReachBottom(){
 
     } ,
     getIndexData () {
       if(this.pageData){
-        this.parsePageData(JSON.stringify(this.pageData))
+        this.parsePageData(JSON.stringify(this.pageData)).catch(() => {});
       }
       else{
         // 获取首页装修数据
         indexData({ clientType: 'PC' }).then(async (res) => {
-          if (res.success && res.result) {
-            this.parsePageData(res.result.pageData)
+          if (res.success && res.result?.pageData) {
+            try {
+              await this.parsePageData(res.result.pageData);
+            } catch {
+              // 装修数据解析失败时保持默认空楼层
+            }
           }
-        });
+        }).catch(() => {});
       }
     },
 
     async parsePageData(pageData){
-      let dataJson = JSON.parse(pageData);
+      const dataJson = typeof pageData === "string" ? JSON.parse(pageData) : pageData;
+      if (!dataJson?.list?.length) {
+        return;
+      }
       // 秒杀活动不是装修的数据，需要调用接口判断是否有秒杀商品
       // 轮播图根据不同轮播，样式不同
       for (let i = 0; i < dataJson.list.length; i++) {
@@ -182,18 +188,25 @@ export default {
         }
       }
       this.modelForm = dataJson;
-      storage.setItem('navList', dataJson.list[1])
+      if (dataJson.list[1]) {
+        storage.setItem('navList', dataJson.list[1])
+      }
       this.showNav = true
-      this.topAdvert = dataJson.list[0];
+      if (dataJson.list[0]) {
+        this.topAdvert = dataJson.list[0];
+      }
     },
 
     async getListByDay () { // 当天秒杀活动
-      const res = await seckillByDay()
-      if (res.success && res.result.length) {
-        return res.result
-      } else {
-        return []
+      try {
+        const res = await seckillByDay()
+        if (res.success && res.result?.length) {
+          return res.result
+        }
+      } catch {
+        // 秒杀接口失败时不影响首页其他模块
       }
+      return []
     }
   },
   components: { Search,

buyer/src/pages/Merchant.vue

@@ -2,18 +2,35 @@
   <div class="merchant">
     <BaseHeader/>
     <!-- 搜索栏 -->
-    <Search  :storeId="storeMsg.storeId" @search="search"></Search>
+    <Search :storeId="storeMsg.storeId || $route.query.id" @search="search"></Search>
     <!-- 店铺logo -->
     <div class="shop-logo">
-      <div>
-        <p>{{ storeMsg.storeName || '店铺' }}</p>
-        <p :alt="storeMsg.storeDesc" class="ellipsis" v-html="storeMsg.storeDesc"></p>
-      </div>
-      <div>
-        <span class="hover-pointer" @click="collect"><el-icon :color="storeCollected ? '#ed3f14' : '#fff'"><StarFilled /></el-icon>{{
-            storeCollected ? '已收藏店铺' : '收藏店铺'
-          }}</span>
-        <span class="hover-pointer ml_10" style="width:80px" @click="IMService(storeMsg.storeId,null,null)"><i class="icomoon icon-customer-service"></i>联系客服</span>
+      <div class="shop-logo-inner">
+        <div class="shop-info">
+          <p class="shop-name">{{ storeMsg.storeName || '店铺' }}</p>
+          <p
+            v-if="storeMsg.storeDesc"
+            :alt="storeMsg.storeDesc"
+            class="shop-desc ellipsis"
+            v-html="storeMsg.storeDesc"
+          ></p>
+        </div>
+        <div class="shop-actions">
+          <span class="hover-pointer store-collect-btn" @click="collect">
+            <el-icon :color="storeCollected ? '#ffc107' : '#fff'">
+              <StarFilled />
+            </el-icon>
+            <span>{{
+              storeCollected ? '已收藏店铺' : '收藏店铺'
+            }}</span>
+          </span>
+          <span
+            class="hover-pointer store-service-btn"
+            @click="IMService(storeMsg.storeId, null, null)"
+          >
+            <i class="icomoon icon-customer-service"></i>联系客服
+          </span>
+        </div>
       </div>
     </div>
     <div class="store-category">
@@ -101,7 +118,11 @@
 
 import { ArrowDown, StarFilled } from '@element-plus/icons-vue';
 import {getCateById, getDetailById} from "@/api/shopentry";
-import {cancelStoreCollect, collectStore} from "@/api/member";
+import {
+  cancelStoreCollect,
+  collectStore,
+  isStoreCollection,
+} from "@/api/member";
 import {goodsList} from "@/api/goods";
 import Search from "@/components/Search";
 import ModelForm from "@/components/indexDecorate/ModelForm";
@@ -145,10 +166,15 @@ export default {
   },
   created() {
     this.getStoreMsg();
+    window.onscroll = () => {
+      const top =
+        document.documentElement.scrollTop || document.body.scrollTop;
+      this.topSearchShow = top > 300;
+    };
   },
   methods: {
     isFloorEnabled() {
-      const pageShow = this.storeMsg.pageShow;
+      const pageShow = this.storeMsg && this.storeMsg.pageShow;
       return pageShow === "1" || pageShow === 1 || pageShow === "OPEN" || pageShow === true;
     },
     loadStoreGoodsView() {
@@ -205,55 +231,45 @@ export default {
     },
 
 
-    // getStoreMsg () { // 店铺信息
-    //   getDetailById(this.$route.query.id).then(res => {
-    //     if (res.success) {
-    //       this.storeMsg = res.result
-    //       document.title = this.storeMsg.storeName
-    //       if (this.Cookies.getItem('userInfo')) {
-    //         isCollection('STORE', this.storeMsg.storeId).then(res => {
-    //           if (res.success && res.result) {
-    //             this.storeCollected = true;
-    //           }
-    //         })
-    //       }
-    //     }
-    //   })
-    // },
-    // async getListByDay() {
-    //   // 当天秒杀活动
-    //   const res = await seckillByDay();
-    //   if (res.success && res.result.length) {
-    //     return res.result;
-    //   } else {
-    //     return [];
-    //   }
-    // },
-
+    checkStoreCollectionStatus() {
+      const storeId = this.storeMsg && this.storeMsg.storeId;
+      if (!storeId || !this.Cookies.getItem("userInfo")) {
+        return;
+      }
+      isStoreCollection("STORE", storeId)
+        .then((res) => {
+          if (res.success && res.result) {
+            this.storeCollected = true;
+          }
+        })
+        .catch(() => {});
+    },
     getStoreMsg() {
-      // 店铺信息
-      getDetailById(this.$route.query.id).then((res) => {
-        if (res.success) {
-
-          this.storeMsg = res.result;
-
-          if (this.isFloorEnabled()) {
-            this.getIndexData();
+      const storeId = this.$route.query.id;
+      if (!storeId) {
+        this.$Message.warning("店铺不存在");
+        return;
+      }
+      getDetailById(storeId)
+        .then((res) => {
+          if (res.success && res.result) {
+            this.storeMsg = res.result;
+            document.title = this.storeMsg.storeName || "店铺";
+            this.checkStoreCollectionStatus();
+            if (this.isFloorEnabled()) {
+              this.getIndexData();
+            } else {
+              this.loadStoreGoodsView();
+            }
           } else {
+            this.storeMsg = { storeId };
             this.loadStoreGoodsView();
           }
-          let that = this;
-          window.onscroll = function () {
-            let top =
-              document.documentElement.scrollTop || document.body.scrollTop;
-            if (top > 300) {
-              that.topSearchShow = true;
-            } else {
-              that.topSearchShow = false;
-            }
-          };
-        }
-      });
+        })
+        .catch(() => {
+          this.storeMsg = { storeId };
+          this.loadStoreGoodsView();
+        });
     },
     getCateList() {
       // 店铺分类
@@ -318,17 +334,26 @@ export default {
         this.$router.push("/login");
         return;
       }
-      if (this.storeCollected) {
-        let cancel = await cancelStoreCollect("STORE", storeId);
-        if (cancel.success) {
-          this.$Message.success("已取消收藏");
-          this.storeCollected = false;
+      try {
+        if (this.storeCollected) {
+          const cancel = await cancelStoreCollect("STORE", storeId);
+          if (cancel.success) {
+            this.$Message.success("已取消收藏");
+            this.storeCollected = false;
+          }
+        } else {
+          const collect = await collectStore("STORE", storeId);
+          if (collect.success || collect.code === 200) {
+            this.storeCollected = true;
+            this.$Message.success(
+              "收藏店铺成功,可以前往个人中心我的收藏查看"
+            );
+          }
         }
-      } else {
-        let collect = await collectStore("STORE", storeId);
-        if (collect.code === 200) {
+      } catch (err) {
+        const msg = err?.message || err?.data?.message || "";
+        if (msg.includes("重复收藏")) {
           this.storeCollected = true;
-          this.$Message.success("收藏店铺成功,可以前往个人中心我的收藏查看");
         }
       }
     },
@@ -350,31 +375,56 @@ export default {
   padding: 4px;
   color: #fff;
 
-  > div {
+  .shop-logo-inner {
     display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
     width: 1200px;
     margin: 0 auto;
+  }
+
+  .shop-info {
+    display: flex;
+    flex-direction: row;
     align-items: center;
-
-    > div:nth-child(2) {
-      margin-left: 10px;
-      flex: 1;
-    }
-
-    > div:nth-child(3) {
-      width: 200px;
-    }
+    gap: 12px;
+    min-width: 0;
   }
 
-  p:nth-child(1) {
+  .shop-name {
+    margin: 0;
     font-size: 20px;
+    flex-shrink: 0;
   }
 
-  p:nth-child(2) {
+  .shop-desc {
+    margin: 0;
     font-size: 14px;
     max-height: 40px;
     max-width: 400px;
   }
+
+  .shop-actions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 16px;
+    flex-shrink: 0;
+  }
+
+  .store-collect-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .store-service-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 80px;
+  }
 }
 
 .store-category {

buyer/src/pages/home/memberCenter/AccountSafe.vue

@@ -1,45 +1,48 @@
 <template>
   <div class="wrapper">
-    <card _Title="账户安全"/>
-    <div class="safeList">
+    <UserCenterLayout title="账户安全" :tabs="['账户安全']">
+      <div class="safeList">
       <!-- 密码 -->
       <div class="safeItem">
-        <div :span="2">
+        <div class="safeItem-icon">
           <el-icon :size="40"><Key /></el-icon>
         </div>
-        <div :span="16">
+        <div class="safeItem-content">
           <div class="setDivItem">登录密码</div>
           <div class="setDivItem theme">互联网账号存在被盗风险，建议您定期更改密码以保护账户安全。</div>
         </div>
-        <div :span="4">
+        <div class="safeItem-action">
           <el-button @click="modifyPwd">修改密码</el-button>
         </div>
       </div>
 
-      <div class="safeItem">
-        <div :span="2">
-          <el-icon :size="40"><Link /></el-icon>
-        </div>
-        <div :span="16">
-          <div class="setDivItem">第三方账户绑定</div>
-          <div class="setDivItem theme">绑定后可使用第三方账号快捷登录。</div>
-          <div class="connectList">
-            <div class="connectRow">
-              <div class="connectRowLeft">
-                <span class="connectName">{{ wechatConnect.label }}</span>
-                <el-tag v-if="isBound(wechatConnect.type)" color="success">已绑定</el-tag>
-                <el-tag v-else>未绑定</el-tag>
-              </div>
-            </div>
-            <el-skeleton size="large" fix v-if="connectLoading"></el-skeleton>
+      <div class="safeItem safeItem-connect">
+        <div class="safeItem-main">
+          <div class="safeItem-icon">
+            <el-icon :size="40"><Link /></el-icon>
+          </div>
+          <div class="safeItem-content">
+            <div class="setDivItem">第三方账户绑定</div>
+            <div class="setDivItem theme">绑定后可使用第三方账号快捷登录。</div>
+          </div>
+          <div class="safeItem-action">
+            <el-button v-if="!isBound(wechatConnect.type)" type="primary" @click="openBindModal(wechatConnect)">绑定</el-button>
+            <el-button v-else @click="confirmUnbind(wechatConnect)">解绑</el-button>
           </div>
         </div>
-        <div :span="4">
-          <el-button v-if="!isBound(wechatConnect.type)" type="primary" @click="openBindModal(wechatConnect)">绑定</el-button>
-          <el-button v-else @click="confirmUnbind(wechatConnect)">解绑</el-button>
+        <div class="connectList">
+          <div class="connectRow">
+            <div class="connectRowLeft">
+              <span class="connectName">{{ wechatConnect.label }}</span>
+              <el-tag v-if="isBound(wechatConnect.type)" color="success">已绑定</el-tag>
+              <el-tag v-else>未绑定</el-tag>
+            </div>
+          </div>
+          <el-skeleton size="large" fix v-if="connectLoading"></el-skeleton>
         </div>
       </div>
-    </div>
+      </div>
+    </UserCenterLayout>
 
     <el-dialog
       v-model="bindModalVisible"
@@ -266,12 +269,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-  .safeItem > div:first-child,
-  .safeItem > div:last-child {
-    text-align: center;
-    color: $theme_color;
-  }
-
   .theme {
     color: $theme_color;
   }
@@ -281,17 +278,47 @@ export default {
   }
 
   .safeItem {
+    display: flex;
+    align-items: center;
+    gap: 16px;
     border-bottom: 1px solid $border_color;
     padding: 16px 0;
+  }
 
-    > div {
-      padding: 8px 0;
-    }
+  .safeItem-connect {
+    display: block;
+  }
+
+  .safeItem-main {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .safeItem-icon {
+    flex-shrink: 0;
+    width: 56px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $theme_color;
+  }
+
+  .safeItem-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .safeItem-action {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
   }
 
   .connectList {
     position: relative;
     margin-top: 8px;
+    margin-left: 72px;
   }
 
   .connectRow {

buyer/src/pages/home/memberCenter/CommentList.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="wrapper">
-    <card _Title="评论/晒单" />
+    <UserCenterLayout title="评论/晒单" :tabs="['评论/晒单']">
 
     <div class="order">
       <div class="order-title">
         <div class="order-row title">
-          <div span="12">订单详情</div>
+          <div span="10" class="order-detail-title">订单详情</div>
           <div span="4">收货人</div>
-          <div span="4">评价</div>
-          <div span="6"></div>
+          <div span="4">评价等级</div>
+          <div span="4">评价内容</div>
+          <div span="2"></div>
         </div>
       </div>
       <empty v-if="list.length === 0" />
@@ -21,7 +22,7 @@
             <span class="hover-pointer fontsize_12 eval-detail" @click="evaluateDetail(item.id)">评价详情</span>
           </div>
           <div class="order-item-view">
-            <div span="12" class="item-view-name">
+            <div span="10" class="item-view-name">
               <div class="order-img hover-color" @click="linkTo(`/goodsDetail?goodsId=${item.goodsId}&skuId=${item.skuId}`)">
                 <img :src="item.goodsImage" alt="" />
               </div>
@@ -43,6 +44,7 @@
                   </template>
               </el-tooltip>
             </div>
+            <div span="2"></div>
           </div>
         </div>
       </div>
@@ -52,8 +54,9 @@
     <div class="page-size">
       <el-pagination :total="total" @current-change="changePageNum"
         @size-change="changePageSize"
-        :page-size="params.pageSize" layout="total, sizes, prev, pager, next"></el-pagination>
+        :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
     </div>
+    </UserCenterLayout>
   </div>
 </template>
 
@@ -158,11 +161,21 @@ export default {
     max-width: 50%;
   }
 
+  > [span='10'] {
+    flex: 0 0 41.666667%;
+    max-width: 41.666667%;
+  }
+
   > [span='4'] {
     flex: 0 0 16.666667%;
     max-width: 16.666667%;
   }
 
+  > [span='2'] {
+    flex: 0 0 8.333333%;
+    max-width: 8.333333%;
+  }
+
   > [span='6'] {
     flex: 0 0 25%;
     max-width: 25%;
@@ -182,6 +195,10 @@ export default {
   padding: 10px 0;
   text-align: center;
 }
+.order-detail-title {
+  text-align: left;
+  padding-left: 20px !important;
+}
 .content {
   color: #999;
   max-height: 60px;

buyer/src/pages/home/memberCenter/ComplainDetail.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="add-eval">
-    <div class="title">
-      <card _Title="订单投诉" :_Size="16"></card>
+    <UserCenterLayout title="订单投诉" :tabs="['订单投诉']">
+      <div class="title">
       <p>
         <span class="fontsize_16 global_color">{{ statusLabel[detail.complainStatus] }}</span>
         <span class="color999 ml_20">创建时间：</span><span>{{ detail.createTime }}</span>
         <span class="color999 ml_20">{{ detail.createTime }}</span>
       </p>
-    </div>
+      </div>
 
     <el-alert class="l_title" show-icon type="warning">我的申诉信息</el-alert>
     <table cellspacing="0" cellpadding='0' border="1">
@@ -118,6 +118,7 @@
     <el-dialog title="View Image" v-model="visible">
       <img :src="previewImage" v-if="visible" style="width: 100%">
     </el-dialog>
+    </UserCenterLayout>
   </div>
 </template>
 <script>

buyer/src/pages/home/memberCenter/ComplainList.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="wrapper">
-    <card _Title="我的投诉"  />
+    <UserCenterLayout title="我的投诉" :tabs="['我的投诉']">
 
     <div class="order">
       <div class="order-title">
         <div class="order-row title">
-          <div class="col-12">商品信息</div>
-          <div class="col-4">投诉状态</div>
-          <div class="col-4">投诉主题</div>
-          <div class="col-4">投诉内容</div>
+          <div span="10" class="order-detail-title">商品信息</div>
+          <div span="4">投诉状态</div>
+          <div span="4">投诉主题</div>
+          <div span="4">投诉内容</div>
+          <div span="2"></div>
         </div>
       </div>
       <empty v-if="list.length === 0" />
@@ -22,7 +23,7 @@
             <span class="hover-pointer fontsize_12 eval-detail" style="right: 90px" v-if="item.complainStatus === 'APPLYING' || item.complainStatus === 'NEW'" @click="cancel(item.id)">取消投诉</span>
           </div>
           <div class="order-item-view">
-            <div class="col-12 item-view-name">
+            <div span="10" class="item-view-name">
               <div class="order-img hover-color" @click="linkTo(`/goodsDetail?goodsId=${item.goodsId}&skuId=${item.skuId}`)">
                 <img :src="item.goodsImage" alt="" />
               </div>
@@ -30,11 +31,11 @@
                 {{item.goodsName}}
               </div>
             </div>
-            <div class="col-4">{{statusLabel[item.complainStatus]}}</div>
-            <div class="col-4">
+            <div span="4">{{statusLabel[item.complainStatus]}}</div>
+            <div span="4">
               <div class="content">{{item.complainTopic}}</div>
             </div>
-            <div class="col-4">
+            <div span="4">
               <el-tooltip>
                 <div class="content">{{item.content}}</div>
                 <template #content>
@@ -44,6 +45,7 @@
                 </template>
               </el-tooltip>
             </div>
+            <div span="2"></div>
           </div>
         </div>
       </div>
@@ -53,8 +55,9 @@
     <div class="page-size">
       <el-pagination :total="total" @current-change="changePageNum"
         @size-change="changePageSize"
-        :page-size="params.pageSize" layout="total, sizes, prev, pager, next"></el-pagination>
+        :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
     </div>
+    </UserCenterLayout>
   </div>
 </template>
 
@@ -163,29 +166,30 @@ export default {
 .order-item-view {
   display: flex;
   align-items: center;
-  flex-wrap: nowrap;
-  width: 100%;
-  box-sizing: border-box;
-  padding: 10px 20px;
 
-  .col-12,
-  .col-4 {
+  > [span] {
     box-sizing: border-box;
     padding: 0 8px;
   }
 
-  .col-12 {
-    flex: 0 0 50%;
-    max-width: 50%;
+  > [span='10'] {
+    flex: 0 0 41.666667%;
+    max-width: 41.666667%;
   }
 
-  .col-4 {
+  > [span='4'] {
     flex: 0 0 16.666667%;
     max-width: 16.666667%;
   }
+
+  > [span='2'] {
+    flex: 0 0 8.333333%;
+    max-width: 8.333333%;
+  }
 }
 
 .order-item-view {
+  padding: 10px 20px;
   align-items: flex-start;
 }
 .order-item {
@@ -194,8 +198,13 @@ export default {
   margin: 10px 0;
 }
 .order-row {
+  padding: 10px 0;
   text-align: center;
 }
+.order-detail-title {
+  text-align: left;
+  padding-left: 20px !important;
+}
 .content {
   color: #999;
   max-height: 60px;
@@ -214,6 +223,7 @@ export default {
   }
 }
 .page-size{
-  text-align: right;
+  display: flex;
+  justify-content: flex-end;
 }
 </style>

buyer/src/pages/home/memberCenter/Distribution.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="wrapper">
-    <card _Title="我的分销" />
+    <UserCenterLayout title="我的分销" :tabs="['我的分销']">
     <!-- 分销申请 -->
 
     <div v-if="status === 0">
@@ -103,7 +103,6 @@
               :total="goodsData.total"
               :page-size="params.pageSize"
               @current-change="changePage"
-              small
              layout="total, prev, pager, next, jumper"></el-pagination>
           </div>
         </el-tab-pane>
@@ -141,7 +140,6 @@
               :total="goodsData.total"
               :page-size="params.pageSize"
               @current-change="changePage"
-              small
              layout="total, prev, pager, next, jumper"></el-pagination>
           </div>
         </el-tab-pane>
@@ -178,7 +176,6 @@
               :total="logData.total"
               :page-size="logParams.pageSize"
               @current-change="changePageLog"
-              small
              layout="total, prev, pager, next, jumper"></el-pagination>
           </div>
         </el-tab-pane>
@@ -254,6 +251,7 @@
       <div class="mt_10" style="margin-top: 100px;">
         商品链接：<el-input style="width: 600px" v-model="qrcode"></el-input>
       </div></el-dialog>
+    </UserCenterLayout>
   </div>
 </template>
 
@@ -510,8 +508,9 @@ export default {
   margin: 20px 0;
 }
 .page-size {
+  display: flex;
+  justify-content: flex-end;
   margin: 15px 0px;
-  text-align: right;
 }
 .account-price {
   font-weight: bold;

buyer/src/pages/home/memberCenter/Favorites.vue

@@ -1,40 +1,80 @@
 <template>
   <div class="wrapper">
-    <card _Title="近期收藏" :_Tabs="favoriteWay" :_ActiveTab="activeTabIndex" @_Change="change" :_Size="16" v-if="!homePage" />
-    <card _Title="近期收藏" :_Size="16" :_Tabs="favoriteWay" :_ActiveTab="activeTabIndex" @_Change="change" _More="全部收藏" _Src="/home/Favorites" v-else>
-    </card>
-    <div v-if="list.length">
-      <div v-for="(item, index) in list" :key="index">
-        <div class="goodsItem" :key="item.skuId">
-          <div class="goodsImg hover-pointer" v-if="params.type === 'GOODS'">
-            <img :src="item.image" />
-          </div>
-          <div class="goodsImg hover-pointer" v-else>
-            <img :src="item.storeLogo" />
-          </div>
-          <div class="goodsTitle hover-color" v-if="params.type === 'GOODS'" @click="buynow(item.skuId, item.goodsId,item.id)">
-            {{ item.goodsName }}
-          </div>
-          <div v-else class="goodsTitle  hover-pointer" @click="buynow(item.skuId, item.goodsId,item.id)" >
-            {{ item.storeName }}
-            <el-tag color="error" class="operated" v-if="item.selfOperated">商家自营</el-tag>
-          </div>
-          <div class="goodsPrice">
-            <span v-if="params.type === 'GOODS'">{{ $filters.unitPrice(item.price, '￥') }}</span>
+    <UserCenterLayout
+      v-if="!homePage"
+      title="近期收藏"
+      :tabs="favoriteWay"
+      :active-tab="activeTabIndex"
+      @tab-change="change"
+    >
+      <div v-if="list.length">
+        <div v-for="(item, index) in list" :key="index">
+          <div class="goodsItem" :key="item.skuId">
+            <div class="goodsImg hover-pointer" v-if="params.type === 'GOODS'">
+              <img :src="item.image" />
+            </div>
+            <div class="goodsImg hover-pointer" v-else>
+              <img :src="item.storeLogo" />
+            </div>
+            <div class="goodsTitle hover-color" v-if="params.type === 'GOODS'" @click="buynow(item.skuId, item.goodsId,item.id)">
+              {{ item.goodsName }}
+            </div>
+            <div v-else class="goodsTitle  hover-pointer" @click="buynow(item.skuId, item.goodsId,item.id)" >
+              {{ item.storeName }}
+              <el-tag color="error" class="operated" v-if="item.selfOperated">商家自营</el-tag>
+            </div>
+            <div class="goodsPrice">
+              <span v-if="params.type === 'GOODS'">{{ $filters.unitPrice(item.price, '￥') }}</span>
 
-          </div>
-          <div class="goodsBuy">
-            <el-button size="small" type="primary" @click="buynow(item.skuId, item.goodsId)"
-              v-if="params.type === 'GOODS'">立即购买</el-button>
-            <el-button size="small" type="primary" @click="goShop(item.id)" v-else>店铺购买</el-button>
-            <el-button size="small" v-if="params.type === 'GOODS'" @click="cancel(item.skuId)">取消收藏</el-button>
-            <el-button size="small" v-if="params.type === 'STORE'" @click="cancelStore(item.id)">取消收藏</el-button>
+            </div>
+            <div class="goodsBuy">
+              <el-button size="small" type="primary" @click="buynow(item.skuId, item.goodsId)"
+                v-if="params.type === 'GOODS'">立即购买</el-button>
+              <el-button size="small" type="primary" @click="goShop(item.id)" v-else>店铺购买</el-button>
+              <el-button size="small" v-if="params.type === 'GOODS'" @click="cancel(item.skuId)">取消收藏</el-button>
+              <el-button size="small" v-if="params.type === 'STORE'" @click="cancelStore(item.id)">取消收藏</el-button>
+            </div>
           </div>
         </div>
+        <el-skeleton size="large" fix v-if="spinShow"></el-skeleton>
       </div>
-      <el-skeleton size="large" fix v-if="spinShow"></el-skeleton>
-    </div>
-    <empty v-else />
+      <empty v-else />
+    </UserCenterLayout>
+
+    <template v-else>
+      <card _Title="近期收藏" :_Size="16" :_Tabs="favoriteWay" :_ActiveTab="activeTabIndex" @_Change="change" _More="全部收藏" _Src="/home/Favorites"></card>
+      <div v-if="list.length">
+        <div v-for="(item, index) in list" :key="index">
+          <div class="goodsItem" :key="item.skuId">
+            <div class="goodsImg hover-pointer" v-if="params.type === 'GOODS'">
+              <img :src="item.image" />
+            </div>
+            <div class="goodsImg hover-pointer" v-else>
+              <img :src="item.storeLogo" />
+            </div>
+            <div class="goodsTitle hover-color" v-if="params.type === 'GOODS'" @click="buynow(item.skuId, item.goodsId,item.id)">
+              {{ item.goodsName }}
+            </div>
+            <div v-else class="goodsTitle  hover-pointer" @click="buynow(item.skuId, item.goodsId,item.id)" >
+              {{ item.storeName }}
+              <el-tag color="error" class="operated" v-if="item.selfOperated">商家自营</el-tag>
+            </div>
+            <div class="goodsPrice">
+              <span v-if="params.type === 'GOODS'">{{ $filters.unitPrice(item.price, '￥') }}</span>
+            </div>
+            <div class="goodsBuy">
+              <el-button size="small" type="primary" @click="buynow(item.skuId, item.goodsId)"
+                v-if="params.type === 'GOODS'">立即购买</el-button>
+              <el-button size="small" type="primary" @click="goShop(item.id)" v-else>店铺购买</el-button>
+              <el-button size="small" v-if="params.type === 'GOODS'" @click="cancel(item.skuId)">取消收藏</el-button>
+              <el-button size="small" v-if="params.type === 'STORE'" @click="cancelStore(item.id)">取消收藏</el-button>
+            </div>
+          </div>
+        </div>
+        <el-skeleton size="large" fix v-if="spinShow"></el-skeleton>
+      </div>
+      <empty v-else />
+    </template>
   </div>
 </template>
 
@@ -183,14 +223,15 @@ export default {
 
 .goodsItem {
   display: flex;
+  align-items: center;
   height: 60px;
-  line-height: 60px;
   margin-bottom: 10px;
 
   >.goodsImg {
     width: 60px;
     height: 60px;
     overflow: hidden;
+    flex-shrink: 0;
 
     >img {
       width: 100%;
@@ -200,12 +241,15 @@ export default {
 
   >.goodsPrice,
   .goodsShop {
-    width: 150px;
+    width: 120px;
+    flex-shrink: 0;
     text-align: center;
   }
 
   >.goodsTitle {
-    width: 400px;
+    flex: 1;
+    min-width: 0;
+    line-height: 60px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -213,10 +257,17 @@ export default {
 }
 
 .goodsBuy {
-  margin-left: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-shrink: 0;
+  gap: 8px;
+  width: 170px;
+  margin-left: 16px;
+  line-height: normal;
 
-  >* {
-    margin: 0 4px;
+  :deep(.el-button) {
+    margin: 0;
   }
 }
 

buyer/src/pages/home/memberCenter/MemberGrade.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="memberGrade">
-    <card _Title="我的等级"/>
+    <UserCenterLayout title="我的等级" :tabs="['我的等级']">
     <div class="summary">
       <div class="gradeCard">
         <div class="gradeLeft">
@@ -24,7 +24,7 @@
       </div>
     </div>
 
-    <el-tabs value="rules">
+    <el-tabs v-model="activeGradeTab">
       <el-tab-pane label="获取经验值方式" name="rules">
         <el-table v-loading="rulesLoading" :data="ruleList">
           <el-table-column label="获取方式" min-width="720">
@@ -65,17 +65,20 @@
             </template>
           </el-table-column>
         </el-table>
-        <el-pagination           style="float:right;margin-top:10px"
-          :current-page="params.pageNumber"
-          :total="experienceLogs.total || 0"
-          :page-size="params.pageSize"
-          @current-change="changePage"
-          @size-change="changePageSize"
-          :page-sizes="[10, 20, 50]"
-          small
-         layout="total, prev, pager, next, jumper"></el-pagination>
+        <div class="grade-pagination">
+          <el-pagination
+            :current-page="params.pageNumber"
+            :total="experienceLogs.total || 0"
+            :page-size="params.pageSize"
+            @current-change="changePage"
+            @size-change="changePageSize"
+            :page-sizes="[10, 20, 50]"
+            layout="total, prev, pager, next, jumper"
+          />
+        </div>
       </el-tab-pane>
     </el-tabs>
+    </UserCenterLayout>
 
   </div>
 
@@ -98,6 +101,7 @@ export default {
       currentExperience: 0,
       currentGradeId: '',
       selectedRuleKey: '',
+      activeGradeTab: 'rules',
       logLoading: false,
       gradeLoading: false,
       params: {
@@ -405,4 +409,10 @@ h3 {
   font-weight: 600;
 }
 
+.grade-pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+}
+
 </style>

buyer/src/pages/home/memberCenter/ModifyPwd.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="wrapper">
-    <card _Title="账户安全"/>
+    <UserCenterLayout title="账户安全" :tabs="['账户安全']">
     <!--  手机号验证  -->
     <el-form ref="formData" :model="formData" label-position="left" label-width="100px" :rules="ruleInLines"
           v-if="(status == 2 || status == 3) && !showPwd">
@@ -69,6 +69,7 @@
     <div v-if="showPwd" style="text-align: center;width: 50%">
       <el-button type="primary" class="ml_10" @click="setPassword">设置</el-button>
     </div>
+    </UserCenterLayout>
   </div>
 </template>
 

buyer/src/pages/home/memberCenter/Point.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="point">
-    <card _Title="我的积分"/>
+    <UserCenterLayout title="我的积分" :tabs="['我的积分']">
     <div class="point-content">
       <span>剩余积分：<span>{{ pointObj.point || 0 }}</span></span>
       <span>累计获得：<span>{{ pointObj.totalPoint || 0 }}</span></span>
@@ -18,15 +18,18 @@
       </el-table-column>
     </el-table>
     <!-- 分页 -->
-    <el-pagination       style="float:right;margin-top:10px"
-      :current-page="params.pageNumber"
-      :total="logData.total"
-      :page-size="params.pageSize"
-      @current-change="changePage"
-      @size-change="changePageSize"
-      :page-sizes="[10, 20, 50]"
-      small
-     layout="total, prev, pager, next, jumper"></el-pagination>
+    <div class="point-pagination">
+      <el-pagination
+        :current-page="params.pageNumber"
+        :total="logData.total"
+        :page-size="params.pageSize"
+        @current-change="changePage"
+        @size-change="changePageSize"
+        :page-sizes="[10, 20, 50]"
+        layout="total, prev, pager, next, jumper"
+      />
+    </div>
+    </UserCenterLayout>
   </div>
 </template>
 <script>
@@ -92,4 +95,10 @@ h3 {
     }
   }
 }
+
+.point-pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+}
 </style>

buyer/src/pages/home/memberCenter/Profile.vue

@@ -1,26 +1,33 @@
 <template>
   <div class="wrapper">
-    <card _Title="用户信息" />
-    <el-form :model="formItem" :rules="rules" ref="form" label-width="80px">
-      <el-form-item label="头像">
-        <el-avatar v-if="formItem.face" :src="formItem.face" :size="80" />
-        <el-avatar v-else :size="80"><el-icon><User /></el-icon></el-avatar>
-        <el-upload
-          :show-upload-list="false"
-          :on-success="handleSuccess"
-          :format="['jpg','jpeg','png']"
-          :action="action"
-          :headers="accessToken"
+    <UserCenterLayout title="用户信息" :tabs="['用户信息']">
+      <el-form :model="formItem" :rules="rules" ref="form" label-width="80px">
+      <el-form-item label="头像" class="avatar-form-item">
+        <div class="avatar-upload">
+          <el-avatar v-if="formItem.face" :src="formItem.face" :size="80" />
+          <el-avatar v-else :size="80"><el-icon><User /></el-icon></el-avatar>
+          <el-upload
+            :show-file-list="false"
+            :on-success="handleSuccess"
+            :format="['jpg','jpeg','png']"
+            :action="action"
+            :headers="accessToken"
           >
-          <el-button class="mt_10">上传头像</el-button>
-        </el-upload>
+            <el-button>上传头像</el-button>
+          </el-upload>
+        </div>
       </el-form-item>
       <el-form-item label="昵称" prop="nickName">
-        <el-input class="wrapper-user-name" style="width:187px" v-model="formItem.nickName" placeholder="" />
+        <el-input class="profile-field" v-model="formItem.nickName" placeholder="" />
       </el-form-item>
 
       <el-form-item label="生日">
-        <el-date-picker type="date" placeholder="选择您的生日" v-model="formItem.birthday"></el-date-picker>
+        <el-date-picker
+          class="profile-field"
+          type="date"
+          placeholder="选择您的生日"
+          v-model="formItem.birthday"
+        />
       </el-form-item>
       <el-form-item label="性别">
         <el-radio-group v-model="formItem.sex" type="button" button-style="solid">
@@ -32,7 +39,8 @@
         <el-button type="primary" @click="save">确认修改</el-button>
 
       </el-form-item>
-    </el-form>
+      </el-form>
+    </UserCenterLayout>
   </div>
 </template>
 
@@ -113,5 +121,35 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.avatar-form-item {
+  :deep(.el-form-item__label) {
+    height: 90px;
+    line-height: 90px;
+    display: flex;
+    align-items: center;
+  }
+}
 
+.avatar-upload {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+
+  :deep(.el-avatar) {
+    margin-top: 10px;
+  }
+
+  :deep(.el-upload) {
+    display: block;
+  }
+}
+
+.profile-field {
+  width: 187px;
+}
+
+:deep(.profile-field.el-date-editor) {
+  width: 187px;
+}
 </style>

buyer/src/pages/home/memberCenter/evaluation/AddEval.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="add-eval">
-    <div class="title">
-      <card _Title="订单评价" :_Size="16"></card>
+    <UserCenterLayout title="订单评价" :tabs="['订单评价']">
+      <div class="title">
       <p>
         <span class="color999">订单号：</span><span>{{$route.query.sn}}</span>
         <span class="color999 ml_20" v-if="order.order">{{order.order.paymentTime}}</span>
       </p>
-    </div>
+      </div>
     <!-- 物流评分、服务评分 -->
     <div class="delivery-rate">
       <div class="fontsize_16">物流服务评价：</div>
-      <div class="color999">
-        <span>物流评价：<el-rate v-model="form.deliveryScore" /></span>
-        <span>服务评价：<el-rate v-model="form.serviceScore" /></span>
-        <span>描述评价：<el-rate v-model="form.descriptionScore" /></span>
+      <div class="color999 rate-list">
+        <span class="rate-item">物流评价：<el-rate v-model="form.deliveryScore" /></span>
+        <span class="rate-item">服务评价：<el-rate v-model="form.serviceScore" /></span>
+        <span class="rate-item">描述评价：<el-rate v-model="form.descriptionScore" /></span>
       </div>
     </div>
     <!-- 添加订单评价  左侧商品详情  右侧评价框 -->
@@ -26,13 +26,15 @@
         </div>
 
         <div class="eval-con">
-          <div>
-            <span class="color999">商品评价：</span>
+          <div class="goods-grade-row">
+            <span class="color999 goods-grade-label">商品评价：</span>
             <el-radio-group v-model="orderGoods.grade">
               <el-radio-button value="GOOD">好评</el-radio-button>
               <el-radio-button value="MODERATE">中评</el-radio-button>
               <el-radio-button value="WORSE">差评</el-radio-button>
             </el-radio-group>
+          </div>
+          <div>
             <el-input type="textarea" maxlength="500" show-word-limit :rows="4" v-model="orderGoods.content" />
           </div>
           <div style="display:flex;align-items:center;">
@@ -59,10 +61,13 @@
         </div>
       </li>
     </ul>
-    <el-button type="primary" class="mt_10" :loading="loading" @click="save">发表</el-button>
+    <div class="submit-row">
+      <el-button type="primary" :loading="loading" @click="save">发表</el-button>
+    </div>
     <el-dialog title="View Image" v-model="visible">
         <img :src="previewImage" v-if="visible" style="width: 100%">
     </el-dialog>
+    </UserCenterLayout>
   </div>
 </template>
 <script>
@@ -188,6 +193,16 @@ export default {
     font-weight: bold;
   }
 }
+.rate-list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 18px;
+}
+.rate-item {
+  display: inline-flex;
+  align-items: center;
+}
 .goods-eval li{
   display: flex;
   border-bottom: 1px solid #eee;
@@ -206,6 +221,20 @@ export default {
     padding: 20px;
   }
 }
+.goods-grade-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.goods-grade-label {
+  flex-shrink: 0;
+}
+
+.submit-row {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+}
 
 .demo-upload-list{
   display: inline-block;

buyer/src/pages/home/memberCenter/evaluation/EvalDetail.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="add-eval">
-    <div class="title">
-      <card _Title="评价详情" :_Size="16"></card>
+    <UserCenterLayout title="评价详情" :tabs="['评价详情']">
+      <div class="title">
       <p>
         <span class="color999">创建人：</span><span>{{ $filters.secrecyMobile( orderGoods.createBy ) }}</span>
         <span class="color999 ml_20">{{ orderGoods.createTime }}</span>
       </p>
-    </div>
+      </div>
     <!-- 物流评分、服务评分 -->
     <div class="delivery-rate">
       <div class="fontsize_16">物流服务评价：</div>
@@ -84,6 +84,7 @@
     <el-dialog title="View Image" v-model="visible">
       <img :src="previewImage" v-if="visible" style="width: 100%" />
     </el-dialog>
+    </UserCenterLayout>
   </div>
 </template>
 <script>

buyer/src/pages/home/memberCenter/memberMsg/MsgList.vue

@@ -1,8 +1,13 @@
 <template>
   <div class="msg-list">
-    <card _Title="我的消息" :_Tabs="status" :_Size="16"  @_Change="statusChange"/>
+    <UserCenterLayout
+      title="我的消息"
+      :tabs="status"
+      :active-tab="activeStatusIndex"
+      @tab-change="statusChange"
+    >
 
-    <el-table v-if="params.status != 'ALREADY_REMOVE'" :data="messageData.records || []">
+      <el-table v-if="params.status != 'ALREADY_REMOVE'" :data="messageData.records || []">
       <el-table-column prop="title" label="消息标题" align="left" show-overflow-tooltip />
       <el-table-column prop="content" label="消息内容" align="left" show-overflow-tooltip />
       <el-table-column prop="createTime" label="发送时间" align="left" width="240" />
@@ -18,23 +23,24 @@
           <el-button type="danger" size="small" @click="removeMessage(row.id)">删除</el-button>
         </template>
       </el-table-column>
-    </el-table>
-    <el-table v-else :data="messageData.records || []">
+      </el-table>
+      <el-table v-else :data="messageData.records || []">
       <el-table-column prop="title" label="消息标题" align="left" show-overflow-tooltip />
       <el-table-column prop="content" label="消息内容" align="left" show-overflow-tooltip />
       <el-table-column prop="createTime" label="发送时间" align="left" width="240" />
-    </el-table>
-    <el-pagination
-      style="float:right;margin-top:10px"
-      :current-page="params.pageNumber"
-      :total="messageData.total"
-      :page-size="params.pageSize"
-      @current-change="changePage"
-      @size-change="changePageSize"
-      :page-sizes="[10, 20, 50]"
-      small
-      layout="total, prev, pager, next, jumper"
-    />
+      </el-table>
+      <div class="msg-pagination">
+        <el-pagination
+          :current-page="params.pageNumber"
+          :total="messageData.total"
+          :page-size="params.pageSize"
+          @current-change="changePage"
+          @size-change="changePageSize"
+          :page-sizes="[10, 20, 50]"
+          layout="total, prev, pager, next, jumper"
+        />
+      </div>
+    </UserCenterLayout>
   </div>
 </template>
 <script>
@@ -51,6 +57,13 @@ export default {
       },
     }
   },
+  computed: {
+    activeStatusIndex () {
+      const map = ['UN_READY', 'ALREADY_READY', 'ALREADY_REMOVE'];
+      const index = map.indexOf(this.params.status);
+      return index > -1 ? index : 0;
+    }
+  },
   methods: {
     statusChange (index) {
       if (index === 0) { this.params.status = 'UN_READY' }
@@ -103,5 +116,9 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-
+.msg-pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+}
 </style>

buyer/src/pages/home/orderCenter/AddAddress.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <card _Title="收货地址" />
+    <UserCenterLayout title="收货地址" :tabs="['收货地址']">
     <div class="add-box">
       <el-form :model="formData" ref="form" label-position="left" label-width="100px" :rules="ruleInline">
         <el-form-item label="收件人" prop="name">
@@ -30,14 +30,13 @@
       <el-button type="primary" class="mr_10" :loading="loading" @click="save">保存收货地址</el-button>
       <el-button @click="$router.back()">返回</el-button>
     </div>
+    </UserCenterLayout>
 
     <multipleMap  ref="map" @callback="getAddress" />
   </div>
 </template>
 
 <script>
-import card from "@/components/card";
-
 import multipleMap from "@/components/map/multiple-map";
 import * as RegExp from "@/plugins/RegExp.js";
 import {
@@ -85,8 +84,8 @@ export default {
           if (this.$route.query.id) {
             editMemberAddress(params)
               .then((res) => {
+                this.loading = false;
                 if (res.success) {
-                  this.loading = false;
                   this.$router.push("/home/MyAddress");
                 }
               })
@@ -96,8 +95,8 @@ export default {
           } else {
             newMemberAddress(params)
               .then((res) => {
+                this.loading = false;
                 if (res.success) {
-                  this.loading = false;
                   this.$router.push("/home/MyAddress");
                 }
               })
@@ -145,7 +144,6 @@ export default {
     if (id) this.getAddrById(id);
   },
   components: {
-    card,
     multipleMap
   },
 };

buyer/src/pages/home/orderCenter/AfterSale.vue

@@ -1,10 +1,7 @@
 <template>
   <div class="wrapper">
-    <!-- 卡片组件 -->
-    <card _Title="我的售后" :_Size="16"></card>
-    <!-- 搜索 筛选 -->
-    <div class="mb_20 box">
-      <div class="global_float_right">
+    <UserCenterLayout title="我的售后" :tabs="['我的售后']">
+      <template #extra>
         <el-input
           class="width_300"
           
@@ -13,8 +10,7 @@
           @keyup.enter="getList"
           placeholder="请输入订单号搜索"
         />
-      </div>
-    </div>
+      </template>
     <!-- 列表 -->
     <empty v-if="orderList.length === 0"/>
     <div class="order-content" v-else>
@@ -76,8 +72,9 @@
     <div class="page-size">
       <el-pagination :total="total" @current-change="changePageNum"
             @size-change="changePageSize"
-            :page-size="params.pageSize" layout="sizes, prev, pager, next"></el-pagination>
+            :page-size="params.pageSize" layout="sizes, prev, pager, next, jumper"></el-pagination>
     </div>
+    </UserCenterLayout>
     <el-dialog v-model="logisticsShow" width="530">
       <template #header><p>
         <span>提交物流信息</span>

buyer/src/pages/home/orderCenter/AfterSaleDetail.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="order-detail">
-    <card _Title="售后详情" :_Size="16"></card>
+    <UserCenterLayout title="售后详情" :tabs="['售后详情']">
     <!-- 操作按钮 -->
     <el-card class="mb_10" shadow="never" v-if="(afterSale.serviceStatus == 'PASS' &&
           afterSale.serviceType != 'RETURN_MONEY') || (afterSale.afterSaleAllowOperationVO && afterSale.afterSaleAllowOperationVO.cancel)">
@@ -11,8 +11,10 @@
     <div class="order-card">
       <h3>{{afterSale.serviceName}}</h3>
       <p class="global_color fontsize_18">{{ afterSale.orderStatusValue }}</p>
-      <p>售后单号：{{ afterSale.sn }} &nbsp;&nbsp;&nbsp;订单号：{{afterSale.orderSn}}</p>
-      <div style="color:#999;" class="operation-time">创建时间：{{afterSale.createTime}}</div>
+      <p class="order-meta">
+        <span>售后单号：{{ afterSale.sn }} &nbsp;&nbsp;&nbsp;订单号：{{ afterSale.orderSn }}</span>
+        <span class="order-meta-time">创建时间：{{ afterSale.createTime }}</span>
+      </p>
       <div class="service-after">
         <div>
           本次售后服务由<span>{{afterSale.storeName}}</span>为您提供
@@ -104,6 +106,7 @@
         <el-button type="primary" :loading="submitLoading" @click="submitDelivery">提交</el-button>
       </div></template>
     </el-dialog>
+    </UserCenterLayout>
   </div>
 </template>
 <script>
@@ -243,15 +246,21 @@ export default {
     color: #999;
     margin: 3px;
   }
+  .order-meta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+
+    .order-meta-time {
+      flex-shrink: 0;
+      white-space: nowrap;
+    }
+  }
   h3 {
     font-weight: normal;
     font-size: 16px;
   }
-  .operation-time {
-    position: absolute;
-    right: 20px;
-    top: 10px;
-  }
   &:last-child{
     border: none;
   }

buyer/src/pages/home/orderCenter/ApplyAfterSale.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="apply-after-sale">
-    <card _Title="申请售后"></card>
+    <UserCenterLayout title="申请售后" :tabs="['申请售后']">
     <el-table :data="goodsData" border>
       <el-table-column label="商品名称">
         <template #default="{ row }">
@@ -42,26 +42,30 @@
           <el-input type="textarea" :rows="4" maxlength="500" style="width:260px" show-word-limit v-model="form.problemDesc" />
         </el-form-item>
         <el-form-item label="图片信息">
-          <div style="display:flex;align-items:center;">
-            <div class="demo-upload-list" v-for="(img, index) in uploadList" :key="index">
-              <img :src="img">
-              <div class="demo-upload-list-cover">
-                  <el-icon @click="handleView(img)"><View /></el-icon>
-                  <el-icon @click="handleRemove(index)"><Delete /></el-icon>
-              </div>
-            </div>
-            <el-upload
-                :show-upload-list="false"
-                :on-success="handleSuccess"
-                :before-upload="handleBeforeUpload"
-                :format="['jpg','jpeg','png']"
-                :action="action"
-                :headers="accessToken"
-                style="display: inline-block;width:58px;">
-                <div class="hover-pointer icon-upload" style="">
-                  <el-icon :size="20"><Plus /></el-icon>
+          <div class="upload-section">
+            <div class="upload-row">
+              <div class="demo-upload-list" v-for="(img, index) in uploadList" :key="index">
+                <img :src="img">
+                <div class="demo-upload-list-cover">
+                    <el-icon @click="handleView(img)"><View /></el-icon>
+                    <el-icon @click="handleRemove(index)"><Delete /></el-icon>
                 </div>
-            </el-upload>
+              </div>
+              <el-upload
+                  class="upload-trigger"
+                  :show-file-list="false"
+                  :on-success="handleSuccess"
+                  :before-upload="handleBeforeUpload"
+                  :format="['jpg','jpeg','png']"
+                  :action="action"
+                  :headers="accessToken"
+              >
+                <div class="hover-pointer icon-upload">
+                  <el-icon :size="20"><Camera /></el-icon>
+                </div>
+              </el-upload>
+            </div>
+            <div class="describe">上传售后凭证，最多5张</div>
           </div>
         </el-form-item>
         <el-form-item label="退款方式">
@@ -89,16 +93,17 @@
         <img :src="previewImage" v-if="visible" style="width: 100%">
       </el-dialog>
     </div>
+    </UserCenterLayout>
   </div>
 </template>
 <script>
-import { Delete, Plus, View } from '@element-plus/icons-vue';
+import { Camera, Delete, View } from '@element-plus/icons-vue';
 import { afterSaleReason, afterSaleInfo, applyAfterSale } from '@/api/member.js'
 import { commonUrl } from '@/plugins/request.js';
 import storage from '@/plugins/storage';
 import * as RegExp from '@/plugins/RegExp'
 export default {
-  components: { Delete, Plus, View },
+  components: { Camera, Delete, View },
   data () {
     const checkNum = (rule, value, callback) => {
       if (value === '') {
@@ -228,7 +233,7 @@ export default {
   }
 }
 .demo-upload-list{
-  display: inline-block;
+  display: block;
   width: 60px;
   height: 60px;
   text-align: center;
@@ -239,8 +244,7 @@ export default {
   background: #fff;
   position: relative;
   box-shadow: 0 1px 1px rgba(0,0,0,.2);
-  margin-right: 4px;
-  margin-top: 10px;
+  flex-shrink: 0;
 }
 .demo-upload-list img{
   width: 100%;
@@ -265,17 +269,43 @@ export default {
   margin: 0 2px;
 }
 .icon-upload {
-  width: 58px;
-  height:58px;
-  line-height: 58px;
-  text-align:center;
-  display: inline-block;
-  border:1px dashed #999;
+  width: 60px;
+  height: 60px;
+  line-height: 60px;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed #999;
   border-radius: 4px;
-  margin-top: 10px;
+  box-sizing: border-box;
   &:hover{
     cursor: pointer;
     border-color: $theme_color;
   }
 }
+
+.upload-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.upload-trigger {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+
+  :deep(.el-upload) {
+    display: inline-flex;
+    align-items: center;
+  }
+}
+
+.describe {
+  font-size: 12px;
+  color: #999;
+  margin-top: 8px;
+}
 </style>

buyer/src/pages/home/orderCenter/Complain.vue

@@ -1,13 +1,13 @@
 
 <template>
   <div class="add-eval">
-    <div class="title">
-      <card _Title="商品投诉" :_Size="16"></card>
+    <UserCenterLayout title="商品投诉" :tabs="['商品投诉']">
+      <div class="title">
       <p>
         <span class="color999">订单号：</span><span>{{$route.query.sn}}</span>
         <span class="color999 ml_20" v-if="order.order">{{order.order.paymentTime}}</span>
       </p>
-    </div>
+      </div>
     <div class="goods-eval">
       <div class="goods-con">
         <img :src="orderGoods.image" class="hover-pointer" alt="" width="100" @click="goGoodsDetail(orderGoods.skuId, orderGoods.goodsId)">
@@ -16,41 +16,47 @@
       </div>
 
       <div class="eval-con">
-        <div>
+        <div class="eval-form">
           <span class="color999">投诉主题：</span>
           <el-select v-model="form.complainTopic" style="width:260px;margin-bottom:10px">
             <el-option v-for="item in reasonList" :value="item.reason" :key="item.id">{{ item.reason }}</el-option>
           </el-select>
           <el-input type="textarea" maxlength="500" show-word-limit :rows="4" placeholder="请输入投诉内容" v-model="form.content" />
         </div>
-        <div style="display:flex;align-items:center;">
-          <div class="demo-upload-list" v-for="(img, index) in orderGoods.uploadList" :key="index">
-            <img :src="img">
-            <div class="demo-upload-list-cover">
-                <el-icon @click="handleView(img)"><View /></el-icon>
-                <el-icon @click="handleRemove(index)"><Delete /></el-icon>
+        <div class="upload-section">
+          <div class="upload-row">
+            <div class="demo-upload-list" v-for="(img, index) in orderGoods.uploadList" :key="index">
+              <img :src="img">
+              <div class="demo-upload-list-cover">
+                  <el-icon @click="handleView(img)"><View /></el-icon>
+                  <el-icon @click="handleRemove(index)"><Delete /></el-icon>
+              </div>
             </div>
-          </div>
-          <el-upload
-              :show-upload-list="false"
-              :on-success="handleSuccess"
-              :before-upload="handleBeforeUpload"
-              :format="['jpg','jpeg','png']"
-              :action="action"
-              :headers="accessToken"
-              style="display: inline-block;width:58px;">
-              <div class="hover-pointer icon-upload" style="">
+            <el-upload
+                class="upload-trigger"
+                :show-file-list="false"
+                :on-success="handleSuccess"
+                :before-upload="handleBeforeUpload"
+                :format="['jpg','jpeg','png']"
+                :action="action"
+                :headers="accessToken"
+            >
+              <div class="hover-pointer icon-upload">
                 <el-icon :size="20"><Camera /></el-icon>
               </div>
-          </el-upload>
+            </el-upload>
+          </div>
           <div class="describe">上传投诉凭证，最多5张</div>
         </div>
+        <div class="submit-bar">
+          <el-button type="primary" :loading="loading" @click="save">提交</el-button>
+        </div>
       </div>
     </div>
-    <el-button type="primary" class="mt_10" :loading="loading" @click="save">提交</el-button>
     <el-dialog title="View Image" v-model="visible">
         <img :src="previewImage" v-if="visible" style="width: 100%">
     </el-dialog>
+    </UserCenterLayout>
   </div>
 </template>
 <script>
@@ -170,11 +176,18 @@ export default {
   .eval-con {
     width: 70%;
     padding: 20px;
+    box-sizing: border-box;
+  }
+
+  .eval-form {
+    :deep(.el-textarea) {
+      width: 100%;
+    }
   }
 }
 
 .demo-upload-list{
-  display: inline-block;
+  display: block;
   width: 60px;
   height: 60px;
   text-align: center;
@@ -185,8 +198,7 @@ export default {
   background: #fff;
   position: relative;
   box-shadow: 0 1px 1px rgba(0,0,0,.2);
-  margin-right: 4px;
-  margin-top: 10px;
+  flex-shrink: 0;
 }
 .demo-upload-list img{
   width: 100%;
@@ -211,24 +223,53 @@ export default {
   margin: 0 2px;
 }
 .icon-upload {
-  width: 58px;
-  height:58px;
-  line-height: 58px;
-  text-align:center;
-  display: inline-block;
-  border:1px dashed #999;
+  width: 60px;
+  height: 60px;
+  line-height: 60px;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed #999;
   border-radius: 4px;
-  margin-top: 10px;
+  box-sizing: border-box;
   &:hover{
     cursor: pointer;
     border-color: $theme_color;
   }
 }
+
+.upload-section {
+  margin-top: 10px;
+}
+
+.upload-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.upload-trigger {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+
+  :deep(.el-upload) {
+    display: inline-flex;
+    align-items: center;
+  }
+}
+
 .describe{
   font-size: 12px;
   color: #999;
-  position:relative;
-  top: 46px;
-  left: -60px;
+  margin-top: 8px;
+}
+
+.submit-bar {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
 }
 </style>

buyer/src/pages/home/orderCenter/MyAddress.vue

@@ -1,39 +1,42 @@
 <template>
-  <div>
-    <card _Title="收货地址" _More="添加新地址" _Src="/home/addAddress"></card>
-    <div class="address-box" v-for="(item, index) in list" :key="index">
-      <div class="address-header">
-        <span>
-          {{ item.name }}
-          <el-tag class="ml_10 default-address-tag" v-if="item.isDefault">默认地址</el-tag>
-          <el-tag class="ml_10" v-if="item.alias" color="warning">{{item.alias}}</el-tag>
-        </span>
-        <div class="address-action">
-          <span @click="edit(item.id)"><el-icon><Edit /></el-icon>修改</span>
-          <span @click="del(item.id)"><el-icon><Delete /></el-icon>删除</span>
+  <div class="wrapper">
+    <UserCenterLayout title="收货地址" :tabs="['收货地址']" more-text="添加新地址" more-to="/home/addAddress">
+      <template #extra>
+        <el-button type="primary" @click="add">添加新地址</el-button>
+      </template>
+      <div class="address-box" v-for="(item, index) in list" :key="index">
+        <div class="address-header">
+          <span>
+            {{ item.name }}
+            <el-tag class="ml_10 default-address-tag" v-if="item.isDefault">默认地址</el-tag>
+            <el-tag class="ml_10" v-if="item.alias" color="warning">{{item.alias}}</el-tag>
+          </span>
+          <div class="address-action">
+            <span @click="edit(item.id)"><el-icon><Edit /></el-icon>修改</span>
+            <span @click="del(item.id)"><el-icon><Delete /></el-icon>删除</span>
+          </div>
+        </div>
+        <div class="address-content">
+          <p>
+            <span class="address-content-title"> 收 货 人 :</span> {{ item.name }}
+          </p>
+          <p>
+            <span class="address-content-title">收货地区:</span>{{ $filters.unitAddress(item.consigneeAddressPath) }}
+          </p>
+          <p>
+            <span class="address-content-title">详细地址:</span> {{ item.detail }}
+          </p>
+          <p>
+            <span class="address-content-title">手机号码:</span> {{ item.mobile }}
+          </p>
         </div>
       </div>
-      <div class="address-content">
-        <p>
-          <span class="address-content-title"> 收 货 人 :</span> {{ item.name }}
-        </p>
-        <p>
-          <span class="address-content-title">收货地区:</span>{{ $filters.unitAddress(item.consigneeAddressPath) }}
-        </p>
-        <p>
-          <span class="address-content-title">详细地址:</span> {{ item.detail }}
-        </p>
-        <p>
-          <span class="address-content-title">手机号码:</span> {{ item.mobile }}
-        </p>
-      </div>
-    </div>
+    </UserCenterLayout>
   </div>
 </template>
 
 <script>
 import { Delete, Edit } from '@element-plus/icons-vue';
-import card from '@/components/card';
 import { memberAddress, delMemberAddress } from '@/api/address.js';
 
 export default {
@@ -46,6 +49,9 @@ export default {
     };
   },
   methods: {
+    add () {
+      this.$router.push('/home/addAddress');
+    },
     edit (id) {
       // 编辑地址
       this.$router.push({ path: '/home/addAddress', query: { id: id } });
@@ -85,11 +91,17 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.wrapper {
+  margin-bottom: 40px;
+}
 .address-box {
   padding: 15px;
-  margin: 15px;
-
+  margin: 0;
   border-bottom: 1px solid $border_color;
+
+  &:last-child {
+    border-bottom: 0;
+  }
 }
 
 .address-header {
@@ -114,11 +126,23 @@ export default {
  
 }
 
-.address-action span {
-  margin-left: 15px;
-  font-size: 14px;
-  color: $theme_color;
-  cursor: pointer;
+.address-action {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+
+  span {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 14px;
+    color: $theme_color;
+    cursor: pointer;
+
+    .el-icon {
+      font-size: 14px;
+    }
+  }
 }
 
 .default-address-tag {

buyer/src/pages/home/orderCenter/MyOrder.vue

@@ -1,22 +1,97 @@
 <template>
   <div class="wrapper">
-    <!-- 卡片组件 -->
-    <card _Title="我的订单" :_Size="16" :_Tabs="changeWay" @_Change="change" v-if="!homePage"></card>
-    <card _Title="我的订单" :_Size="16" :_Tabs="changeWay" @_Change="change" _More="全部订单" _Src="/home/MyOrder" v-else></card>
-    <!-- 搜索 筛选 -->
-    <div class="order-search-bar" v-if="!homePage">
-      <div class="global_float_right">
-        <el-input
-          class="width_300"
-          v-model="params.keywords"
-          @keyup.enter="getList"
-          placeholder="请输入订单号搜索"
-        />
+    <card _Title="我的订单" :_Size="16" :_Tabs="changeWay" @_Change="change" _More="全部订单" _Src="/home/MyOrder" v-if="homePage"></card>
+
+    <UserCenterLayout
+      v-if="!homePage"
+      title="我的订单"
+      :tabs="changeWay"
+      :active-tab="activeOrderTab"
+      @tab-change="change"
+    >
+      <template #extra>
+        <div class="order-search">
+          <el-input
+            v-model="params.keywords"
+            @keyup.enter="getList"
+            placeholder="输入订单号搜索"
+          />
+          <el-button type="primary" @click="getList">搜索</el-button>
+        </div>
+      </template>
+
+      <!-- 订单列表 -->
+      <empty v-if="orderList.length === 0" />
+      <div class="order-content" v-else>
+        <div
+          class="order-list"
+          v-for="(order, onderIndex) in orderList"
+          :key="onderIndex"
+        >
+          <div class="order-header">
+            <div>
+              <div>{{ filterOrderStatus(order.orderStatus) }}</div>
+              <div>
+                订单号：{{ order.sn }} &nbsp; &nbsp; &nbsp;{{order.createTime}}
+              </div>
+            </div>
+            <div>
+              <el-button v-if="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>
+          </div>
+          <div class="order-body">
+            <div class="goods-list">
+              <div
+                v-for="(goods, goodsIndex) in order.orderItems"
+                :key="goodsIndex"
+              >
+                <img
+                  @click="goodsDetail(goods.skuId, goods.goodsId)"
+                  class="hover-color"
+                  :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>
+                  <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>
+              <span @click="shopPage(order.storeId)">{{ order.storeName }}</span>
+            </div>
+            <div class="order-actions">
+              <!-- 订单基础操作 -->
+              <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>
+              <!-- 售后 -->
+              <el-button v-if="order.groupAfterSaleStatus && (order.groupAfterSaleStatus.includes('NOT_APPLIED')|| order.groupAfterSaleStatus.includes('PART_AFTER_SALE'))"
+                      @click="applyAfterSale(order.orderItems)" size="small">申请售后</el-button>
+            </div>
+          </div>
+        </div>
+        <el-skeleton size="large" fix v-if="spinShow"></el-skeleton>
       </div>
-    </div>
-    <!-- 订单列表 -->
-    <empty v-if="orderList.length === 0" />
-    <div class="order-content" v-else>
+
+      <!-- 分页 -->
+      <div class="page-size">
+        <el-pagination :total="total" @current-change="changePageNum"
+          @size-change="changePageSize"
+          :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+      </div>
+    </UserCenterLayout>
+
+    <!-- 个人中心首页订单列表 -->
+    <empty v-if="homePage && orderList.length === 0" />
+    <div class="order-content" v-else-if="homePage">
       <div
         class="order-list"
         v-for="(order, onderIndex) in orderList"
@@ -74,12 +149,6 @@
       </div>
       <el-skeleton size="large" fix v-if="spinShow"></el-skeleton>
     </div>
-    <!-- 分页 -->
-    <div class="page-size" v-if="!homePage">
-      <el-pagination :total="total" @current-change="changePageNum"
-        @size-change="changePageSize"
-        :page-size="params.pageSize" layout="total, sizes, prev, pager, next"></el-pagination>
-    </div>
     <!-- 选择售后商品 -->
     <el-dialog v-model="afterSaleModal" title="请选择申请售后的商品">
       <div>
@@ -135,6 +204,7 @@ export default {
       // 状态数组
       orderStatusList,
       changeWay: ['全部订单', '待付款', '待收货', '已完成'], // 订单状态
+      activeOrderTab: 0,
       total: 0, // 数据总数
       spinShow: false, // 加载状态
       afterSaleModal: false, // 选择售后商品模态框
@@ -173,6 +243,8 @@ export default {
     },
     // 切换订单状态
     change (index) {
+      this.activeOrderTab = index;
+      this.params.pageNumber = 1;
       switch (index) {
         case 0:
           this.params.tag = 'ALL'
@@ -306,14 +378,30 @@ export default {
 .wrapper {
   margin-bottom: 40px;
 }
-.order-search-bar {
-  margin-top: 16px;
-  margin-bottom: 16px;
-  overflow: hidden;
+.order-search {
+  display: flex;
+  align-items: center;
+  width: 330px;
+
+  :deep(.el-input) {
+    flex: 1;
+  }
+
+  :deep(.el-button) {
+    margin-left: 8px;
+  }
+}
+.order-content {
+  padding-top: 14px;
 }
 .page-size {
-  margin: 15px 0px;
-  text-align: right;
+  margin: 15px 0;
+  display: flex;
+  justify-content: flex-end;
+
+  :deep(.el-pagination) {
+    justify-content: flex-end;
+  }
 }
 /** 订单列表 */
 .order-list {

buyer/src/pages/home/orderCenter/OrderDetail.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="order-detail" v-if="order.order">
-    <card _Title="订单详情" :_Size="16"></card>
+    <UserCenterLayout title="订单详情" :tabs="['订单详情']">
     <el-card
       class="mb_10"
       shadow="never"
@@ -317,6 +317,7 @@
         <el-button @click="logisticsModal = false">取消</el-button>
       </div></template>
     </el-dialog>
+    </UserCenterLayout>
 
   </div>
 </template>

buyer/src/pages/home/userCenter/Coupons.vue

@@ -1,8 +1,13 @@
 <template>
   <div class="wrapper">
-    <card _Title="优惠券列表" :_Tabs="statusNameList" @_Change="change" />
-    <empty v-if="list.length == 0" />
-    <ul class="coupon-list" v-else>
+    <UserCenterLayout
+      title="优惠券列表"
+      :tabs="statusNameList"
+      :active-tab="activeStatusIndex"
+      @tab-change="change"
+    >
+      <empty v-if="list.length == 0" />
+      <ul class="coupon-list" v-else>
       <li v-for="(item, index) in list" class="coupon-item" :key="index">
         <div class="c-left">
           <div>
@@ -29,14 +34,18 @@
         <i class="circle-top"></i>
         <i class="circle-bottom"></i>
       </li>
-    </ul>
-    <el-pagination       :total="total"
-      @current-change="changePageNum"
-      class="pageration"
-      @size-change="changePageSize"
-      :page-size="params.pageSize"
-     layout="total, sizes, prev, pager, next"></el-pagination>
-    <el-skeleton v-if="loading" fix></el-skeleton>
+      </ul>
+      <div class="pageration">
+        <el-pagination
+          :total="total"
+          @current-change="changePageNum"
+          @size-change="changePageSize"
+          :page-size="params.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+        />
+      </div>
+      <el-skeleton v-if="loading" fix></el-skeleton>
+    </UserCenterLayout>
   </div>
 </template>
 
@@ -64,6 +73,12 @@ export default {
       list: [], // 优惠券列表
     };
   },
+  computed: {
+    activeStatusIndex() {
+      const index = this.statusList.indexOf(this.params.memberCouponStatus);
+      return index > -1 ? index : 0;
+    },
+  },
   methods: {
     getList() {
       // 获取优惠券列表
@@ -204,6 +219,7 @@ export default {
 }
 
 .pageration {
-  text-align: right;
+  display: flex;
+  justify-content: flex-end;
 }
 </style>

buyer/src/pages/home/userCenter/MoneyManagement.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="wrapper">
-    <card _Title="资金管理"/>
+    <UserCenterLayout title="资金管理" :tabs="['资金管理']">
 
     <div class="box">
       <div class="mb_20 account-price">
@@ -90,7 +90,7 @@
     <!-- 余额日志 -->
     <el-tabs v-model="activeWalletTab" @tab-click="(tab) => tabPaneChange(tab.paneName)">
       <el-tab-pane label="余额日志" name="log">
-        <el-table :data="logColumnsData.records || []">
+        <el-table ref="logTable" :data="logColumnsData.records || []">
           <el-table-column prop="createTime" label="时间" width="190" />
           <el-table-column label="金额" width="180">
             <template #default="{ row }">
@@ -106,15 +106,14 @@
             :page-size="walletForm.pageSize"
             :page-sizes="[10, 20, 50]"
             :total="logColumnsData.total"
-            small
             @current-change="changePage"
             @size-change="changePageSize"
-           layout="total, sizes, prev, pager, next"></el-pagination>
+           layout="total, sizes, prev, pager, next, jumper"></el-pagination>
         </div>
       </el-tab-pane>
       <!-- 充值记录 -->
       <el-tab-pane label="充值记录" name="recharge">
-        <el-table :data="rechargeListData.records || []">
+        <el-table ref="rechargeTable" :data="rechargeListData.records || []">
           <el-table-column prop="createTime" label="充值时间" width="168" />
           <el-table-column prop="rechargeSn" label="支付单号" width="200" />
           <el-table-column label="充值金额">
@@ -145,15 +144,14 @@
             :page-size="rechargeForm.pageSize"
             :page-sizes="[10, 20, 50]"
             :total="rechargeListData.total"
-            small
             @current-change="rechargeChangePage"
             @size-change="rechargeChangePageSize"
-           layout="total, sizes, prev, pager, next"></el-pagination>
+           layout="total, sizes, prev, pager, next, jumper"></el-pagination>
         </div>
       </el-tab-pane>
 
       <el-tab-pane label="提现记录" name="withdrawApply">
-        <el-table :data="withdrawApplyColumnsListData.records || []">
+        <el-table ref="withdrawTable" :data="withdrawApplyColumnsListData.records || []">
           <el-table-column prop="createTime" label="申请时间" width="168" />
           <el-table-column prop="sn" label="提现单号" width="200" />
           <el-table-column label="提现金额" width="110">
@@ -180,13 +178,13 @@
             :page-size="withdrawApplyForm.pageSize"
             :page-sizes="[10, 20, 50]"
             :total="withdrawApplyColumnsListData.total"
-            small
             @current-change="withdrawChangePage"
             @size-change="withdrawChangePageSize"
-           layout="total, sizes, prev, pager, next"></el-pagination>
+           layout="total, sizes, prev, pager, next, jumper"></el-pagination>
         </div>
       </el-tab-pane>
     </el-tabs>
+    </UserCenterLayout>
   </div>
 </template>
 
@@ -281,6 +279,7 @@ export default {
       getDepositLog(this.walletForm).then((res) => {
         if (res.message === 'success') {
           this.logColumnsData = res.result;
+          this.refreshActiveTableLayout();
         }
       });
     },
@@ -297,12 +296,14 @@ export default {
       if (v === 'withdrawApply') {
         this.getWithdrawApplyData();
       }
+      this.refreshActiveTableLayout();
     },
     // 充值记录
     getRechargeData() {
       getRecharge(this.rechargeForm).then((res) => {
         if (res.message === 'success') {
           this.rechargeListData = res.result;
+          this.refreshActiveTableLayout();
         }
       });
     },
@@ -311,9 +312,20 @@ export default {
       getWithdrawApply(this.withdrawApplyForm).then((res) => {
         if (res.message === 'success') {
           this.withdrawApplyColumnsListData = res.result;
+          this.refreshActiveTableLayout();
         }
       });
     },
+    refreshActiveTableLayout() {
+      this.$nextTick(() => {
+        const tableMap = {
+          log: this.$refs.logTable,
+          recharge: this.$refs.rechargeTable,
+          withdrawApply: this.$refs.withdrawTable
+        };
+        tableMap[this.activeWalletTab]?.doLayout?.();
+      });
+    },
     // 余额日志
     changePage(v) {
       this.walletForm.pageNumber = v;

buyer/src/pages/home/userCenter/MyGiftCards.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="wrapper my-gift-cards">
-    <card _Title="我的礼品卡" />
+    <UserCenterLayout title="我的礼品卡" :tabs="['我的礼品卡']">
 
     <div class="bind-section mb_20">
       <div class="section-title">兑换礼品卡</div>
@@ -77,10 +77,9 @@
         :page-size="params.pageSize"
         :page-sizes="[10, 20, 50]"
         :total="total"
-        small
         @current-change="changePage"
         @size-change="changePageSize"
-       layout="total, sizes, prev, pager, next" />
+       layout="total, sizes, prev, pager, next, jumper" />
     </div>
 
     <el-dialog v-model="noticeModal" title="使用须知" footer-hide width="520">
@@ -90,6 +89,7 @@
       <div class="gcc-notice-footer">
         <el-button type="primary" @click="noticeModal = false">我知道了</el-button>
       </div></el-dialog>
+    </UserCenterLayout>
   </div>
 </template>
 
@@ -441,8 +441,9 @@ export default {
     background: #f7f7f7;
   }
   .page-size {
+    display: flex;
+    justify-content: flex-end;
     margin-top: 20px;
-    text-align: right;
   }
 }
 .gcc-notice-text {

buyer/src/pages/home/userCenter/MyTracks.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="wrapper">
-    <!-- 卡片组件 -->
-    <card _Title="我的足迹" :_Size="16"></card>
-    <el-button class="del-btn" @click="clearAll" type="primary">删除全部</el-button>
+    <UserCenterLayout title="我的足迹" :tabs="['我的足迹']">
+      <template #extra>
+        <el-button class="del-btn" @click="clearAll" type="primary">删除全部</el-button>
+      </template>
     <!-- 订单列表 -->
     <empty v-if="list.length === 0" />
     <ul class="track-list" v-else>
@@ -25,8 +26,9 @@
         @current-change="changePageNum"
         @size-change="changePageSize"
         :page-size="params.pageSize"
-       layout="sizes, prev, pager, next"></el-pagination>
+       layout="sizes, prev, pager, next, jumper"></el-pagination>
     </div>
+    </UserCenterLayout>
   </div>
 </template>
 

buyer/src/pages/shopEntry/FirstApply.vue

@@ -90,34 +90,40 @@
         />
       </el-form-item>
       <el-form-item prop="licencePhoto" label="营业执照电子版">
-        <el-upload
-          ref="uploadLicence"
-          :show-upload-list="false"
-          :on-success="handleSuccess"
-          :format="['jpg', 'jpeg', 'png', 'gif']"
-          :max-size="2048"
-          :before-upload="beforeUpload"
-          :on-format-error="handleFormatError"
-          :on-exceeded-size="handleMaxSize"
-          :on-error="uploadErr"
-          multiple
-          :action="action"
-          :headers="accessToken"
-        >
-          <el-button type="info" :loading="uploadLoading">证照上传</el-button>
-        </el-upload>
-        <div class="describe">
-          请压缩图片在2M以内，格式为gif，jpg，png，并确保文字清晰，以免上传或审核失败
-        </div>
-        <div
-          class="img-list"
-          v-for="(item, index) in form.licencePhoto"
-          :key="index"
-        >
-          <img :src="item" width="100" alt="" />
-          <div class="cover">
-            <el-icon @click="handleView(item)"><View /></el-icon>
-            <el-icon @click="handleRemove(index, 'licencePhoto')"><Delete /></el-icon>
+        <div class="upload-wrap">
+          <el-upload
+            ref="uploadLicence"
+            :show-file-list="false"
+            :on-success="handleSuccess"
+            accept=".jpg,.jpeg,.png,.gif"
+            :before-upload="beforeUpload"
+            :on-error="uploadErr"
+            :disabled="form.licencePhoto.length >= 1"
+            :action="action"
+            :headers="accessToken"
+          >
+            <el-button
+              type="info"
+              :loading="uploadLoading"
+              :disabled="form.licencePhoto.length >= 1"
+              >证照上传</el-button
+            >
+          </el-upload>
+          <div class="describe">
+            请压缩图片在2M以内，格式为gif，jpg，png，并确保文字清晰，以免上传或审核失败，仅可上传1张
+          </div>
+          <div class="img-list-wrap">
+            <div
+              class="img-list"
+              v-for="(item, index) in form.licencePhoto"
+              :key="index"
+            >
+              <img :src="item" alt="" />
+              <div class="cover">
+                <el-icon @click="handleView(item)"><View /></el-icon>
+                <el-icon @click="handleRemove(index, 'licencePhoto')"><Delete /></el-icon>
+              </div>
+            </div>
           </div>
         </div>
       </el-form-item>
@@ -139,34 +145,35 @@
         />
       </el-form-item>
       <el-form-item prop="legalPhoto" label="法人证件电子版">
-        <el-upload
-          ref="uploadLegal"
-          :show-upload-list="false"
-          :on-success="handleSuccess1"
-          :before-upload="beforeUpload1"
-          :max-size="2048"
-          :format="['jpg', 'jpeg', 'png', 'gif']"
-          :on-format-error="handleFormatError"
-          :on-exceeded-size="handleMaxSize"
-          :on-error="uploadErr"
-          multiple
-          :action="action"
-          :headers="accessToken"
-        >
-          <el-button type="info" :loading="uploadLoading1">证照上传</el-button>
-        </el-upload>
-        <div class="describe">
-          请压缩图片在2M以内，身份证正反面两张照片，确保图片清晰无缺角
-        </div>
-        <div
-          class="img-list"
-          v-for="(item, index) in form.legalPhoto"
-          :key="index"
-        >
-          <img :src="item" width="100" alt="" />
-          <div class="cover">
-            <el-icon @click="handleView(item)"><View /></el-icon>
-            <el-icon @click="handleRemove(index, 'legalPhoto')"><Delete /></el-icon>
+        <div class="upload-wrap">
+          <el-upload
+            ref="uploadLegal"
+            :show-file-list="false"
+            :on-success="handleSuccess1"
+            :before-upload="beforeUpload1"
+            accept=".jpg,.jpeg,.png,.gif"
+            :on-error="uploadErr"
+            multiple
+            :action="action"
+            :headers="accessToken"
+          >
+            <el-button type="info" :loading="uploadLoading1">证照上传</el-button>
+          </el-upload>
+          <div class="describe">
+            请压缩图片在2M以内，身份证正反面两张照片，确保图片清晰无缺角
+          </div>
+          <div class="img-list-wrap">
+            <div
+              class="img-list"
+              v-for="(item, index) in form.legalPhoto"
+              :key="index"
+            >
+              <img :src="item" alt="" />
+              <div class="cover">
+                <el-icon @click="handleView(item)"><View /></el-icon>
+                <el-icon @click="handleRemove(index, 'legalPhoto')"><Delete /></el-icon>
+              </div>
+            </div>
           </div>
         </div>
       </el-form-item>
@@ -194,6 +201,7 @@ const FIRST_APPLY_DRAFT_KEY = 'shopEntryFirstDraft';
 
 export default {
   components: { multipleMap, View, Delete },
+  emits: ['change'],
   props: {
     content: {
       default: {},
@@ -290,7 +298,7 @@ export default {
           this.loading = true;
           let params = JSON.parse(JSON.stringify(this.form));
           params.legalPhoto = this.form.legalPhoto.toString();
-          params.licencePhoto = this.form.licencePhoto.toString();
+          params.licencePhoto = this.normalizeLicencePhoto(this.form.licencePhoto);
           applyFirst(params)
             .then((res) => {
               this.loading = false;
@@ -309,25 +317,47 @@ export default {
     },
 
     // 上传之前
-    beforeUpload () {
+    beforeUpload (file) {
       this.uploadLoading = true;
-      if (this.form.licencePhoto.length >= 3) {
-        this.$Message.warning('最多上传三张图片')
+      if (this.form.licencePhoto.length >= 1) {
+        this.$Message.warning('最多上传一张图片')
+        this.uploadLoading = false;
         return false;
       }
+      return this.validateUploadFile(file);
     },
     // 上传之前
-    beforeUpload1 () {
+    beforeUpload1 (file) {
       this.uploadLoading1 = true;
       if (this.form.legalPhoto.length >= 2) {
         this.$Message.warning('最多上传两张图片')
+        this.uploadLoading1 = false;
         return false;
       }
+      return this.validateUploadFile(file);
+    },
+    validateUploadFile (file) {
+      const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
+      const isAllowedType = allowedTypes.includes(file.type);
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!isAllowedType) {
+        this.uploadLoading = false;
+        this.uploadLoading1 = false;
+        this.$Message.warning('上传文件格式不正确');
+        return false;
+      }
+      if (!isLt2M) {
+        this.uploadLoading = false;
+        this.uploadLoading1 = false;
+        this.$Message.warning('文件大小不能超过2M');
+        return false;
+      }
+      return true;
     },
     // 上传成功回调
     handleSuccess (res, file) {
       this.uploadLoading = false;
-      this.form.licencePhoto.push(res.result);
+      this.form.licencePhoto = [res.result];
     },
     // 上传成功回调
     handleSuccess1 (res, file) {
@@ -366,6 +396,12 @@ export default {
     handleRemove (index, listName) {
       this.form[listName].splice(index, 1);
     },
+    normalizeLicencePhoto (value) {
+      if (Array.isArray(value)) {
+        return value.length ? value[0] : '';
+      }
+      return value ? String(value).split(',').filter(Boolean)[0] || '' : '';
+    },
     initFormFromContent(content) {
       if (!content || !Object.keys(content).length) return;
       this.form = JSON.parse(JSON.stringify(content));
@@ -373,7 +409,7 @@ export default {
         ? String(content.legalPhoto).split(',').filter(Boolean)
         : [];
       this.form.licencePhoto = content.licencePhoto
-        ? String(content.licencePhoto).split(',').filter(Boolean)
+        ? String(content.licencePhoto).split(',').filter(Boolean).slice(0, 1)
         : [];
       this.contentInitialized = true;
     },
@@ -388,7 +424,9 @@ export default {
           ...parsed,
         };
         this.form.legalPhoto = Array.isArray(parsed.legalPhoto) ? parsed.legalPhoto : [];
-        this.form.licencePhoto = Array.isArray(parsed.licencePhoto) ? parsed.licencePhoto : [];
+        this.form.licencePhoto = Array.isArray(parsed.licencePhoto)
+          ? parsed.licencePhoto.slice(0, 1)
+          : [];
       } catch (e) {
         sessionStorage.removeItem(FIRST_APPLY_DRAFT_KEY);
       }
@@ -434,26 +472,45 @@ h4 {
 .el-input {
   width: 300px;
 }
+.img-list-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 10px;
+  margin-top: 10px;
+}
+
 .img-list {
-  display: inline-block;
-  margin: 10px;
+  display: block;
+  flex-shrink: 0;
   width: 100px;
+  height: 100px;
   position: relative;
+  overflow: hidden;
+  border: 1px solid #eee;
+  box-sizing: border-box;
+  background-color: #f5f5f5;
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
   .cover {
     display: none;
     position: absolute;
     top: 0;
-    bottom: 0;
     left: 0;
-    right: 0;
+    width: 100%;
+    height: 100%;
     background: rgba(0, 0, 0, 0.6);
-    width: inherit;
-    height: inherit;
     align-items: center;
     justify-content: space-around;
-    i {
+    :deep(.el-icon) {
       color: #fff;
-      font-size: 30px;
+      font-size: 24px;
       cursor: pointer;
     }
   }
@@ -461,7 +518,27 @@ h4 {
     display: flex;
   }
 }
+.upload-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+
+  :deep(.el-upload) {
+    display: block;
+  }
+
+  :deep(.el-upload-list) {
+    display: none;
+  }
+}
+
 .describe {
+  display: block;
+  width: 100%;
+  margin-top: 8px;
+  margin-bottom: 0;
+  line-height: 1.5;
   font-size: 12px;
   color: #999;
 }

buyer/src/pages/shopEntry/SecondApply.vue

@@ -43,6 +43,7 @@
 <script>
 import { applySecond } from '@/api/shopentry';
 export default {
+  emits: ['change'],
   props: {
     content: {
       default: {},

buyer/src/pages/shopEntry/ShopEntry.vue

@@ -172,6 +172,7 @@ export default {
     },
     // 下一步
     nextPage(step) {
+      if (typeof step !== "number") return;
       this.currentIndex = step;
       if (step > 0 && step < 3) {
         this.refreshApplyData();

buyer/src/pages/shopEntry/ThirdApply.vue

@@ -11,32 +11,33 @@
       </el-form-item>
 
       <el-form-item prop="storeLogo" label="店铺logo">
-        <el-upload
-          ref="uploadLogo"
-          :show-upload-list="false"
-          :on-success="handleSuccess"
-          :format="['jpg', 'jpeg', 'png', 'gif']"
-          :max-size="2048"
-          :before-upload="beforeUpload"
-          :on-format-error="handleFormatError"
-          :on-exceeded-size="handleMaxSize"
-          :on-error="uploadErr"
-          multiple
-          :action="action"
-          :headers="accessToken"
-        >
-          <el-button type="info" :loading="uploadLoading">上传logo</el-button>
-        </el-upload>
-        <div class="describe">请压缩图片在2M以内，格式为gif，jpg，png</div>
-        <div
-          class="img-list"
-          v-for="(item, index) in form.storeLogo"
-          :key="index"
-        >
-          <img :src="item" width="100" height="" alt="" />
-          <div class="cover">
-            <el-icon @click="handleView(item)"><View /></el-icon>
-            <el-icon @click="handleRemove(index, 'storeLogo')"><Delete /></el-icon>
+        <div class="upload-wrap">
+          <el-upload
+            ref="uploadLogo"
+            :show-file-list="false"
+            :on-success="handleSuccess"
+            accept=".jpg,.jpeg,.png,.gif"
+            :before-upload="beforeUpload"
+            :on-error="uploadErr"
+            :disabled="form.storeLogo.length >= 1"
+            :action="action"
+            :headers="accessToken"
+          >
+            <el-button type="info" :loading="uploadLoading" :disabled="form.storeLogo.length >= 1">上传logo</el-button>
+          </el-upload>
+          <div class="describe">请压缩图片在2M以内，格式为gif，jpg，png，仅可上传1张</div>
+          <div class="img-list-wrap">
+            <div
+              class="img-list"
+              v-for="(item, index) in form.storeLogo"
+              :key="index"
+            >
+              <img :src="item" alt="" />
+              <div class="cover">
+                <el-icon @click="handleView(item)"><View /></el-icon>
+                <el-icon @click="handleRemove(index, 'storeLogo')"><Delete /></el-icon>
+              </div>
+            </div>
           </div>
         </div>
       </el-form-item>
@@ -44,13 +45,15 @@
         <el-select
           v-model="form.goodsManagementCategory"
           multiple
+          placeholder="请选择"
           style="width: 300px"
         >
-          <el-option             v-for="item in categoryList"
-            :value="item.id"
+          <el-option
+            v-for="item in categoryList"
             :key="item.id"
-            >{{ item.name }}</el-option
-          >
+            :label="item.name"
+            :value="normalizeCategoryId(item.id)"
+          />
         </el-select>
       </el-form-item>
 
@@ -102,6 +105,7 @@ import multipleMap from "@/components/map/multiple-map";
 
 
 export default {
+  emits: ['change'],
   props: {
     content: {
       default: {},
@@ -119,7 +123,8 @@ export default {
 
       visible: false, // 图片预览
       form: { // 表单数据
-        storeLogo: []
+        storeLogo: [],
+        goodsManagementCategory: [],
       },
       rules: { // 验证规则
         goodsManagementCategory: [
@@ -159,33 +164,35 @@ export default {
       });
     },
     // 上传之前
-    beforeUpload () {
+    beforeUpload (file) {
       this.uploadLoading = true;
-      if (this.form.storeLogo.length >= 3) {
-        this.$Message.warning('最多上传三张图片')
+      if (this.form.storeLogo.length >= 1) {
+        this.$Message.warning('最多上传一张图片')
+        this.uploadLoading = false;
         return false;
       }
+      return this.validateUploadFile(file);
+    },
+    validateUploadFile (file) {
+      const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
+      const isAllowedType = allowedTypes.includes(file.type);
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!isAllowedType) {
+        this.uploadLoading = false;
+        this.$Message.warning('上传文件格式不正确');
+        return false;
+      }
+      if (!isLt2M) {
+        this.uploadLoading = false;
+        this.$Message.warning('文件大小不能超过2M');
+        return false;
+      }
+      return true;
     },
     // 上传成功回调
     handleSuccess (res, file) {
       this.uploadLoading = false;
-      this.form.storeLogo.push(res.result);
-    },
-    // 上传格式错误
-    handleFormatError (file) {
-      this.uploadLoading = false;
-      this.$Notice.warning({
-        title: 'The file format is incorrect',
-        desc: '上传文件格式不正确'
-      });
-    },
-    // 上传大小限制
-    handleMaxSize (file) {
-      this.uploadLoading = false;
-      this.$Notice.warning({
-        title: 'Exceeding file size limit',
-        desc: '文件大小不能超过2M'
-      })
+      this.form.storeLogo = [res.result];
     },
     // 上传失败
     uploadErr () {
@@ -219,26 +226,37 @@ export default {
     // 获取商品分类
     getCategoryList () {
       getCategory(0).then((res) => {
-        if (res.success) this.categoryList = res.result;
+        if (res.success) {
+          this.categoryList = res.result || [];
+          this.syncCategorySelection();
+        }
       });
     },
-
-
+    normalizeCategoryId (id) {
+      return id == null ? '' : String(id);
+    },
+    syncCategorySelection () {
+      if (!Array.isArray(this.form.goodsManagementCategory)) {
+        this.form.goodsManagementCategory = [];
+        return;
+      }
+      this.form.goodsManagementCategory = this.form.goodsManagementCategory.map(
+        (id) => this.normalizeCategoryId(id)
+      );
+    },
   },
   mounted () {
     this.accessToken.accessToken = storage.getItem('accessToken');
-    this.getCategoryList();
     if (this.content && Object.keys(this.content).length) {
       this.form = JSON.parse(JSON.stringify(this.content));
-      if (this.form.storeLogo) {
-        this.form.storeLogo = String(this.content.storeLogo).split(',').filter(Boolean);
-        this.form.goodsManagementCategory = String(this.content.goodsManagementCategory || '')
-          .split(',')
-          .filter(Boolean);
-      } else {
-        this.form.storeLogo = [];
-      }
+      this.form.storeLogo = this.content.storeLogo
+        ? String(this.content.storeLogo).split(',').filter(Boolean)
+        : [];
+      this.form.goodsManagementCategory = this.content.goodsManagementCategory
+        ? String(this.content.goodsManagementCategory).split(',').filter(Boolean)
+        : [];
     }
+    this.getCategoryList();
   }
 };
 </script>
@@ -257,27 +275,45 @@ h4 {
 .el-input {
   width: 300px;
 }
+.img-list-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 10px;
+  margin-top: 10px;
+}
+
 .img-list {
-  display: inline-block;
-  margin: 10px;
+  display: block;
+  flex-shrink: 0;
   width: 100px;
-  height: auto;
+  height: 100px;
   position: relative;
+  overflow: hidden;
+  border: 1px solid #eee;
+  box-sizing: border-box;
+  background-color: #f5f5f5;
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
   .cover {
     display: none;
     position: absolute;
     top: 0;
-    bottom: 0;
     left: 0;
-    right: 0;
+    width: 100%;
+    height: 100%;
     background: rgba(0, 0, 0, 0.6);
-    width: inherit;
-    height: inherit;
     align-items: center;
     justify-content: space-around;
-    i {
+    :deep(.el-icon) {
       color: #fff;
-      font-size: 30px;
+      font-size: 24px;
       cursor: pointer;
     }
   }
@@ -285,7 +321,28 @@ h4 {
     display: flex;
   }
 }
+
+.upload-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+
+  :deep(.el-upload) {
+    display: block;
+  }
+
+  :deep(.el-upload-list) {
+    display: none;
+  }
+}
+
 .describe {
+  display: block;
+  width: 100%;
+  margin-top: 8px;
+  margin-bottom: 0;
+  line-height: 1.5;
   font-size: 12px;
   color: #999;
 }

buyer/src/pages/user/Home.vue

@@ -40,9 +40,7 @@
           </el-menu>
         </el-aside>
         <el-main class="content ml_10">
-          <transition mode="out-in">
-            <router-view></router-view>
-          </transition>
+          <router-view></router-view>
         </el-main>
       </div>
     </div>

buyer/src/plugins/request.js

@@ -53,7 +53,12 @@ service.interceptors.request.use(
       });
     }
 
-    if (typeof window !== "undefined" && loading !== false) {
+    const method = (config.method || "get").toLowerCase();
+    const isReadRequest = method === "get" || method === "head";
+    const shouldShowLoading =
+      loading === true || (!isReadRequest && loading !== false);
+
+    if (typeof window !== "undefined" && shouldShowLoading) {
       config.loading = ElLoading.service({ fullscreen: true });
     }
 
@@ -65,18 +70,23 @@ service.interceptors.request.use(
     config.headers["uuid"] = uuid;
 
     const accessToken = Storage.getItem("accessToken");
-    if (accessToken && config.needToken) {
+    if (accessToken && (config.needToken || config.optionalToken)) {
       config.headers["accessToken"] = accessToken;
-      const jwtData = JSON.parse(
-        decodeURIComponent(
-          escape(
-            window
-              .atob(accessToken.split(".")[1].replace(/-/g, "+").replace(/_/g, "/"))
+      try {
+        const jwtData = JSON.parse(
+          decodeURIComponent(
+            escape(
+              window
+                .atob(accessToken.split(".")[1].replace(/-/g, "+").replace(/_/g, "/"))
+            )
           )
-        )
-      );
-      if (jwtData.exp < Math.round(new Date() / 1000)) {
-        refresh(config);
+        );
+        if (jwtData.exp < Math.round(new Date() / 1000)) {
+          refresh({ response: { config } });
+        }
+      } catch {
+        Storage.removeItem("accessToken");
+        Storage.removeItem("refreshToken");
       }
     }
 
@@ -85,41 +95,49 @@ service.interceptors.request.use(
   (error) => Promise.reject(error)
 );
 
+function buildRejectError(error, errorData = {}) {
+  const message =
+    errorData.message ||
+    (error?.code === "ECONNABORTED" ? "连接超时，请稍候再试！" : "网络错误，请稍后再试！");
+  return Object.assign(new Error(message), { data: errorData });
+}
+
 async function refresh(error) {
   const getTokenRes = await refreshToken();
   if (getTokenRes === "success") {
-    if (isRefreshToken === 1) {
+    if (error?.response?.config) {
       error.response.config.headers.accessToken = Storage.getItem("accessToken");
       return service(error.response.config);
     }
     router.go(0);
-  } else {
-    Storage.removeItem("accessToken");
-    Storage.removeItem("refreshToken");
-    Storage.removeItem("userInfo");
-    Storage.setItem("cartNum", 0);
-    store.commit("SET_CARTNUM", 0);
-    const currentRoute = router.currentRoute.value;
-    Modal.confirm({
-      title: "请登录",
-      content: "请登录后执行此操作",
-      okText: "立即登录",
-      cancelText: "继续浏览",
-      onOk: () => {
-        router.push({
-          path: "/login",
-          query: {
-            rePath: currentRoute.path,
-            query: JSON.stringify(currentRoute.query),
-          },
-        });
-      },
-      onCancel: () => {
-        router.push("/");
-        Modal.remove();
-      },
-    });
+    return new Promise(() => {});
   }
+  Storage.removeItem("accessToken");
+  Storage.removeItem("refreshToken");
+  Storage.removeItem("userInfo");
+  Storage.setItem("cartNum", 0);
+  store.commit("SET_CARTNUM", 0);
+  const currentRoute = router.currentRoute.value;
+  Modal.confirm({
+    title: "请登录",
+    content: "请登录后执行此操作",
+    okText: "立即登录",
+    cancelText: "继续浏览",
+    onOk: () => {
+      router.push({
+        path: "/login",
+        query: {
+          rePath: currentRoute.path,
+          query: JSON.stringify(currentRoute.query),
+        },
+      });
+    },
+    onCancel: () => {
+      router.push("/");
+      Modal.remove();
+    },
+  });
+  return Promise.reject(new Error("登录已过期"));
 }
 
 service.interceptors.response.use(
@@ -140,19 +158,22 @@ service.interceptors.response.use(
     ) {
       isRefreshToken++;
       if (isRefreshToken === 1) {
-        refresh(error);
         isRefreshToken = 0;
+        return refresh(error);
       }
-    } else if (errorResponse.status === 404) {
-      // skip
-    } else if (error.message) {
+      return Promise.reject(buildRejectError(error, errorData));
+    }
+    if (errorResponse.status === 404) {
+      return Promise.reject(buildRejectError(error, { message: "请求的资源不存在" }));
+    }
+    if (error.message) {
       const _message =
         error.code === "ECONNABORTED"
           ? "连接超时，请稍候再试！"
           : "网络错误，请稍后再试！";
       Message.error(errorData.message || _message);
     }
-    return Promise.reject(errorData);
+    return Promise.reject(buildRejectError(error, errorData));
   }
 );
 

buyer/src/router/index.js

@@ -52,7 +52,6 @@ const MyGiftCards = () => import("@/pages/home/userCenter/MyGiftCards");
 
 const Home = () => import("@/pages/user/Home");
 const Merchant = () => import("@/pages/Merchant");
-const UserMain = () => import("@/pages/home/Main");
 const topic = () => import("@/pages/Topic");
 const ShopEntry = () => import("@/pages/shopEntry/ShopEntry");
 
@@ -179,13 +178,8 @@ export const router = createRouter({
     {
       path: "/home",
       component: Home,
+      redirect: { name: "MyOrder" },
       children: [
-        {
-          path: "/",
-          name: "Home",
-          component: UserMain,
-          meta: { title: "会员中心" },
-        },
         {
           path: "MyTracks",
           name: "MyTracks",

buyer/src/utils/message.js

@@ -1,7 +1,8 @@
 import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
 
-let loadingInstance = null;
+const MESSAGE_OFFSET = 36;
 
+let loadingInstance = null;
 export const Spin = {
   show(options = {}) {
     Spin.hide();
@@ -28,19 +29,18 @@ export const Spin = {
 
 export const Message = {
   success(content) {
-    return ElMessage.success(normalize(content));
+    return showMessage("success", content);
   },
   error(content) {
-    return ElMessage.error(normalize(content));
+    return showMessage("error", content);
   },
   warning(content) {
-    return ElMessage.warning(normalize(content));
+    return showMessage("warning", content);
   },
   info(content) {
-    return ElMessage.info(normalize(content));
+    return showMessage("info", content);
   },
 };
-
 export const Notice = {
   open(options = {}) {
     const fn = Message[options.type] || Message.info;
@@ -95,8 +95,14 @@ export const Modal = {
   },
 };
 
-function normalize(content) {
-  if (typeof content === "string") return content;
+function showMessage(type, content) {
+  return ElMessage[type]({
+    message: normalize(content),
+    offset: MESSAGE_OFFSET,
+  });
+}
+
+function normalize(content) {  if (typeof content === "string") return content;
   if (content && content.content) return content.content;
   return String(content ?? "");
 }

buyer/src/vuex/store.js

@@ -12,7 +12,14 @@ export default createStore({
       storage.getItem("logoImg") || require("@/assets/images/logo2.png"),
     siteName: storage.getItem("siteName") || "lilishop",
     hotWordsList: storage.getItem("hotWordsList"),
-    category: JSON.parse(localStorage.getItem("category")),
+    category: (() => {
+      try {
+        const raw = localStorage.getItem("category");
+        return raw ? JSON.parse(raw) : null;
+      } catch {
+        return null;
+      }
+    })(),
   },
   getters,
   actions,