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

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

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>