以及新增商品选择定制商品模板，订单详情页面展示定制商品模板信息

zxl

2025-10-11 88ce566fdb66bbc7c253b1ca7a4ed0276d8d240c

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

@@ -7,6 +7,7 @@
          <Button v-if="allowOperation.editConsignee" @click="editAddress" type="primary" ghost>修改收货地址</Button>
          <Button v-if="allowOperation.cancel" @click="orderCancel" type="warning" ghost>订单取消</Button>
          <Button v-if="orderInfo.order.orderStatus === 'UNPAID'" @click="confirmPrice" type="primary">收款</Button>
          <Button v-if="allowOperation.showLogistics || orderPackage.length > 0" @click="checkLogistics" type="primary">查看物流</Button>
          <Button @click="orderLog" type="info" ghost>订单日志</Button>
          <Button @click="printOrder" type="primary" ghost style="float:right;"
            v-if="$route.query.orderType != 'VIRTUAL'">打印发货单</Button>
@@ -111,6 +112,75 @@
            <div class="div-item-left">买家留言：</div>
            <div class="div-item-right">{{ orderInfo.order.remark }}</div>
          </div>
          <div class="div-item" >
            <div class="div-item-left">商品模板：</div>
            <div class="div-item-right">
              <template  v-if="orderInfo.orderItems[0] && orderInfo.orderItems[0].goodsCustomizeTemplateVO">
                {{
                  orderInfo.orderItems[0].goodsCustomizeTemplateVO.templateName
                }}
              </template>
              <template v-else>
                暂无
              </template>
            </div>
          </div>
          <div class="div-item" >
            <div class="div-item-left">模板标题：</div>
            <div class="div-item-right">
              <!-- 先逐层判断是否存在，避免报错 -->
              <template v-if="orderInfo.orderItems[0] && orderInfo.orderItems[0].goodsCustomizeTemplateVO && orderInfo.orderItems[0].goodsCustomizeTemplateVO.titles && orderInfo.orderItems[0].goodsCustomizeTemplateVO.titles.length">
                <span
                  v-for="(item, index) in orderInfo.orderItems[0].goodsCustomizeTemplateVO.titles"
                  :key="index"
                >{{ item.templateTitle }}
                <span v-if="index !== orderInfo.orderItems[0].goodsCustomizeTemplateVO.titles.length - 1">、</span>
                </span>
              </template>
              <template v-else>
                暂无
              </template>
            </div>
          </div>
          <div class="div-item">
            <div class="div-item-left">模板图片：</div>
            <div class="div-item-right">
              <!-- 图片列表容器 -->
              <div v-if="hasImages" class="image-list">
                <div
                  class="image-item"
                  v-for="(image, index) in imageList"
                  :key="index"
                  @click="previewImage(index)"
                >
                  <img
                    :src="image.imgUrl"
                    :alt="'模板图片' + (index + 1)"
                    class="small-image"
                    loading="lazy"
                  >
                </div>
              </div>

              <!-- 无图片时显示 -->
              <div v-else >暂无图片</div>

              <!-- 图片预览弹窗 -->
              <div v-if="isPreviewVisible" class="preview-modal" @click="closePreview">
                <div class="preview-content" @click.stop>
                  <img
                    :src="currentPreviewImage"
                    :alt="`预览图片 ${currentPreviewIndex + 1}`"
                    class="preview-image"
                  >
                  <div class="preview-nav">
                    <button class="close-btn" @click="closePreview">×</button>
                  </div>
                </div>
              </div>
            </div>
          </div>


          <!-- <div class="div-item" v-if="orderInfo.order.needReceipt == false">
            <div class="div-item-left">发票信息：</div>
