修改模板

peng

2025-10-16 593b3453dbf8bb34546ad1b8c6f4b568d1d4ab39

修改模板

 seller/src/api/common.js

@@ -39,3 +39,8 @@
    data: params
  })
}

// 获取文件预览地址
export const getFilePreviewUrl = (fileKey) => {
  return getRequest(`${commonUrl}/common/common/file/view/${fileKey}`);
};

 seller/src/main.js

@@ -71,6 +71,7 @@
Vue.prototype.removeStore = removeStore;
Vue.prototype.$mainColor = mainColor;
Vue.prototype.md5 = md5;
Vue.prototype.endpoint = "https://lmk-1356772813.cos.ap-chengdu.myqcloud.com"; // 添加endpoint配置
const PC_URL = BASE.PC_URL; // 跳转买家端地址 pc端
const WAP_URL = BASE.WAP_URL; // 跳转买家端地址 wap端
Vue.prototype.linkTo = function (goodsId, skuId) {

 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: []
      };


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

@@ -17,6 +17,10 @@
        <Button @click="toPrint" type="primary" ghost
          v-if="allowOperation.ship && logisticsType != 'SHUNFENG'">打印电子面单</Button>
        <Button @click="modifyRemark" type="primary">添加备注</Button>
        <!-- 将编辑模板按钮移到这里 -->
        <Button v-if="orderInfo.userCheckTemplates && orderInfo.userCheckTemplates.length > 0" 
                @click="editTemplateInfo(orderInfo.userCheckTemplates[0].templateId, sn)" 
                type="primary">编辑模板</Button>
      </div>
    </Card>

@@ -157,7 +161,6 @@
                  <div class="div-item-left">商品模板：</div>
                  <div class="div-item-right">
                    {{ item.templateName || '无模板标题' }} <!-- 处理空值默认显示 -->
                    <Button size="small" @click="editTemplateInfo(item.templateId, sn)" style="margin-left: 10px;">编辑</Button>
                  </div>
                </div>
                <!-- 4. 选择图片：渲染 chooseImg 字段（处理 null/空值） -->