修改模板

peng

2025-10-16 593b3453dbf8bb34546ad1b8c6f4b568d1d4ab39

 seller/src/views/order/order/editTemplateModal.vue

@@ -136,6 +136,7 @@
      },
      formValues: {},
      selectedImageId: null,
      selectedImageUrl: null, // 添加选中图片URL的存储
      currentUploadFieldId: null // 当前正在上传的字段ID
    };
  },
@@ -152,6 +153,10 @@
    },
    visible(val) {
      this.$emit("input", val);
      // 当弹窗关闭时，重置选中的图片URL
      if (!val) {
        this.selectedImageUrl = null;
      }
    }
  },
  methods: {
@@ -187,10 +192,11 @@
          // 初始化选中的图片ID
          this.selectedImageId = null;

          // 处理模板自定义标题字段的回显
          if (res.data.templateConstomizeTitles) {
            res.data.templateConstomizeTitles.forEach(item => {
              // 回显已有的值
              if (item.value) {
              if (item.value !== undefined && item.value !== null) {
                this.$set(this.formValues, item.id, item.value);
              } else {
                // 初始化表单值（如果没有默认值）
@@ -199,14 +205,24 @@
            });
          }

          // 如果有模板图片，设置默认选中的图片
          // 处理模板图片的回显
          if (res.data.templateImgs && res.data.templateImgs.length > 0) {
            // 如果已有选中的图片ID，则使用该ID，否则默认选中第一张
            if (res.data.chooseImageId) {
              this.selectedImageId = res.data.chooseImageId;
              // 查找选中图片的URL并保存
              const selectedImage = res.data.templateImgs.find(img => img.id === res.data.chooseImageId);
              if (selectedImage) {
                this.selectedImageUrl = selectedImage.imgUrl || '';
              }
            } else {
              this.selectedImageId = res.data.templateImgs[0].id;
              this.selectedImageUrl = res.data.templateImgs[0].imgUrl || '';
            }
          } else {
            // 如果没有模板图片，清空选中状态
            this.selectedImageId = null;
            this.selectedImageUrl = null;
          }

          console.log("处理后的数据:", {
@@ -239,6 +255,21 @@
        return fileKey;
      }

      // 如果有endpoint配置，使用endpoint拼接URL
      if (this.$root.endpoint) {
        // 确保fileKey不以/开头，endpoint不以/结尾
        const cleanEndpoint = this.$root.endpoint.replace(/\/$/, '');
        const cleanFileKey = fileKey.replace(/^\//, '');
        return `${cleanEndpoint}/${cleanFileKey}`;
      }

      // 如果是相对路径或其他格式，尝试通过getFilePreviewUrl获取完整URL
      try {
        return getFilePreviewUrl(fileKey);
      } catch (error) {
        console.warn('getFilePreviewUrl failed for fileKey:', fileKey, error);
      }

      // 否则返回fileKey，让组件自己处理
      return fileKey;
    },
@@ -246,6 +277,18 @@
    // 选择图片
    selectImage(imageId) {
      this.selectedImageId = imageId;
      
      // 查找选中图片的URL并保存
      if (this.templateData && this.templateData.templateImgs) {
        const selectedImage = this.templateData.templateImgs.find(img => img.id === imageId);
        if (selectedImage) {
          this.selectedImageUrl = selectedImage.imgUrl || '';
        } else {
          this.selectedImageUrl = '';
        }
      } else {
        this.selectedImageUrl = '';
      }
    },

    // 上传图片
@@ -301,6 +344,9 @@

          this.$set(this.formValues, fieldId, fileKey);
          this.$Message.success("图片上传成功");
          
          // 强制更新视图以确保图片预览正确显示
          this.$forceUpdate();
        } else {
          this.$Message.error(res.msg || "图片上传失败");
        }
@@ -327,6 +373,7 @@
        sn: this.orderSn,
        templateName: this.form.templateName,
        chooseImageId: this.selectedImageId,
        chooseImage: this.selectedImageUrl, // 添加选中图片URL
        templateForm: []
      };