refactor: 重构组件逻辑与样式优化

- 在 App.vue 中重构站点信息的获取与应用逻辑，提升代码可读性与维护性。 - 更新 Search.vue 组件，优化搜索框的样式与结构，增强用户体验。 - 在 element.scss 中注释掉不再使用的样式，并新增确认收货按钮的样式。 - 改进多个页面的布局与样式，确保响应式设计的一致性与美观性。 - 更新订单相关组件的按钮样式，提升视觉一致性与可用性。
2026-08-07 03:15:01 +08:00 · 2026-06-30 21:09:28 +08:00
parent ec948b5496
commit 28a857249a
121 changed files with 5122 additions and 2182 deletions
--- a/buyer/src/pages/Index.vue
+++ b/buyer/src/pages/Index.vue
@@ -222,12 +222,7 @@ export default {
  transition: 0.35s;
 }
 .show {
-  transform: translateY(0);
-  -webkit-transform: translateZ(0);
-  -moz-transform: translateZ(0);
-  -ms-transform: translateZ(0);
-  -o-transform: translateZ(0);
-  transform: translateZ(0);
+  transform: translateY(0) translateZ(0);
  top: 0;
 }
 .fixed-bar{
@@ -241,12 +236,7 @@ export default {
 .show-fixed{
  height: 354px !important;
  opacity: 1 !important;
-  transform: translateY(0);
-  -webkit-transform: translateZ(0);
-  -moz-transform: translateZ(0);
-  -ms-transform: translateZ(0);
-  -o-transform: translateZ(0);
-  transform: translateZ(0);
+  transform: translateY(0) translateZ(0);
 }


--- a/buyer/src/pages/Merchant.vue
+++ b/buyer/src/pages/Merchant.vue
@@ -48,13 +48,13 @@
    </div>


-    <div v-if="storeMsg.pageShow&&storeMsg.pageShow==='1'">
+    <div v-if="showFloorView">
      <!-- 楼层装修部分 -->
      <model-form ref="modelForm" :data="modelForm"></model-form>
    </div>


-    <div v-else>
+    <div v-else class="store-goods-section">
      <div class="promotion-decorate">{{ cateName }}</div>
      <div class="goods-list">
        <empty v-if="goodsList.length === 0"/>
@@ -108,6 +108,7 @@ import ModelForm from "@/components/indexDecorate/ModelForm";
 import HoverSearch from "@/components/header/hoverSearch";
 import storage from "@/plugins/storage";
 import {getFloorStoreData} from "@/api/index.js";
+import { seckillByDay } from "@/api/promotion";
 import imTalk from '@/components/mixes/talkIm'

 export default {
@@ -125,6 +126,7 @@ export default {
      carouselOpacity: false, // 不同轮播分类样式,
      enablePageData: false, //是否显示楼层装修内容
      basePageData: false, //基础店铺信息
+      showFloorView: false, // 是否展示楼层装修（有有效装修数据时为 true）
      storeMsg: {}, // 店铺信息
      cateList: [], // 店铺分裂
      goodsList: [], // 商品列表
@@ -145,35 +147,61 @@ export default {
    this.getStoreMsg();
  },
  methods: {
+    isFloorEnabled() {
+      const pageShow = this.storeMsg.pageShow;
+      return pageShow === "1" || pageShow === 1 || pageShow === "OPEN" || pageShow === true;
+    },
+    loadStoreGoodsView() {
+      this.showFloorView = false;
+      this.getGoodsList();
+      this.getCateList();
+    },
    getIndexData() {
-      // 获取首页装修数据
-      getFloorStoreData({clientType: "PC", num: this.$route.query.id, pageType: 'STORE'}).then(
-        (res) => {
-          if (res.success) {
-            let dataJson = JSON.parse(res.result.pageData);
-            // 秒杀活动不是装修的数据，需要调用接口判断是否有秒杀商品
-            // 轮播图根据不同轮播，样式不同
-            for (const element of dataJson.list) {
-              let type = element.type;
-              if (type === "carousel2") {
-                this.carouselLarge = true;
-              } else if (type === "carousel1") {
-                this.carouselLarge = true;
-                this.carouselOpacity = true;
-              }
-
-              // else if (type === "seckill") {
-              //   let seckill = this.getListByDay();
-              //   dataJson.list[i].options.list = seckill;
-              // }
+      getFloorStoreData({
+        clientType: "PC",
+        num: this.$route.query.id,
+        pageType: "STORE",
+      })
+        .then(async (res) => {
+          if (res.success && res.result?.pageData) {
+            try {
+              await this.parsePageData(res.result.pageData);
+              this.showFloorView = true;
+            } catch {
+              this.loadStoreGoodsView();
            }
-            this.modelForm = dataJson;
-            storage.setItem("navList", dataJson.list[1]);
-            this.showNav = true;
-            this.topAdvert = dataJson.list[0];
+          } else {
+            this.loadStoreGoodsView();
          }
+        })
+        .catch(() => {
+          this.loadStoreGoodsView();
+        });
+    },
+    async parsePageData(pageData) {
+      const dataJson = JSON.parse(pageData);
+      for (let i = 0; i < dataJson.list.length; i++) {
+        const type = dataJson.list[i].type;
+        if (type === "carousel2") {
+          this.carouselLarge = true;
+        } else if (type === "carousel1") {
+          this.carouselLarge = true;
+          this.carouselOpacity = true;
+        } else if (type === "seckill") {
+          dataJson.list[i].options.list = await this.getListByDay();
        }
-      );
+      }
+      this.modelForm = dataJson;
+      storage.setItem("navList", dataJson.list[1]);
+      this.showNav = true;
+      this.topAdvert = dataJson.list[0];
+    },
+    async getListByDay() {
+      const res = await seckillByDay();
+      if (res.success && res.result?.length) {
+        return res.result;
+      }
+      return [];
    },


@@ -208,15 +236,11 @@ export default {
        if (res.success) {

          this.storeMsg = res.result;
-          console.log(this.storeMsg)
-
-          //判定如果开启楼层展示，则获取页面信息 否则读取商品信息
-          if (this.storeMsg.pageShow && this.storeMsg.pageShow === '1') {

+          if (this.isFloorEnabled()) {
            this.getIndexData();
          } else {
-            this.getGoodsList();
-            this.getCateList();
+            this.loadStoreGoodsView();
          }
          let that = this;
          window.onscroll = function () {
@@ -379,4 +403,32 @@ export default {
 .promotion-decorate::after {
  background-image: url("/src/assets/images/sprite@2x.png");
 }
+
+.store-goods-section {
+  width: 1200px;
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 0 10px;
+  box-sizing: border-box;
+
+  .goods-list {
+    width: 100%;
+    margin: 0;
+    column-gap: 10px;
+  }
+
+  .goods-show-info {
+    width: calc(20% - 8px);
+    min-width: 0;
+  }
+
+  .seckill-price {
+    font-size: 16px;
+  }
+
+  .goods-show-detail {
+    height: 32px;
+    line-height: 16px;
+  }
+}
 </style>
--- a/buyer/src/pages/home/memberCenter/MemberGrade.vue
+++ b/buyer/src/pages/home/memberCenter/MemberGrade.vue
@@ -9,7 +9,7 @@
            <div class="gradeNameRow">
              <span class="gradeNameText">{{ currentGrade.gradeName || '暂无等级' }}</span>
              <span v-if="currentGradeBenefits.length" class="benefitTagsInline">
-                <el-tag v-for="b in currentGradeBenefits" :key="b.id" class="benefitTag" color="blue">{{ b.benefitName || '-' }}</el-tag>
+                <el-tag v-for="b in currentGradeBenefits" :key="b.id" class="benefitTag" type="primary">{{ b.benefitName || '-' }}</el-tag>
              </span>
            </div>
            <div class="gradeExp">
--- a/buyer/src/pages/home/orderCenter/MyOrder.vue
+++ b/buyer/src/pages/home/orderCenter/MyOrder.vue
@@ -53,7 +53,7 @@
                  <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="warning" class="fontsize_12" size="small" style="position:relative;top:-22px;left:190px">投诉</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>
@@ -65,7 +65,7 @@
            <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" class="confirm-receipt-btn" v-if="order.allowOperationVO.rog">确认收货</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>
@@ -391,19 +391,6 @@ export default {
        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;
-        }
-      }
    }
  }
 }
--- a/buyer/src/pages/home/orderCenter/OrderDetail.vue
+++ b/buyer/src/pages/home/orderCenter/OrderDetail.vue
@@ -17,7 +17,7 @@
        v-if="order.allowOperationVO.pay"
        >去支付</el-button>
      <el-button
-        type="info"
+        type="primary"
        @click="received(order.order.sn)"
        size="small"
        v-if="order.allowOperationVO.rog"
@@ -180,7 +180,7 @@
                  goods.afterSaleStatus.includes('PART_AFTER_SALE')
                "
                @click="applyAfterSale(goods.sn)"
-                type="warning"
+                type="default"
                size="small"
                class="order-item-action-btn mb_5"
                >申请售后</el-button
@@ -196,7 +196,7 @@
              <el-button
                v-if="goods.complainStatus == 'NO_APPLY'"
                @click="complain(order.order.sn, goodsIndex)"
-                type="warning"
+                type="danger"
                class="order-item-action-btn fontsize_12 mb_5"
                size="small"
                >投诉</el-button
--- a/buyer/src/pages/payment/Pay.vue
+++ b/buyer/src/pages/payment/Pay.vue
@@ -16,7 +16,7 @@
      </div>
    </div>
    <el-divider />
-    <div class="content width_1200">
+    <div class="content width_1200_auto">
      <!-- 收货地址 -->
      <div class="address" v-if="selectedDeliverMethod === 'LOGISTICS' && goodsType !== 'VIRTUAL_GOODS'">
        <div class="card-head">
@@ -30,11 +30,11 @@
            :key="index">
            <div>
              <span>{{ item.name }}</span>
-              <el-tag class="ml_10 address-default-tag" v-if="item.isDefault" color="red" effect="dark">默认</el-tag>
+              <el-tag class="ml_10 address-default-tag" v-if="item.isDefault" type="danger" effect="dark">默认</el-tag>
              <el-tag
                class="ml_10 address-alias-tag"
                v-if="item.alias"
-                color="rgb(255, 153, 0)"
+                type="warning"
                effect="dark"
              >{{ item.alias }}
              </el-tag>
@@ -280,18 +280,18 @@
          <span>应付金额：</span><span class="actrual-price">{{ $filters.unitPrice(priceDetailDTO.flowPrice, "￥") }}</span>
        </div>
      </div>
-    </div>
-    <!-- 底部支付栏 -->
-    <div class="order-footer width_1200">
-      <div class="pay ml_20" @click="pay">提交订单</div>
-      <div class="pay-address" v-if="addressList.length && selectedDeliverMethod === 'LOGISTICS'">
-        配送至：{{ $filters.unitAddress(selectedAddress.consigneeAddressPath) }}
-        {{ selectedAddress.detail }}&nbsp;&nbsp;收货人：{{
-            selectedAddress.name
-        }}&nbsp;&nbsp;{{ selectedAddress.mobile }}
-      </div>
-      <div class="pay-address" v-if="addressList.length && selectedDeliverMethod === 'SELF_PICK_UP'">
-        自提地点：{{selectedStoreAddress.address}} &nbsp;&nbsp;联系方式：{{ selectedStoreAddress.mobile }}
+      <!-- 底部支付栏 -->
+      <div class="order-footer">
+        <div class="pay ml_20" @click="pay">提交订单</div>
+        <div class="pay-address" v-if="addressList.length && selectedDeliverMethod === 'LOGISTICS'">
+          配送至：{{ $filters.unitAddress(selectedAddress.consigneeAddressPath) }}
+          {{ selectedAddress.detail }}&nbsp;&nbsp;收货人：{{
+              selectedAddress.name
+          }}&nbsp;&nbsp;{{ selectedAddress.mobile }}
+        </div>
+        <div class="pay-address" v-if="addressList.length && selectedDeliverMethod === 'SELF_PICK_UP'">
+          自提地点：{{selectedStoreAddress.address}} &nbsp;&nbsp;联系方式：{{ selectedStoreAddress.mobile }}
+        </div>
      </div>
    </div>
    <BaseFooter></BaseFooter>
@@ -922,6 +922,7 @@ export default {
  height: 30px;
  display: flex;
  align-items: center;
+  gap: 12px;

  span {
    @include content_color($light_content_color);
@@ -930,6 +931,12 @@ export default {
    line-height: 30px;
    display: inline-block;
    padding: 0 15px;
+    flex-shrink: 0;
+  }
+
+  .icon-next {
+    flex-shrink: 0;
+    font-size: 14px;
  }

  .el-icon {
@@ -956,6 +963,7 @@ export default {
  background-color: #fff;
  min-height: 200px;
  padding: 15px 25px;
+  box-sizing: border-box;
 }

 .delivery-method {
@@ -1034,13 +1042,15 @@ export default {
  flex-wrap: wrap;

  :deep(.address-default-tag) {
+    --el-tag-bg-color: var(--el-color-danger);
+    --el-tag-border-color: var(--el-color-danger);
    --el-tag-text-color: #fff;
    color: #fff;
  }

  :deep(.address-alias-tag) {
-    --el-tag-bg-color: rgb(255, 153, 0);
-    --el-tag-border-color: rgb(255, 153, 0);
+    --el-tag-bg-color: var(--el-color-warning);
+    --el-tag-border-color: var(--el-color-warning);
    --el-tag-text-color: #fff;
    color: #fff;
  }
@@ -1306,7 +1316,9 @@ export default {
  align-items: center;
  flex-direction: row-reverse;
  border-top: 1px solid #ddd;
-  margin: 10px auto;
+  margin: 10px -25px 0;
+  width: calc(100% + 50px);
+  box-sizing: border-box;

  div {
    text-align: center;
--- a/buyer/src/pages/payment/PayMent.vue
+++ b/buyer/src/pages/payment/PayMent.vue
@@ -104,7 +104,7 @@ export default {
          onOk: () => {
            pay(params).then(res => {
              if (res.success) {
-                this.$Message.warning(res.message)
+                this.$Message.success(res.message)
                this.$router.push('/payDone');
              } else {
                this.$Message.warning(res.message)