修改模板

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>

@@ -146,7 +150,63 @@
            }}
          </div>
        </div>

        </Col>
        <Col span="24">
          <!-- 外层容器：循环遍历 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-right">
                {{ item.subName || '无商品模板名称' }} <!-- 处理空值默认显示 -->
              </div>
            </div>

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

            <!-- 可选：循环项分隔线，优化视觉 -->
            <hr v-if="index !== orderInfo.userCheckTemplates.length - 1" style="margin: 15px 0; border: none; border-top: 1px solid #eee;">
          </div>
          </div>
        </Col>

      </Row>
    </Card>

@@ -527,7 +587,7 @@
      </div>
    </Modal>
    <!--订单分包裹发货-->
    <Modal v-model="groupShipModal" :loading="shipLoading" title="分包裹发快递" width="1000">
    <Modal v-model="groupShipModal" :loading="shipLoading" title="分包裹发快递" width="1300">
      <div>
        <Form ref="groupOrderDeliveryForm" :model="groupOrderDeliveryForm" :label-width="90" :rules="groupOrderDeliverFormValidate" style="position: relative">
          <FormItem label="物流公司" prop="logisticsId">
@@ -571,7 +631,7 @@
          </div>
        </template>
        <template slot="numSlot" slot-scope="{ row, index }">
          <InputNumber :min="0" :max="row.___num - row.deliverNumber" v-model="data[index].canNum">
          <InputNumber :min="0" :max="row.___num - row.deliverNumber - row.returnGoodsNumber" v-model="data[index].canNum">
          </InputNumber>
        </template>
      </Table>
@@ -582,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>

@@ -591,15 +660,20 @@
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 {
      // isPreviewVisible: false,
      // currentPreviewImage: '',
      // currentPreviewIndex: 0,

      loading:false,
      typeList: [],
      showPrices: false,
@@ -760,7 +834,6 @@
            );
          },
        },

        {
          title: "数量",
          key: "num",
@@ -776,6 +849,55 @@
              this.$options.filters.unitPrice(params.row.flowPrice, "￥")
            );
          },
        },
        {
          title: "退款数量",
          key: "returnGoodsNumber",
          minWidth: 80,
        },
        {
          title: "退款金额",
          key: "refundPrice",
          minWidth: 80,
        },
        {
          title: "退款状态",
          key: "isRefund",
          minWidth: 80,
          render:(h, params) => {
            if(params.row.isRefund==='NO_REFUND'){
              return h(
                "div",
                "未退款"
              );
            }else if(params.row.isRefund==='ALL_REFUND'){
              return h(
                "div",
                { style: {color:"red"} },
                "全部退款"
              );
            }else if(params.row.isRefund==='PART_REFUND'){
              return h(
                "div",
                { style: {color:"red"} },
                "部分退款"
              );
            }else if(params.row.isRefund==='REFUNDING'){
              return h(
                "div",
                { style: {color:"red"} },
                "退款中"
              );
            }
            else {
              return h(
                "div",
                { style: {color:"red"} },
                "未知状态"
              );
            }

          }
        },
      ],
      data: [], // 商品表单数据
