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

- 在 global-layout.scss 中引入全局布局样式，统一页面宽度与对齐方式 - 更新多个组件与页面以优化响应式，包括宽度、间距及 flex 布局等调整 - 在 API 请求中增加 loading 状态管理，改善用户体验 - 优化领券中心与商品详情页，提升功能与 UI 一致性
2026-06-24 11:00:22 +08:00 · 2026-06-23 10:17:35 +08:00
parent c1447b4376
commit 8a60e23214
129 changed files with 5236 additions and 2232 deletions
--- a/seller/src/views/shop/hotzone/components/Zone.vue
+++ b/seller/src/views/shop/hotzone/components/Zone.vue
@@ -156,8 +156,12 @@ export default {
    },
    // 选择图片
    handleSelectImg() {
-      this.$refs.ossManage.selectImage = true;
      this.picModelFlag = true;
+      this.$nextTick(() => {
+        if (this.$refs.ossManage) {
+          this.$refs.ossManage.selectImage = true;
+        }
+      });
    },
    // 选择图片回调
    callbackSelected(item) {
--- a/seller/src/views/shop/modelForm.vue
+++ b/seller/src/views/shop/modelForm.vue
@@ -225,8 +225,12 @@ export default {
      }
    },
    handleSelectImg() {
-      this.$refs.ossManage.selectImage = true;
      this.picModelFlag = true;
+      this.$nextTick(() => {
+        if (this.$refs.ossManage) {
+          this.$refs.ossManage.selectImage = true;
+        }
+      });
    },
    callbackSelected(item) {
      this.picModelFlag = false;
--- a/seller/src/views/shop/modelFormItem.vue
+++ b/seller/src/views/shop/modelFormItem.vue
@@ -62,41 +62,43 @@
    </template>
    <!-- 折扣广告 -->
    <template v-if="element.type == 'discountAdvert'">
-      <div
-        class="discountAdvert"
-        :style="{
-          'background-image':
-            'url(' + require('@/assets/nav/decorate.png') + ')',
-        }"
-      >
-        <div>
-          <div
-            v-for="(item, index) in element.options.classification"
-            :key="index"
-            class="setup-content"
-          >
-            <img :src="item.img" width="190" height="210" alt="" />
-            <div class="setup-box">
-              <div>
-                <el-button size="small" @click.stop="handleSelectModel(item)"
-                  >编辑</el-button
-                >
+      <div class="discountAdvert-wrap">
+        <div
+          class="discountAdvert"
+          :style="{
+            'background-image':
+              'url(' + require('@/assets/nav/decorate.png') + ')',
+          }"
+        >
+          <div>
+            <div
+              v-for="(item, index) in element.options.classification"
+              :key="index"
+              class="setup-content"
+            >
+              <img :src="item.img" width="190" height="210" alt="" />
+              <div class="setup-box">
+                <div>
+                  <el-button size="small" @click.stop="handleSelectModel(item)"
+                    >编辑</el-button
+                  >
+                </div>
              </div>
            </div>
          </div>
-        </div>
-        <div>
-          <div
-            v-for="(item, index) in element.options.brandList"
-            :key="index"
-            class="setup-content"
-          >
-            <img :src="item.img" width="240" height="105" alt="" />
-            <div class="setup-box">
-              <div>
-                <el-button size="small" @click.stop="handleSelectModel(item)"
-                  >编辑</el-button
-                >
+          <div>
+            <div
+              v-for="(item, index) in element.options.brandList"
+              :key="index"
+              class="setup-content"
+            >
+              <img :src="item.img" width="240" height="105" alt="" />
+              <div class="setup-box">
+                <div>
+                  <el-button size="small" @click.stop="handleSelectModel(item)"
+                    >编辑</el-button
+                  >
+                </div>
              </div>
            </div>
          </div>
