修改模板

peng

2025-10-16 593b3453dbf8bb34546ad1b8c6f4b568d1d4ab39

 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>

@@ -152,25 +156,38 @@
          <!-- 外层容器：循环遍历 userCheckTemplates 集合 -->
          <div class="check-template-list">
              <div class="template-item" v-for="(item, index) in orderInfo.userCheckTemplates" :key="item.id">
                <!-- 2. 模板标题：仅第一个循环项显示 templateName（index===0 控制） -->
                <div class="div-item" > <!-- 关键：仅首项渲染 -->
                  <div class="div-item-left">商品模板：</div>
                  <div class="div-item-right">
                    {{ item.templateName || '无模板标题' }} <!-- 处理空值默认显示 -->
                  </div>
                </div>
                <!-- 4. 选择图片：渲染 chooseImg 字段（处理 null/空值） -->
                <div class="div-item">
                  <div class="div-item-left">模板图片：</div>
                  <div class="div-item-right">
                    <img
                      v-if="item.chooseImg"
                      :src="item.chooseImg"
                      alt="选择的图片"
                      class="selected-img"
                      style="max-width: 200px; max-height: 150px;"
                    >
                    <span v-else>无选择图片</span> <!-- 无图片时默认文本 -->
                  </div>
                </div>
            <!-- 1. 商品模板：每个循环项都显示 subName -->
            <div class="div-item">
              <div class="div-item-left">商品模板：</div>
              <div class="div-item-left">模板标题：</div>
              <div class="div-item-right">
                {{ item.subName || '无商品模板名称' }} <!-- 处理空值默认显示 -->
              </div>
            </div>

            <!-- 2. 模板标题：仅第一个循环项显示 templateName（index===0 控制） -->
            <div class="div-item" v-if="index === 0"> <!-- 关键：仅首项渲染 -->
              <div class="div-item-left">模板标题：</div>
              <div class="div-item-right">
                {{ item.templateName || '无模板标题' }} <!-- 处理空值默认显示 -->
              </div>
            </div>

            <!-- 3. 文本内容：判断 content 是「图片URL」还是「纯文本」 -->
            <div class="div-item">
              <div class="div-item-left">文本内容：</div>
              <div class="div-item-left">{{isUrl(item.content)? '图片：':'文本内容'}}</div>
              <div class="div-item-right">
                <!-- 正则判断：content 以 http/https 开头 → 渲染图片；否则渲染文本 -->
                <img
@@ -181,21 +198,6 @@
                  style="max-width: 200px; max-height: 150px;"
                >
                <span v-else>{{ item.content || '无文本内容' }}</span> <!-- 纯文本/空值处理 -->
              </div>
            </div>

            <!-- 4. 选择图片：渲染 chooseImg 字段（处理 null/空值） -->
            <div class="div-item">
              <div class="div-item-left">选择图片：</div>
              <div class="div-item-right">
                <img
                  v-if="item.chooseImg"
                  :src="item.chooseImg"
                  alt="选择的图片"
                  class="selected-img"
                  style="max-width: 200px; max-height: 150px;"
                >
                <span v-else>无选择图片</span> <!-- 无图片时默认文本 -->
              </div>
            </div>

@@ -640,6 +642,15 @@
    </Modal>

    <multipleMap ref="map" @callback="getAddress"></multipleMap>

    <!-- 添加模板编辑弹窗 -->
    <EditTemplateModal
      v-model="editTemplateModalVisible"
      :template-id="currentTemplateId"
      :order-sn="sn"
      @success="handleTemplateEditSuccess"
      @cancel="editTemplateModalVisible = false"
    />
  </div>
</template>

@@ -649,12 +660,13 @@
import * as RegExp from "@/libs/RegExp.js";

import multipleMap from "@/views/my-components/map/multiple-map";

import EditTemplateModal from "./editTemplateModal.vue";

export default {
  name: "orderDetail",
  components: {
    multipleMap,
    EditTemplateModal
  },
  data () {
    return {
@@ -1011,7 +1023,10 @@
        },
      ],
      orderPackage: [],
      packageTraceList: []
      packageTraceList: [],
      // 添加模板编辑弹窗相关数据
      editTemplateModalVisible: false,
      currentTemplateId: ""
    };
  },
  methods: {
@@ -1421,6 +1436,24 @@
      })
    },

    // 编辑模板信息
    editTemplateInfo(templateId, orderSn) {
      console.log("调用editTemplateInfo，参数:", {
        templateId: templateId,
        orderSn: orderSn
      });
      this.currentTemplateId = templateId;
      this.editTemplateModalVisible = true;
    },

    // 模板编辑成功回调
    handleTemplateEditSuccess() {
      this.editTemplateModalVisible = false;
      // 可以在这里刷新数据或提示用户
      this.$Message.success("模板信息已更新");
      // 刷新订单详情页面数据
      this.getDataDetail();
    }
  },
  mounted () {
    this.sn = this.$route.query.sn;