页面调整

peng

2025-10-23 f09c736d261e1ad41d97b6e974a81bb014ef1265

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

@@ -86,12 +86,12 @@
      </div>

      <!-- 调试信息 -->
<!--      <details style="margin-top: 20px; border: 1px solid #eee; padding: 10px;">-->
<!--        <summary>调试信息</summary>-->
<!--        <pre>{{ JSON.stringify(templateData, null, 2) }}</pre>-->
<!--        <p>选中的图片ID: {{ selectedImageId }}</p>-->
<!--        <p>表单值: {{ JSON.stringify(formValues, null, 2) }}</p>-->
<!--      </details>-->
<!--      <details style="margin-top: 20px; border: 1px solid #eee; padding: 10px;">
        <summary>调试信息</summary>
        <pre>{{ JSON.stringify(templateData, null, 2) }}</pre>
        <p>选中的图片ID: {{ selectedImageId }}</p>
        <p>表单值: {{ JSON.stringify(formValues, null, 2) }}</p>
      </details>-->
    </Form>

    <div v-else>
@@ -124,6 +124,11 @@
    orderSn: {
      type: String,
      default: ""
    },
    // 添加userCheckTemplates属性
    userCheckTemplates: {
      type: Array,
      default: () => []
    }
  },
  data() {
@@ -136,6 +141,7 @@
      },
      formValues: {},
      selectedImageId: null,
      selectedImageUrl: null, // 添加选中图片URL的存储
      currentUploadFieldId: null // 当前正在上传的字段ID
    };
  },
