页面调整

peng

2025-10-29 6e19fb9ba681721c9e827f079a2b38c4e3fb1288

 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() {
@@ -195,8 +200,12 @@
          // 处理模板自定义标题字段的回显
          if (res.data.templateConstomizeTitles) {
            res.data.templateConstomizeTitles.forEach(item => {
              // 回显已有的值
              if (item.value !== undefined && item.value !== null) {
              // 回显已有的值 - 从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 {
                // 初始化表单值（如果没有默认值）
@@ -213,11 +222,29 @@
              // 查找选中图片的URL并保存
              const selectedImage = res.data.templateImgs.find(img => img.id === res.data.chooseImageId);
              if (selectedImage) {
                this.selectedImageUrl = selectedImage.imgUrl || '';
                // 修改这里：处理图片URL，只保存相对路径
                this.selectedImageUrl = this.processImageUrl(selectedImage.imgUrl || '');
              }
            } else {
              this.selectedImageId = res.data.templateImgs[0].id;
              this.selectedImageUrl = res.data.templateImgs[0].imgUrl || '';
              // 尝试从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 {
            // 如果没有模板图片，清空选中状态
@@ -239,6 +266,25 @@
      } finally {
        this.loading = false;
      }
    },

    // 根据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
@@ -282,7 +328,8 @@
      if (this.templateData && this.templateData.templateImgs) {
        const selectedImage = this.templateData.templateImgs.find(img => img.id === imageId);
        if (selectedImage) {
          this.selectedImageUrl = selectedImage.imgUrl || '';
          // 修改这里：处理图片URL，只保存相对路径
          this.selectedImageUrl = this.processImageUrl(selectedImage.imgUrl || '');
        } else {
          this.selectedImageUrl = '';
        }
@@ -326,7 +373,7 @@
        console.log('上传文件返回结果:', res); // 添加调试日志
        if (res.code === 200) {
          // 上传成功，设置表单值
          // 确保res.data是字符串类型
          // 修改这里：只保存文件名或相对路径，而不是完整路径
          let fileKey = '';
          if (typeof res.data === 'string') {
            fileKey = res.data;
@@ -342,7 +389,21 @@
            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("图片上传成功");
          
          // 强制更新视图以确保图片预览正确显示
@@ -373,7 +434,8 @@
        sn: this.orderSn,
        templateName: this.form.templateName,
        chooseImageId: this.selectedImageId,
        chooseImage: this.selectedImageUrl, // 添加选中图片URL
        // 修改这里：处理chooseImage，只保存相对路径
        chooseImage: this.processImageUrl(this.selectedImageUrl),
        templateForm: []
      };

@@ -384,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;
    },

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