@@ -310,6 +380,74 @@
        <Button type="primary" @click="modifyPriceSubmit">调整</Button>
      </div>
    </Modal>
    <!-- 查询物流 -->
    <Modal v-model="logisticsModal" width="40">
      <p slot="header">
        <span>查询物流</span>
      </p>
      <div class="layui-layer-wrap">
        <dl>
          <dt>订单号：</dt>
          <dd>
            <div class="text-box">{{ sn }}</div>
          </dd>
        </dl>
      </div>
      <div v-if="packageTraceList.length > 0" v-for="(packageItem, packageIndex) in packageTraceList" :key="packageIndex">
        <div class="layui-layer-wrap">
          <dl>
            <dt>物流公司：</dt>
            <dd><div class="text-box">{{ packageItem.logisticsName }}</div></dd>
          </dl>
          <dl>
            <dt>快递单号：</dt>
            <dd><div nctype="ordersSn" class="text-box">{{ packageItem.logisticsNo }}</div></dd>
          </dl>
          <div class="div-express-log">
            <ul class="express-log express-log-name">
              <li v-for="(item, index) in packageItem.orderPackageItemList" :key="index">
                <span class="time" style="width: 50%;"><span>商品名称：</span><span>{{ item.goodsName }}</span></span>
                <span class="time" style="width: 30%;"><span>发货时间：</span><span>{{ item.logisticsTime }}</span></span>
                <span class="time" style="width: 20%;"><span>发货数量：</span><span>{{ item.deliverNumber }}</span></span>
              </li>
            </ul>
          </div>
          <div class="div-express-log">
            <ul class="express-log" v-if="packageItem.traces && packageItem.traces.traces">
              <li v-for="(item, index) in packageItem.traces.traces" :key="index">
                <span class="time">{{ item.AcceptTime || item.acceptTime }}</span>
                <span class="detail">{{ item.AcceptStation || item.remark }}</span>
              </li>
            </ul>
            <ul class="express-log" v-else><li>暂无物流信息</li></ul>
          </div>
        </div>
      </div>
      <div v-if = "packageTraceList.length == 0 && logisticsInfo">
        <div class="layui-layer-wrap">
          <dl>
            <dt>物流公司：</dt>
            <dd><div class="text-box">{{ logisticsInfo.shipper }}</div></dd>
          </dl>
          <dl>
            <dt>快递单号：</dt>
            <dd><div nctype="ordersSn" class="text-box">{{ logisticsInfo.logisticCode }}</div></dd>
          </dl>
          <div class="div-express-log">
            <ul class="express-log" v-if="logisticsInfo && logisticsInfo.traces">
              <li v-for="(item, index) in logisticsInfo.traces" :key="index">
                <span class="time">{{ item.AcceptTime }}</span>
                <span class="detail">{{ item.AcceptStation }}</span>
              </li>
            </ul>
            <ul class="express-log" v-else><li>暂无物流信息</li></ul>
          </div>
        </div>
      </div>
      <div slot="footer" style="text-align: right">
        <Button @click="logisticsModal = false">取消</Button>
      </div>
    </Modal>
    <!-- 订单取消模态框 -->
    <Modal v-model="orderCancelModal" width="530">
      <p slot="header">
