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

- 在 App.vue 中重构站点信息的获取与应用逻辑，提升代码可读性与维护性。
- 更新 Search.vue 组件，优化搜索框的样式与结构，增强用户体验。
- 在 element.scss 中注释掉不再使用的样式，并新增确认收货按钮的样式。
- 改进多个页面的布局与样式，确保响应式设计的一致性与美观性。
- 更新订单相关组件的按钮样式，提升视觉一致性与可用性。

seller/src/styles/common.scss

@@ -25,6 +25,13 @@
 .width_1200 {
   width: 1200px;
 }
+.width_1200_auto {
+  width: 1200px;
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  box-sizing: border-box;
+}
 .width_800 {
   width: 800px;
 }

seller/src/styles/element.scss

@@ -1,21 +1,21 @@
 /* Element Plus 主题覆盖（对齐原 iView 主色） */
 :root {
-  --el-color-primary: #f31947;
-  --el-color-success: #67c23a;
-  --el-color-warning: #fa6419;
-  --el-color-danger: #ff3c2a;
+  // --el-color-primary: #f31947;
+  // --el-color-success: #67c23a;
+  // --el-color-warning: #fa6419;
+  // --el-color-danger: #ff3c2a;
   --el-font-size-extra-small: 12px;
   --el-font-size-small: 13px;
   --el-font-size-base: 14px;
   --el-font-size-large: 16px;
 }
 
