Merge remote-tracking branch 'origin/send_coupon' into send_coupon

zxl

2025-10-14 0e85d5033e1d12210bdffaf697515ff250354d66

 manager/src/views/order/order/orderDetail.vue

@@ -113,6 +113,7 @@
            <div class="div-item-right">{{ orderInfo.order.remark }}</div>
          </div>


          <!-- <div class="div-item" v-if="orderInfo.order.needReceipt == false">
            <div class="div-item-left">发票信息：</div>
            <div class="div-item-right">暂无发票信息</div>
@@ -171,6 +172,64 @@
            </div>
          </div>
        </div>
        <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>
      </Card>
      <Card class="mt_10">
        <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom">
@@ -520,6 +579,9 @@
  },
  data () {
    return {
      isPreviewVisible: false,
      currentPreviewImage: '',
      currentPreviewIndex: 0,
      typeList: [],
      showPrices: false,
      printHiddenFlag: false,//隐藏信息
@@ -677,6 +739,45 @@
          minWidth: 80,
        },
        {
          title: "退款状态",
          key: "isRefund",
          minWidth: 100,
          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"} },
                "未知状态"
              );
            }

          }
        },
        {
          title: "小计",
          key: "subTotal",
          minWidth: 100,
@@ -713,10 +814,28 @@
  },
  watch: {
    $route (to, from) {
      this.$router.go(0);
      console.log("to:",to.fullPath)
      console.log("form:",from.fullPath)
      // 正确打印路由对象的方法
      if((from.fullPath === "/orderList"|| from.fullPath === "/fictitiousOrderList" ||from.fullPath === "/orderStatistics"||from.fullPath.includes( "/member-detail")) && to.fullPath.includes("/order-detail")){
        this.sn = this.$route.query.sn;
        this.getDataList();
        this.getOrderPackage();
      }
    },
  },
  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);
    },
    gotoHomes () {
      return false
    },
@@ -738,6 +857,7 @@
      }
    },
    logisticsList () {
      this.packageTraceList = []
      this.logisticsModal = true;
      API_Order.getPackage(this.sn).then((res) => {
        if (res.success && res.result != null) {
@@ -796,6 +916,7 @@
    // 获取订单详情
    getDataList () {
      this.loading = true;
      console.log("执行获取订单信息操作")
      API_Order.orderDetail(this.sn).then((res) => {
        this.loading = false;
        if (res.success) {
@@ -910,6 +1031,7 @@
    },
  },
  mounted () {
    console.log("加载数据")
    this.sn = this.$route.query.sn;
    this.getDataList();
    this.getOrderPackage();
@@ -1151,4 +1273,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>