feat: 新增全局布局样式并提升组件响应式表现

- 在 global-layout.scss 中引入全局布局样式，统一页面宽度与对齐方式
- 更新多个组件与页面以优化响应式，包括宽度、间距及 flex 布局等调整
- 在 API 请求中增加 loading 状态管理，改善用户体验
- 优化领券中心与商品详情页，提升功能与 UI 一致性

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

@@ -45,17 +45,27 @@
             <div>
               <span @click="shopPage(order.shopId)">{{ order.storeName }}</span>
             </div>
-            <div>
+            <div class="order-actions">
               <!-- 订单基础操作 -->
-              <el-button @click="goDetail(order.sn)" type="info" size="small">售后详情</el-button>
-              <el-button @click="openModal(order)"
-                      v-if="order.serviceStatus == 'PASS' &&
-                order.serviceType != 'RETURN_MONEY'"
-                      type="warning" size="small">提交物流
-              </el-button>
-              <el-button @click="cancel(order.sn)" type="danger" v-if="order.afterSaleAllowOperationVO.cancel" size="small">
-                取消售后
-              </el-button>
+              <el-button
+                @click="goDetail(order.sn)"
+                type="warning"
+                size="small"
+                class="after-sale-action-btn"
+              >售后详情</el-button>
+              <el-button
+                @click="openModal(order)"
+                v-if="order.serviceStatus == 'PASS' && order.serviceType != 'RETURN_MONEY'"
+                size="small"
+                class="after-sale-action-btn submit-logistics-btn"
+              >提交物流</el-button>
+              <el-button
+                @click="cancel(order.sn)"
+                type="danger"
+                v-if="order.afterSaleAllowOperationVO.cancel"
+                size="small"
+                class="after-sale-action-btn"
+              >取消售后</el-button>
             </div>
           </div>
         </div>
@@ -96,8 +106,14 @@
             <el-input v-model="form.logisticsNo" placeholder="请填写物流单号"></el-input>
           </el-form-item>
           <el-form-item label="发货时间" prop="mDeliverTime">
-            <el-date-picker type="date" style="width:100%" v-model="form.mDeliverTime" @change="changeTime"
-                        format="yyyy-MM-dd" placeholder="选择发货时间"></el-date-picker>
+            <el-date-picker
+              type="date"
+              style="width:100%"
+              v-model="form.mDeliverTime"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              placeholder="选择发货时间"
+            />
           </el-form-item>
         </el-form>
       </div>
@@ -225,32 +241,32 @@ export default {
     },
     // 提交物流信息
     submitDelivery() {
-      this.submitLoading = true
-      afterSaleDelivery(this.form).then(res => {
-        if (res.success) {
-          this.logisticsShow = false;
-          this.$Message.success('提交成功')
-          this.getList()
-        }
-        this.submitLoading = false
-      }).catch(() => {
-        this.submitLoading = false
-      })
+      this.$refs.form?.validate((valid) => {
+        if (!valid) return;
+        this.submitLoading = true;
+        afterSaleDelivery(this.form).then(res => {
+          if (res.success) {
+            this.logisticsShow = false;
+            this.$Message.success('提交成功');
+            this.getList();
+          }
+          this.submitLoading = false;
+        }).catch(() => {
+          this.submitLoading = false;
+        });
+      });
     },
     // 提交物流modal
     openModal(row) {
-      console.log(row);
       this.singleOrder = row;
-      this.form.afterSaleSn = row.sn
       this.logisticsShow = true;
-      this.$refs.form.resetFields()
       if (!this.companyList.length) {
-        this.getCompany()
+        this.getCompany();
       }
-    },
-    // 格式化时间
-    changeTime(time) {
-      this.form.mDeliverTime = time;
+      this.$nextTick(() => {
+        this.$refs.form?.resetFields();
+        this.form.afterSaleSn = row.sn;
+      });
     }
   }
 };
@@ -331,11 +347,31 @@ export default {
       }
     }
 