@@ -329,8 +331,12 @@ export default {

    handleSelectImg() {
      // 选择图片
-      this.$refs.ossManage.selectImage = true;
      this.picModelFlag = true;
+      this.$nextTick(() => {
+        if (this.$refs.ossManage) {
+          this.$refs.ossManage.selectImage = true;
+        }
+      });
    },
    // 回显图片
    callbackSelected(val) {
@@ -402,15 +408,23 @@ export default {
  }
 }
 /** 折扣广告 */
+.discountAdvert-wrap {
+  width: 1200px;
+  position: relative;
+}
 .discountAdvert {
+  width: 1300px;
  height: 566px;
+  margin-left: -100px;
+  box-sizing: border-box;
  background-repeat: no-repeat;
-  margin-left: -97px;
+  background-size: 1300px 566px;
  position: relative;
  > div {
    padding-left: 295px;
    display: flex;
    flex-wrap: wrap;
+    box-sizing: border-box;
    &:nth-child(1) img {
      margin: 10px 10px 0 0;
    }
--- a/seller/src/views/shop/modelList/carousel.vue
+++ b/seller/src/views/shop/modelList/carousel.vue
@@ -184,8 +184,12 @@ export default {
    // 选择图片
    handleSelectImg(item) {
      this.selected = item;
-      this.$refs.ossManage.selectImage = true;
      this.picModelFlag = true;
+      this.$nextTick(() => {
+        if (this.$refs.ossManage) {
+          this.$refs.ossManage.selectImage = true;
+        }
+      });
    },
  },
 };
--- a/seller/src/views/shop/modelList/carousel1.vue
+++ b/seller/src/views/shop/modelList/carousel1.vue
@@ -145,8 +145,12 @@ export default {
    // 打开选择图片modal
    handleSelectImg(item) {
      this.selected = item;
-      this.$refs.ossManage.selectImage = true;
      this.picModelFlag = true;
+      this.$nextTick(() => {
+        if (this.$refs.ossManage) {
+          this.$refs.ossManage.selectImage = true;
+        }
+      });
    },
  },
 };
--- a/seller/src/views/shop/modelList/carousel2.vue
+++ b/seller/src/views/shop/modelList/carousel2.vue
@@ -277,8 +277,12 @@ export default {
    // 打开选择图片modal
    handleSelectImg(item) {
      this.selected = item;
-      this.$refs.ossManage.selectImage = true;
      this.picModelFlag = true;
+      this.$nextTick(() => {
+        if (this.$refs.ossManage) {
+          this.$refs.ossManage.selectImage = true;
+        }
+      });
    },
  },
 };
