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

- 在 global-layout.scss 中引入全局布局样式，统一页面宽度与对齐方式 - 更新多个组件与页面以优化响应式，包括宽度、间距及 flex 布局等调整 - 在 API 请求中增加 loading 状态管理，改善用户体验 - 优化领券中心与商品详情页，提升功能与 UI 一致性
2026-06-23 10:30:26 +08:00 · 2026-06-23 10:17:35 +08:00
parent c1447b4376
commit 8a60e23214
129 changed files with 5236 additions and 2232 deletions
--- a/manager/src/components/editor/upload-image.vue
+++ b/manager/src/components/editor/upload-image.vue
@@ -4,28 +4,31 @@
    <el-dialog v-model="show" width="850px" title="上传图片" append-to-body :z-index="3500">
      <div class="import-oss" @click="importOSS">从资源库中导入</div>
      <div style="display: flex; flex-wrap: wrap">
-        <vuedraggable :animation="200" :list="images">
-          <div
-            v-for="(item, __index) in images"
-            :key="__index"
-            class="upload-list"
-          >
-            <img alt="image" :src="item.url" />
-            <div class="upload-list-cover">
-              <div>
-                <el-icon class="action-icon" :size="30" @click="handleView(item.url)">
-                  <ZoomIn />
-                </el-icon>
-                <el-icon
-                  class="action-icon"
-                  :size="30"
-                  @click="handleRemoveGoodsPicture(__index)"
-                >
-                  <Delete />
-                </el-icon>
+        <vuedraggable
+          v-model="images"
+          :animation="200"
+          :item-key="draggableItemKey"
+          style="display: flex; flex-wrap: wrap"
+        >
+          <template #item="{ element, index }">
+            <div class="upload-list">
+              <img alt="image" :src="element.url" />
+              <div class="upload-list-cover">
+                <div>
+                  <el-icon class="action-icon" :size="30" @click="handleView(element.url)">
+                    <ZoomIn />
+                  </el-icon>
+                  <el-icon
+                    class="action-icon"
+                    :size="30"
+                    @click="handleRemoveGoodsPicture(index)"
+                  >
+                    <Delete />
+                  </el-icon>
+                </div>
              </div>
            </div>
-          </div>
+          </template>
        </vuedraggable>
        <div class="upload-box">
          <el-upload
@@ -58,17 +61,16 @@
      append-to-body
      :z-index="3600"
      destroy-on-close
-      @closed="confirmUrls"
+      @closed="resetOssSelection"
    >
      <OssManage
        ref="ossManage"
        :is-component="true"
        :initialize="showOssManager"
-        @selected="(list) => { selectedImage = list }"
-        @callback="handleCallback"
+        @selected="handleOssSelected"
      />
      <template #footer>
-        <el-button @click="showOssManager = false">取消</el-button>
+        <el-button @click="cancelOssImport">取消</el-button>
        <el-button type="primary" @click="confirmUrls">确定</el-button>
      </template>
    </el-dialog>