-.el-button--primary {
-  --el-button-bg-color: #f31947;
-  --el-button-border-color: #f31947;
-  --el-button-hover-bg-color: #ff4d6d;
-  --el-button-hover-border-color: #ff4d6d;
-}
+// .el-button--primary {
+//   --el-button-bg-color: #f31947;
+//   --el-button-border-color: #f31947;
+//   --el-button-hover-bg-color: #ff4d6d;
+//   --el-button-hover-border-color: #ff4d6d;
+// }
 
 .el-table--border {
   .el-table__cell {

seller/src/views/lili-components/affix-time.vue

@@ -120,9 +120,14 @@ export default {
         this.dateList.forEach((res) => {
           res.selected = false;
         });
-        this.selectedWay.year = this.month.split("-")[0];
-        this.selectedWay.month = this.month.split("-")[1];
-        this.selectedWay.searchType = "";
+        const parts = String(this.month).split("-");
+        this.selectedWay = {
+          ...this.selectedWay,
+          year: parts[0],
+          month: parts[1],
+          searchType: "",
+          storeId: this.storeId,
+        };
         this.$emit("selected", this.selectedWay);
       } else {
         const current =
@@ -145,8 +150,8 @@ export default {
       item.storeId = this.storeId;
       this.month = "";
       if (item.searchType === "") {
-        const currentDate = this.originDateList[currentIndex].searchType;
-        item.searchType = currentDate || "LAST_SEVEN";
+        const origin = this.originDateList[currentIndex];
+        item.searchType = (origin && origin.searchType) || "LAST_SEVEN";
       }
       this.selectedWay = item;
       this.selectedWay.year = new Date().getFullYear();

seller/src/views/lili-dialog/goods-dialog.vue

@@ -18,6 +18,7 @@
             v-model="category"
             :options="skuList"
             placeholder="请选择商品分类"
+            popper-class="goods-dialog-cascader-popper"
             style="width: 250px"
             clearable
           />
@@ -265,3 +266,8 @@ export default {
   justify-content: flex-end;
 }
 </style>
+<style lang="scss">
+.goods-dialog-cascader-popper {
+  z-index: 10001 !important;
+}
+</style>

seller/src/views/order/order/orderDetail.vue

@@ -372,7 +372,7 @@
       </template>
     </el-dialog>
 
-    <el-dialog v-model="partDeliveryModal" title="分包裹发货" width="760px">
+    <el-dialog v-model="partDeliveryModal" title="分包裹发货" width="1200px">
       <el-form ref="partDeliveryForm" :model="partDeliveryForm" label-width="100px" :rules="partDeliveryRules">
         <el-form-item label="物流公司" prop="logisticsId">
           <el-select v-model="partDeliveryForm.logisticsId" placeholder="请选择物流公司" filterable style="width: 260px">
@@ -387,29 +387,65 @@
         <el-form-item label="物流单号" prop="logisticsNo">
           <el-input v-model="partDeliveryForm.logisticsNo" placeholder="请输入物流单号" style="width: 260px" />
         </el-form-item>
-        <el-form-item label="发货商品" prop="partDeliveryDTOList">
-          <div class="delivery-item-group">
-            <div v-for="item in deliverableOrderItems" :key="getOrderItemId(item)" class="delivery-item">
-              <el-checkbox
-                :model-value="isPartDeliveryItemSelected(item)"
-                @change="(checked) => togglePartDeliveryItem(item, checked)"
-              >
-                <span class="delivery-item-name">{{ item.goodsName }}</span>
-                <span class="delivery-item-num">订单数量 x{{ item.num }}</span>
-              </el-checkbox>
-              <el-input-number
-                v-model="partDeliveryForm.deliveryNumMap[getOrderItemId(item)]"
-                :disabled="!isPartDeliveryItemSelected(item)"
-                :min="1"
-                :max="getMaxDeliveryNum(item)"
-                :precision="0"
-                controls-position="right"
-                size="small"
-                class="delivery-num-input"
-              />
-            </div>
+        <el-form-item label-width="0" prop="partDeliveryDTOList" class="part-delivery-goods-item">
+          <div v-if="deliverableOrderItems.length" class="part-delivery-table-wrap">
+            <el-table
+              ref="partDeliveryTable"
+              border
+              :data="deliverableOrderItems"
+              style="width: 100%"
+              @selection-change="handlePartDeliverySelectionChange"
+            >
+            <el-table-column type="selection" width="55" :selectable="isPartDeliveryRowSelectable" />
+            <el-table-column label="商品" min-width="420">
+              <template #default="{ row }">
+                <div class="part-delivery-goods">
+                  <img :src="row.image" class="part-delivery-goods-img" alt="" />
+                  <div class="part-delivery-goods-info">
+                    <div class="part-delivery-goods-name">{{ row.goodsName }}</div>
+                    <div
+                      v-for="(specValue, specKey) in parseOrderItemSpecs(row.specs)"
+                      :key="specKey"
+                      class="part-delivery-goods-spec"
+                    >
+                      <span v-if="specKey !== 'images'">{{ specKey }}：{{ specValue }}</span>
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="单价" min-width="110" align="center">
+              <template #default="{ row }">
+                {{ $filters.unitPrice(row.unitPrice || 0, "￥") }}
+              </template>
+            </el-table-column>
+            <el-table-column label="数量" min-width="140" align="center">
+              <template #default="{ row }">
+                <el-input-number
+                  v-model="partDeliveryForm.deliveryNumMap[getOrderItemId(row)]"
+                  :min="1"
+                  :max="getRemainingDeliveryNum(row)"
+                  :precision="0"
+                  controls-position="right"
+                  size="default"
+                  class="part-delivery-num-input"
+                  @change="(val) => handlePartDeliveryNumChange(row, val)"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column label="已发包裹" min-width="110" align="center">
+              <template #default="{ row }">
+                {{ getShippedPackageNum(row) }}
+              </template>
+            </el-table-column>
+            <el-table-column label="小计" min-width="110" align="center">
+              <template #default="{ row }">
+                {{ $filters.unitPrice(getPartDeliverySubtotal(row), "￥") }}
+              </template>
+            </el-table-column>
+          </el-table>
           </div>
-          <div v-if="!deliverableOrderItems.length" class="delivery-empty">暂无可发货商品</div>
+          <div v-else class="delivery-empty">暂无可发货商品</div>
         </el-form-item>
       </el-form>
       <div v-if="orderPackages.length" class="package-list">
@@ -637,7 +673,10 @@ export default {
       );
     },
     deliverableOrderItems() {
-      return (this.data || []).filter((item) => this.getOrderItemId(item));
+      return (this.data || []).filter((item) => {
+        if (!this.getOrderItemId(item)) return false;
+        return this.getRemainingDeliveryNum(item) > 0;
+      });
     },
     canOrderTake() {
       if (this.allowOperation.take) return true;
@@ -679,29 +718,133 @@ export default {
     getLogisticsName(item) {
       return item && (item.logisticsName || item.name || item.logisticsCompany || item.logisticsId || item.id);
     },
-    getMaxDeliveryNum(item) {
-      const num = Number(item && item.num);
-      return Number.isFinite(num) && num > 0 ? num : 999999;
+    parseOrderItemSpecs(specs) {
+      if (!specs) return {};
+      try {
+        return JSON.parse(specs);
+      } catch (e) {
+        return {};
+      }
+    },
+    getShippedPackageNum(item) {
+      if (item != null && item.deliverNumber != null && item.deliverNumber !== "") {
+        const direct = Number(item.deliverNumber);
+        if (Number.isFinite(direct)) return direct;
+      }
+      const orderItemId = this.getOrderItemId(item);
+      if (!orderItemId || !this.orderPackages.length) return 0;
+      let total = 0;
+      this.orderPackages.forEach((pkg) => {
+        (pkg.orderPackageItemList || []).forEach((pkgItem) => {
+          if (this.isPackageItemMatch(item, pkgItem)) {
+            total += Number(pkgItem.deliverNumber ?? pkgItem.num ?? 0);
+          }
+        });
+      });
+      return total;
+    },
+    isPackageItemMatch(orderItem, pkgItem) {
+      const orderKeys = [
+        this.getOrderItemId(orderItem),
+        orderItem?.sn,
+        orderItem?.id,
+        orderItem?.orderItemId,
+      ]
+        .filter(Boolean)
+        .map(String);
+      const pkgKeys = [
+        pkgItem.orderItemSn,
+        pkgItem.orderItemId,
+        pkgItem.orderItemsId,
+        pkgItem.id,
+        pkgItem.sn,
+      ]
+        .filter(Boolean)
+        .map(String);
+      return pkgKeys.some((key) => orderKeys.includes(key));
+    },
+    getRemainingDeliveryNum(item) {
+      const total = Number(item && item.num) || 0;
+      return Math.max(total - this.getShippedPackageNum(item), 0);
+    },
+    getPartDeliverySubtotal(row) {
+      const id = this.getOrderItemId(row);
+      const qty = Number(this.partDeliveryForm.deliveryNumMap[id]) || 0;
+      const unitPrice = Number(row.unitPrice) || 0;
+      return unitPrice * qty;
+    },
+    initPartDeliveryNumMap() {
+      const map = {};
+      this.deliverableOrderItems.forEach((item) => {
+        const id = this.getOrderItemId(item);
+        if (id) {
+          map[id] = this.getRemainingDeliveryNum(item);
+        }
+      });
+      this.partDeliveryForm.deliveryNumMap = map;
+    },
+    refreshPartDeliveryAfterSubmit() {
+      this.loading = true;
+      return Promise.all([
+        API_Order.getOrderDetail(this.sn).then((res) => {
+          if (res.success) {
+            this.orderInfo = res.result;
+            this.allowOperation = res.result.allowOperationVO;
+            this.data = res.result.orderItems;
+            this.typeList = JSON.parse(
+              JSON.stringify(res.result.order.priceDetailDTO.discountPriceDetail)
+            );
+            this.getContentPrice();
+            this.getOrderPrice();
+          }
+        }),
+        this.getOrderPackages(),
+      ]).finally(() => {
+        this.loading = false;
+        this.partDeliveryForm.logisticsNo = "";
+        this.partDeliveryForm.logisticsId = "";
+        this.partDeliveryForm.selectedOrderItemIds = [];
+        this.initPartDeliveryNumMap();
+        this.$nextTick(() => {
+          this.$refs.partDeliveryTable?.clearSelection();
+          this.$refs.partDeliveryForm?.clearValidate();
+        });
+      });
+    },
+    handlePartDeliveryNumChange(row, value) {
+      const id = this.getOrderItemId(row);
+      if (!id) return;
+      const num = Number(value);
+      if (!Number.isFinite(num) || num < 1) return;
+      if (!this.partDeliveryForm.selectedOrderItemIds.includes(id)) {
+        this.partDeliveryForm.selectedOrderItemIds = [
+          ...this.partDeliveryForm.selectedOrderItemIds,
+          id,
+        ];
+        this.$nextTick(() => {
+          this.$refs.partDeliveryTable?.toggleRowSelection(row, true);
+        });
+      }
+    },
+    isPartDeliveryRowSelectable(row) {
+      return this.getRemainingDeliveryNum(row) > 0;
+    },
+    handlePartDeliverySelectionChange(selection) {
+      const selectedIds = [];
+      selection.forEach((item) => {
+        const id = this.getOrderItemId(item);
+        if (!id) return;
+        selectedIds.push(id);
+        if (this.partDeliveryForm.deliveryNumMap[id] == null) {
+          this.partDeliveryForm.deliveryNumMap[id] = this.getRemainingDeliveryNum(item);
+        }
+      });
+      this.partDeliveryForm.selectedOrderItemIds = selectedIds;
     },
     isPartDeliveryItemSelected(item) {
       const id = this.getOrderItemId(item);
       return !!id && this.partDeliveryForm.selectedOrderItemIds.includes(id);
     },
-    togglePartDeliveryItem(item, checked) {
-      const id = this.getOrderItemId(item);
-      if (!id) return;
-      if (checked) {
-        if (!this.partDeliveryForm.selectedOrderItemIds.includes(id)) {
-          this.partDeliveryForm.selectedOrderItemIds.push(id);
-        }
-        if (!this.partDeliveryForm.deliveryNumMap[id]) {
-          this.partDeliveryForm.deliveryNumMap[id] = this.getMaxDeliveryNum(item);
-        }
-        return;
-      }
-      this.partDeliveryForm.selectedOrderItemIds = this.partDeliveryForm.selectedOrderItemIds.filter((itemId) => itemId !== id);
-      delete this.partDeliveryForm.deliveryNumMap[id];
-    },
     buildPartDeliveryDTOList() {
       return this.partDeliveryForm.selectedOrderItemIds
         .map((orderItemId) => ({
@@ -721,6 +864,9 @@ export default {
         if (this.$refs.partDeliveryForm) {
           this.$refs.partDeliveryForm.clearValidate();
         }
+        if (this.$refs.partDeliveryTable) {
+          this.$refs.partDeliveryTable.clearSelection();
+        }
       });
     },
     openPartDelivery() {
@@ -737,10 +883,11 @@ export default {
       });
     },
     getOrderPackages() {
-      API_Order.getPackage(this.sn).then((res) => {
+      return API_Order.getPackage(this.sn).then((res) => {
         if (res.success) {
           this.orderPackages = Array.isArray(res.result) ? res.result : [];
         }
+        this.initPartDeliveryNumMap();
       });
     },
     submitPartDelivery() {
@@ -761,8 +908,7 @@ export default {
           .then((res) => {
             if (res.success) {
               this.$Message.success("发货成功");
-              this.partDeliveryModal = false;
-              this.getDataList();
+              this.refreshPartDeliveryAfterSubmit();
             }
           })
           .finally(() => {
@@ -965,43 +1111,70 @@ export default {
   overflow-y: scroll;
 }
 
-.delivery-item-group {
-  width: 100%;
+.delivery-empty {
+  color: #999;
 }
 
-.delivery-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+.part-delivery-goods-item :deep(.el-form-item__content) {
+  line-height: normal;
+}
+
+.part-delivery-table-wrap {
   width: 100%;
-  height: auto;
-  margin: 0 0 8px 0;
-  padding: 8px 12px;
-  border: 1px solid #dcdfe6;
+  min-height: 360px;
+  max-height: 520px;
+  overflow: auto;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+
+  :deep(.el-table__cell) {
+    padding: 18px 0;
+  }
+
+  :deep(.el-table__header .el-table__cell) {
+    padding: 14px 0;
+    font-size: 14px;
+  }
+
+  :deep(.el-table__body .el-table__cell) {
+    font-size: 14px;
+  }
+}
+
+.part-delivery-goods {
+  display: flex;
+  align-items: flex-start;
+  padding: 8px 0;
+  min-height: 88px;
+}
+
+.part-delivery-goods-img {
+  width: 80px;
+  height: 80px;
+  flex-shrink: 0;
+  object-fit: cover;
   border-radius: 4px;
 }
 
-.delivery-item-name {
-  display: inline-block;
-  max-width: 420px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  vertical-align: middle;
-  white-space: nowrap;
+.part-delivery-goods-info {
+  margin-left: 16px;
+  min-width: 0;
 }
 
-.delivery-item-num {
-  margin-left: 12px;
+.part-delivery-goods-name {
+  line-height: 1.5;
+  font-size: 14px;
+  word-break: break-all;
+}
+
+.part-delivery-goods-spec {
+  font-size: 13px;
   color: #999;
+  line-height: 1.6;
 }
 
-.delivery-num-input {
-  width: 120px;
-  margin-left: 12px;
-}
-
-.delivery-empty {
-  color: #999;
+.part-delivery-num-input {
+  width: 130px;
 }
 
 .package-list {

seller/src/views/promotion/coupon/coupon-publish.vue

@@ -63,38 +63,44 @@
             </el-form-item>
 
             <el-form-item label="店铺承担比例" prop="storeCommission">
-              <el-input
-                :disabled="disabled"
-                v-model="form.storeCommission"
-                placeholder="店铺承担比例"
-                style="width: 260px"
-              >
-                <template #append>%</template>
-              </el-input>
-              <span class="describe">店铺承担比例，输入0-100之间数值</span>
+              <div class="form-field-block">
+                <el-input
+                  :disabled="disabled"
+                  v-model="form.storeCommission"
+                  placeholder="店铺承担比例"
+                  style="width: 260px"
+                >
+                  <template #append>%</template>
+                </el-input>
+                <div class="form-tip">店铺承担比例，输入0-100之间数值</div>
+              </div>
             </el-form-item>
             <el-form-item label="发放数量" prop="publishNum" v-if="form.getType === 'FREE'">
-              <el-input
-                :disabled="disabled"
-                v-model="form.publishNum"
-                placeholder="发放数量"
-                style="width: 260px"
-              />
-              <div class="tips">如果发放数量为0时,则代表不限制发放数量</div>
+              <div class="form-field-block">
+                <el-input
+                  :disabled="disabled"
+                  v-model="form.publishNum"
+                  placeholder="发放数量"
+                  style="width: 260px"
+                />
+                <div class="form-tip">如果发放数量为0时,则代表不限制发放数量</div>
+              </div>
             </el-form-item>
             <el-form-item
               label="领取数量限制"
               prop="couponLimitNum"
               v-if="form.getType === 'FREE'"
             >
-              <el-input
-                :disabled="disabled"
-                v-model="form.couponLimitNum"
-                placeholder="领取限制"
-                clearable
-                style="width: 260px"
-              />
-              <div class="tips">如果领取数量为0时,则代表不限制领取数量</div>
+              <div class="form-field-block">
+                <el-input
+                  :disabled="disabled"
+                  v-model="form.couponLimitNum"
+                  placeholder="领取限制"
+                  clearable
+                  style="width: 260px"
+                />
+                <div class="form-tip">如果领取数量为0时,则代表不限制领取数量</div>
+              </div>
             </el-form-item>
             <el-form-item label="范围描述" prop="description">
               <el-input
@@ -591,6 +597,20 @@ h4 {
   color: #999;
 }
 
+.form-field-block {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.form-tip {
+  font-size: 12px;
+  line-height: 1.5;
+  margin-top: 4px;
+  color: #999;
+}
+
 .effectiveDays {
   font-size: 12px;
   color: #999;
@@ -599,8 +619,4 @@ h4 {
     margin: 0 4px;
   }
 }
-.tips {
-  font-size: 12px;
-  color: #999;
-}
 </style>

seller/src/views/promotion/full-discount/full-discount-add.vue

@@ -16,6 +16,7 @@
             </el-form-item>
             <el-form-item label="活动时间" prop="rangeTime">
               <el-date-picker
+                class="full-discount-range-picker"
                 type="datetimerange"
                 v-model="form.rangeTime"
                 :disabled="fieldDisabled"
@@ -24,7 +25,6 @@
                 end-placeholder="结束时间"
                 placeholder="请选择"
                 :disabled-date="options.disabledDate"
-                style="width: 320px"
               />
             </el-form-item>
             <el-form-item label="活动描述" prop="description">
@@ -505,4 +505,11 @@ h4 {
   cursor: pointer;
   text-decoration: none;
 }
+
+:deep(.full-discount-range-picker.el-date-editor--datetimerange) {
+  width: 380px;
+  max-width: 380px;
+  flex-grow: 0;
+  --el-date-editor-width: 380px;
+}
 </style>

seller/src/views/promotion/live/addLive.vue

@@ -15,19 +15,21 @@
           <div class="tips">主播昵称，最短2个汉字，最长15个汉字，1个汉字相当于2个字符</div>
         </el-form-item>
         <el-form-item label="直播时间" prop="startTime">
-          <el-date-picker
-            :disabled="liveStatus != 'NEW'"
-            v-model="times"
-            type="datetimerange"
-            value-format="YYYY-MM-DD HH:mm"
-            :disabled-date="disabledDate"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            style="width: 360px"
-            @change="handleChangeTime"
-          />
-          <div class="tips">
-            直播开播时间需要在当前时间的10分钟后并且,开始时间不能在6个月后,直播计划结束时间（开播时间和结束时间间隔不得短于30分钟，不得超过24小时）
+          <div class="form-field-block">
+            <el-date-picker
+              class="live-time-picker"
+              :disabled="liveStatus != 'NEW'"
+              v-model="times"
+              type="datetimerange"
+              value-format="YYYY-MM-DD HH:mm"
+              :disabled-date="disabledDate"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              @change="handleChangeTime"
+            />
+            <div class="tips">
+              直播开播时间需要在当前时间的10分钟后并且,开始时间不能在6个月后,直播计划结束时间（开播时间和结束时间间隔不得短于30分钟，不得超过24小时）
+            </div>
           </div>
         </el-form-item>
         <el-form-item label="主播微信号" prop="anchorWechat">
@@ -285,6 +287,25 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+:deep(.el-form-item__content) {
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+.form-field-block {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+}
+
+:deep(.live-time-picker.el-date-editor--datetimerange) {
+  width: 360px;
+  max-width: 360px;
+  flex-grow: 0;
+  --el-date-editor-width: 360px;
+}
+
 .action {
   display: flex;
 }
@@ -306,7 +327,15 @@ export default {
     margin-right: 10px;
   }
 }
+:deep(.el-form-item__content > .tips) {
+  flex: 0 0 100%;
+}
+
 .tips {
+  width: 100%;
+  max-width: 460px;
+  margin-top: 6px;
+  line-height: 1.6;
   color: #999;
   font-size: 12px;
 }

seller/src/views/promotion/live/liveGoods.vue

@@ -3,67 +3,82 @@
     <el-card>
       <el-form :model="liveForm" ref="liveForm" :rules="liveRulesForm" label-width="120px">
         <el-form-item label="直播标题" prop="name">
-          <el-input disabled v-model="liveForm.name" style="width:460px"></el-input>
-          <div class="tips">直播间名字，最短3个汉字，最长17个汉字，1个汉字相当于2个字符</div>
+          <div class="form-field-block">
+            <el-input disabled v-model="liveForm.name" style="width:460px"></el-input>
+            <div class="tips">直播间名字，最短3个汉字，最长17个汉字，1个汉字相当于2个字符</div>
+          </div>
         </el-form-item>
         <el-form-item label="主播昵称" prop="anchorName">
-          <el-input disabled v-model="liveForm.anchorName" style="width:360px"></el-input>
-          <div class="tips">主播昵称，最短2个汉字，最长15个汉字，1个汉字相当于2个字符</div>
+          <div class="form-field-block">
+            <el-input disabled v-model="liveForm.anchorName" style="width:360px"></el-input>
+            <div class="tips">主播昵称，最短2个汉字，最长15个汉字，1个汉字相当于2个字符</div>
+          </div>
         </el-form-item>
         <el-form-item label="直播时间" prop="startTime">
-          <el-date-picker
-            disabled
-            format="YYYY-MM-DD HH:mm"
-            type="datetimerange"
-            v-model="times"
-            @change="handleChangeTime"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            placeholder="直播计划开始时间-直播计划结束时间"
-            style="width: 300px"
-          />
-          <div class="tips">直播开播时间需要在当前时间的10分钟后 并且 开始时间不能在 6 个月后</div>
+          <div class="form-field-block">
+            <el-date-picker
+              class="live-time-picker"
+              disabled
+              format="YYYY-MM-DD HH:mm"
+              type="datetimerange"
+              v-model="times"
+              @change="handleChangeTime"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              placeholder="直播计划开始时间-直播计划结束时间"
+            />
+            <div class="tips">直播开播时间需要在当前时间的10分钟后 并且 开始时间不能在 6 个月后</div>
+          </div>
         </el-form-item>
 
         <el-form-item label="主播微信号" prop="anchorWechat">
-          <el-input disabled v-model="liveForm.anchorWechat" style="width:360px" placeholder="主播微信号"></el-input>
-          <div class="tips">主播微信号，如果未实名认证，需要先前往“小程序直播”小程序进行<a target="_black" href="https://res.wx.qq.com/op_res/9rSix1dhHfK4rR049JL0PHJ7TpOvkuZ3mE0z7Ou_Etvjf-w1J_jVX0rZqeStLfwh">实名验证</a></div>
+          <div class="form-field-block">
+            <el-input disabled v-model="liveForm.anchorWechat" style="width:360px" placeholder="主播微信号"></el-input>
+            <div class="tips">主播微信号，如果未实名认证，需要先前往“小程序直播”小程序进行<a target="_black" href="https://res.wx.qq.com/op_res/9rSix1dhHfK4rR049JL0PHJ7TpOvkuZ3mE0z7Ou_Etvjf-w1J_jVX0rZqeStLfwh">实名验证</a></div>
+          </div>
         </el-form-item>
 
         <el-form-item label="分享卡片封面" prop="feedsImg">
-          <div class="upload-list" v-if="liveForm.feedsImg">
-            <img :src="liveForm.feedsImg">
-            <div class="upload-list-cover" @click="handleView(liveForm.feedsImg)">
-              <span class="view-icon">查看</span>
+          <div class="form-field-block">
+            <div class="upload-list" v-if="liveForm.feedsImg">
+              <img :src="liveForm.feedsImg">
+              <div class="upload-list-cover" @click="handleView(liveForm.feedsImg)">
+                <span class="view-icon">查看</span>
+              </div>
+            </div>
+            <div class="tips">
+              直播间分享图，图片规则：建议像素800*640，大小不超过1M；
             </div>
-          </div>
-          <div class="tips">
-            直播间分享图，图片规则：建议像素800*640，大小不超过1M；
           </div>
         </el-form-item>
 
         <el-form-item label="直播间背景墙" prop="coverImg">
-          <div class="upload-list" v-if="liveForm.coverImg">
-            <img :src="liveForm.coverImg">
-            <div class="upload-list-cover" @click="handleView(liveForm.coverImg)">
-              <span class="view-icon">查看</span>
+          <div class="form-field-block">
+            <div class="upload-list" v-if="liveForm.coverImg">
+              <img :src="liveForm.coverImg">
+              <div class="upload-list-cover" @click="handleView(liveForm.coverImg)">
+                <span class="view-icon">查看</span>
+              </div>
             </div>
+            <div class="tips"> 直播间背景图，图片规则：建议像素1080*1920，大小不超过1M</div>
           </div>
-          <div class="tips"> 直播间背景图，图片规则：建议像素1080*1920，大小不超过1M</div>
         </el-form-item>
 
         <el-form-item label="直播间分享图" prop="shareImg">
-          <div class="upload-list" v-if="liveForm.shareImg">
-            <img :src="liveForm.shareImg">
-            <div class="upload-list-cover" @click="handleView(liveForm.shareImg)">
-              <span class="view-icon">查看</span>
+          <div class="form-field-block">
+            <div class="upload-list" v-if="liveForm.shareImg">
+              <img :src="liveForm.shareImg">
+              <div class="upload-list-cover" @click="handleView(liveForm.shareImg)">
+                <span class="view-icon">查看</span>
+              </div>
             </div>
+            <div class="tips"> 直播间分享图，图片规则：建议像素800*640，大小不超过1M</div>
           </div>
-          <div class="tips"> 直播间分享图，图片规则：建议像素800*640，大小不超过1M</div>
         </el-form-item>
 
         <el-form-item label="商品" v-if="$route.query.id">
-          <el-table class="goods-table" border :data="liveData" style="width: 100%">
+          <div class="form-field-block">
+            <el-table class="goods-table" border :data="liveData" style="width: 100%">
             <el-table-column label="商品" min-width="200">
               <template #default="{ row, $index }">
                 <div v-if="row" class="flex-goods">
@@ -91,8 +106,9 @@
               </template>
             </el-table-column>
           </el-table>
-          <div class="tips">
-            直播间商品中前两个商品将自动被选为封面，伴随直播间在直播列表中显示
+            <div class="tips">
+              直播间商品中前两个商品将自动被选为封面，伴随直播间在直播列表中显示
+            </div>
           </div>
         </el-form-item>
 
@@ -173,6 +189,25 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+:deep(.el-form-item__content) {
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+.form-field-block {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+}
+
+:deep(.live-time-picker.el-date-editor--datetimerange) {
+  width: 360px;
+  max-width: 360px;
+  flex-grow: 0;
+  --el-date-editor-width: 360px;
+}
+
 .action {
   display: flex;
   :deep(.el-button) {
@@ -197,7 +232,15 @@ export default {
     margin-right: 10px;
   }
 }
+:deep(.el-form-item__content > .tips) {
+  flex: 0 0 100%;
+}
+
 .tips {
+  width: 100%;
+  max-width: 460px;
+  margin-top: 6px;
+  line-height: 1.6;
   color: #999;
   font-size: 12px;
 }

seller/src/views/promotion/pintuan/pintuan-edit.vue

@@ -3,61 +3,73 @@
     <el-card>
       <el-form ref="form" :model="form" label-width="130px" :rules="formValidate">
         <el-form-item label="活动名称" prop="promotionName">
-          <el-input
-            v-model="form.promotionName"
-            clearable
-            style="width: 260px"
-            maxlength="25"
-            placeholder="请输入活动名称"
-          />
-          <div class="form-tip">
-            活动名称将显示在店铺拼团活动列表中，供商家管理使用，最多输入25个字符
+          <div class="form-field-block">
+            <el-input
+              v-model="form.promotionName"
+              clearable
+              style="width: 260px"
+              maxlength="25"
+              placeholder="请输入活动名称"
+            />
+            <div class="form-tip">
+              活动名称将显示在店铺拼团活动列表中，供商家管理使用，最多输入25个字符
+            </div>
           </div>
         </el-form-item>
         <el-form-item label="活动时间" prop="rangeTime">
-          <el-date-picker
-            v-model="form.rangeTime"
-            type="datetimerange"
-            format="YYYY-MM-DD HH:mm:ss"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            placeholder="请选择"
-            :disabled-date="options.disabledDate"
-            style="width: 360px"
-          />
+          <div class="form-field-block">
+            <el-date-picker
+              v-model="form.rangeTime"
+              class="pintuan-range-picker"
+              type="datetimerange"
+              format="YYYY-MM-DD HH:mm:ss"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              placeholder="请选择"
+              :disabled-date="options.disabledDate"
+            />
+          </div>
         </el-form-item>
         <el-form-item label="成团人数" prop="requiredNum">
-          <el-input v-model="form.requiredNum" style="width: 260px" placeholder="请输入成团人数">
-            <template #append>人</template>
-          </el-input>
-          <span class="form-tip inline-tip">成团人数最少为2人，最多不超过10人。</span>
+          <div class="form-field-block">
+            <el-input v-model="form.requiredNum" style="width: 260px" placeholder="请输入成团人数">
+              <template #append>人</template>
+            </el-input>
+            <div class="form-tip">成团人数最少为2人，最多不超过10人。</div>
+          </div>
         </el-form-item>
         <el-form-item label="限购数量" prop="limitNum">
-          <el-input v-model="form.limitNum" type="number" style="width: 260px" placeholder="请输入限购数量">
-            <template #append>件/人</template>
-          </el-input>
-          <span class="form-tip inline-tip">若设置为0，则为不限制购买数量。</span>
+          <div class="form-field-block">
+            <el-input v-model="form.limitNum" type="number" style="width: 260px" placeholder="请输入限购数量">
+              <template #append>件/人</template>
+            </el-input>
+            <div class="form-tip">若设置为0，则为不限制购买数量。</div>
+          </div>
         </el-form-item>
         <el-form-item label="虚拟成团" prop="fictitious">
-          <el-radio-group v-model="form.fictitious">
-            <el-radio-button :value="1">开启</el-radio-button>
-            <el-radio-button :value="0">关闭</el-radio-button>
-          </el-radio-group>
-          <div class="form-tip">
-            开启虚拟成团后，24小时内人数未满的团，系统将会模拟匿名买家凑满人数，使该团成团。您只需要对真实拼团买家发货。建议合理开启，以提高成团率。
+          <div class="form-field-block">
+            <el-radio-group v-model="form.fictitious">
+              <el-radio-button :value="1">开启</el-radio-button>
+              <el-radio-button :value="0">关闭</el-radio-button>
+            </el-radio-group>
+            <div class="form-tip">
+              开启虚拟成团后，24小时内人数未满的团，系统将会模拟匿名买家凑满人数，使该团成团。您只需要对真实拼团买家发货。建议合理开启，以提高成团率。
+            </div>
           </div>
         </el-form-item>
         <el-form-item label="拼团规则" prop="pintuanRule">
-          <el-input
-            v-model="form.pintuanRule"
-            type="textarea"
-            :rows="4"
-            clearable
-            maxlength="255"
-            style="width: 260px"
-            placeholder="请输入拼团规则"
-          />
-          <div class="form-tip">拼团规则字数不能超过255字，将在WAP拼团详情页中显示</div>
+          <div class="form-field-block">
+            <el-input
+              v-model="form.pintuanRule"
+              type="textarea"
+              :rows="4"
+              clearable
+              maxlength="255"
+              style="width: 260px"
+              placeholder="请输入拼团规则"
+            />
+            <div class="form-tip">拼团规则字数不能超过255字，将在WAP拼团详情页中显示</div>
+          </div>
         </el-form-item>
         <el-form-item>
           <el-button @click="closeCurrentPage">返回</el-button>
@@ -180,16 +192,31 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.new-pintuan {
+  :deep(.el-form-item__label) {
+    color: #000;
+  }
+
+  :deep(.pintuan-range-picker.el-date-editor--datetimerange) {
+    width: 400px;
+    max-width: 100%;
+    flex-grow: 0;
+  }
+}
+
+.form-field-block {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+}
+
 .form-tip {
-  color: #cccccc;
+  color: #666666;
   font-size: 12px;
   line-height: 1.5;
   margin-top: 4px;
-}
-
-.inline-tip {
-  display: inline-block;
-  margin-top: 0;
-  margin-left: 8px;
+  width: 100%;
+  max-width: 720px;
 }
 </style>

seller/src/views/promotion/pintuan/pintuan-goods.vue

@@ -208,11 +208,28 @@ export default {
       getPintuanGoodsList(params).then((res) => {
         this.loading = false;
         if (res.success && res.result) {
-          this.goodsData = res.result.records || [];
+          const serverRecords = res.result.records || [];
+          this.goodsData = this.readonly
+            ? serverRecords
+            : this.mergeGoodsData(serverRecords);
           this.total = res.result.total || 0;
         }
       });
     },
+    mergeGoodsData(serverRecords) {
+      const localMap = new Map(this.goodsData.map((item) => [item.skuId, item]));
+      const serverSkuIds = new Set(serverRecords.map((item) => item.skuId));
+
+      const merged = serverRecords.map((serverItem) => {
+        const local = localMap.get(serverItem.skuId);
+        return local ? { ...serverItem, price: local.price } : serverItem;
+      });
+
+      const unsavedItems = this.goodsData.filter(
+        (item) => item.skuId && !serverSkuIds.has(item.skuId)
+      );
+      return [...merged, ...unsavedItems];
+    },
     openSkuList() {
       const data = JSON.parse(JSON.stringify(this.goodsData));
       data.forEach((e) => {

seller/src/views/shop/modelConfig.js

@@ -215,7 +215,7 @@ export const modelData = [
       bgImg: {
         img: require('@/assets/nav/decorate.png'),
         url: '',
-        size: "1300*586"
+        size: "1300*585"
       },
       classification: [{
         img: require('@/assets/nav/decorate2.jpeg'),

seller/src/views/shop/modelForm.vue

@@ -136,6 +136,7 @@
         @callback="callbackSelected"
         :is-component="true"
         :initialize="picModelFlag"
+        :max-select="1"
         ref="ossManage"
       />
     </el-dialog>
@@ -264,6 +265,7 @@ export default {
 @import "./modelList/setup-box.scss";
 .model-form {
   width: 1500px;
+  max-width: 100%;
 }
 .model-content {
   width: 1200px;
@@ -273,6 +275,8 @@ export default {
 }
 .model-form-list {
   min-height: 500px;
+  padding-right: 110px;
+  box-sizing: border-box;
 }
 .top-fixed-advert {
   display: flex;

seller/src/views/shop/modelFormItem.vue

@@ -14,43 +14,43 @@
     </template>
     <!-- 热门广告 -->
     <template v-if="element.type == 'hotAdvert'">
-      <div class="setup-content">
-        <img
-          style="display: block"
-          :src="element.options.list[0].img"
-          @click="$router.push(element.options.list[0].url)"
-          width="1200"
-          alt=""
-        />
-        <div class="setup-box">
-          <div>
-            <el-button
-              size="small"
-              @click.stop="handleSelectModel(element.options.list[0])"
-              >编辑</el-button
-            >
+      <div class="hot-advert">
+        <div class="hot-advert-banner setup-content">
+          <img
+            :src="element.options.list[0].img"
+            @click="$router.push(element.options.list[0].url)"
+            alt=""
+          />
+          <div class="setup-box">
+            <div>
+              <el-button
+                size="small"
+                @click.stop="handleSelectModel(element.options.list[0])"
+                >编辑</el-button
+              >
+            </div>
           </div>
         </div>
-      </div>
-      <ul class="advert-list">
-        <template v-for="(item, index) in element.options.list">
-          <li
-            v-if="index !== 0"
-            @click="$router.push(item.url)"
-            class="setup-content"
-            :key="index"
-          >
-            <img :src="item.img" width="230" height="190" alt="" />
-            <div class="setup-box">
-              <div>
-                <el-button size="small" @click.stop="handleSelectModel(item)"
-                  >编辑</el-button
-                >
+        <ul class="advert-list">
+          <template v-for="(item, index) in element.options.list">
+            <li
+              v-if="index !== 0"
+              @click="$router.push(item.url)"
+              class="setup-content"
+              :key="index"
+            >
+              <img :src="item.img" alt="" />
+              <div class="setup-box">
+                <div>
+                  <el-button size="small" @click.stop="handleSelectModel(item)"
+                    >编辑</el-button
+                  >
+                </div>
               </div>
-            </div>
-          </li>
-        </template>
-      </ul>
+            </li>
+          </template>
+        </ul>
+      </div>
     </template>
     <!-- 限时秒杀 待完善 -->
     <template v-if="element.type == 'seckill'">
@@ -107,15 +107,15 @@
     </template>
     <!-- 好货推荐 -->
     <template v-if="element.type == 'recommend'">
-      <recommend :data="element"></recommend>
+      <recommend :data="element" class="mb_20 width_1200_auto"></recommend>
     </template>
     <!-- 新品排行 -->
     <template v-if="element.type == 'newGoodsSort'">
-      <new-goods-sort :data="element"></new-goods-sort>
+      <new-goods-sort :data="element" class="mb_20 width_1200_auto"></new-goods-sort>
     </template>
     <!-- 首页广告 -->
     <template v-if="element.type == 'firstAdvert'">
-      <first-page-advert :data="element"></first-page-advert>
+      <first-page-advert :data="element" class="mb_20 width_1200_auto"></first-page-advert>
     </template>
     <!-- 商品模块 -->
     <template v-if="element.type == 'goodsType'">
@@ -142,7 +142,7 @@
       <div class="horizontal-advert setup-content">
         <img
           v-if="element.options.img"
-          width="1200"
+          class="banner-ad-img"
           :src="element.options.img"
           alt=""
         />
@@ -162,7 +162,7 @@
       </div>
     </template>
     <template v-if="element.type == 'notEnough'">
-      <not-enough :data="element"></not-enough>
+      <not-enough :data="element" class="mb_20 width_1200_auto"></not-enough>
     </template>
     <div class="del-btn">
       <el-button size="small" type="danger" @click="handleModelDelete">删除</el-button>
@@ -176,13 +176,13 @@
       destroy-on-close
     >
       <div class="modal-top-advert">
-        <div>
+        <div class="modal-form-item modal-form-preview">
           <!-- 热门广告两种图片尺寸 -->
           <img
             class="show-image"
             width="600"
             height="40"
-            v-if="selected.size && selected.size.indexOf('1200') >= 0"
+            v-if="selected.size && selected.size.indexOf('1200') >= 0 && selected.img"
             :src="selected.img"
             alt
           />
@@ -198,7 +198,7 @@
           <img
             class="show-image"
             width="600"
-            height="300"
+            height="270"
             v-if="selected.size && selected.size.indexOf('1300') >= 0"
             :src="selected.img"
             alt
@@ -220,26 +220,32 @@
             alt
           />
         </div>
-        <div class="tips">
-          建议尺寸：<span>{{ selected.size }}</span>
+        <div class="tips">建议尺寸：{{ selected.size }}</div>
+        <div class="modal-form-item modal-form-link">
+          <span class="modal-label">图片链接：</span>
+          <div class="modal-link-field">
+            <el-input
+              class="outsideUrl"
+              v-model="selected.url"
+              :disabled="!!selected.type && selected.type !== 'link'"
+              placeholder="https://"
+            />
+            <el-button size="small" type="primary" @click="handleSelectLink"
+              >选择链接</el-button
+            >
+          </div>
         </div>
-        <div>
-          图片链接：<el-input
-            class="outsideUrl"
-            v-model="selected.url"
-            :disabled="!!selected.type && selected.type !== 'link'"
-            placeholder="https://"
-          />
-          <el-button size="small" type="primary" @click="handleSelectLink"
-            >选择链接</el-button
-          >
-        </div>
-        <div>
-          选择图片：<el-button size="small" type="primary" @click="handleSelectImg"
+        <div class="modal-form-item">
+          <span class="modal-label">选择图片：</span>
+          <el-button size="small" type="primary" @click="handleSelectImg"
             >选择图片</el-button
           >
         </div>
       </div>
+      <template #footer>
+        <el-button @click="handleCancelModal">取消</el-button>
+        <el-button type="primary" @click="handleConfirmModal">确定</el-button>
+      </template>
     </el-dialog>
     <!-- 选择商品。链接 -->
     <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
@@ -249,6 +255,7 @@
         @callback="callbackSelected"
         :is-component="true"
         :initialize="picModelFlag"
+        :max-select="1"
         ref="ossManage"
       />
     </el-dialog>
@@ -296,14 +303,19 @@ export default {
   data() {
     return {
       showModal: false, // modal显隐
-      selected: {}, // 已选数据
+      selected: {}, // 弹窗编辑草稿
+      editTarget: null, // 确定后写回的原数据
       picModelFlag: false, // 图片选择器
     };
   },
   methods: {
+    cloneItem(item) {
+      return JSON.parse(JSON.stringify(item || {}));
+    },
     // 编辑模块
     handleSelectModel(item) {
-      this.selected = item;
+      this.editTarget = item;
+      this.selected = this.cloneItem(item);
       this.showModal = true;
     },
     // 删除模块
@@ -341,8 +353,22 @@ export default {
     // 回显图片
     callbackSelected(val) {
       this.picModelFlag = false;
+      if (!val?.url) return;
       this.selected.img = val.url;
     },
+    handleCancelModal() {
+      this.editTarget = null;
+      this.selected = {};
+      this.showModal = false;
+    },
+    handleConfirmModal() {
+      if (this.editTarget) {
+        Object.assign(this.editTarget, this.cloneItem(this.selected));
+      }
+      this.editTarget = null;
+      this.selected = {};
+      this.showModal = false;
+    },
   },
 };
 </script>
@@ -364,30 +390,68 @@ export default {
   position: absolute;
   right: -100px;
   top: 0;
+  z-index: 10;
   &:hover {
     display: block;
   }
 }
 /** 横幅广告 */
 .horizontal-advert {
-  width: 1200px;
-  height: auto;
+  width: 100%;
+  max-width: 1200px;
+  overflow: hidden;
+  line-height: 0;
+
+  .banner-ad-img {
+    display: block;
+    width: 100%;
+    height: auto;
+    max-height: 166px;
+    object-fit: cover;
+  }
+
   .default-con {
     height: 100px;
     padding-top: 30px;
     text-align: center;
     background: #ddd;
+    line-height: normal;
   }
 }
 /** 热门广告 */
+.hot-advert {
+  width: 1200px;
+  margin-right: -110px;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  .hot-advert-banner {
+    line-height: 0;
+
+    img {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+  }
+}
 .advert-list {
+  width: 100%;
+  margin: 0;
+  padding: 5px 0;
+  list-style: none;
+  box-sizing: border-box;
   background: $theme_color;
   height: 200px;
   display: flex;
-  justify-content: space-around;
-  padding: 3px 10px;
+  gap: 10px;
+  align-items: center;
   > li {
+    flex: 0 0 calc((100% - 40px) / 5);
     img {
+      display: block;
+      width: 100%;
+      height: 190px;
       cursor: pointer;
       border-radius: 10px;
       transition: all 150ms ease-in-out;
@@ -414,11 +478,11 @@ export default {
 }
 .discountAdvert {
   width: 1300px;
-  height: 566px;
+  height: 585px;
   margin-left: -100px;
   box-sizing: border-box;
   background-repeat: no-repeat;
-  background-size: 1300px 566px;
+  background-size: 1300px 585px;
   position: relative;
   > div {
     padding-left: 295px;
@@ -428,8 +492,11 @@ export default {
     &:nth-child(1) img {
       margin: 10px 10px 0 0;
     }
-    &:nth-child(2) img {
-      margin: 0 10px 0 0;
+    &:nth-child(2) {
+      margin-top: 10px;
+      img {
+        margin: 0 10px 0 0;
+      }
     }
   }
 }
@@ -535,11 +602,61 @@ export default {
 /** 装修模态框 内部样式start */
 .modal-top-advert {
   display: flex;
-  justify-content: center;
-  align-items: center;
   flex-direction: column;
-  > * {
-    margin-bottom: 10px;
+  align-items: stretch;
+  padding: 0 20px;
+  width: 100%;
+  box-sizing: border-box;
+
+  .modal-form-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 16px;
+
+    .modal-label {
+      flex-shrink: 0;
+      width: 100px;
+      text-align: right;
+      padding-right: 12px;
+    }
+
+    .el-input {
+      flex: 1;
+    }
+  }
+
+  .modal-form-preview {
+    justify-content: center;
+    margin-bottom: 8px;
+  }
+
+  .modal-form-link {
+    align-items: flex-start;
+
+    .modal-label {
+      padding-top: 8px;
+    }
+
+    .modal-link-field {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      min-width: 0;
+
+      .outsideUrl {
+        flex: 1;
+        min-width: 0;
+      }
+    }
+  }
+
+  .tips {
+    padding-left: 112px;
+    margin-bottom: 16px;
+    color: #999;
+    font-size: 12px;
   }
 }
 </style>

seller/src/views/shop/modelList/carousel.vue

@@ -122,6 +122,7 @@
         @callback="callbackSelected"
         :is-component="true"
         :initialize="picModelFlag"
+        :max-select="1"
         ref="ossManage"
       />
     </el-dialog>

seller/src/views/shop/modelList/carousel1.vue

@@ -84,7 +84,7 @@
     <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
     <!-- 选择图片 -->
     <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
-      <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" ref="ossManage" />
+      <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" :max-select="1" ref="ossManage" />
     </el-dialog>
   </div>
 </template>

seller/src/views/shop/modelList/carousel2.vue

@@ -204,7 +204,7 @@
     <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
     <!-- 选择图片 -->
     <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
-      <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" ref="ossManage" />
+      <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" :max-select="1" ref="ossManage" />
     </el-dialog>
   </div>
 </template>

seller/src/views/shop/modelList/firstPageAdvert.vue

@@ -26,13 +26,13 @@
     <el-dialog
       v-model="showModal"
       title="装修"
-      
-      width="800"
-      
+      width="800px"
       :close-on-click-modal="false"
-     append-to-body destroy-on-close>
+      append-to-body
+      destroy-on-close
+    >
       <div class="modal-top-advert">
-        <div>
+        <div class="modal-form-item modal-form-preview">
           <img
             class="show-image"
             width="170"
@@ -41,42 +41,68 @@
             alt
           />
         </div>
-        <div><span>图片主标题：</span><el-input v-model="selected.name" /></div>
-        <div><span>图片描述：</span><el-input v-model="selected.describe" /></div>
-        <div class="tips">
-          建议尺寸：<span>{{ selected.size }}</span>
+        <div class="modal-form-item">
+          <span class="modal-label">图片主标题：</span>
+          <el-input v-model="selected.name" />
         </div>
-        <div>
-          图片链接：<el-input
-            class="outsideUrl"
-            v-model="selected.url"
-            :disabled="!!selected.type && selected.type !== 'link'"
-            placeholder="https://"
-          />
-          <el-button size="small" type="primary" @click="handleSelectLink"
-            >选择链接</el-button
+        <div class="modal-form-item">
+          <span class="modal-label">图片描述：</span>
+          <el-input v-model="selected.describe" />
+        </div>
+        <div class="tips">建议尺寸：{{ selected.size }}</div>
+        <div class="modal-form-item modal-form-link">
+          <span class="modal-label">图片链接：</span>
+          <div class="modal-link-field">
+            <el-input
+              class="outsideUrl"
+              v-model="selected.url"
+              :disabled="!!selected.type && selected.type !== 'link'"
+              placeholder="https://"
+            />
+            <el-button size="small" type="primary" @click="handleSelectLink"
+              >选择链接</el-button
+            >
+          </div>
+        </div>
+        <div class="modal-form-item">
+          <span class="modal-label">渐变背景色：</span>
+          <div class="modal-color-field">
+            <el-input v-model="selected.fromColor" />
+            <el-color-picker
+              v-if="selected.fromColor"
+              v-model="selected.fromColor"
+            />
+          </div>
+        </div>
+        <div class="modal-form-item">
+          <span class="modal-label">渐变背景色：</span>
+          <div class="modal-color-field">
+            <el-input v-model="selected.toColor" />
+            <el-color-picker
+              v-if="selected.toColor"
+              v-model="selected.toColor"
+            />
+          </div>
+        </div>
+        <div class="modal-form-item modal-form-exhibition">
+          <div
+            :style="{
+              backgroundImage: `linear-gradient(to right, ${selected.fromColor}, ${selected.toColor})`,
+            }"
+            class="exhibition"
+          ></div>
+        </div>
+        <div class="modal-form-item">
+          <span class="modal-label">选择图片：</span>
+          <el-button size="small" type="primary" @click="handleSelectImg"
+            >选择图片</el-button
           >
         </div>
-        <div>
-          <span>渐变背景色：</span><el-input v-model="selected.fromColor" />
-          <el-color-picker v-if="selected.fromColor" v-model="selected.fromColor" />
-        </div>
-        <div>
-          <span>渐变背景色：</span><el-input v-model="selected.toColor" />
-          <el-color-picker v-if="selected.toColor" v-model="selected.toColor" />
-        </div>
-        <div
-          :style="{
-            backgroundImage: `linear-gradient(to right, ${selected.fromColor}, ${selected.toColor})`,
-          }"
-          class="exhibition"
-        ></div>
-        <div>
-          选择图片：<el-button size="small" type="primary" @click="handleSelectImg"
-            >选择图片</el-button
-          >&nbsp;
-        </div>
       </div>
+      <template #footer>
+        <el-button @click="handleCancelModal">取消</el-button>
+        <el-button type="primary" @click="handleConfirmModal">确定</el-button>
+      </template>
     </el-dialog>
     <!-- 选择商品。链接 -->
     <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
@@ -86,6 +112,7 @@
         @callback="callbackSelected"
         :is-component="true"
         :initialize="picModelFlag"
+        :max-select="1"
         ref="ossManage"
       />
     </el-dialog>
@@ -105,14 +132,19 @@ export default {
     return {
       options: this.data.options, // 当前类型数据
       showModal: false, // modal显隐
-      selected: {}, // 已选数据
+      selected: {}, // 弹窗编辑草稿
+      editTarget: null, // 确定后写回的原数据
       picModelFlag: false, // 图片选择器
     };
   },
   methods: {
+    cloneItem(item) {
+      return JSON.parse(JSON.stringify(item || {}));
+    },
     // 打开装修modal
     handleSelectModel(item, type) {
-      this.selected = item;
+      this.editTarget = item;
+      this.selected = this.cloneItem(item);
       this.showModal = true;
     },
     handleSelectLink(item, index) {
@@ -137,8 +169,22 @@ export default {
     // 选择图片回调
     callbackSelected(val) {
       this.picModelFlag = false;
+      if (!val?.url) return;
       this.selected.img = val.url;
     },
+    handleCancelModal() {
+      this.editTarget = null;
+      this.selected = {};
+      this.showModal = false;
+    },
+    handleConfirmModal() {
+      if (this.editTarget) {
+        Object.assign(this.editTarget, this.cloneItem(this.selected));
+      }
+      this.editTarget = null;
+      this.selected = {};
+      this.showModal = false;
+    },
   },
 };
 </script>
@@ -148,7 +194,8 @@ export default {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  // margin-top: -10px;
+  width: 100%;
+  box-sizing: border-box;
   .item {
     width: 393px;
     height: 170px;
@@ -192,12 +239,86 @@ export default {
     width: 154px;
   }
 }
+
 .modal-top-advert {
-  align-items: start;
-  padding: 0 30px;
-  .exhibition {
-    width: 300px;
-    height: 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  padding: 0 20px;
+  width: 100%;
+  box-sizing: border-box;
+
+  .modal-form-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 16px;
+
+    .modal-label {
+      flex-shrink: 0;
+      width: 100px;
+      text-align: right;
+      padding-right: 12px;
+    }
+
+    .el-input {
+      flex: 1;
+    }
+  }
+
+  .modal-form-preview {
+    justify-content: center;
+    margin-bottom: 8px;
+  }
+
+  .modal-form-link {
+    align-items: flex-start;
+
+    .modal-label {
+      padding-top: 8px;
+    }
+
+    .modal-link-field {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      min-width: 0;
+
+      .outsideUrl {
+        flex: 1;
+        min-width: 0;
+      }
+    }
+  }
+
+  .modal-color-field {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    .el-input {
+      flex: 1;
+    }
+  }
+
+  .modal-form-exhibition {
+    padding-left: 112px;
+    box-sizing: border-box;
+
+    .exhibition {
+      width: 100%;
+      height: 50px;
+      border-radius: 4px;
+    }
+  }
+
+  .tips {
+    padding-left: 112px;
+    margin-bottom: 16px;
+    color: #999;
+    font-size: 12px;
   }
 }
 </style>

seller/src/views/shop/modelList/forYour.vue

@@ -169,6 +169,7 @@
         @callback="callbackSelected"
         :is-component="true"
         :initialize="picModelFlag"
+        :max-select="1"
         ref="ossManage"
       />
     </el-dialog>

seller/src/views/shop/modelList/mixModel.vue

@@ -153,6 +153,7 @@
         @callback="callbackSelected"
         :is-component="true"
         :initialize="picModelFlag"
+        :max-select="1"
         ref="ossManage"
       />
     </el-dialog>

seller/src/views/shop/modelList/newGoodsSort.vue

@@ -121,13 +121,13 @@
     <el-dialog
       v-model="showModal"
       title="装修"
-      
-      width="800"
-      
+      width="800px"
       :close-on-click-modal="false"
-     append-to-body destroy-on-close>
+      append-to-body
+      destroy-on-close
+    >
       <div class="modal-top-advert">
-        <div>
+        <div class="modal-form-item modal-form-preview">
           <img
             class="show-image"
             width="160"
@@ -145,65 +145,87 @@
             alt
           />
         </div>
-        <div><span>图片主标题：</span><el-input v-model="selected.name" /></div>
-        <div><span>图片描述：</span><el-input v-model="selected.describe" /></div>
-        <div class="tips">
-          建议尺寸：<span>{{ selected.size }}</span>
+        <div class="modal-form-item">
+          <span class="modal-label">图片主标题：</span>
+          <el-input v-model="selected.name" />
         </div>
-        <div>
-          图片链接：<el-input
-            class="outsideUrl"
-            v-model="selected.url"
-            :disabled="!!selected.type && selected.type !== 'link'"
-            placeholder="https://"
-          />
-          <el-button size="small" type="primary" @click="handleSelectLink"
-            >选择链接</el-button
-          >
+        <div class="modal-form-item">
+          <span class="modal-label">图片描述：</span>
+          <el-input v-model="selected.describe" />
         </div>
-        <div>
+        <div class="tips">建议尺寸：{{ selected.size }}</div>
+        <div class="modal-form-item modal-form-link">
+          <span class="modal-label">图片链接：</span>
+          <div class="modal-link-field">
+            <el-input
+              class="outsideUrl"
+              v-model="selected.url"
+              :disabled="!!selected.type && selected.type !== 'link'"
+              placeholder="https://"
+            />
+            <el-button size="small" type="primary" @click="handleSelectLink"
+              >选择链接</el-button
+            >
+          </div>
+        </div>
+        <div class="modal-form-item modal-form-actions">
           <el-button size="small" type="primary" @click="handleSelectImg"
             >选择图片</el-button
-          >&nbsp;
-
+          >
           <el-button size="small" type="primary" @click="handleSelectGoods('')"
             >选择商品</el-button
           >
         </div>
       </div>
+      <template #footer>
+        <el-button @click="handleCancelModal">取消</el-button>
+        <el-button type="primary" @click="handleConfirmModal">确定</el-button>
+      </template>
     </el-dialog>
     <!-- 装修标题 -->
     <el-dialog
       v-model="showModal1"
       title="装修"
-      
-      width="800"
-      
+      width="800px"
       :close-on-click-modal="false"
-     append-to-body destroy-on-close>
+      append-to-body
+      destroy-on-close
+    >
       <div class="modal-top-advert">
-        <div><span>主标题：</span><el-input v-model="selected.title" /></div>
-        <div><span>副标题：</span><el-input v-model="selected.secondTitle" /></div>
-        <div>
-          <span
-            >副标题链接：<el-input
+        <div class="modal-form-item">
+          <span class="modal-label">主标题：</span>
+          <el-input v-model="selected.title" />
+        </div>
+        <div class="modal-form-item">
+          <span class="modal-label">副标题：</span>
+          <el-input v-model="selected.secondTitle" />
+        </div>
+        <div class="modal-form-item modal-form-link">
+          <span class="modal-label">副标题链接：</span>
+          <div class="modal-link-field">
+            <el-input
               class="outsideUrl"
               v-model="selected.url"
               :disabled="!!selected.type && selected.type !== 'link'"
-              placeholder="https://" /></span
-          ><el-button
-            size="small"
-            class="ml_10"
-            type="primary"
-            @click="handleSelectLink"
-            >选择链接</el-button
-          >
+              placeholder="https://"
+            />
+            <el-button size="small" type="primary" @click="handleSelectLink"
+              >选择链接</el-button
+            >
+          </div>
         </div>
-        <div>
-          <span>背景色：</span
-          ><el-color-picker v-if="selected.bgColor" v-model="selected.bgColor" />
+        <div class="modal-form-item">
+          <span class="modal-label">背景色：</span>
+          <div class="modal-color-field">
+            <el-input v-model="selected.bgColor" />
+            <el-color-picker v-if="selected.bgColor" v-model="selected.bgColor" />
+          </div>
         </div>
       </div>
+      <template #footer>
+        <el-button @click="handleCancelModal1">取消</el-button>
+        <el-button type="primary" @click="handleConfirmModal1">确定</el-button>
+      </template>
     </el-dialog>
     <!-- 选择商品。链接 -->
     <liliDialog
@@ -217,6 +239,7 @@
         @callback="callbackSelected"
         :is-component="true"
         :initialize="picModelFlag"
+        :max-select="1"
         ref="ossManage"
       />
     </el-dialog>
@@ -239,15 +262,19 @@ export default {
       options: this.data.options, // 当前数据
       showModal: false, // modal显隐
       showModal1: false, // modal显隐
-      selected: {}, // 已选数据
+      selected: {}, // 弹窗编辑草稿
+      editTarget: null, // 确定后写回的原数据
       picModelFlag: false, // 选择图片modal
     };
   },
   methods: {
+    cloneItem(item) {
+      return JSON.parse(JSON.stringify(item || {}));
+    },
     // 装修modal
     handleSelectModel(item, type) {
-      this.selected = item;
-      console.warn(item);
+      this.editTarget = item;
+      this.selected = this.cloneItem(item);
       if (type) {
         this.showModal1 = true;
       } else {
@@ -259,9 +286,10 @@ export default {
       this.$refs.liliDialog.open("link");
     },
     handleSelectGoods(item) {
-      // 调起选择商品
-      console.warn(item);
-      if (item) this.selected = item;
+      if (item) {
+        this.editTarget = item;
+        this.selected = this.cloneItem(item);
+      }
       this.$refs.liliDialog.open("goods", "single");
       setTimeout(() => {
         this.$refs.liliDialog.goodsData = [this.selected];
@@ -269,18 +297,24 @@ export default {
     },
     // 选择链接回调
     selectedLink(val) {
+      if (!this.selected) return;
       this.selected.url = this.$filters.formatLinkType(val);
       this.selected.type =
         val.___type === "other" && val.url === "" ? "link" : "other";
     },
     // 选择商品回调
     selectedGoodsData(val) {
-      let goods = val[0];
-      console.log(this.selected);
+      if (!val?.length || !this.selected) return;
+      const goods = val[0];
       this.selected.img = goods.thumbnail;
       this.selected.price = goods.price;
       this.selected.name = goods.goodsName;
       this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
+      if (this.editTarget && !this.showModal && !this.showModal1) {
+        Object.assign(this.editTarget, this.cloneItem(this.selected));
+        this.editTarget = null;
+        this.selected = {};
+      }
     },
     handleSelectImg() {
       // 选择图片
@@ -294,8 +328,35 @@ export default {
     // 选择图片回显
     callbackSelected(val) {
       this.picModelFlag = false;
+      if (!val?.url) return;
       this.selected.img = val.url;
     },
+    handleCancelModal() {
+      this.editTarget = null;
+      this.selected = {};
+      this.showModal = false;
+    },
+    handleConfirmModal() {
+      if (this.editTarget) {
+        Object.assign(this.editTarget, this.cloneItem(this.selected));
+      }
+      this.editTarget = null;
+      this.selected = {};
+      this.showModal = false;
+    },
+    handleCancelModal1() {
+      this.editTarget = null;
+      this.selected = {};
+      this.showModal1 = false;
+    },
+    handleConfirmModal1() {
+      if (this.editTarget) {
+        Object.assign(this.editTarget, this.cloneItem(this.selected));
+      }
+      this.editTarget = null;
+      this.selected = {};
+      this.showModal1 = false;
+    },
   },
 };
 </script>
@@ -305,6 +366,8 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: stretch;
+  width: 100%;
+  box-sizing: border-box;
   > div {
     width: 393px;
     height: 440px;
@@ -573,7 +636,78 @@ export default {
   }
 }
 .modal-top-advert {
-  align-items: start;
-  padding: 0 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  padding: 0 20px;
+  width: 100%;
+  box-sizing: border-box;
+
+  .modal-form-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 16px;
+
+    .modal-label {
+      flex-shrink: 0;
+      width: 100px;
+      text-align: right;
+      padding-right: 12px;
+    }
+
+    .el-input {
+      flex: 1;
+    }
+  }
+
+  .modal-form-preview {
+    justify-content: center;
+    margin-bottom: 8px;
+  }
+
+  .modal-form-link {
+    align-items: flex-start;
+
+    .modal-label {
+      padding-top: 8px;
+    }
+
+    .modal-link-field {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      min-width: 0;
+
+      .outsideUrl {
+        flex: 1;
+        min-width: 0;
+      }
+    }
+  }
+
+  .modal-form-actions {
+    padding-left: 112px;
+    gap: 10px;
+  }
+
+  .modal-color-field {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    .el-input {
+      flex: 1;
+    }
+  }
+
+  .tips {
+    padding-left: 112px;
+    margin-bottom: 16px;
+    color: #999;
+    font-size: 12px;
+  }
 }
 </style>

seller/src/views/shop/modelList/notEnough.vue

@@ -1,23 +1,24 @@
 <template>
     <div class="not-enough">
-        <ul class="nav-bar setup-content">
-            <li v-for="(item, index) in conData.options.navList" :class="currentIndex===index?'curr':''" @click="changeCurr(index)" :key="index">
-                <p>{{item.title}}</p>
-                <p>{{item.desc}}</p>
-            </li>
-            <div class="setup-box" style="width:100px;left:1100px;">
+        <div class="nav-bar setup-content">
+            <ul class="nav-list">
+                <li v-for="(item, index) in conData.options.navList" :class="currentIndex===index?'curr':''" @click="changeCurr(index)" :key="index">
+                    <p>{{item.title}}</p>
+                    <p>{{item.desc}}</p>
+                </li>
+            </ul>
+            <div class="setup-box nav-setup-box">
                 <div>
                     <el-button size="small" @click.stop="handleSelectModel">编辑</el-button>
                 </div>
             </div>
-        </ul>
+        </div>
         <div class="content" v-if="showContent">
             <div v-for="(item, index) in conData.options.list[currentIndex]" :key="index" class="setup-content">
-                <img :src="item.img" width="210" height="210" :alt="item.name">
+                <img class="goods-img" :src="item.img" :alt="item.name">
                 <p>{{item.name}}</p>
                 <p>
                     <span>{{ $filters.unitPrice(item.price, '￥') }}</span>
-                    <!-- <span>{{ $filters.unitPrice(item.price, '￥') }}</span> -->
                 </p>
                 <div class="setup-box">
                     <div>
@@ -29,12 +30,12 @@
         <el-dialog
             v-model="showModal"
             title="装修"
-            
             width="800"
-            
             :close-on-click-modal="false"
-             append-to-body destroy-on-close>
-            <div class="modal-tab-bar">
+            append-to-body
+            destroy-on-close
+            @close="handleCancelModal">
+            <div class="modal-tab-bar" v-if="draftNavList.length">
                 <el-button type="primary" size='small' @click="handleAddNav">添加分类</el-button>
                 <table cellspacing="0">
                     <thead>
@@ -45,7 +46,7 @@
                         </tr>
                     </thead>
                     <tbody>
-                        <tr v-for="(item, index) in conData.options.navList" :key="index">
+                        <tr v-for="(item, index) in draftNavList" :key="index">
                             <td><el-input v-model="item.title" /></td>
                             <td><el-input v-model="item.desc" /></td>
                             <td v-if="index!=0">
@@ -55,8 +56,40 @@
                     </tbody>
                 </table>
             </div>
+            <template #footer>
+                <el-button @click="handleCancelModal">取消</el-button>
+                <el-button type="primary" @click="handleConfirmModal">确定</el-button>
+            </template>
+        </el-dialog>
+        <el-dialog
+            v-model="showGoodsModal"
+            title="装修"
+            width="600"
+            :close-on-click-modal="false"
+            append-to-body
+            destroy-on-close
+            @close="handleCancelGoodsModal">
+            <div class="modal-top-advert">
+                <div class="modal-form-item modal-form-preview" v-if="selected.img">
+                    <img class="show-image goods-preview" :src="selected.img" alt />
+                </div>
+                <div class="modal-form-item" v-if="selected.name">
+                    <span class="modal-label">商品名称：</span>
+                    <span>{{ selected.name }}</span>
+                </div>
+                <div class="modal-form-item" v-if="selected.price">
+                    <span class="modal-label">商品价格：</span>
+                    <span>{{ $filters.unitPrice(selected.price, '￥') }}</span>
+                </div>
+                <div class="modal-form-item modal-form-actions">
+                    <el-button size="small" type="primary" @click="handleOpenGoodsPicker">选择商品</el-button>
+                </div>
+            </div>
+            <template #footer>
+                <el-button @click="handleCancelGoodsModal">取消</el-button>
+                <el-button type="primary" @click="handleConfirmGoodsModal">确定</el-button>
+            </template>
         </el-dialog>
-        <!-- 选择商品。链接 -->
         <liliDialog
             ref="liliDialog"
             @selectedGoodsData="selectedGoodsData"
@@ -73,11 +106,15 @@ export default {
     },
     data() {
         return {
-            currentIndex:0, // 当前商品index
-            conData:this.data, // 当前数据
-            selected:{}, // 已选数据
-            showModal:false, // modal显隐
-            showContent:true, // 选择后刷新数据用
+            currentIndex:0,
+            conData:this.data,
+            selected:{},
+            editTarget: null,
+            showModal:false,
+            showGoodsModal: false,
+            showContent:true,
+            draftNavList: [],
+            draftGoodsList: [],
         }
     },
     watch:{
@@ -89,41 +126,46 @@ export default {
         }
     },
     methods:{
-        // tab点击切换
+        cloneList(list) {
+            return JSON.parse(JSON.stringify(list || []));
+        },
+        cloneItem(item) {
+            return JSON.parse(JSON.stringify(item || {}));
+        },
         changeCurr(index){
             this.currentIndex = index;
         },
-        // 编辑
-        handleSelectModel (item,type) {
-            this.selected = item;
-            this.showModal = true
+        handleSelectModel () {
+            this.draftNavList = this.cloneList(this.conData.options.navList);
+            this.draftGoodsList = this.cloneList(this.conData.options.list);
+            this.showModal = true;
         },
-        handleSelectGoods(item) { // 调起选择商品弹窗
-            if(item) this.selected = item;
-            this.$refs.liliDialog.open('goods', 'single')
+        handleSelectGoods(item) {
+            this.editTarget = item;
+            this.selected = this.cloneItem(item);
+            this.showGoodsModal = true;
+        },
+        handleOpenGoodsPicker() {
+            this.$refs.liliDialog.open('goods', 'single');
             setTimeout(() => {
-                this.$refs.liliDialog.goodsData = [this.selected]
+                this.$refs.liliDialog.goodsData = [this.selected];
             }, 500);
         },
-        // 选择商品回调
         selectedGoodsData(val){
-            console.log(val)
-            let goods = val[0]
-            this.selected.img = goods.thumbnail
-            this.selected.price = goods.price
-            this.selected.name = goods.goodsName
-            this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`
+            if (!val?.length) return;
+            const goods = val[0];
+            this.selected.img = goods.thumbnail;
+            this.selected.price = goods.price;
+            this.selected.name = goods.goodsName;
+            this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
         },
-        handleDelNav(index){ // 删除导航
-            this.conData.options.navList.splice(index,1)
-            this.conData.options.list.splice(index,1)
+        handleDelNav(index){
+            this.draftNavList.splice(index,1);
+            this.draftGoodsList.splice(index,1);
         },
-        handleAddNav(){ // 添加导航
-            this.conData.options.navList.push(
-                {title:'',desc:''}
-            )
-            this.conData.options.list.push(
-                [{ img:'', name:'', price:0, url:'' },
+        handleAddNav(){
+            this.draftNavList.push({ title:'', desc:'' });
+            this.draftGoodsList.push([
                 { img:'', name:'', price:0, url:'' },
                 { img:'', name:'', price:0, url:'' },
                 { img:'', name:'', price:0, url:'' },
@@ -133,27 +175,66 @@ export default {
                 { img:'', name:'', price:0, url:'' },
                 { img:'', name:'', price:0, url:'' },
                 { img:'', name:'', price:0, url:'' },
-                ],
-            )
-            this.showContent = false
-            this.$nextTick(()=>{
+                { img:'', name:'', price:0, url:'' },
+            ]);
+        },
+        handleCancelModal() {
+            this.draftNavList = [];
+            this.draftGoodsList = [];
+            this.showModal = false;
+        },
+        handleConfirmModal() {
+            this.conData.options.navList = this.cloneList(this.draftNavList);
+            this.conData.options.list = this.cloneList(this.draftGoodsList);
+            this.draftNavList = [];
+            this.draftGoodsList = [];
+            this.showContent = false;
+            this.$nextTick(() => {
                 this.showContent = true;
-            })
+            });
+            this.showModal = false;
+        },
+        handleCancelGoodsModal() {
+            this.editTarget = null;
+            this.selected = {};
+            this.showGoodsModal = false;
+        },
+        handleConfirmGoodsModal() {
+            if (this.editTarget) {
+                Object.assign(this.editTarget, this.cloneItem(this.selected));
+            }
+            this.editTarget = null;
+            this.selected = {};
+            this.showGoodsModal = false;
         },
     }
 }
 </script>
 <style lang="scss" scoped>
 @import './setup-box.scss';
+.not-enough {
+    width: 100%;
+}
 .nav-bar{
-    display: flex;
-    justify-content: center;
     width: 100%;
     margin-bottom: 10px;
     background-color: rgb(218, 217, 217);
     height: 60px;
-    align-items: center;
     position: relative;
+}
+.nav-setup-box {
+    left: auto;
+    right: 0;
+    width: 100px;
+}
+.nav-list {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
     li{
         padding: 0 30px;
         text-align: center;
@@ -161,11 +242,15 @@ export default {
             font-size: 16px;
             border-radius: 50px;
             padding: 0 7px;
+            margin: 0;
+            line-height: 1.2;
         }
 
         p:nth-child(2){
             font-size: 14px;
             color: #999;
+            margin: 2px 0 0;
+            line-height: 1.2;
         }
 
         &:hover{
@@ -180,11 +265,9 @@ export default {
     li:last-of-type{
         border: none;
     }
-   
     .curr{
         p:nth-child(1){
             background-color: $theme_color;
-            
             color: #fff;
         }
         p:nth-child(2){
@@ -194,17 +277,26 @@ export default {
 }
 
 .content{
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 10px;
+    width: 100%;
+    box-sizing: border-box;
     >div{
         padding: 10px;
         box-sizing: border-box;
         border: 1px solid #eee;
-        margin-bottom: 10px;
+        min-width: 0;
+        .goods-img {
+            display: block;
+            width: 100%;
+            height: auto;
+            aspect-ratio: 1;
+            object-fit: cover;
+        }
         p:nth-of-type(1){
             overflow: hidden;
-            width: 210px;
+            width: 100%;
             white-space: nowrap;
             text-overflow:ellipsis;
             margin: 10px 0 5px 0;
@@ -223,4 +315,9 @@ export default {
         }
     }
 }
-</style>
+.goods-preview {
+    width: 210px;
+    height: 210px;
+    object-fit: cover;
+}
+</style>

seller/src/views/shop/modelList/oneRowThreeColumns.vue

@@ -55,6 +55,7 @@
         @callback="callbackSelected"
         :is-component="true"
         :initialize="picModelFlag"
+        :max-select="1"
         ref="ossManage"
       />
     </el-dialog>

seller/src/views/shop/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
@@ -104,13 +101,13 @@
     <el-dialog
       v-model="showModal"
       title="装修"
-      
-      width="800"
-      
+      width="800px"
       :close-on-click-modal="false"
-     append-to-body destroy-on-close>
+      append-to-body
+      destroy-on-close
+    >
       <div class="modal-top-advert">
-        <div>
+        <div class="modal-form-item modal-form-preview">
           <img
             class="show-image"
             width="160"
@@ -136,67 +133,86 @@
             alt
           />
         </div>
-        <div><span>图片主标题：</span><el-input v-model="selected.name" /></div>
-        <div><span>图片描述：</span><el-input v-model="selected.describe" /></div>
-        <div class="tips">
-          建议尺寸：<span>{{ selected.size }}</span>
+        <div class="modal-form-item">
+          <span class="modal-label">图片主标题：</span>
+          <el-input v-model="selected.name" />
         </div>
-        <div>
-          图片链接：<el-input
-            class="outsideUrl"
-            v-model="selected.url"
-            :disabled="!!selected.type && selected.type !== 'link'"
-            placeholder="https://"
-          />
-          <el-button
-            size="small"
-            class="ml_10"
-            type="primary"
-            @click="handleSelectLink"
-            >选择链接</el-button
-          >
+        <div class="modal-form-item">
+          <span class="modal-label">图片描述：</span>
+          <el-input v-model="selected.describe" />
         </div>
-        <div>
+        <div class="tips">建议尺寸：{{ selected.size }}</div>
+        <div class="modal-form-item modal-form-link">
+          <span class="modal-label">图片链接：</span>
+          <div class="modal-link-field">
+            <el-input
+              class="outsideUrl"
+              v-model="selected.url"
+              :disabled="!!selected.type && selected.type !== 'link'"
+              placeholder="https://"
+            />
+            <el-button size="small" type="primary" @click="handleSelectLink"
+              >选择链接</el-button
+            >
+          </div>
+        </div>
+        <div class="modal-form-item modal-form-actions">
           <el-button size="small" type="primary" @click="handleSelectImg"
             >选择图片</el-button
-          >&nbsp;
+          >
           <el-button size="small" type="primary" @click="handleSelectGoods"
             >选择商品</el-button
           >
         </div>
       </div>
+      <template #footer>
+        <el-button @click="handleCancelModal">取消</el-button>
+        <el-button type="primary" @click="handleConfirmModal">确定</el-button>
+      </template>
     </el-dialog>
     <el-dialog
       v-model="showModal1"
       title="装修"
-      
-      width="800"
-      
+      width="800px"
       :close-on-click-modal="false"
-     append-to-body destroy-on-close>
+      append-to-body
+      destroy-on-close
+    >
       <div class="modal-top-advert">
-        <div><span>主标题：</span><el-input v-model="selected.title" /></div>
-        <div><span>副标题：</span><el-input v-model="selected.secondTitle" /></div>
-        <div>
-          <span
-            >副标题链接：<el-input
+        <div class="modal-form-item">
+          <span class="modal-label">主标题：</span>
+          <el-input v-model="selected.title" />
+        </div>
+        <div class="modal-form-item">
+          <span class="modal-label">副标题：</span>
+          <el-input v-model="selected.secondTitle" />
+        </div>
+        <div class="modal-form-item modal-form-link">
+          <span class="modal-label">副标题链接：</span>
+          <div class="modal-link-field">
+            <el-input
               class="outsideUrl"
               v-model="selected.url"
               :disabled="!!selected.type && selected.type !== 'link'"
-              placeholder="https://" /></span
-          ><el-button
-            size="small"
-            class="ml_10"
-            type="primary"
-            @click="handleSelectLink"
-            >选择链接</el-button
-          >
+              placeholder="https://"
+            />
+            <el-button size="small" type="primary" @click="handleSelectLink"
+              >选择链接</el-button
+            >
+          </div>
         </div>
-        <div>
-          <span>背景色：</span><el-input v-model="selected.bgColor" />
-          <el-color-picker v-if="selected.bgColor" v-model="selected.bgColor" />
+        <div class="modal-form-item">
+          <span class="modal-label">背景色：</span>
+          <div class="modal-color-field">
+            <el-input v-model="selected.bgColor" />
+            <el-color-picker v-if="selected.bgColor" v-model="selected.bgColor" />
+          </div>
         </div>
       </div>
+      <template #footer>
+        <el-button @click="handleCancelModal1">取消</el-button>
+        <el-button type="primary" @click="handleConfirmModal1">确定</el-button>
+      </template>
     </el-dialog>
     <!-- 选择商品。链接 -->
     <liliDialog
@@ -210,6 +226,7 @@
         @callback="callbackSelected"
         :is-component="true"
         :initialize="picModelFlag"
+        :max-select="1"
         ref="ossManage"
       />
     </el-dialog>
@@ -233,14 +250,19 @@ export default {
       msgRight: this.data.options.contentRight, // 右侧数据
       showModal: false, // modal显隐
       showModal1: false, // modal显隐
-      selected: {}, // 已选数据
+      selected: {}, // 弹窗编辑草稿
+      editTarget: null, // 确定后写回的原数据
       picModelFlag: false, // 图片选择
     };
   },
   methods: {
+    cloneItem(item) {
+      return JSON.parse(JSON.stringify(item || {}));
+    },
     // 编辑
     handleSelectModel(item, type) {
-      this.selected = item;
+      this.editTarget = item;
+      this.selected = this.cloneItem(item);
       if (type) {
         this.showModal1 = true;
       } else {
@@ -282,8 +304,35 @@ export default {
     // 选择图片回调
     callbackSelected(val) {
       this.picModelFlag = false;
+      if (!val?.url) return;
       this.selected.img = val.url;
     },
+    handleCancelModal() {
+      this.editTarget = null;
+      this.selected = {};
+      this.showModal = false;
+    },
+    handleConfirmModal() {
+      if (this.editTarget) {
+        Object.assign(this.editTarget, this.cloneItem(this.selected));
+      }
+      this.editTarget = null;
+      this.selected = {};
+      this.showModal = false;
+    },
+    handleCancelModal1() {
+      this.editTarget = null;
+      this.selected = {};
+      this.showModal1 = false;
+    },
+    handleConfirmModal1() {
+      if (this.editTarget) {
+        Object.assign(this.editTarget, this.cloneItem(this.selected));
+      }
+      this.editTarget = null;
+      this.selected = {};
+      this.showModal1 = false;
+    },
   },
 };
 </script>
@@ -292,6 +341,8 @@ export default {
 .recommend {
   display: flex;
   justify-content: space-between;
+  width: 100%;
+  box-sizing: border-box;
   .recommend-left {
     width: 595px;
     .content-left {
@@ -349,55 +400,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;
@@ -405,9 +479,6 @@ export default {
           }
         }
       }
-      > div:nth-child(n + 1) {
-        border-right: 1px solid #eee;
-      }
     }
   }
 
@@ -429,7 +500,78 @@ export default {
 }
 
 .modal-top-advert {
-  align-items: start;
-  padding: 0 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  padding: 0 20px;
+  width: 100%;
+  box-sizing: border-box;
+
+  .modal-form-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 16px;
+
+    .modal-label {
+      flex-shrink: 0;
+      width: 100px;
+      text-align: right;
+      padding-right: 12px;
+    }
+
+    .el-input {
+      flex: 1;
+    }
+  }
+
+  .modal-form-preview {
+    justify-content: center;
+    margin-bottom: 8px;
+  }
+
+  .modal-form-link {
+    align-items: flex-start;
+
+    .modal-label {
+      padding-top: 8px;
+    }
+
+    .modal-link-field {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      min-width: 0;
+
+      .outsideUrl {
+        flex: 1;
+        min-width: 0;
+      }
+    }
+  }
+
+  .modal-form-actions {
+    padding-left: 112px;
+    gap: 10px;
+  }
+
+  .modal-color-field {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    .el-input {
+      flex: 1;
+    }
+  }
+
+  .tips {
+    padding-left: 112px;
+    margin-bottom: 16px;
+    color: #999;
+    font-size: 12px;
+  }
 }
 </style>

seller/src/views/shop/modelList/seckill.vue

@@ -1,32 +1,34 @@
 <template>
-  <div class="seckill">
+  <div class="seckill-wrap">
     <div class="desc">秒杀商品需要在促销活动中添加商品，有商品时才会在首页展示</div>
-    <div class="aside">
-      <div class="title">{{ actName }}</div>
-      <div class="hour">
-        <span>{{ currHour }}:00</span>点场 倒计时
+    <div class="seckill">
+      <div class="aside">
+        <div class="title">{{ actName }}</div>
+        <div class="time-block">
+          <div class="hour">
+            <span>{{ currHour }}:00</span>点场 倒计时
+          </div>
+          <div class="count-down" v-if="actStatus === 1">
+            <span>{{ hours }}</span>
+            <span>{{ minutes }}</span>
+            <span>{{ seconds }}</span>
+          </div>
+          <div class="act-status" v-else>
+            {{ actStatus == 0 ? "未开始" : "已结束" }}
+          </div>
+        </div>
       </div>
-      <div class="count-down" v-if="actStatus === 1">
-        <span>{{ hours }}</span
-        ><span>{{ minutes }}</span
-        ><span>{{ seconds }}</span>
-      </div>
-      <div class="act-status" v-else>
-        {{ actStatus == 0 ? "未开始" : "已结束" }}
-      </div>
-    </div>
-    <div class="section">
-      <div ref="swiperEl" class="swiper">
-        <div class="swiper-wrapper">
+      <div class="section">
+        <div class="seckill-list">
           <div
-            class="swiper-slide"
+            class="seckill-item"
             v-for="(item, index) in options.list[0].goodsList"
             :key="index"
           >
             <div class="content">
               <img :src="item.img" width="140" height="140" :alt="item.name" />
               <div class="ellipsis">{{ item.name }}</div>
-              <div>
+              <div class="price-row">
                 <span>{{ $filters.unitPrice(item.price, "￥") }}</span>
                 <span>{{ $filters.unitPrice(item.originalPrice, "￥") }}</span>
               </div>
@@ -38,8 +40,6 @@
   </div>
 </template>
 <script>
-import Swiper from "swiper";
-import "swiper/swiper-bundle.css";
 export default {
   props: {
     data: {
@@ -49,26 +49,21 @@ export default {
   },
   data() {
     return {
-      options: this.data.options, // 当前数据
-      actStatus: 0, // 0 未开始  1 进行中   2 已结束
+      options: this.data.options,
+      actStatus: 0,
       actName: "限时秒杀",
-      currHour: "00", // 当前秒杀场
-      diffSeconds: 0, // 倒地时
-      hours: "00", // 小时
-      minutes: "00", // 分钟
-      seconds: "00", // 秒
-      interval: undefined, // 定时器
-      swiperInstance: null,
+      currHour: "00",
+      diffSeconds: 0,
+      hours: "00",
+      minutes: "00",
+      seconds: "00",
+      interval: undefined,
     };
   },
   watch: {
     diffSeconds(val) {
       const hours = Math.floor(val / 3600);
-      // 当前秒数 / 60，向下取整
-      // 获取到所有分钟数 3600 / 60 = 60分钟
-      // 对60取模，超过小时数的分钟数
       const minutes = Math.floor(val / 60) % 60;
-      // 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
       const seconds = val % 60;
       this.hours = hours < 10 ? "0" + hours : hours;
       this.minutes = minutes < 10 ? "0" + minutes : minutes;
@@ -85,45 +80,20 @@ export default {
   },
   mounted() {
     this.countDown(this.options.list);
-    this.initSwiper();
   },
   beforeUnmount() {
     clearInterval(this.interval);
-    if (this.swiperInstance) {
-      this.swiperInstance.destroy(true, true);
-      this.swiperInstance = null;
-    }
   },
   methods: {
-    initSwiper() {
-      if (!this.$refs.swiperEl) {
-        return;
-      }
-      this.swiperInstance = new Swiper(this.$refs.swiperEl, {
-        slidesPerView: 5,
-        autoplay: true,
-        loop: true,
-      });
-    },
-    // 倒计时
     countDown(list) {
-      /**
-       * 默认倒计时两小时
-       * 如果没有开始，则显示未开始
-       * 进行中显示倒计时
-       * 今天的秒杀结束则显示已结束
-       */
-      let nowHour = new Date().getHours();
+      const nowHour = new Date().getHours();
       if (nowHour < Number(list[0].time)) {
-        // 活动未开始
         this.currHour = list[0].time;
         this.actStatus = 0;
       } else if (nowHour >= Number(list[list.length - 1].time + 2)) {
-        // 活动已结束
         this.actStatus = 2;
         this.currHour = list[list.length - 1].time;
       } else {
-        // 活动进行中
         this.actStatus = 1;
         for (let i = 0; i < list.length; i++) {
           if (nowHour == Number(list[i].time)) {
@@ -136,16 +106,13 @@ export default {
             this.currHour = list[i].time;
           }
         }
-        // 当前0点时间戳
-        let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
-        // 活动倒计时
+        const zeroTime = new Date(new Date().toLocaleDateString()).getTime();
         this.diffSeconds = Math.floor(
           (zeroTime +
             3600 * 1000 * (this.currHour + 2) -
             new Date().getTime()) /
             1000
         );
-        const that = this;
         this.interval = setInterval(() => {
           this.diffSeconds--;
         }, 1000);
@@ -155,140 +122,172 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.seckill-wrap {
+  width: 100%;
+}
+
+.desc {
+  color: $theme_color;
+  font-size: 12px;
+  line-height: 1.5;
+  padding: 0 0 8px;
+}
+
 .seckill {
   width: 100%;
   height: 260px;
   display: flex;
-  position: relative;
-  .desc{
-    position: absolute;
-    color: $theme_color;
-    left: 200px;
-    top: 5px;
+  background-color: #fff;
+  box-sizing: border-box;
+}
+
+.aside {
+  flex-shrink: 0;
+  overflow: hidden;
+  width: 190px;
+  height: 100%;
+  color: #fff;
+  background-image: url("../../../assets/seckillBg.png");
+  background-repeat: no-repeat;
+  background-position: center top;
+
+  .title {
+    width: 100%;
+    text-align: center;
+    font-size: 28px;
+    margin-top: 31px;
   }
-  .aside {
-    overflow: hidden;
-    width: 190px;
-    height: 100%;
-    color: #fff;
-    background-image: url("../../../assets/seckillBg.png");
 
-    .title {
-      width: 100%;
-      text-align: center;
-      font-size: 28px;
-      margin-top: 31px;
+  .time-block {
+    margin-top: 78px;
+    text-align: center;
+  }
+
+  .hour {
+    text-align: center;
+
+    span {
+      font-size: 18px;
     }
+  }
 
-    .hour {
-      margin-top: 90px;
+  .count-down {
+    margin-top: 10px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    > span {
+      position: relative;
+      width: 30px;
+      height: 30px;
+      line-height: 30px;
       text-align: center;
-      span {
+      background-color: #2f3430;
+      margin-right: 20px;
+      color: white;
+      font-size: 20px;
+
+      &::after {
+        content: ":";
+        position: absolute;
+        right: -20px;
+        font-weight: bolder;
         font-size: 18px;
+        width: 20px;
+        top: 0;
       }
     }
 
-    .count-down {
-      margin: 10px 0 0 30px;
-      > span {
-        position: relative;
-        float: left;
-        width: 30px;
-        height: 30px;
-        text-align: center;
-        background-color: #2f3430;
-        margin-right: 20px;
-        color: white;
-        font-size: 20px;
-        &::after {
-          content: ":";
-          display: block;
-          position: absolute;
-          right: -20px;
-          font-weight: bolder;
-          font-size: 18px;
-          width: 20px;
-          height: 100%;
-          top: 0;
-        }
-      }
-      > span:last-child::after {
+    > span:last-child {
+      margin-right: 0;
+
+      &::after {
         content: "";
       }
     }
-
-    .act-status {
-      margin: 10px 0 0 65px;
-      font-size: 20px;
-    }
   }
 
-  .section {
-    width: 1000px;
-    // background: #efefef;
-    .swiper-slide {
-      height: 260px;
-      .content {
-        width: 200px;
+  .act-status {
+    margin-top: 10px;
+    font-size: 20px;
+  }
+}
+
+.section {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  background-color: #fff;
+
+  .seckill-list {
+    display: flex;
+    height: 100%;
+    min-width: min-content;
+  }
+
+  .seckill-item {
+    flex: 0 0 200px;
+    height: 100%;
+
+    .content {
+      width: 200px;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      position: relative;
+      box-sizing: border-box;
+
+      &::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        right: 0;
+        width: 1px;
+        height: 200px;
+        transform: translateY(-50%);
+        background: linear-gradient(180deg, white, #eeeeee, white);
+      }
+
+      img {
+        margin-top: 24px;
+      }
+
+      .ellipsis {
+        width: 160px;
+        margin-top: 10px;
+        font-size: 12px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .price-row {
+        width: 160px;
+        margin-top: 10px;
+        border: 1px solid $theme_color;
+        line-height: 24px;
         display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        position: relative;
-        &::after {
-          content: "";
-          display: block;
-          position: absolute;
-          top: 50%;
-          right: 0;
-          width: 1px;
-          height: 200px;
-          transform: translateY(-50%);
-          background: linear-gradient(180deg, white, #eeeeee, white);
-        }
-        img {
-          margin-top: 30px;
-        }
-        > div {
-          width: 160px;
-          margin-top: 10px;
-          font-size: 12px;
-          position: relative;
-        }
-        > div:nth-of-type(1):hover {
-          color: $theme_color;
-          cursor: pointer;
-        }
-        > div:nth-of-type(2) {
-          border: 1px solid $theme_color;
-          line-height: 24px;
-          display: flex;
-          text-align: center;
+        text-align: center;
+        overflow: hidden;
 
-          span:nth-child(1) {
-            color: #fff;
-            font-size: 16px;
-            width: 92px;
-            background-color: $theme_color;
-            position: relative;
-            &::before {
-              content: " ";
-              width: 0;
-              height: 0;
-              border-color: transparent white transparent transparent;
-              border-style: solid;
-              border-width: 24px 8px 0 0;
-              position: absolute;
-              top: 0;
-              left: 84px;
-            }
-          }
+        span:nth-child(1) {
+          color: #fff;
+          font-size: 16px;
+          flex: 1;
+          min-width: 0;
+          background-color: $theme_color;
+        }
 
-          span:nth-child(2) {
-            color: #999;
-            width: 66px;
-            text-decoration: line-through;
-          }
+        span:nth-child(2) {
+          color: #999;
+          width: 66px;
+          flex-shrink: 0;
+          text-decoration: line-through;
         }
       }
     }

seller/src/views/shop/modelList/setup-box.scss

@@ -16,7 +16,8 @@
     z-index: 99;
     width: 100%;
     height: 100%;
-    .ivu-btn{
+    .ivu-btn,
+    .el-button{
         float: right;
         margin-right: 5px;
         margin-top: 5px;
@@ -46,17 +47,4 @@
     tbody>tr:hover{
         background-color: aliceblue;
     }
-}
-
-.modal-top-advert{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    >*{
-        margin-bottom: 10px;
-    }
-    .ivu-input-wrapper{
-        width: 200px;
-    }
 }

seller/src/views/shop/ossManage.scss

@@ -161,6 +161,9 @@
       box-sizing: border-box;
       margin: 0 13px 8px;
       position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
       .card {
         width: 120px;
         height: 120px;
@@ -172,12 +175,19 @@
         img {
           width: 100%;
           height: 100%;
+          object-fit: cover;
         }
-        .checkbox {
+        .card-checkbox {
           position: absolute;
-          top: 10px;
-          right: 10px;
+          top: 8px;
+          right: 8px;
           z-index: 1000;
+          height: auto;
+          margin: 0;
+
+          :deep(.el-checkbox__label) {
+            display: none;
+          }
         }
         .preview {
           width: 100%;
@@ -226,35 +236,6 @@
     display: flex;
     flex-direction: row-reverse;
   }
-  /* Checkbox默认的样式 */
-  .check-box {
-    .ivu-checkbox {
-      position: absolute;
-      right: 10px;
-      top: 10px;
-      z-index: 100;
-    }
-  }
-  /* 覆盖iView默认的Checkbox样式 */
-  .ivu-checkbox-wrapper {
-    /*font-size: 16px; !* 修改字体大小 *!*/
-    /*color: #495060; !* 修改文本颜色 *!*/
-    /* 添加其他需要的样式 */
-  }
-  .ivu-checkbox-inner {
-    /*width: 20px; !* 修改选框大小 *!*/
-    /*height: 20px;*/
-    /*border-color: #dcdee2; !* 修改边框颜色 *!*/
-    /* 添加其他需要的样式 */
-  }
-  /* 当Checkbox被选中时的样式 */
-  .ivu-checkbox-checked .ivu-checkbox-inner {
-    /*background-color: #2db7f5; !* 修改选中时的背景颜色 *!*/
-  }
-  /* 当Checkbox不可用时的样式 */
-  .ivu-checkbox-disabled .ivu-checkbox-inner {
-    /*background-color: #e9e9e9; !* 修改禁用状态下的背景颜色 *!*/
-  }
 
   .demo-tree-render .ivu-tree-title{
     width: 94%;

seller/src/views/shop/ossManages.vue

@@ -94,6 +94,22 @@
                 <el-form-item>
                   <el-button class="search-btn" type="primary" @click="handleSearch">搜索</el-button>
                 </el-form-item>
+                <el-form-item v-if="canUploadImages">
+                  <el-upload
+                    ref="up"
+                    :action="commonUrl + '/common/common/upload/file'"
+                    :data="uploadData"
+                    :headers="accessToken"
+                    :before-upload="beforeUpload"
+                    :on-error="handleError"
+                    :on-success="handleSuccess"
+                    :show-file-list="false"
+                    multiple
+                    style="display: inline-block"
+                  >
+                    <el-button>上传图片</el-button>
+                  </el-upload>
+                </el-form-item>
               </el-form>
             </el-row>
           </div>
@@ -136,25 +152,10 @@
             </el-col>
             <el-col :span="canShowGroups ? (isComponent ? 19 : 20) : 24">
               <div class="pic-list">
-                <div>
+                <div v-if="!isComponent">
                   <div class="oss-operation padding-row" style="display: flex; flex-direction: row-reverse">
                     <div>
-                      <el-upload
-                        v-if="canUploadImages"
-                        ref="up"
-                        :action="commonUrl + '/common/common/upload/file'"
-                        :data="uploadData"
-                        :headers="accessToken"
-                        :before-upload="beforeUpload"
-                        :on-error="handleError"
-                        :on-success="handleSuccess"
-                        :show-file-list="false"
-                        multiple
-                        style="display: inline-block"
-                      >
-                        <el-button>上传图片</el-button>
-                      </el-upload>
-                      <el-button v-if="!isComponent && showType == 'list'" @click="removeAll">批量删除</el-button>
+                      <el-button v-if="showType == 'list'" @click="removeAll">批量删除</el-button>
                     </div>
                   </div>
                 </div>
@@ -162,37 +163,39 @@
                   <el-checkbox-group v-model="selectedOss" @change="selectOssChange">
                     <div class="img-box">
                       <div v-for="(item, index) in data" :key="index" class="img-item">
-                        <el-checkbox :value="item.id + ',' + item.url" class="check-box">
-                          <div
-                            class="card"
-                            @mouseenter="onMouseOver(item, index)"
-                            @mouseleave="onMouseOut(item, index)"
-                          >
-                            <img :src="item.url" alt="" />
-                            <div v-if="item.isShowPreview" class="preview">
-                              <div @click.prevent="download(item)">
-                                <el-tooltip content="下载" placement="top">
-                                  <el-icon :size="18"><Download /></el-icon>
-                                </el-tooltip>
-                              </div>
-                              <div @click.prevent="remove(item)">
-                                <el-tooltip content="删除" placement="top">
-                                  <el-icon :size="18"><Delete /></el-icon>
-                                </el-tooltip>
-                              </div>
-                              <div @click.prevent="showPic(item)">
-                                <el-tooltip content="预览" placement="top">
-                                  <el-icon :size="22"><View /></el-icon>
-                                </el-tooltip>
-                              </div>
+                        <div
+                          class="card"
+                          :class="{ 'custom-checkbox-card-checked': selectedOss.includes(item.id + ',' + item.url) }"
+                          @mouseenter="onMouseOver(item, index)"
+                          @mouseleave="onMouseOut(item, index)"
+                        >
+                          <el-checkbox
+                            :value="item.id + ',' + item.url"
+                            class="card-checkbox"
+                            @click.stop
+                          />
+                          <img :src="item.url" alt="" />
+                          <div v-if="item.isShowPreview" class="preview">
+                            <div @click.prevent="download(item)">
+                              <el-tooltip content="下载" placement="top">
+                                <el-icon :size="18"><Download /></el-icon>
+                              </el-tooltip>
+                            </div>
+                            <div @click.prevent="remove(item)">
+                              <el-tooltip content="删除" placement="top">
+                                <el-icon :size="18"><Delete /></el-icon>
+                              </el-tooltip>
+                            </div>
+                            <div @click.prevent="showPic(item)">
+                              <el-tooltip content="预览" placement="top">
+                                <el-icon :size="22"><View /></el-icon>
+                              </el-tooltip>
                             </div>
                           </div>
-                        </el-checkbox>
-                        <div>
-                          <el-tooltip :content="item.name" placement="bottom">
-                            <div class="text">{{ item.name }}</div>
-                          </el-tooltip>
                         </div>
+                        <el-tooltip :content="item.name" placement="bottom">
+                          <div class="text">{{ item.name }}</div>
+                        </el-tooltip>
                       </div>
                     </div>
                   </el-checkbox-group>
@@ -533,7 +536,7 @@ export default {
         name: "",
         fileKey: "",
         fileType: "",
-        userEnums: "MANAGER",
+        userEnums: "STORE",
         pageNumber: 1, // 当前页数
         pageSize: 20, // 页面大小
         sort: "createTime", // 默认排序字段
@@ -972,7 +975,7 @@ export default {
       return this.activeRoleTab === "MANAGER";
     },
     canUploadImages() {
-      return this.activeRoleTab === "MANAGER";
+      return this.activeRoleTab === "MANAGER" || this.activeRoleTab === "STORE";
     },
     uploadData() {
       return {
@@ -985,10 +988,6 @@ export default {
 
   methods: {
     beforeUpload(file) {
-      if (!this.canUploadImages) {
-        this.$Message.warning("仅管理员模块支持上传图片");
-        return false;
-      }
       const maxSize = 20480 * 1024;
       if (file && file.size > maxSize) {
         this.handleMaxSize(file);
@@ -1408,10 +1407,6 @@ export default {
     },
     // 上传成功回调
     handleSuccess(res, file) {
-      if (!this.canUploadImages) {
-        this.$Message.warning("仅管理员模块支持上传图片");
-        return;
-      }
       if (res.success) {
         this.$Message.success("上传文件 " + file.name + " 成功");
         this.getDataList();

seller/src/views/shop/renovation.vue

@@ -237,6 +237,7 @@ export default {
 .show-content {
   flex: 1;
   min-width: 0;
+  overflow-x: auto;
 }
 .ghost {
   background: #fff;

seller/src/views/shop/system/clerk/clerkManage.vue

@@ -118,7 +118,7 @@
           </el-select>
         </el-form-item>
         <el-form-item label="所属部门">
-          <department-tree-choose @change="handleEditSelectDepTree" ref="depTree"></department-tree-choose>
+          <department-tree-choose @on-change="handleEditSelectDepTree" ref="editDepTree"></department-tree-choose>
         </el-form-item>
 
       </el-form>
@@ -166,7 +166,7 @@
           </el-select>
         </el-form-item>
         <el-form-item label="所属部门" v-if="oldMember || newMember">
-          <department-tree-choose @change="handleSelectDepTree" ref="depTree"></department-tree-choose>
+          <department-tree-choose @on-change="handleSelectDepTree" ref="addDepTree"></department-tree-choose>
         </el-form-item>
       </el-form>
 
@@ -498,35 +498,36 @@ export default {
       this.userModalVisible = true;
       this.$nextTick(() => {
         this.$refs.addForm?.resetFields();
-        this.$refs.depTree?.clearSelect?.();
+        this.$refs.addDepTree?.clearSelect?.();
       });
     },
     // 编辑用户
     edit(v) {
-
       getClerk(v.id).then(res => {
-
-        this.mobile = res.result.mobile
-        this.clerkName = res.result.clerkName
-        this.editForm.isSuper = 0
-        this.editForm.id = res.result.id
-        if(res.result.isSuper){
-          this.editForm.isSuper = 1
+        if (!res.success || !res.result) {
+          return;
         }
-        this.editForm.departmentId = res.result.departmentId
-        this.$refs.depTree.setData(res.result.departmentId, res.result.departmentTitle);
-        let selectRolesId = [];
+        this.mobile = res.result.mobile;
+        this.clerkName = res.result.clerkName;
+        this.editForm.isSuper = res.result.isSuper ? 1 : 0;
+        this.editForm.id = res.result.id;
+        this.editForm.departmentId = res.result.departmentId;
+        const selectRolesId = [];
         if (res.result.roles) {
           res.result.roles.forEach(function (e) {
             selectRolesId.push(e.id);
           });
         }
         this.editForm.roles = selectRolesId;
-
         this.modalTitle = "修改店员";
         this.userEditModalVisible = true;
-      })
-
+        this.$nextTick(() => {
+          this.$refs.editDepTree?.setData(
+            res.result.departmentId,
+            res.result.departmentTitle
+          );
+        });
+      });
     },
     // 启用
     enable(v) {

seller/src/views/shop/system/department/storeDepartmentManage.vue

@@ -24,12 +24,11 @@
             <el-tree
               ref="treeRef"
               :data="data"
-              lazy
-              :load="loadNode"
               :props="treeProps"
               node-key="id"
               show-checkbox
               highlight-current
+              default-expand-all
               :check-strictly="!strict"
               :current-node-key="currentNodeKey"
               @node-click="onNodeClick"
@@ -109,7 +108,6 @@
 <script>
 import {
   initDepartment,
-  loadDepartment,
   addDepartment,
   editDepartment,
   deleteDepartment,
@@ -176,23 +174,20 @@ export default {
       initDepartment().then((res) => {
         this.loading = false;
         if (res.success) {
-          this.data = this.bubbleSort(res.result);
+          const list = Array.isArray(res.result) ? res.result : [];
+          this.data = this.bubbleSort(this.normalizeDepartmentTree(list));
         }
       });
     },
-    loadNode(node, resolve) {
-      const id = node.data?.id;
-      if (id === undefined || id === null) {
-        resolve([]);
-        return;
-      }
-      loadDepartment(id).then((res) => {
-        this.loadingEdit = false;
-        if (res.success) {
-          resolve(res.result || []);
+    normalizeDepartmentTree(list) {
+      return list.map((item) => {
+        const node = { ...item };
+        if (Array.isArray(node.children) && node.children.length > 0) {
+          node.children = this.normalizeDepartmentTree(node.children);
         } else {
-          resolve([]);
+          delete node.children;
         }
+        return node;
       });
     },
     onNodeClick(data) {
@@ -235,6 +230,7 @@ export default {
       this.selectCount = checkedNodes.length;
     },
     bubbleSort(array) {
+      if (!Array.isArray(array)) return [];
       const len = array.length;
       if (len < 2) return array;
       for (let i = 0; i < len; i++) {

seller/src/views/shop/wap/advertising.vue

@@ -2,9 +2,9 @@
   <div class="model-view">
     <div class="model-view-content">
       <div class="content">
-        <div class="wap-title">首页</div>
+        <div class="wap-title">??</div>
         <div class="draggable">
-          <!-- 全屏 -->
+          <!-- ?? -->
           <div class="full-shadow" v-if="type == 'full'">
             <img :src="advertising[0].img" alt="" />
           </div>
@@ -14,7 +14,7 @@
     </div>
     <div class="model-config">
       <div class="decorate">
-        <div class="decorate-title">全屏广告</div>
+        <div class="decorate-title">????</div>
         <div class="decorate-list">
           <div
             class="decorate-item"
@@ -22,12 +22,12 @@
             :key="index"
           >
             <div class="decorate-item-title">
-              <div>设置</div>
+              <div>??</div>
             </div>
             <div class="decorate-item-box">
-              <!-- 选择照片 -->
+              <!-- ???? -->
               <div class="decorate-view">
-                <div class="decorate-view-title">选择图片</div>
+                <div class="decorate-view-title">????</div>
                 <div>
                   <img class="show-image" :src="item.img" alt />
                   <input
@@ -38,7 +38,7 @@
                     :id="'files' + index"
                   />
                   <div class="tips">
-                    建议尺寸
+                    ????
                     <span>{{ item.size }}</span>
                   </div>
                 </div>
@@ -48,41 +48,41 @@
                     @click="handleClickFile(item, index)"
                     plain
                     type="primary"
-                    >选择照片</el-button
+                    >????</el-button
                   >
                 </div>
               </div>
 
-              <!-- 选择连接 -->
+              <!-- ???? -->
               <div class="decorate-view">
-                <div class="decorate-view-title">选择图片</div>
+                <div class="decorate-view-title">????</div>
                 <div>
                   <el-button
                     plain
                     type="primary"
                     size="small"
                     @click="clickLink(item)"
-                    >选择链接</el-button
+                    >????</el-button
                   >
                 </div>
               </div>
 
               <div class="decorate-view">
-                <div class="decorate-view-title">当前页面状态</div>
+                <div class="decorate-view-title">??????</div>
                 <div>
                   <el-tag :type="result.pageShow === 'OPEN' ? 'success' : 'danger'">
-                    {{ result.pageShow === "OPEN" ? "开启" : "关闭" }}
+                    {{ result.pageShow === "OPEN" ? "??" : "??" }}
                   </el-tag>
                 </div>
               </div>
             </div>
           </div>
         </div>
-        <!-- <el-button type="primary" @click="addDecorate()" ghost>添加</el-button> -->
+        <!-- <el-button type="primary" @click="addDecorate()" ghost>??</el-button> -->
         <liliDialog ref="liliDialog"    @selectedLink="selectedLink" :types="linkType"></liliDialog>
       </div>
       <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
-         <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" ref="ossManage" />
+         <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" :max-select="1" ref="ossManage" />
       </el-dialog>
     </div>
   </div>
@@ -97,10 +97,10 @@ export default {
   data() {
     return {
       result:"",
-      picModelFlag: false, //图片选择器
-      type: "full", // 是否全屏
+      picModelFlag: false, //?????
+      type: "full", // ????
 
-      //全屏广告
+      //????
       advertising: [
          {
           img:
@@ -109,7 +109,7 @@ export default {
         },
       ],
       selectedLinks: {},
-      linkType: "", // 选择类型
+      linkType: "", // ????
     };
   },
    watch: {
@@ -144,17 +144,17 @@ export default {
         this.result = res.result
       });
     },
-    // 点击链接
+    // ????
     clickLink(item) {
       this.$refs.liliDialog.open('link')
     },
-    // 回调选择的链接
+    // ???????
     selectedLink(val) {
       this.selectedLinks.url = val;
 
       this.advertising[0].config = val;
     },
-    // 点击选择照片
+    // ??????
     handleClickFile() {
       this.picModelFlag = true;
       this.$nextTick(() => {
@@ -162,9 +162,10 @@ export default {
           this.$refs.ossManage.selectImage = true;
         }
       });
-    }, // 图片选择器回显
+    }, // ???????
     callbackSelected(val) {
       this.picModelFlag = false;
+      if (!val?.url) return;
       this.advertising[0].img = val.url;
     }
   },

seller/src/views/shop/wap/alertAdvertising.vue

@@ -85,7 +85,7 @@
         ></liliDialog>
       </div>
       <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
-      <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" ref="ossManage" />
+      <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" :max-select="1" ref="ossManage" />
     </el-dialog>
     </div>
   </div>
@@ -156,6 +156,7 @@ export default {
     // 图片选择器回显
     callbackSelected(val) {
       this.picModelFlag = false;
+      if (!val?.url) return;
       this.advertising[0].img = val.url;
     },
     // 点击选择图片

seller/src/views/shop/wap/decorate.vue

@@ -498,17 +498,29 @@
       @selectedGoodsData="selectedGoodsData"
     ></liliDialog>
 
-    <el-dialog width="800px" title="选择分类" v-model="enableSelectCategory" append-to-body destroy-on-close>
+    <el-dialog
+      width="800px"
+      title="选择分类"
+      v-model="enableSelectCategory"
+      append-to-body
+      destroy-on-close
+      :close-on-click-modal="false"
+      @close="handleCancelCategoryModal"
+    >
       <categoryTemplate
         v-if="enableSelectCategory"
-        @selected="confirmCategory"
+        @selected="onCategorySelected"
       />
+      <template #footer>
+        <el-button @click="handleCancelCategoryModal">取消</el-button>
+        <el-button type="primary" @click="handleConfirmCategoryModal">确定</el-button>
+      </template>
     </el-dialog>
 
     <hotzone ref="hotzone" @changeZone="changeZone"></hotzone>
 
     <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
-      <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" ref="ossManage" />
+      <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" :max-select="1" ref="ossManage" />
     </el-dialog>
   </div>
 </template>
@@ -542,6 +554,7 @@ export default {
       selectedLinks: "", // 已选链接
       modelList: "", // 装修列表
       enableSelectCategory: false, //商品是否绑定分类
+      pendingCategory: null, // 选择分类弹窗草稿
       goodsSelectedIndex: 0, //绑定商品分类的索引
     };
   },
@@ -553,7 +566,21 @@ export default {
   },
   props: ["res"],
   methods: {
-    // 选择分类
+    // 选择分类（弹窗内暂存，确定后写回）
+    onCategorySelected(val) {
+      this.pendingCategory = val;
+    },
+    handleCancelCategoryModal() {
+      this.pendingCategory = null;
+      this.enableSelectCategory = false;
+    },
+    handleConfirmCategoryModal() {
+      if (this.pendingCategory?.length) {
+        this.confirmCategory(this.pendingCategory);
+      }
+      this.pendingCategory = null;
+      this.enableSelectCategory = false;
+    },
     confirmCategory(val) {
       let data = {
         ...this.res.options.list[0].titleWay[this.goodsSelectedIndex],
@@ -687,6 +714,7 @@ export default {
     },
     // 绑定分类
     bindGoodsCategory(index, key) {
+      this.pendingCategory = null;
       this.enableSelectCategory = true;
       this.goodsSelectedIndex = index;
     },
@@ -771,6 +799,7 @@ export default {
     // 图片选择器回显
     callbackSelected(val) {
       this.picModelFlag = false;
+      if (!val?.url) return;
       this.selectedGoods.img = val.url;
     },
     // 点击选择图片

seller/src/views/shop/wap/index.vue

@@ -6,6 +6,8 @@
         <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 },
@@ -13,14 +15,14 @@
             ghostClass: '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>
@@ -35,29 +37,28 @@
             @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 +115,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() {
       // 先读缓存，如果缓存有值则读缓存。
@@ -256,12 +272,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,
       };
     },
     // 拖动

seller/src/views/sys/oss-manage/ossManage.vue

@@ -35,6 +35,15 @@
   }
 }
 
+.oss-select-footer {
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid #ededed;
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
 .tab-empty {
   padding: 48px 0;
   color: #999;
@@ -212,6 +221,10 @@
                     @current-change="pageChange"
                   />
                 </div>
+                <div v-if="isComponent && selectImage" class="oss-select-footer">
+                  <el-button @click="handleSelectCancel">取消</el-button>
+                  <el-button type="primary" @click="handleSelectConfirm">确定</el-button>
+                </div>
               </div>
             </el-col>
           </el-row>
@@ -490,6 +503,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    maxSelect: {
+      type: Number,
+      default: 0,
+    },
   },
   data() {
     return {
@@ -956,8 +973,8 @@ export default {
       if (val) this.selectImage = val
     },
     selectedOss(val) {
-      if (val && val.length) {
-        this.$emit("callback", {url: val[val.length - 1].split(',')[1]});
+      if (val && val.length && !(this.isComponent && this.selectImage)) {
+        this.$emit("callback", { url: val[val.length - 1].split(",")[1] });
       }
     },
     // 初始化监听 是否清空所选图片
@@ -1064,6 +1081,11 @@ export default {
     },
     // 复选框值改变时触发
     selectOssChange(e) {
+      if (this.maxSelect === 1 && e.length > 1) {
+        const last = e[e.length - 1];
+        this.selectedOss = [last];
+        e = [last];
+      }
       if (e) {
         this.selectList = e.map(item => {
           return {id: item.split(',')[0]}
@@ -1293,6 +1315,18 @@ export default {
     selectedParams(val) {
       this.$emit("callback", val);
     },
+    handleSelectConfirm() {
+      if (!this.selectedOss.length) {
+        this.$Message.warning("请选择图片");
+        return;
+      }
+      const last = this.selectedOss[this.selectedOss.length - 1];
+      this.$emit("callback", { url: last.split(",")[1] });
+    },
+    handleSelectCancel() {
+      this.selectedOss = [];
+      this.$emit("callback", { url: "" });
+    },
     // 初始化数据
     init() {
       this.accessToken = {