--- a/seller/src/views/shop/modelList/firstPageAdvert.vue
+++ b/seller/src/views/shop/modelList/firstPageAdvert.vue
@@ -127,8 +127,12 @@ export default {
    },
    handleSelectImg() {
      // 选择图片
-      this.$refs.ossManage.selectImage = true;
      this.picModelFlag = true;
+      this.$nextTick(() => {
+        if (this.$refs.ossManage) {
+          this.$refs.ossManage.selectImage = true;
+        }
+      });
    },
    // 选择图片回调
    callbackSelected(val) {
--- a/seller/src/views/shop/modelList/forYour.vue
+++ b/seller/src/views/shop/modelList/forYour.vue
@@ -208,8 +208,12 @@ export default {
      this.defaultCallbackImageType = type;
      this.goodsIndex = index;
      // 选择图片
-      this.$refs.ossManage.selectImage = true;
      this.picModelFlag = true;
+      this.$nextTick(() => {
+        if (this.$refs.ossManage) {
+          this.$refs.ossManage.selectImage = true;
+        }
+      });
    },

    handleSelectGoods(val, index) {
--- a/seller/src/views/shop/modelList/mixModel.vue
+++ b/seller/src/views/shop/modelList/mixModel.vue
@@ -194,8 +194,12 @@ export default {
      this.defaultCallbackImageType = type;
      this.goodsIndex = index;
      // 选择图片
-      this.$refs.ossManage.selectImage = true;
      this.picModelFlag = true;
+      this.$nextTick(() => {
+        if (this.$refs.ossManage) {
+          this.$refs.ossManage.selectImage = true;
+        }
+      });
    },

    handleSelectGoods(val, index) {
--- a/seller/src/views/shop/modelList/newGoodsSort.vue
+++ b/seller/src/views/shop/modelList/newGoodsSort.vue
@@ -284,8 +284,12 @@ export default {
    },
    handleSelectImg() {
      // 选择图片
-      this.$refs.ossManage.selectImage = true;
      this.picModelFlag = true;
+      this.$nextTick(() => {
+        if (this.$refs.ossManage) {
+          this.$refs.ossManage.selectImage = true;
+        }
+      });
    },
    // 选择图片回显
    callbackSelected(val) {
@@ -300,82 +304,171 @@ export default {
 .new-goods {
  display: flex;
  justify-content: space-between;
+  align-items: stretch;
  > div {
    width: 393px;
    height: 440px;
+    overflow: hidden;
  }

  .left > .content {
-    > div:nth-child(1) {
-      height: 240px;
-      flex-direction: column;
-      border: 1px solid #eee;
-      border-top: none;
-      border-left: none;
-      justify-content: space-between;
-      img {
-        width: 160px;
-        height: 160px;
-      }
-      .describe {
-        margin-top: 10px;
-      }
-    }
-    > div:nth-child(2) {
-      border-right: 1px solid #eee;
-    }
-    > div:nth-child(3),
-    > div:nth-child(4) {
-      border-bottom: 1px solid #eee;
-    }
-  }
-
-  .middle > .content {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    flex-direction: unset;
+    overflow: hidden;
    > div {
+      width: 100%;
+      height: 100%;
+      min-width: 0;
+      min-height: 0;
+      overflow: hidden;
+      box-sizing: border-box;
+      display: flex;
+      padding: 6px 4px 4px 6px;
      border-style: solid;
      border-color: #eee;
      border-width: 0;
      border-bottom-width: 1px;
+      border-right-width: 1px;
+      img {
+        width: 64px;
+        height: 64px;
+        margin-top: 2px;
+        flex-shrink: 0;
+        object-fit: cover;
+      }
+      > div {
+        flex: 1;
+        min-width: 0;
+        p {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          font-size: 12px;
+          line-height: 1.3;
+        }
+        .describe {
+          margin-top: 4px;
+          font-size: 11px;
+        }
+      }
+    }
+    > div:nth-child(1) {
+      grid-row: span 2;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      text-align: center;
+      padding: 8px 6px;
+      img {
+        width: 120px;
+        height: 120px;
+        margin-top: 6px;
+      }
+      > div {
+        flex: unset;
+        width: 100%;
+        p {
+          white-space: normal;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+        .describe {
+          margin-top: 6px;
+          white-space: normal;
+        }
+      }
    }
-    > div:nth-child(1),
    > div:nth-child(2),
-    > div:nth-child(3) {
+    > div:nth-child(3),
+    > div:nth-child(5) {
+      border-right-width: 0;
+    }
+    > div:nth-child(4),
+    > div:nth-child(5) {
+      border-bottom-width: 0;
+    }
+  }
+
+  .middle > .content {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    flex-direction: unset;
+    > div {
+      width: 100%;
+      height: 100%;
+      min-width: 0;
+      overflow: hidden;
+      box-sizing: border-box;
+      border-style: solid;
+      border-color: #eee;
+      border-width: 0;
+      border-bottom-width: 1px;
      border-right-width: 1px;
    }
-    > div:nth-child(6),
-    > div:nth-child(3) {
+    > div:nth-child(2n) {
+      border-right-width: 0;
+    }
+    > div:nth-child(n + 5) {
      border-bottom-width: 0;
    }
  }

  .right > .content {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    flex-direction: unset;
+    flex-wrap: unset;
    font-size: 12px;
+    overflow: hidden;
    > div {
      position: relative;
-      width: 120px;
-      padding: 5px 10px 0 10px;
+      width: 100%;
+      height: 100%;
+      min-height: 0;
+      box-sizing: border-box;
+      padding: 4px 4px 2px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      overflow: hidden;
      img {
-        width: 100px;
-        height: 100px;
+        width: 80px;
+        height: 80px;
+        flex-shrink: 0;
+        display: block;
+        object-fit: cover;
      }
      border-bottom: 1px solid #eee;
+      border-right: 1px solid #eee;
      :nth-child(2) {
-        height: 38px;
+        width: 100%;
+        height: auto;
+        max-height: 32px;
+        line-height: 16px;
+        margin-top: 4px;
        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        text-align: center;
      }
      :nth-child(3) {
        color: $theme_color;
-        margin-top: 5px;
+        margin-top: 2px;
+        line-height: 1.2;
+        flex-shrink: 0;
      }
      .jiaobiao {
        position: absolute;
        width: 23px;
        height: 23px;
-        top: 10px;
-        right: 16px;
+        top: 6px;
+        right: 6px;
        background: url("../../../assets/festival_icon.png");
        color: #fff;
        text-align: center;
@@ -393,10 +486,11 @@ export default {
        background-position: -60px -30px;
      }
    }
-    > div:nth-child(4),
-    > div:nth-child(5),
-    > div:nth-child(6) {
-      border: none;
+    > div:nth-child(3n) {
+      border-right: none;
+    }
+    > div:nth-child(n + 4) {
+      border-bottom: none;
    }
  }

@@ -421,6 +515,8 @@ export default {
    flex-wrap: wrap;
    flex-direction: column;
    height: 370px;
+    box-sizing: border-box;
+    overflow: hidden;
  }
  .con-item {
    width: 185px;
@@ -434,6 +530,42 @@ export default {
      margin-top: 10px;
    }
  }
+  .middle > .content .con-item {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    box-sizing: border-box;
+    padding: 6px 4px 4px 6px;
+    img {
+      width: 64px;
+      height: 64px;
+      margin-top: 2px;
+      flex-shrink: 0;
+    }
+    > div {
+      flex: 1;
+      min-width: 0;
+      p {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 12px;
+        line-height: 1.3;
+      }
+      .describe {
+        margin-top: 4px;
+        font-size: 11px;
+      }
+    }
+  }
+  .left > .content .con-item {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+  }
  .describe {
    color: #999;
    font-size: 12px;
--- a/seller/src/views/shop/modelList/oneRowThreeColumns.vue
+++ b/seller/src/views/shop/modelList/oneRowThreeColumns.vue
@@ -115,9 +115,13 @@ export default {
    },
    handleSelectImg(index){
      // 选择图片
-      this.$refs.ossManage.selectImage = true;
-      this.picModelFlag = true;
      this.current = index;
+      this.picModelFlag = true;
+      this.$nextTick(() => {
+        if (this.$refs.ossManage) {
+          this.$refs.ossManage.selectImage = true;
+        }
+      });
    }
  }
 }
--- a/seller/src/views/shop/modelList/recommend.vue
+++ b/seller/src/views/shop/modelList/recommend.vue
@@ -272,8 +272,12 @@ export default {
    },
    handleSelectImg() {
      // 选择图片
-      this.$refs.ossManage.selectImage = true;
      this.picModelFlag = true;
+      this.$nextTick(() => {
+        if (this.$refs.ossManage) {
+          this.$refs.ossManage.selectImage = true;
+        }
+      });
    },
    // 选择图片回调
    callbackSelected(val) {
--- a/seller/src/views/shop/ship/shipTemplate.vue
+++ b/seller/src/views/shop/ship/shipTemplate.vue
@@ -5,7 +5,7 @@
        <el-button @click="refresh">刷新</el-button>
        <el-button @click="add" type="primary">添加</el-button>
      </el-row>
-      <el-tabs @click="handleClickType" v-model="currentTab" style="margin-top: 10px">
+      <el-tabs @tab-click="handleClickType" v-model="currentTab" style="margin-top: 10px">
        <el-tab-pane label="运费模板" name="INFO">
          <table class="ncsc-default-table order m-b-30" :key="index" v-for="(item,index) in shipInfo">
            <tbody>
@@ -79,50 +79,68 @@
              <div class="ncsu-trans-type" data-delivery="TRANSTYPE">
                <div class="entity">
                  <div class="tbl-except">
-                    <table cellspacing="0" class="ncsc-default-table">
+                    <table cellspacing="0" class="ncsc-default-table ship-template-edit-table">
                      <thead>
-                        <tr style="border-bottom: 1px solid #ddd;">
-                          <th class="w10"></th>
-                          <th class="tl">运送到</th>
-                          <th class="w10"></th>
-                          <th class="w50">首件(重)</th>
-                          <th class="w110">首费</th>
-                          <th class="w50">续件(重)</th>
-                          <th class="w110">续费</th>
-                          <th class="w150">操作</th>
+                        <tr>
+                          <th class="col-area">运送到</th>
+                          <th class="col-num">首件(重)</th>
+                          <th class="col-num">首费</th>
+                          <th class="col-num">续件(重)</th>
+                          <th class="col-num">续费</th>
+                          <th class="col-action">操作</th>
                        </tr>
                      </thead>
                      <tbody>
-                        <tr class="bd-line" data-group="n1" v-for="(item,index) in form.freightTemplateChildList"
-                          :key="index">
-                          <td></td>
-                          <td class="tl cell-area">
-                            <span class="area-group">
-                              <p style="display:inline-block">{{item.area}}</p>
-                            </span>
+                        <tr
+                          class="bd-line"
+                          v-for="(item,index) in form.freightTemplateChildList"
+                          :key="index"
+                        >
+                          <td class="col-area">
+                            <span class="area-group">{{ item.area || '未设置地区' }}</span>
                          </td>
-                          <td></td>
-                          <td>
-                            <el-input-number class="text w40" v-model="item.firstCompany" :max="999" :min="0" :step="0.1" />
+                          <td class="col-num">
+                            <el-input-number
+                              v-model="item.firstCompany"
+                              :max="999"
+                              :min="0"
+                              :step="0.1"
+                              controls-position="right"
+                              size="small"
+                            />
                          </td>
-                          <td>
-                            <el-input-number class="text w60" v-model="item.firstPrice" :max="999999" :min="0" />
+                          <td class="col-num">
+                            <el-input-number
+                              v-model="item.firstPrice"
+                              :max="999999"
+                              :min="0"
+                              controls-position="right"
+                              size="small"
+                            />
                          </td>
-                          <td>
-                            <el-input-number class="text w40" v-model="item.continuedCompany" :max="999" :min="0" :step="0.1" />
+                          <td class="col-num">
+                            <el-input-number
+                              v-model="item.continuedCompany"
+                              :max="999"
+                              :min="0"
+                              :step="0.1"
+                              controls-position="right"
+                              size="small"
+                            />
                          </td>
-                          <td>
-                            <el-input-number class="text w60" v-model="item.continuedPrice" :max="999999" :min="0" />
+                          <td class="col-num">
+                            <el-input-number
+                              v-model="item.continuedPrice"
+                              :max="999999"
+                              :min="0"
+                              controls-position="right"
+                              size="small"
+                            />
                          </td>
-                          <td class="nscs-table-handle">
-                            <a
-                              @click="editRegion(item,index)"
-                              style="display:inline-block;margin-bottom:5px;color:#2d8cf0;cursor:pointer;text-decoration:none"
-                            >修改</a>
-                            <a
-                              @click="removeTemplateChildren(index)"
-                              style="display:inline-block;margin-bottom:5px;color:#2d8cf0;cursor:pointer;text-decoration:none"
-                            >删除</a>
+                          <td class="col-action">
+                            <a class="action-link" @click="editRegion(item,index)">修改</a>
+                            <span class="action-split">|</span>
+                            <a class="action-link" @click="removeTemplateChildren(index)">删除</a>
                          </td>
                        </tr>
                      </tbody>
@@ -172,10 +190,10 @@ export default {
      index:'0',
      selectedIndex: 0, //选中的地址模板下标
      item: "", //运费模板子模板
-      shipInfo: {}, // 运费模板数据
+      shipInfo: [], // 运费模板数据
      title: "添加运费模板", // 模态框标题
-      operation: "add", // 操作状态
-      currentTab: "", // 当前模板tab
+      operation: "INFO", // 操作状态
+      currentTab: "INFO", // 当前模板tab
      // submitLoading:false,
      saveError: false, // 是否显示错误提示
      csTab: false, // 添加运费模板显示
@@ -211,11 +229,15 @@ export default {
  methods: {
    // 初始化数据
    init() {
+      this.currentTab = "INFO";
+      this.csTab = false;
+      this.operation = "INFO";
      this.getData();
    },
    //切换tabPane
-    handleClickType(v) {
-      if (v == "INFO") {
+    handleClickType(tab) {
+      const tabName = tab.paneName ?? tab.props?.name;
+      if (tabName === "INFO") {
        this.getData();
        this.csTab = false;
      }
@@ -297,7 +319,7 @@ export default {
    //运费模板数据
    getData() {
      API_Shop.getShipTemplate().then((res) => {
-        this.shipInfo = res.result;
+        this.shipInfo = Array.isArray(res.result) ? res.result : [];
      });
    },
    /**
@@ -619,6 +641,64 @@ em {
  width: 50%;
 }

+.ship-template-edit-table {
+  table-layout: fixed;
+
+  th,
+  td {
+    padding: 10px 12px;
+    vertical-align: middle;
+    border-bottom: 1px solid #eee;
+  }
+
+  thead th {
+    text-align: center;
+    font-weight: 500;
+    color: #555;
+    background-color: #fafafa;
+  }
+
+  .col-area {
+    width: 32%;
+    text-align: left;
+    word-break: break-all;
+    white-space: normal;
+    color: #333;
+  }
+
+  .col-num {
+    width: 14%;
+    text-align: center;
+  }
+
+  .col-action {
+    width: 12%;
+    text-align: center;
+    white-space: nowrap;
+  }
+
+  :deep(.el-input-number) {
+    width: 100%;
+    max-width: 130px;
+  }
+
+  :deep(.el-input-number .el-input__wrapper) {
+    padding-left: 8px;
+    padding-right: 32px;
+  }
+}
+
+.action-link {
+  color: #2d8cf0;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.action-split {
+  margin: 0 6px;
+  color: #dcdee2;
+}
+
 .div-error {
  margin-left: 7px;
  margin-bottom: -8px;
--- a/seller/src/views/shop/wap/advertising.vue
+++ b/seller/src/views/shop/wap/advertising.vue
@@ -156,8 +156,12 @@ export default {
    },
    // 点击选择照片
    handleClickFile() {
-      this.$refs.ossManage.selectImage = true;
      this.picModelFlag = true;
+      this.$nextTick(() => {
+        if (this.$refs.ossManage) {
+          this.$refs.ossManage.selectImage = true;
+        }
+      });
    }, // 图片选择器回显
    callbackSelected(val) {
      this.picModelFlag = false;
--- a/seller/src/views/shop/wap/alertAdvertising.vue
+++ b/seller/src/views/shop/wap/alertAdvertising.vue
@@ -160,8 +160,12 @@ export default {
    },
    // 点击选择图片
    handleClickFile(item, index) {
-      this.$refs.ossManage.selectImage = true;
      this.picModelFlag = true;
+      this.$nextTick(() => {
+        if (this.$refs.ossManage) {
+          this.$refs.ossManage.selectImage = true;
+        }
+      });
    },
    // 点击链接
    clickLink(item) {
--- a/seller/src/views/shop/wap/decorate.vue
+++ b/seller/src/views/shop/wap/decorate.vue
@@ -767,9 +767,13 @@ export default {
    },
    // 点击选择图片
    handleClickFile(item, index) {
-      this.$refs.ossManage.selectImage = true;
      this.selectedGoods = item;
      this.picModelFlag = true;
+      this.$nextTick(() => {
+        if (this.$refs.ossManage) {
+          this.$refs.ossManage.selectImage = true;
+        }
+      });
    },
    removeNotice(index) {
      this.$nextTick(() => {