@@ -850,12 +972,75 @@
            return h("div", this.$options.filters.unitPrice(params.row.subTotal, "￥"));
          },
        },
        {
          title: "退款数量",
          key: "returnGoodsNumber",
          minWidth: 80,
        },
        {
          title: "退款金额",
          key: "refundPrice",
          minWidth: 80,
        },
        {
          title: "退款状态",
          key: "isRefund",
          minWidth: 80,
          render:(h, params) => {
            if(params.row.isRefund==='NO_REFUND'){
              return h(
                "div",
                "未退款"
              );
            }else if(params.row.isRefund==='ALL_REFUND'){
              return h(
                "div",
                { style: {color:"red"} },
                "全部退款"
              );
            }else if(params.row.isRefund==='PART_REFUND'){
              return h(
                "div",
                { style: {color:"red"} },
                "部分退款"
              );
            }else if(params.row.isRefund==='REFUNDING'){
              return h(
                "div",
                { style: {color:"red"} },
                "退款中"
              );
            }
            else {
              return h(
                "div",
                { style: {color:"red"} },
                "未知状态"
              );
            }

          }
        },
      ],
      orderPackage: [],
      packageTraceList: []
      packageTraceList: [],
      // 添加模板编辑弹窗相关数据
      editTemplateModalVisible: false,
      currentTemplateId: ""
    };
  },
  methods: {
    isUrl(str) {
      if (!str) return false; // 空值直接返回false
      // 正则说明：
      // 1. https?:// ：支持http/https协议
      // 2. ([\w-]+\.)+ ：允许子域名包含短横线（如lmk-1356772813）
      // 3. [a-zA-Z]{2,} ：顶级域名（如com、cn，至少2个字母）
      // 4. (\w-./?%&=)* ：URL路径/参数部分，支持常见字符
      // 5. \.(jpg|jpeg|png|gif|bmp|webp)$ ：仅匹配常见图片后缀，忽略大小写（i标志）
      const imgReg = /^https?:\/\/([\w-]+\.)+[a-zA-Z]{2,}(\/[\w-./?%&=]*)*\.(jpg|jpeg|png|gif|bmp|webp)$/i;
      return imgReg.test(str);
    },
    // 选中
    selectGroupShipGoodsMethods (selected) {
      console.log('selectGroupShipGoodsMethods被调用, selected:', JSON.stringify(selected));
@@ -894,7 +1079,7 @@
                // 直接从data数组中获取最新的canNum值，而不依赖选择时的数据
                const currentDataItem = this.data.find(d => d.id === item.id);
                const finalDeliveryNum = currentDataItem ? currentDataItem.canNum : item.num;
                

                console.log('处理商品项:', {
                  id: item.id,
                  selectedCanNum: item.canNum,
@@ -902,7 +1087,7 @@
                  num: item.num,
                  finalDeliveryNum: finalDeliveryNum
                });
                

                return {
                  orderItemId: item.id,
                  deliveryNum: finalDeliveryNum,
@@ -1016,15 +1201,15 @@
            this.data = res.result.orderItems.map((item) => {
              // 只在弹窗打开状态下才保留用户修改的canNum值
              const existingItem = this.groupShipModalOpened ? this.data.find(d => d.id === item.id) : null;
              const defaultCanNum = item.num - item.deliverNumber;
              
              const defaultCanNum = item.num - item.deliverNumber - item.returnGoodsNumber;

              return {
                ...item,
                ___num: item.num,
                _disabled: item.deliverNumber >= item.num,
                // 如果弹窗已打开且用户已经修改过canNum且值合理，则保留；否则使用默认值
                canNum: (existingItem && existingItem.canNum !== undefined && existingItem.canNum <= defaultCanNum) 
                  ? existingItem.canNum 
                canNum: (existingItem && existingItem.canNum !== undefined && existingItem.canNum <= defaultCanNum)
                  ? existingItem.canNum
                  : defaultCanNum
              };
            });
@@ -1106,6 +1291,7 @@
      }
    },
    logisticsList () {
      this.packageTraceList = []
      this.logisticsModal = true;
      API_Order.getPackage(this.sn).then((res) => {
        if (res.success && res.result != null) {
@@ -1250,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;
@@ -1482,4 +1686,30 @@
    height: inherit;
  }
}
.check-template-list {
  display: flex;
  flex-wrap: wrap; // 关键：多余子项自动换行
  gap: 15px; // 子项之间的间距（水平+垂直）
  padding: 10px 0; // 上下内边距，避免贴边
  width: 100%; // 占满父容器（Col span="12"）
}

// 2. 每个模板项：控制宽度和卡片样式
.template-item {
  min-width: 280px; // 最小宽度，避免过窄
  max-width: 350px; // 最大宽度，防止过宽
  flex: 1; // 同一行子项均匀分配宽度
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 6px;
  background-color: #fafafa;
  box-sizing: border-box; // 防止padding撑大宽度
}
.content-img,
.selected-img {
  max-width: 100%; // 适应子项宽度
  max-height: 150px; // 限制最大高度
  border-radius: 4px;
  object-fit: cover; // 保持图片比例，不拉伸
}
</style>