@@ -152,6 +158,10 @@
    },
    visible(val) {
      this.$emit("input", val);
      // 当弹窗关闭时，重置选中的图片URL
      if (!val) {
        this.selectedImageUrl = null;
      }
    }
  },
  methods: {
@@ -187,10 +197,15 @@
          // 初始化选中的图片ID
          this.selectedImageId = null;

          // 处理模板自定义标题字段的回显
          if (res.data.templateConstomizeTitles) {
            res.data.templateConstomizeTitles.forEach(item => {
              // 回显已有的值
              if (item.value) {
              // 回显已有的值 - 从userCheckTemplates中获取对应subId的值
              const userTemplate = this.getUserTemplateBySubId(item.id);
              if (userTemplate && userTemplate.content !== undefined && userTemplate.content !== null) {
                this.$set(this.formValues, item.id, userTemplate.content);
              } else if (item.value !== undefined && item.value !== null) {
                // 如果没有找到userCheckTemplates中的值，则使用模板默认值
                this.$set(this.formValues, item.id, item.value);
              } else {
                // 初始化表单值（如果没有默认值）
@@ -199,14 +214,42 @@
            });
          }

          // 如果有模板图片，设置默认选中的图片
          // 处理模板图片的回显
          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) {
                // 修改这里：处理图片URL，只保存相对路径
                this.selectedImageUrl = this.processImageUrl(selectedImage.imgUrl || '');
              }
            } else {
              this.selectedImageId = res.data.templateImgs[0].id;
              // 尝试从userCheckTemplates中获取选中的图片
              const userTemplate = this.getUserTemplateByType('IMAGE');
              if (userTemplate && userTemplate.chooseImg) {
                // 查找对应的图片ID
                const matchedImage = res.data.templateImgs.find(img => img.imgUrl === userTemplate.chooseImg);
                if (matchedImage) {
                  this.selectedImageId = matchedImage.id;
                  // 修改这里：处理图片URL，只保存相对路径
                  this.selectedImageUrl = this.processImageUrl(matchedImage.imgUrl || '');
                } else {
                  this.selectedImageId = res.data.templateImgs[0].id;
                  // 修改这里：处理图片URL，只保存相对路径
                  this.selectedImageUrl = this.processImageUrl(res.data.templateImgs[0].imgUrl || '');
                }
              } else {
                this.selectedImageId = res.data.templateImgs[0].id;
                // 修改这里：处理图片URL，只保存相对路径
                this.selectedImageUrl = this.processImageUrl(res.data.templateImgs[0].imgUrl || '');
              }
            }
          } else {
            // 如果没有模板图片，清空选中状态
            this.selectedImageId = null;
            this.selectedImageUrl = null;
          }

          console.log("处理后的数据:", {
@@ -225,6 +268,25 @@
      }
    },

    // 根据subId获取userCheckTemplates中的对应项
    getUserTemplateBySubId(subId) {
      // 从props中获取userCheckTemplates数据
      if (this.userCheckTemplates && this.userCheckTemplates.length > 0) {
        // 查找subId匹配的项
        return this.userCheckTemplates.find(template => template.subId === subId);
      }
      return null;
    },

    // 根据类型获取userCheckTemplates中的对应项
    getUserTemplateByType(contentType) {
      if (this.userCheckTemplates && this.userCheckTemplates.length > 0) {
        // 查找contentType匹配的项
        return this.userCheckTemplates.find(template => template.contentType === contentType);
      }
      return null;
    },

    // 获取图片URL
    getImageUrl(fileKey) {
      // 确保fileKey是字符串类型
@@ -239,6 +301,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 +323,19 @@
    // 选择图片
    selectImage(imageId) {
      this.selectedImageId = imageId;
      
      // 查找选中图片的URL并保存
      if (this.templateData && this.templateData.templateImgs) {
        const selectedImage = this.templateData.templateImgs.find(img => img.id === imageId);
        if (selectedImage) {
          // 修改这里：处理图片URL，只保存相对路径
          this.selectedImageUrl = this.processImageUrl(selectedImage.imgUrl || '');
        } else {
          this.selectedImageUrl = '';
        }
      } else {
        this.selectedImageUrl = '';
      }
    },

    // 上传图片
@@ -283,7 +373,7 @@
        console.log('上传文件返回结果:', res); // 添加调试日志
        if (res.code === 200) {
          // 上传成功，设置表单值
          // 确保res.data是字符串类型
          // 修改这里：只保存文件名或相对路径，而不是完整路径
          let fileKey = '';
          if (typeof res.data === 'string') {
            fileKey = res.data;
@@ -299,8 +389,25 @@
            fileKey = String(fileKey);
          }

          // 修改这里：处理文件路径，只保留文件名部分
          // 如果是完整URL，则只取路径部分；否则保持原样
          if (fileKey.startsWith('http://') || fileKey.startsWith('https://')) {
            // 提取URL中的路径部分
            try {
              const urlObj = new URL(fileKey);
              fileKey = urlObj.pathname.substring(1); // 去掉开头的斜杠
            } catch (e) {
              // 如果URL解析失败，保持原样
              console.warn('Failed to parse URL:', fileKey);
            }
          }

          this.$set(this.formValues, fieldId, fileKey);
          
          this.$Message.success("图片上传成功");
          
          // 强制更新视图以确保图片预览正确显示
          this.$forceUpdate();
        } else {
          this.$Message.error(res.msg || "图片上传失败");
        }
@@ -327,6 +434,8 @@
        sn: this.orderSn,
        templateName: this.form.templateName,
        chooseImageId: this.selectedImageId,
        // 修改这里：处理chooseImage，只保存相对路径
        chooseImage: this.processImageUrl(this.selectedImageUrl),
        templateForm: []
      };

@@ -337,13 +446,35 @@
            id: item.id,
            templateTitle: item.templateTitle,
            contentType: item.contentType,
            value: this.formValues[item.id] || ""
            // 修改这里：处理value，只保存相对路径
            value: this.processImageUrl(this.formValues[item.id]) || ""
          });
        });
      }

      console.log("提交参数:", params);
      return params;
    },

    // 处理图片URL，只保留相对路径
    processImageUrl(url) {
      if (!url || typeof url !== 'string') {
        return url;
      }

      // 如果是完整URL，则只取路径部分；否则保持原样
      if (url.startsWith('http://') || url.startsWith('https://')) {
        try {
          const urlObj = new URL(url);
          return urlObj.pathname.substring(1); // 去掉开头的斜杠
        } catch (e) {
          // 如果URL解析失败，保持原样
          console.warn('Failed to parse URL:', url);
          return url;
        }
      }

      return url;
    },

    // 确定按钮
@@ -476,4 +607,4 @@
  border-color: #57a3f3;
  color: #57a3f3;
}
</style>
</style>