@@ -114,6 +116,9 @@ export default {
    };
  },
  methods: {
+    draggableItemKey(item) {
+      return item?.url || item;
+    },
    handleClickUploadImage() {
      this.show = true;
    },
@@ -153,13 +158,39 @@ export default {
      this.$Message.error(err?.message || String(err));
    },
    confirmUrls() {
+      this.applySelectedImages();
      this.showOssManager = false;
    },
-    handleCallback(val) {
-      this.$Message.success("导入成功");
-      this.images.push({ url: val.url });
+    cancelOssImport() {
+      this.selectedImage = [];
+      this.showOssManager = false;
+    },
+    resetOssSelection() {
+      this.selectedImage = [];
+    },
+    handleOssSelected(list) {
+      this.selectedImage = Array.isArray(list) ? list : [];
+    },
+    parseOssSelectionUrl(item) {
+      if (!item) {
+        return "";
+      }
+      if (typeof item === "string") {
+        const index = item.indexOf(",");
+        return index >= 0 ? item.slice(index + 1) : item;
+      }
+      return item.url || "";
+    },
+    applySelectedImages() {
+      (this.selectedImage || []).forEach((item) => {
+        const url = this.parseOssSelectionUrl(item);
+        if (url) {
+          this.images.push({ url });
+        }
+      });
    },
    importOSS() {
+      this.selectedImage = [];
      this.showOssManager = true;
      this.$nextTick(() => {
        if (this.$refs.ossManage) {
--- a/manager/src/components/hotzone/components/Zone.vue
+++ b/manager/src/components/hotzone/components/Zone.vue
@@ -159,8 +159,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/manager/src/components/lili/upload-pic-input.vue
+++ b/manager/src/components/lili/upload-pic-input.vue
@@ -112,10 +112,14 @@ export default {
  },
  methods: {
    handleCLickImg(val, index) {
-      this.$refs.ossManage.selectImage = true;
      this.picModalFlag = true;
      this.selectedFormBtnName = val;
      this.picIndex = index;
+      this.$nextTick(() => {
+        if (this.$refs.ossManage) {
+          this.$refs.ossManage.selectImage = true;
+        }
+      });
    },
    callbackSelected(val) {
      this.picModalFlag = false;
--- a/manager/src/utils/message.js
+++ b/manager/src/utils/message.js
@@ -40,24 +40,48 @@ export const Notice = {
 export const Modal = {
  confirm(options = {}) {
    const content = options.content || options.title || "确认操作？";
-    return ElMessageBox.confirm(content, options.title || "提示", {
+    const title = options.title || "提示";
+    return ElMessageBox.confirm(content, title, {
      confirmButtonText: options.okText || "确定",
      cancelButtonText: options.cancelText || "取消",
      type: options.type || "warning",
-    })
-      .then(() => {
-        if (typeof options.onOk === "function") {
-          return options.onOk();
+      beforeClose: (action, instance, done) => {
+        if (action !== "confirm") {
+          done();
+          if (typeof options.onCancel === "function") {
+            options.onCancel();
+          }
+          return;
        }
-      })
-      .catch(() => {
-        if (typeof options.onCancel === "function") {
-          options.onCancel();
+        if (typeof options.onOk !== "function") {
+          done();
+          return;
        }
-      });
+        const result = options.onOk();
+        if (result && typeof result.then === "function") {
+          instance.confirmButtonLoading = true;
+          result
+            .then(() => done())
+            .catch(() => {})
+            .finally(() => {
+              instance.confirmButtonLoading = false;
+            });
+          return;
+        }
+        done();
+      },
+    }).catch(() => {
+      if (typeof options.onCancel === "function") {
+        options.onCancel();
+      }
+    });
  },
  remove() {
-    ElMessageBox.close();
+    try {
+      ElMessageBox.close();
+    } catch (_) {
+      // MessageBox 已关闭时忽略，避免操作已销毁 DOM 触发 parentNode 报错
+    }
  },
 };

--- a/manager/src/views/goods/goods-info/goods.vue
+++ b/manager/src/views/goods/goods-info/goods.vue
@@ -81,8 +81,8 @@
      <div class="goods-tab">
        <el-tabs v-model="currentStatus" @tab-click="onStatusTabClick">
          <el-tab-pane
-            v-for="(item, index) in goodsStatusWithCount"
-            :key="index"
+            v-for="item in goodsStatusWithCount"
+            :key="item.value"
            :label="item.title"
            :name="item.value"
          />
@@ -126,6 +126,7 @@

      <el-table
        ref="table"
+        :key="currentStatus"
        v-loading="loading"
        :data="data"
        class="mt_10"
@@ -223,7 +224,13 @@
      </template>
    </el-dialog>

-    <el-dialog v-model="auditModalVisible" title="商品审核" width="500px" :close-on-click-modal="false">
+    <el-dialog
+      v-model="auditModalVisible"
+      title="商品审核"
+      width="500px"
+      :close-on-click-modal="false"
+      destroy-on-close
+    >
      <el-form ref="auditForm" :model="goodsAuditForm" label-width="100px">
        <el-form-item label="审核结果" prop="auth_flag">
          <el-radio-group v-model="goodsAuditForm.auth_flag">
@@ -234,7 +241,7 @@
      </el-form>
      <template #footer>
        <el-button @click="auditModalVisible = false">取消</el-button>
-        <el-button type="primary" @click="confirmAudit">提交审核</el-button>
+        <el-button type="primary" :loading="auditSubmitLoading" @click="submitAudit">提交审核</el-button>
      </template>
    </el-dialog>

@@ -243,6 +250,7 @@
      title="批量商品审核"
      width="500px"
      :close-on-click-modal="false"
+      destroy-on-close
    >
      <el-form ref="batchAuditForm" :model="batchAuditForm" label-width="100px">
        <el-form-item label="审核结果" prop="auth_flag">
@@ -251,7 +259,7 @@
            <el-radio :value="2">审核拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
-        <el-form-item v-if="batchAuditForm.auth_flag === 2" label="审核备注" prop="reason">
+        <el-form-item v-show="batchAuditForm.auth_flag === 2" label="审核备注" prop="reason">
          <el-input v-model="batchAuditForm.reason" type="textarea" :rows="3" placeholder="请输入拒绝原因" />
        </el-form-item>
        <el-form-item label="选中商品">
@@ -262,7 +270,7 @@
      </el-form>
      <template #footer>
        <el-button @click="batchAuditModalVisible = false">取消</el-button>
-        <el-button type="primary" @click="submitBatchAudit">提交审核</el-button>
+        <el-button type="primary" :loading="batchAuditSubmitLoading" @click="submitBatchAudit">提交审核</el-button>
      </template>
    </el-dialog>

@@ -321,6 +329,7 @@ export default {
        auth_flag: 1,
      },
      auditModalVisible: false, // 审核弹框显示状态
+      auditSubmitLoading: false,
      currentAuditGoods: null, // 当前审核的商品
      submitLoading: false, // 添加或编辑提交状态
      data: [], // 表单数据
@@ -330,6 +339,7 @@ export default {
      selectedRows: [], // 选中的行数据
      selectAll: false, // 全选状态
      batchAuditModalVisible: false, // 批量审核弹框显示状态
+      batchAuditSubmitLoading: false,
      batchAuditForm: {
        auth_flag: 1,
        reason: ''
@@ -361,7 +371,8 @@ export default {
      this.$refs.table?.clearSelection?.();
    },
    onStatusTabClick(tab) {
-      this.goodsStatusClick(tab.paneName);
+      const status = tab.paneName ?? tab.props?.name;
+      this.goodsStatusClick(status);
    },
    salesModelText(v) {
      if (v === "RETAIL") return "零售";
@@ -532,35 +543,28 @@ export default {
      this.currentAuditGoods = goods;
      this.goodsAuditForm.auth_flag = 1;
      this.goodsAuditForm.reason = '';
+      this.auditSubmitLoading = false;
      this.auditModalVisible = true;
    },

-    // 确认审核（二次确认）
-    confirmAudit() {
-      const auditText = this.goodsAuditForm.auth_flag === 1 ? '通过' : '拒绝';
-      this.$Modal.confirm({
-        title: '确认审核',
-        content: `您确认要审核${auditText} "${this.currentAuditGoods.goodsName}" 吗？`,
-        loading: true,
-        onOk: () => {
-          this.submitAudit();
-        },
-      });
-    },
-
    // 提交审核
    submitAudit() {
-      let formData = new FormData();
+      if (!this.currentAuditGoods) {
+        return;
+      }
+      this.auditSubmitLoading = true;
+      const formData = new FormData();
      formData.append('goodsIds', this.currentAuditGoods.id);
      formData.append('authFlag', this.goodsAuditForm.auth_flag === 1 ? 'PASS' : 'REFUSE');
      authGoods(formData).then((res) => {
-        this.$Modal.remove();
        if (res.success) {
          this.$Message.success('审核成功');
          this.auditModalVisible = false;
          this.getDataList();
          this.getNumberData();
        }
+      }).finally(() => {
+        this.auditSubmitLoading = false;
      });
    },

@@ -668,36 +672,27 @@ export default {
      }

      const actionText = this.batchAuditForm.auth_flag === 1 ? '通过' : '拒绝';
-      const goodsNames = this.selectedRows.map(item => item.goodsName).join('、');
+      const goodsIds = this.selectedRows.map(item => item.id);
+      const formData = new FormData();
+      formData.append('goodsIds', goodsIds.join(','));
+      formData.append('authFlag', this.batchAuditForm.auth_flag === 1 ? 'PASS' : 'REFUSE');
+      if (this.batchAuditForm.reason) {
+        formData.append('reason', this.batchAuditForm.reason);
+      }

-      this.$Modal.confirm({
-        title: `确认批量审核${actionText}`,
-        content: `您确认要${actionText}以下商品的审核吗？\n${goodsNames}`,
-        loading: true,
-        onOk: () => {
-          // 提取所有选中商品的ID
-          const goodsIds = this.selectedRows.map(item => item.id);
-
-          let formData = new FormData();
-          formData.append('goodsId', goodsIds);
-          formData.append('authFlag', this.batchAuditForm.auth_flag === 1 ? 'PASS' : 'REFUSE');
-          formData.append('reason', this.batchAuditForm.reason || '');
-
-          // 修正：直接调用authGoods，不传递'batch'参数
-          authGoods(formData).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success(`批量审核${actionText}成功`);
-              this.selectedRows = [];
-              this.selectAll = false;
-              this.batchAuditModalVisible = false;
-              this.getDataList();
-              this.getNumberData();
-            }
-          }).catch(() => {
-            this.$Modal.remove();
-          });
+      this.batchAuditSubmitLoading = true;
+      authGoods(formData).then((res) => {
+        if (res.success) {
+          this.$Message.success(`批量审核${actionText}成功`);
+          this.selectedRows = [];
+          this.selectAll = false;
+          this.batchAuditModalVisible = false;
+          this.clearTableSelection();
+          this.getDataList();
+          this.getNumberData();
        }
+      }).finally(() => {
+        this.batchAuditSubmitLoading = false;
      });
    },
    loadGoodsGroupList() {
--- a/manager/src/views/goods/goods-info/goodsApply.vue
+++ b/manager/src/views/goods/goods-info/goodsApply.vue
@@ -166,13 +166,11 @@ export default {
      this.$Modal.confirm({
        title: "确认审核",
        content: `您确认要审核${examine} ${v.goodsName} ?`,
-        loading: true,
        onOk: () => {
          const formData = new FormData();
          formData.append("goodsIds", v.id);
          formData.append("authFlag", this.goodsAuditForm.authFlag);
-          authGoods(formData).then((res) => {
-            this.$Modal.remove();
+          return authGoods(formData).then((res) => {
            if (res.success) {
              this.$Message.success("审核成功");
              this.getDataList();
--- a/manager/src/views/goods/goods-info/goodsDetail.vue
+++ b/manager/src/views/goods/goods-info/goodsDetail.vue
@@ -107,11 +107,11 @@
          </div>
          <h4>商品详情描述</h4>
          <div class="form-item-view">
-            <el-form-item label="商品描述">
-              <div v-html="goods.intro"></div>
+            <el-form-item class="goods-desc-item" label="商品描述">
+              <div class="goods-desc-content" v-html="goods.intro"></div>
            </el-form-item>
-            <el-form-item label="移动端描述">
-              <div v-html="goods.mobileIntro"></div>
+            <el-form-item class="goods-desc-item" label="移动端描述">
+              <div class="goods-desc-content" v-html="goods.mobileIntro"></div>
            </el-form-item>
          </div>
        </div>
@@ -179,6 +179,30 @@ div.base-info-item {
  .form-item-view {
    padding-left: 80px;
  }
+
+  .goods-desc-item {
+    align-items: flex-start;
+  }
+
+  .goods-desc-item .el-form-item__label {
+    line-height: 24px;
+    padding-top: 0;
+  }
+
+  .goods-desc-item .el-form-item__content {
+    align-items: flex-start;
+    line-height: 24px;
+  }
+
+  .goods-desc-content {
+    line-height: 24px;
+    text-align: left;
+    word-break: break-word;
+  }
+
+  .goods-desc-content > :first-child {
+    margin-top: 0;
+  }
 }

 .demo-upload-list {
--- a/manager/src/views/goods/goods-manage/brand.vue
+++ b/manager/src/views/goods/goods-manage/brand.vue
@@ -203,8 +203,12 @@ export default {
  },
  methods: {
    openLogoPicker() {
-      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/manager/src/views/goods/goods-manage/category.vue
+++ b/manager/src/views/goods/goods-manage/category.vue
@@ -62,7 +62,7 @@
        :close-on-click-modal="false"
        destroy-on-close
      >
-        <el-form ref="form" :model="formAdd" label-width="100px" :rules="formValidate">
+        <el-form ref="form" :model="formAdd" label-width="110px" :rules="formValidate">
          <el-form-item v-if="showParent" label="上级分类" prop="parentId">
            {{ parentTitle }}
            <el-input v-model="formAdd.parentId" style="display: none" />
@@ -79,7 +79,8 @@
          <el-form-item label="排序值" prop="sortOrder">
            <el-input-number v-model="formAdd.sortOrder" style="width: 200px" />
          </el-form-item>
-          <el-form-item label="佣金比例(%)" prop="commissionRate">
+          <el-form-item prop="commissionRate" class="commission-rate-item">
+            <template #label>佣金比例(%)</template>
            <el-input-number v-model="formAdd.commissionRate" :min="0" :max="100" style="width: 200px" />
          </el-form-item>
          <el-form-item label="是否启用" prop="deleteFlag">
@@ -451,4 +452,7 @@ export default {
 .mb_10 {
  margin-bottom: 10px;
 }
+.commission-rate-item :deep(.el-form-item__label) {
+  white-space: nowrap;
+}
 </style>
--- a/manager/src/views/goods/goods-review/index.vue
+++ b/manager/src/views/goods/goods-review/index.vue
@@ -90,7 +90,7 @@
      </div>
    </el-card>

-    <el-dialog v-model="infoFlag" :title="infoTitle" width="800px">
+    <el-dialog v-model="infoFlag" :title="infoTitle" width="800px" @closed="onInfoDialogClosed">
      <div class="info-list" style="overflow: hidden">
        <div class="left-container">
          <div class="product">
@@ -99,6 +99,7 @@
          <div class="show">
            <label>页面展示：</label>
            <el-switch
+              v-if="detailStatusReady"
              v-model="infoData.status"
              active-value="OPEN"
              inactive-value="CLOSE"
@@ -179,6 +180,8 @@ export default {
      infoData: {},
      infoFlag: false,
      infoTitle: "",
+      currentReviewId: "",
+      detailStatusReady: false,
      loading: true,
      searchForm: {
        pageNumber: 1,
@@ -204,11 +207,15 @@ export default {
      if (grade === "MODERATE") return "中评";
      return "差评";
    },
-    changeSwitchView(val) {
-      const status = val;
-      API_Member.updateMemberReview(this.infoData.id, { status }).then(() => {
-        this.$Message.success("修改成功!");
-        this.init();
+    changeSwitchView(status) {
+      if (!this.detailStatusReady || !this.currentReviewId) {
+        return;
+      }
+      API_Member.updateMemberReview(this.currentReviewId, { status }).then((res) => {
+        if (res.success) {
+          this.$Message.success("修改成功!");
+          this.getDataList();
+        }
      });
    },
    init() {
@@ -227,10 +234,14 @@ export default {
      this.searchForm.pageSize = 20;
      this.getDataList();
    },
-    changeSwitch(v) {
-      const status = v.status;
-      API_Member.updateMemberReview(v.id, { status }).then(() => {
-        this.init();
+    changeSwitch(row) {
+      if (!row || !row.id) {
+        return;
+      }
+      API_Member.updateMemberReview(row.id, { status: row.status }).then((res) => {
+        if (res.success) {
+          this.getDataList();
+        }
      });
    },
    updateTop(v) {
@@ -264,14 +275,25 @@ export default {
      this.loading = false;
    },
    info(v) {
+      this.currentReviewId = v.id;
+      this.detailStatusReady = false;
+      this.infoData = {};
      this.infoFlag = true;
      this.infoTitle = `用户${v.memberName}的评价详情`;
      API_Member.getMemberInfoReview(v.id).then((res) => {
        if (res.result) {
          this.infoData = res.result;
+          this.$nextTick(() => {
+            this.detailStatusReady = true;
+          });
        }
      });
    },
+    onInfoDialogClosed() {
+      this.detailStatusReady = false;
+      this.currentReviewId = "";
+      this.infoData = {};
+    },
    remove(v) {
      this.$Modal.confirm({
        title: "确认删除",
--- a/manager/src/views/main-parts/shrinkable-menu/shrinkable-menu.vue
+++ b/manager/src/views/main-parts/shrinkable-menu/shrinkable-menu.vue
@@ -102,12 +102,25 @@ export default {
    height: auto;
    min-height: 56px;
    white-space: normal;
+    transition: background-color 0.2s ease, color 0.2s ease;
+  }
+
+  :deep(.el-menu-item:not(.is-active):hover),
+  :deep(.el-menu-item:not(.is-active):focus) {
+    background-color: #43444d !important;
+    color: #fff !important;
  }

  :deep(.el-menu-item.is-active) {
    background-color: #fff !important;
    color: $theme_color !important;
  }
+
+  :deep(.el-menu-item.is-active:hover),
+  :deep(.el-menu-item.is-active:focus) {
+    background-color: #fff !important;
+    color: $theme_color !important;
+  }
 }

 .sub-menu {
--- a/manager/src/views/main.scss
+++ b/manager/src/views/main.scss
@@ -253,7 +253,7 @@
    z-index: 19;
    display: flex;
    align-items: center;
-    padding: 0;
+    padding: 0 16px;
  }

  .single-page-con {
--- a/manager/src/views/member/list/index.vue
+++ b/manager/src/views/member/list/index.vue
@@ -187,12 +187,7 @@
            type="primary"
            link
            class="upload"
-            @click="
-              () => {
-                picModelFlag = true;
-                $refs.ossManage.selectImage = true;
-              }
-            "
+            @click="openPicSelector"
          >修改</el-button>
        </el-form-item>
        <el-form-item label="用户名" prop="name">
@@ -538,6 +533,14 @@ export default {
        }
      });
    },
+    openPicSelector() {
+      this.picModelFlag = true;
+      this.$nextTick(() => {
+        if (this.$refs.ossManage) {
+          this.$refs.ossManage.selectImage = true;
+        }
+      });
+    },
    callbackSelected(val) {
      this.picModelFlag = false;
      this.form.face = val.url;
--- a/manager/src/views/member/list/memberRecycle.vue
+++ b/manager/src/views/member/list/memberRecycle.vue
@@ -94,12 +94,7 @@
            type="primary"
            link
            class="upload"
-            @click="
-              () => {
-                picModelFlag = true;
-                $refs.ossManage.selectImage = true;
-              }
-            "
+            @click="openPicSelector"
          >修改</el-button>
          <input type="file" style="display: none" id="file" />
        </el-form-item>
@@ -223,6 +218,14 @@ export default {
        }
      });
    },
+    openPicSelector() {
+      this.picModelFlag = true;
+      this.$nextTick(() => {
+        if (this.$refs.ossManage) {
+          this.$refs.ossManage.selectImage = true;
+        }
+      });
+    },
    callbackSelected(val) {
      this.picModelFlag = false;
      this.formValidate.face = val.url;
--- a/manager/src/views/page-decoration/modelForm.vue
+++ b/manager/src/views/page-decoration/modelForm.vue
@@ -49,11 +49,13 @@
        <draggable
          class="model-form-list"
          v-model="data.list"
-          v-bind="{ group: 'model', ghostClass: 'ghost' }"
+          :item-key="getModelItemKey"
+          group="model"
+          ghost-class="ghost"
          @end="handleMoveEnd"
          @add="handleModelAdd"
        >
-          <template v-for="(element, index) in data.list" :key="element.key || index">
+          <template #item="{ element, index }">
            <model-form-item
              v-if="element && element.key"
              :element="element"
@@ -190,6 +192,9 @@ export default {
    };
  },
  methods: {
+    getModelItemKey(element) {
+      return element.model || element.key || element.type;
+    },
    handleSelectLink(item, index) {
      if (item) this.selectedNav = item;
      this.$refs.liliDialog.open("link");
@@ -225,8 +230,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;
@@ -234,16 +243,18 @@ export default {
    },
    handleModelAdd(evt) {
      const newIndex = evt.newIndex;
-
-      this.data.list[newIndex] = JSON.parse(JSON.stringify(this.data.list[newIndex]));
-      const key = Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
+      const current = this.data.list[newIndex];
+      if (!current || current.key) {
+        return;
+      }
+      const key = Date.now() + "_" + Math.ceil(Math.random() * 99999);
      this.data.list[newIndex] = {
-        ...this.data.list[newIndex],
+        ...JSON.parse(JSON.stringify(current)),
        options: {
-          ...this.data.list[newIndex].options,
+          ...current.options,
        },
        key,
-        model: this.data.list[newIndex].type + "_" + key,
+        model: current.type + "_" + key,
      };
    },
  },
--- a/manager/src/views/page-decoration/modelFormItem.vue
+++ b/manager/src/views/page-decoration/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/manager/src/views/page-decoration/modelList/carousel.vue
+++ b/manager/src/views/page-decoration/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/manager/src/views/page-decoration/modelList/carousel1.vue
+++ b/manager/src/views/page-decoration/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/manager/src/views/page-decoration/modelList/carousel2.vue
+++ b/manager/src/views/page-decoration/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/manager/src/views/page-decoration/modelList/firstPageAdvert.vue
+++ b/manager/src/views/page-decoration/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/manager/src/views/page-decoration/modelList/forYour.vue
+++ b/manager/src/views/page-decoration/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/manager/src/views/page-decoration/modelList/mixModel.vue
+++ b/manager/src/views/page-decoration/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/manager/src/views/page-decoration/modelList/newGoodsSort.vue
+++ b/manager/src/views/page-decoration/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/manager/src/views/page-decoration/modelList/oneRowThreeColumns.vue
+++ b/manager/src/views/page-decoration/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/manager/src/views/page-decoration/modelList/recommend.vue
+++ b/manager/src/views/page-decoration/modelList/recommend.vue
@@ -77,10 +77,7 @@
          :key="index"
          class="setup-content"
        >
-          <div
-            class="right-item"
-            :style="{ border: index === 2 || index === 3 ? 'none' : '' }"
-          >
+          <div class="right-item">
            <div>
              <span :style="{ background: msgRight.bgColor }">{{
                item.name
@@ -272,8 +269,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) {
@@ -345,55 +346,78 @@ export default {

  .recommend-right {
    width: 595px;
-    height: 360px;
+
    .head-recommend {
      background: #a25684;
    }
    .content-right {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: center;
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(2, 1fr);
+      height: 360px;
      padding-top: 10px;
+      box-sizing: border-box;
+
      > div {
-        width: 50%;
+        width: 100%;
+        height: 100%;
        text-align: center;
-        height: 180px;
-        padding-top: 10px;
+        padding: 0;
+        border-right: 1px solid #eee;
+        border-bottom: 1px solid #eee;
+        box-sizing: border-box;
+
+        &:nth-child(2n) {
+          border-right: none;
+        }
+
+        &:nth-child(n + 3) {
+          border-bottom: none;
+        }
+
        .right-item {
-          border-bottom: 1px solid #eee;
+          border-bottom: none;
          display: flex;
-          margin-top: 30px;
-          margin-left: 5px;
-          margin-right: 5px;
-          height: 150px;
-          padding: 0 10px;
+          align-items: center;
+          justify-content: space-between;
+          height: 100%;
+          margin: 0;
+          padding: 10px 15px;
          font-size: 12px;
+          box-sizing: border-box;
+
          > div:nth-child(1) {
-            width: 130px;
-            margin-top: 30px;
+            flex: 1;
+            min-width: 0;
+            margin-top: 0;
+            text-align: left;
+
            span:nth-child(1) {
              color: #fff;
              border-radius: 10px;
              padding: 0 5px;
              background-color: #a25684;
              display: block;
-              width: 120px;
+              max-width: 120px;
              overflow: hidden;
              white-space: nowrap;
-              margin: 0 10px 10px 0;
+              margin: 0 0 10px;
            }
+
            span:nth-child(2) {
              font-size: 12px;
              color: #666;
              display: block;
            }
          }
+
          .right-img {
-            width: 100;
+            width: 100px;
            height: 100px;
+            flex-shrink: 0;
            text-align: center;
-            margin: 0 auto;
+            margin: 0;
+
            img {
              max-height: 100px;
              max-width: 100px;
@@ -401,9 +425,6 @@ export default {
          }
        }
      }
-      > div:nth-child(n + 1) {
-        border-right: 1px solid #eee;
-      }
    }
  }

--- a/manager/src/views/page-decoration/modelList/seckill-only-album.vue
+++ b/manager/src/views/page-decoration/modelList/seckill-only-album.vue
@@ -16,8 +16,9 @@
      </div>
    </div>
    <div class="section">
-      <swiper ref="mySwiper" :options="swiperOptions">
-        <swiper-slide
+      <div class="seckill-list">
+        <div
+          class="seckill-item"
          v-for="(item, index) in options.list[0].goodsList"
          :key="index"
        >
@@ -29,22 +30,13 @@
              <span>{{ $filters.unitPrice(item.originalPrice, "￥") }}</span>
            </div>
          </div>
-        </swiper-slide>
-      </swiper>
+        </div>
+      </div>
    </div>
  </div>
 </template>
 <script>
-import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
-import "swiper/swiper-bundle.css";
 export default {
-  components: {
-    Swiper,
-    SwiperSlide,
-  },
-  directives: {
-    swiper: directive,
-  },
  props: {
    data: {
      type: Object,
@@ -62,12 +54,6 @@ export default {
      minutes: "00", // 分钟
      seconds: "00", // 秒
      interval: undefined, // 定时器
-      swiperOptions: {
-        // 轮播图参数
-        slidesPerView: 5,
-        autoplay: true,
-        loop: true,
-      },
    };
  },
  watch: {
@@ -139,7 +125,6 @@ export default {
            new Date().getTime()) /
          1000
        );
-        const that = this;
        this.interval = setInterval(() => {
          this.diffSeconds--;
        }, 1000);
@@ -220,7 +205,14 @@ export default {
  .section {
    width: 1000px;
    // background: #efefef;
-    .swiper-slide {
+    overflow-x: auto;
+    overflow-y: hidden;
+    .seckill-list {
+      display: flex;
+      min-width: 100%;
+    }
+    .seckill-item {
+      flex: 0 0 200px;
      height: 260px;
      .content {
        width: 200px;
--- a/manager/src/views/page-decoration/modelList/seckill.vue
+++ b/manager/src/views/page-decoration/modelList/seckill.vue
@@ -16,8 +16,9 @@
      </div>
    </div>
    <div class="section">
-      <swiper ref="mySwiper" :options="swiperOptions">
-        <swiper-slide
+      <div class="seckill-list">
+        <div
+          class="seckill-item"
          v-for="(item, index) in options.list[0].goodsList"
          :key="index"
        >
@@ -29,22 +30,13 @@
              <span>{{ $filters.unitPrice(item.originalPrice, "￥") }}</span>
            </div>
          </div>
-        </swiper-slide>
-      </swiper>
+        </div>
+      </div>
    </div>
  </div>
 </template>
 <script>
-import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
-import "swiper/swiper-bundle.css";
 export default {
-  components: {
-    Swiper,
-    SwiperSlide,
-  },
-  directives: {
-    swiper: directive,
-  },
  props: {
    data: {
      type: Object,
@@ -62,12 +54,6 @@ export default {
      minutes: "00", // 分钟
      seconds: "00", // 秒
      interval: undefined, // 定时器
-      swiperOptions: {
-        // 轮播图参数
-        slidesPerView: 5,
-        autoplay: true,
-        loop: true,
-      },
    };
  },
  watch: {
@@ -139,7 +125,6 @@ export default {
            new Date().getTime()) /
            1000
        );
-        const that = this;
        this.interval = setInterval(() => {
          this.diffSeconds--;
        }, 1000);
@@ -220,7 +205,14 @@ export default {
  .section {
    width: 1000px;
    // background: #efefef;
-    .swiper-slide {
+    overflow-x: auto;
+    overflow-y: hidden;
+    .seckill-list {
+      display: flex;
+      min-width: 100%;
+    }
+    .seckill-item {
+      flex: 0 0 200px;
      height: 260px;
      .content {
        width: 200px;
--- a/manager/src/views/page-decoration/renovation.vue
+++ b/manager/src/views/page-decoration/renovation.vue
@@ -2,11 +2,22 @@
  <div class="renovation">
    <div class="model-list">
      <div class="classification-title">基础模块</div>
-      <draggable tag="ul" :list="modelData" v-bind="{group:{ name:'model', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"   >
-        <li v-for="(model, index) in modelData" :key="index" class="model-item">
-          <el-icon><Picture /></el-icon>
-          <span>{{model.name}}</span>
-        </li>
+      <draggable
+        tag="ul"
+        :list="modelData"
+        :item-key="getModelKey"
+        :clone="cloneModel"
+        :group="{ name: 'model', pull: 'clone', put: false }"
+        :sort="false"
+        ghost-class="ghost"
+        handle=".model-item"
+      >
+        <template #item="{ element: model }">
+          <li class="model-item">
+            <el-icon><Picture /></el-icon>
+            <span>{{ model.name }}</span>
+          </li>
+        </template>
      </draggable>
    </div>
    <div class="show-content">
@@ -73,6 +84,18 @@ export default {
    };
  },
  methods: {
+    getModelKey(model) {
+      return model.type || model.name;
+    },
+    cloneModel(model) {
+      const key = Date.now() + "_" + Math.ceil(Math.random() * 99999);
+      const cloned = JSON.parse(JSON.stringify(model));
+      return {
+        ...cloned,
+        key,
+        model: cloned.type + "_" + key,
+      };
+    },
    clearCache(){
      this.setStore('managerPCPageCache', '')
      this.$Message.success('清除成功')
@@ -158,6 +181,15 @@ export default {
    width: 100%;
    height: 30px;
    line-height: 30px;
+    text-align: center;
+  }
+  :deep(ul) {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
  }
  .model-item {
    width: 110px;
@@ -165,7 +197,10 @@ export default {
    background: #eee;
    margin-top: 10px;
    line-height: 30px;
-    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
    color: #999;
    transition:0.15s;
    border-radius: 4px;
--- a/manager/src/views/page-decoration/wap/advertising.vue
+++ b/manager/src/views/page-decoration/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/manager/src/views/page-decoration/wap/alertAdvertising.vue
+++ b/manager/src/views/page-decoration/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/manager/src/views/page-decoration/wap/decorate.vue
+++ b/manager/src/views/page-decoration/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(() => {
--- a/manager/src/views/page-decoration/wap/index.vue
+++ b/manager/src/views/page-decoration/wap/index.vue
@@ -6,21 +6,21 @@
        <draggable
          class="model-view-menu-item"
          :list="modelData"
+          :item-key="getModelKey"
+          :clone="cloneModel"
          :move="handleMove"
-          v-bind="{
-            group: { name: 'model', pull: 'clone', put: false, animation: 150 },
-            sort: false,
-            ghostClass: 'ghost',
-          }"
+          :group="{ name: 'model', pull: 'clone', put: false, animation: 150 }"
+          :sort="false"
+          ghost-class="ghost"
        >
-          <template v-for="(model, index) in modelData" :key="index">
-          <li
-            v-if="!model.drawer && !model.drawerPromotions"
-            class="model-item"
-          >
-            <img src alt />
-            <span>{{ model.name }}</span>
-          </li>
+          <template #item="{ element: model }">
+            <li
+              v-if="!model.drawer && !model.drawerPromotions"
+              class="model-item"
+            >
+              <img src alt />
+              <span>{{ model.name }}</span>
+            </li>
          </template>
        </draggable>
      </div>
@@ -31,33 +31,32 @@
          <draggable
            class="draggable"
            group="model"
-            ghostClass="ghost"
+            ghost-class="ghost"
            @add="handleContentlAdd"
            @end="handleContentlEnd"
            v-model="contentData.list"
+            :item-key="getContentItemKey"
          >
-            <div
-              class="list"
-              v-for="(element, index) in contentData.list"
-              :key="element.key"
-            >
-              <component
-                class="component"
-                :class="{ active: selected == index }"
-                @click="handleComponent(element, index)"
-                :is="templates[element.type]"
-                :res="element.options"
-              ></component>
-              <el-icon
-                v-if="selected == index"
-                @click="closeComponent(index)"
-                class="close"
-                :size="25"
-                color="#e1251b"
-              >
-                <CircleClose />
-              </el-icon>
-            </div>
+            <template #item="{ element, index }">
+              <div class="list">
+                <component
+                  class="component"
+                  :class="{ active: selected == index }"
+                  @click="handleComponent(element, index)"
+                  :is="templates[element.type]"
+                  :res="element.options"
+                ></component>
+                <el-icon
+                  v-if="selected == index"
+                  @click="closeComponent(index)"
+                  class="close"
+                  :size="25"
+                  color="#e1251b"
+                >
+                  <CircleClose />
+                </el-icon>
+              </div>
+            </template>
          </draggable>
        </div>
      </div>
@@ -114,6 +113,21 @@ export default {
  },

  methods: {
+    getModelKey(model) {
+      return model.type || model.name;
+    },
+    getContentItemKey(element) {
+      return element.key || element.model || element.type;
+    },
+    cloneModel(model) {
+      const key = Date.now() + "_" + Math.ceil(Math.random() * 99999);
+      const cloned = JSON.parse(JSON.stringify(model));
+      return {
+        ...cloned,
+        key,
+        model: cloned.type + "_" + key,
+      };
+    },
    // 初始化数据
    init() {
      // 先读缓存，如果缓存有值则读缓存。
@@ -254,12 +268,14 @@ export default {
    package(val, newIndex) {
      this.contentData.list[newIndex] = "";
      val = JSON.parse(JSON.stringify(val));
+      const key = val.key || Date.now() + "_" + Math.ceil(Math.random() * 99999);
      this.contentData.list[newIndex] = {
        ...val,
        options: {
          ...val.options,
        },
-        model: val.type,
+        key,
+        model: val.model || val.type + "_" + key,
      };
    },
    // 拖动
--- a/manager/src/views/promotions/coupon-activity/coupon-publish.vue
+++ b/manager/src/views/promotions/coupon-activity/coupon-publish.vue
@@ -13,7 +13,7 @@
                style="width: 260px"
              />
            </el-form-item>
-            <el-form-item label="活动时间">
+            <el-form-item label="活动时间" class="activity-time-form-item">
              <el-date-picker
                type="datetimerange"
                :disabled-date="options.disabledDate"
@@ -22,7 +22,6 @@
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="请选择活动时间"
-                style="width: 260px"
              />
            </el-form-item>

@@ -133,14 +132,25 @@
      </el-form>
    </el-card>

-    <el-dialog v-model="showCouponSelect" width="80%" title="选择优惠券" destroy-on-close>
+    <el-dialog
+      v-model="showCouponSelect"
+      width="80%"
+      title="选择优惠券"
+      destroy-on-close
+      :close-on-click-modal="false"
+    >
      <couponTemplate
-        :checked="true"
-        :selectedList="selectCouponList"
+        v-if="showCouponSelect"
+        ref="couponPicker"
+        manualConfirm
+        :selectedList="tempCouponList"
        getType="ACTIVITY"
        promotionStatus="START"
-        @selected="selectedCoupon"
      />
+      <template #footer>
+        <el-button @click="cancelCouponSelect">取消</el-button>
+        <el-button type="primary" @click="confirmCouponSelect">确定</el-button>
+      </template>
    </el-dialog>

    <el-dialog v-model="checkUserList" width="1200px" title="选择会员" destroy-on-close>
@@ -173,6 +183,7 @@ export default {
        },
      },
      showCouponSelect: false,
+      tempCouponList: [],
      rangeTime: "",
      checkUserList: false,
      selectedMember: [],
@@ -241,9 +252,18 @@ export default {
        };
      });
    },
-    selectedCoupon(val) {
-      this.selectCouponList = val;
+    cancelCouponSelect() {
+      this.showCouponSelect = false;
+    },
+    confirmCouponSelect() {
+      const list = this.$refs.couponPicker?.getSelection?.() || [];
+      if (!list.length) {
+        this.$Message.warning("请至少选择一张优惠券");
+        return;
+      }
+      this.selectCouponList = list;
      this.reSelectCoupon();
+      this.showCouponSelect = false;
    },
    delCoupon(index) {
      this.selectCouponList.splice(index, 1);
@@ -251,8 +271,11 @@ export default {
    },
    reSelectCoupon() {
      this.form.couponActivityItems = this.selectCouponList.map((item) => {
+        const existing = this.form.couponActivityItems.find(
+          (entry) => entry.couponId === item.id
+        );
        return {
-          num: 1,
+          num: existing ? existing.num : 1,
          couponId: item.id,
        };
      });
@@ -264,6 +287,7 @@ export default {
      });
    },
    showSelector() {
+      this.tempCouponList = [...this.selectCouponList];
      this.showCouponSelect = true;
    },
    handleSubmit() {
@@ -320,7 +344,7 @@ export default {
 };
 </script>

-<style lang="scss" scpoed>
+<style lang="scss" scoped>
 h4 {
  margin-bottom: 10px;
  padding: 0 10px;
@@ -333,6 +357,14 @@ h4 {
  text-align: left;
 }

+.activity-time-form-item {
+  :deep(.el-date-editor) {
+    width: 380px !important;
+    max-width: 380px;
+    flex-grow: 0;
+  }
+}
+
 .describe {
  font-size: 12px;
  margin-left: 10px;
--- a/manager/src/views/promotions/coupon/coupon-publish.vue
+++ b/manager/src/views/promotions/coupon/coupon-publish.vue
@@ -606,5 +606,6 @@ h4 {
 .tips {
  font-size: 12px;
  color: #999;
+  margin-left: 10px;
 }
 </style>
--- a/manager/src/views/promotions/coupon/coupon.vue
+++ b/manager/src/views/promotions/coupon/coupon.vue
@@ -204,6 +204,10 @@ export default {
      type: Array,
      default: () => [],
    },
+    manualConfirm: {
+      type: Boolean,
+      default: false,
+    },
  },
  data() {
    return {
@@ -222,6 +226,7 @@ export default {
      selectDate: [],
      showActionColumn: true,
      showStatusColumn: true,
+      isSyncingSelection: false,
    };
  },
  watch: {
@@ -232,6 +237,8 @@ export default {
    },
    selectedList: {
      handler(val) {
+        if (this.isSyncingSelection) return;
+        if (this.isSameSelection(val, this.selectList)) return;
        this.$nextTick(() => {
          this.syncTableSelection(val);
        });
@@ -311,20 +318,39 @@ export default {
      };
      return map[type] || "";
    },
+    isSameSelection(next, current) {
+      const a = next || [];
+      const b = current || [];
+      if (a.length !== b.length) return false;
+      const nextIds = a.map((item) => item.id).sort().join(",");
+      const currentIds = b.map((item) => item.id).sort().join(",");
+      return nextIds === currentIds;
+    },
    syncTableSelection(selected) {
      const table = this.$refs.table;
      if (!table) return;
+      const nextList = selected ? [...selected] : [];
+      this.isSyncingSelection = true;
      table.clearSelection();
-      if (!selected || !selected.length) return;
-      this.data.forEach((row) => {
-        if (selected.some((item) => item.id === row.id)) {
-          table.toggleRowSelection(row, true);
-        }
+      if (nextList.length) {
+        this.data.forEach((row) => {
+          if (nextList.some((item) => item.id === row.id)) {
+            table.toggleRowSelection(row, true);
+          }
+        });
+      }
+      this.selectList = nextList;
+      this.selectCount = nextList.length;
+      this.$nextTick(() => {
+        this.isSyncingSelection = false;
      });
    },
    check() {
      this.$emit("selected", this.selectList);
    },
+    getSelection() {
+      return [...this.selectList];
+    },
    receivePage(id) {
      if (id) {
        this.$router.push({ name: "coupon-receive", query: { couponId: id } });
@@ -356,9 +382,10 @@ export default {
      this.$refs.table?.clearSelection();
    },
    changeSelect(e) {
+      if (this.isSyncingSelection) return;
      this.selectList = e;
      this.selectCount = e.length;
-      if (this.getType === "ACTIVITY") this.check();
+      if (this.getType === "ACTIVITY" && !this.manualConfirm) this.check();
    },
    getDataList() {
      this.loading = true;
--- a/manager/src/views/seller/shop/shopOperation.vue
+++ b/manager/src/views/seller/shop/shopOperation.vue
@@ -611,10 +611,14 @@ export default {
    },
    // 选择图片modal
    handleCLickImg(val, index) {
-      this.$refs.ossManage.selectImage = true;
      this.picModelFlag = true;
      this.selectedFormBtnName = val;
      this.picIndex = index;
+      this.$nextTick(() => {
+        if (this.$refs.ossManage) {
+          this.$refs.ossManage.selectImage = true;
+        }
+      });
    },
    // 图片回显
    callbackSelected(val) {
--- a/manager/src/views/sys/setting-manage/setting/GOODS_SETTING.vue
+++ b/manager/src/views/sys/setting-manage/setting/GOODS_SETTING.vue
@@ -67,7 +67,6 @@
 </template>
 <script>
 import { setSetting, createIndex, getProgress, deleteGoodsDown, generateGoodsCache, delSkuIndex } from "@/api/index";
-import { handleSubmit } from "./validate";
 export default {
  props: ["res", "type"],
  data() {
@@ -93,10 +92,13 @@ export default {
  },
  methods: {
    submit(name) {
-      const that = this;
-      if (handleSubmit(that, name)) {
-        this.setupSetting();
-      }
+      this.$refs[name].validate((valid) => {
+        if (valid) {
+          this.setupSetting();
+        } else {
+          this.$Message.error("请正确填写内容!");
+        }
+      });
    },
    createIndex() {
      createIndex().then((res) => {