-    > div:nth-child(3) {
-      width: 100px;
+    .order-actions {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      min-width: 100px;
 
-      .el-button {
-        margin-bottom: 10px;
+      .after-sale-action-btn {
+        display: block;
+        margin: 0;
+        min-width: 88px;
+      }
+
+      :deep(.submit-logistics-btn) {
+        background-color: #ff9900 !important;
+        border-color: #ff9900 !important;
+        color: #fff !important;
+
+        &:hover,
+        &:focus {
+          background-color: #e68a00 !important;
+          border-color: #e68a00 !important;
+          color: #fff !important;
+        }
       }
     }
   }

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

@@ -88,7 +88,14 @@
             <el-input v-model="form.logisticsNo" placeholder="请填写物流单号"></el-input>
           </el-form-item>
           <el-form-item label="发货时间" prop="mDeliverTime">
-            <el-date-picker type="date" style="width:100%" v-model="form.mDeliverTime" @change="changeTime" format="yyyy-MM-dd" placeholder="选择发货时间"></el-date-picker>
+            <el-date-picker
+              type="date"
+              style="width:100%"
+              v-model="form.mDeliverTime"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              placeholder="选择发货时间"
+            />
           </el-form-item>
         </el-form>
       </div>
@@ -206,16 +213,14 @@ export default {
     },
     // 提交物流modal
     openModal () {
-      this.form.afterSaleSn = this.afterSale.sn
       this.logisticsShow = true;
-      this.$refs.form.resetFields()
       if (!this.companyList.length) {
-        this.getCompany()
+        this.getCompany();
       }
-    },
-    // 格式化时间
-    changeTime (time) {
-      this.form.mDeliverTime = time;
+      this.$nextTick(() => {
+        this.$refs.form?.resetFields();
+        this.form.afterSaleSn = this.afterSale.sn;
+      });
     }
   },
   mounted () {

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

@@ -4,12 +4,10 @@
     <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="mb_24 box" v-if="!homePage">
-      <div class="global_float_right" >
+    <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="请输入订单号搜索"
@@ -62,12 +60,12 @@
           <div>
             <span @click="shopPage(order.storeId)">{{ order.storeName }}</span>
           </div>
-          <div>
+          <div class="order-actions">
             <!-- 订单基础操作 -->
-            <el-button @click="orderDetail(order.sn)" type="info" size="small">订单详情</el-button>
+            <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="warning" v-if="order.allowOperationVO.rog">确认收货</el-button>
+            <el-button @click="received(order.sn)" size="small" class="confirm-receipt-btn" 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>
@@ -92,12 +90,18 @@
       </div>
       <template #footer><div></div></template>
     </el-dialog>
-    <el-dialog v-model="cancelAvail" title="请选择取消订单原因" @ok="sureCancel" @cancel="cancelAvail = false">
-      <el-radio-group v-model="cancelParams.reason" vertical type="button" button-style="solid">
+    <el-dialog v-model="cancelAvail" title="请选择取消订单原因">
+      <el-radio-group v-model="cancelParams.reason">
         <el-radio :label="item.reason" v-for="item in cancelReason" :key="item.id">
-           {{item.reason}}
+          {{ item.reason }}
         </el-radio>
       </el-radio-group>
+      <template #footer>
+        <div style="text-align: right">
+          <el-button @click="cancelAvail = false">取消</el-button>
+          <el-button type="primary" @click="sureCancel">确定</el-button>
+        </div>
+      </template>
     </el-dialog>
   </div>
 </template>
@@ -302,7 +306,9 @@ export default {
 .wrapper {
   margin-bottom: 40px;
 }
-.box {
+.order-search-bar {
+  margin-top: 16px;
+  margin-bottom: 16px;
   overflow: hidden;
 }
 .page-size {
@@ -373,10 +379,30 @@ export default {
       }
     }
 
-    > div:nth-child(3) {
-      width: 100px;
+    .order-actions {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      min-width: 100px;
+
       .el-button {
-        margin-bottom: 10px;
+        margin: 0;
+        min-width: 88px;
+      }
+
+      :deep(.confirm-receipt-btn) {
+        background-color: #ff9900 !important;
+        border-color: #ff9900 !important;
+        color: #fff !important;
+
+        &:hover,
+        &:focus {
+          background-color: #e68a00 !important;
+          border-color: #e68a00 !important;
+          color: #fff !important;
+        }
       }
     }
   }

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

@@ -173,16 +173,16 @@
             <td>{{refundPriceList(goods.isRefund)}}</td>
             <td>{{ $filters.unitPrice(goods.refundPrice, "￥") }}</td>
             <td>{{ $filters.unitPrice((goods.goodsPrice * goods.num), "￥") }}</td>
-            <td>
+            <td class="order-item-actions">
               <el-button
                 v-if="
                   goods.afterSaleStatus.includes('NOT_APPLIED') ||
                   goods.afterSaleStatus.includes('PART_AFTER_SALE')
                 "
                 @click="applyAfterSale(goods.sn)"
-                type="info"
+                type="warning"
                 size="small"
-                class="mb_5"
+                class="order-item-action-btn mb_5"
                 >申请售后</el-button
               >
               <el-button
@@ -190,14 +190,14 @@
                 @click="comment(order.order.sn, goodsIndex)"
                 size="small"
                 type="success"
-                class="fontsize_12 mb_5"
+                class="order-item-action-btn fontsize_12 mb_5"
                 >评价</el-button
               >
               <el-button
                 v-if="goods.complainStatus == 'NO_APPLY'"
                 @click="complain(order.order.sn, goodsIndex)"
                 type="warning"
-                class="fontsize_12"
+                class="order-item-action-btn fontsize_12 mb_5"
                 size="small"
                 >投诉</el-button
               >
@@ -239,19 +239,20 @@
     <el-dialog
       v-model="cancelAvail"
       title="请选择取消订单原因"
-      @ok="sureCancel"
-      @cancel="cancelAvail = false"
     >
       <el-radio-group
         v-model="cancelParams.reason"
-        vertical
-        type="button"
-        button-style="solid"
       >
         <el-radio :label="item.reason" v-for="item in cancelReason" :key="item.id">
           {{ item.reason }}
         </el-radio>
       </el-radio-group>
+      <template #footer>
+        <div style="text-align: right">
+          <el-button @click="cancelAvail = false">取消</el-button>
+          <el-button type="primary" @click="sureCancel">确定</el-button>
+        </div>
+      </template>
     </el-dialog>
 
     <!--查询物流-->
@@ -594,6 +595,10 @@ table {
     height: 40px;
     background: #eee;
   }
+  th {
+    font-size: 12px;
+    font-weight: normal;
+  }
   td {
     padding: 5px;
     text-align: center;
@@ -613,6 +618,16 @@ table {
     }
   }
 }
+
+.order-item-actions {
+  vertical-align: middle;
+
+  .order-item-action-btn {
+    display: block;
+    margin: 0 auto 5px;
+    min-width: 88px;
+  }
+}
 /** 订单价格 */
 .order-price {
   text-align: right;