@@ -451,6 +589,9 @@
  },
  data () {
    return {
      isPreviewVisible: false,
      currentPreviewImage: '',
      currentPreviewIndex: 0,
      typeList: [],
      showPrices: false,
      printHiddenFlag: false,//隐藏信息
@@ -468,6 +609,12 @@
      orderLogModal: false, //弹出调整价格框
      checkedLogistics: [], //选中的物流公司集合
      allowOperation: {}, //订单可才做选项
      logisticsModal: false, //弹出查询物流框
      packageTraceList: [],
      orderPackage: [],
      logisticsInfo: {
        shipper: "",
      }, //物流信息
      sn: "", //订单编号
      orderInfo: {
        order: {
@@ -602,6 +749,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,
@@ -638,14 +824,88 @@
  },
  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();
      }
    },
  },
  computed: {
    // 获取图片列表（处理空值情况）
    imageList() {
      console.log(this.orderInfo.orderItems[0].goodsCustomizeTemplateVO)
      if (this.orderInfo &&
        this.orderInfo.orderItems &&
        this.orderInfo.orderItems[0] &&
        this.orderInfo.orderItems[0].goodsCustomizeTemplateVO &&
        this.orderInfo.orderItems[0].goodsCustomizeTemplateVO.listImages &&
        Array.isArray(this.orderInfo.orderItems[0].goodsCustomizeTemplateVO.listImages)) {
        return this.orderInfo.orderItems[0].goodsCustomizeTemplateVO.listImages;
      }
      return [];
    },
    // 判断是否有图片
    hasImages() {
      return this.imageList.length > 0;
    }
  },
  methods: {
    previewImage(index) {
      if (this.imageList[index]) {
        this.currentPreviewIndex = index;
        this.currentPreviewImage = this.imageList[index].imgUrl;
        this.isPreviewVisible = true;
        // 阻止页面滚动
        document.body.style.overflow = 'hidden';
      }
    },
    // 关闭预览
    closePreview() {
      this.isPreviewVisible = false;
      // 恢复页面滚动
      document.body.style.overflow = '';
    },
    gotoHomes () {
      return false
    },

    getOrderPackage() {
      API_Order.getPackage(this.sn).then(res => {
        if (res.success) {
          this.orderPackage = res.result;
          console.log('this.orderPackage',this.orderPackage);
        }
      })
    },
    //查询物流
    checkLogistics () {
      this.logisticsModal = true;
      if (this.orderPackage.length > 0) {
        this.logisticsList();
      } else {
        this.logistics();
      }
    },
    logisticsList () {
      this.packageTraceList = []
      this.logisticsModal = true;
      API_Order.getPackage(this.sn).then((res) => {
        if (res.success && res.result != null) {
          this.packageTraceList = res.result;
        }
      });
    },
    logistics () {
      this.logisticsModal = true;
      API_Order.getTraces(this.sn).then((res) => {
        if (res.success && res.result != null) {
          this.logisticsInfo = res.result;
        }
      });
    },
    //确认收款
    confirmPrice () {
      this.$Modal.confirm({
@@ -689,6 +949,7 @@
    // 获取订单详情
    getDataList () {
      this.loading = true;
      console.log("执行获取订单信息操作")
      API_Order.orderDetail(this.sn).then((res) => {
        this.loading = false;
        if (res.success) {
@@ -803,12 +1064,96 @@
    },
  },
  mounted () {
    console.log("加载数据")
    this.sn = this.$route.query.sn;
    this.getDataList();
    this.getOrderPackage();
  },
};
</script>
<style lang="scss">
.image-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 600px;
}

.image-item {
  cursor: pointer;
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.2s;
}

.image-item:hover {
  transform: scale(1.02);
}

.small-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
}

.no-image {
  color: #999;
  padding: 10px 0;
}

/* 预览弹窗样式 */
.preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.preview-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.preview-image {
  max-width: 100%;
  object-fit: contain;
}

.preview-nav {
  position: absolute;
  top: -30px;
  right: 0;
  color: white;
  display: flex;
  align-items: center;
  gap: 15px;
}

.preview-count {
  font-size: 14px;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.lineH30 {
  line-height: 30px;
}
@@ -910,7 +1255,72 @@
    }
  }
}
.div-express-log {
  max-height: 300px;
  border: solid 1px #e7e7e7;
  background: #fafafa;
  overflow-y: auto;
  overflow-x: auto;
}
.layui-layer-wrap {
  dl {
    border-top: solid 1px #f5f5f5;
    margin-top: -1px;
    overflow: hidden;

    dt {
      font-size: 14px;
      line-height: 28px;
      display: inline-block;
      padding: 8px 1% 8px 0;
      color: #999;
    }

    dd {
      font-size: 14px;
      line-height: 28px;
      display: inline-block;
      padding: 8px 0 8px 8px;
      border-left: solid 1px #f5f5f5;

      .text-box {
        line-height: 40px;
        color: #333;
        word-break: break-all;
      }
    }
  }
}
.express-log {
  /*margin: 5px -10px 5px 5px;*/
  padding: 10px;
  list-style-type: none;

  .time {
    width: 30%;
    display: inline-block;
    float: left;
  }

  .detail {
    width: 60%;
    margin-left: 30px;
    display: inline-block;
  }

  li {
    line-height: 30px;
  }
}

.express-log-name {
  li {
    display: flex;
    span  {
      display: flex;
    }
  }
}
.f14 {
  font-size: 14px;
  color: #333;