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

zxl

2025-10-11 88ce566fdb66bbc7c253b1ca7a4ed0276d8d240c

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

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

@@ -112,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>
@@ -520,6 +589,9 @@
  },
  data () {
    return {
      isPreviewVisible: false,
      currentPreviewImage: '',
      currentPreviewIndex: 0,
      typeList: [],
      showPrices: false,
      printHiddenFlag: false,//隐藏信息
@@ -762,7 +834,41 @@
      }
    },
  },
  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
    },
@@ -966,6 +1072,88 @@
};
</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;
}

 seller/src/views/goods/goods-seller/goodsOperationSec.vue

@@ -82,8 +82,19 @@
                @on-clear="handleGoodsType"
                @on-change="handleGoodsType"
              >
                <Option value="COUPON">优惠卷</option>
                <Option value="COUPON">优惠劵</option>
                </select>
            </FormItem>
            <FormItem v-if="baseInfoForm.goodsType == 'PHYSICAL_GOODS'" class="form-item-view-el" label="商品类型">
              <Select
                v-model="baseInfoForm.customizeGoodsType"
                clearable
                style="width: 160px"
                @on-clear="handleGoodsType"
                @on-change="handleGoodsType"
              >
                <Option value="CUSTOMIZE">定制商品</option>
              </select>
            </FormItem>
            <FormItem v-if="baseInfoForm.salesModel == 'WHOLESALE'" class="form-item-view-el" label="销售规则"
                      prop="wholesaleRule">
@@ -362,13 +373,22 @@
                          </Input>
                        </template>
                        <template slot="COUPON" slot-scope="{ row }">
                          <div  @click="showCouponListModal(row)">
                            <Input v-model="row.couponName" clearable placeholder="选择优惠卷"
                          <div  @click="showCouponListModal($event,row)">
                            <Input v-model="row.couponName" clearable placeholder="选择优惠劵"
                            >
                            </Input>
                          </div>

                        </template>
                        <template slot="CUSTOMIZE" slot-scope="{ row }">
                          <div  @click="showTemplateListModal($event,row)">
                            <Input v-model="row.customizeTemplateName" clearable placeholder="选择定制模板"
                            >
                            </Input>
                          </div>

                        </template>

                        <template slot="cost" slot-scope="{ row }">
                          <Input v-model="row.cost" clearable placeholder="请输入成本价"
                                 @on-change="updateSkuTable(row, 'cost')">
@@ -528,11 +548,11 @@
        <Button type="primary" @click="saveToDraft">保存为模版</Button>
      </ButtonGroup>
    </div>
    <Modal v-model="showCouponModal" title="优惠卷列表" width="1200px">
    <Modal v-model="showCouponModal" title="优惠劵列表" width="1200px">
      <div style="display: flex; align-items: center; margin-bottom: 20px;">
        <!-- 模拟表单label样式 -->
        <label style="width: 100px; text-align: right; padding-right: 12px; font-size:14px;">
          已选择优惠卷:
          已选择优惠劵:
        </label>
        <Input
          :disabled="true"
@@ -565,6 +585,46 @@
          ></Page>
        </Row>
    </Modal>

    <Modal v-model="showTemplateModal" title="模板列表" width="1200px">
      <div style="display: flex; align-items: center; margin-bottom: 20px;">
        <!-- 模拟表单label样式 -->
        <label style="width: 100px; text-align: right; padding-right: 12px; font-size:14px;">
          已选择模板:
        </label>
        <Input
          :disabled="true"
          style="width: 30%;"
          v-model="showTemplate"
          placeholder="请点击选择表格内模板"
        ></Input>
      </div>
      <Table
        :loading="templateLoading"
        border
        :columns="templateColumns"
        :data="templateData"
        ref="table"
        @on-current-change="templateHandleRowClick"
        highlight-row
      ></Table>
      <Row type="flex" justify="center" class="mt_10">
        <Page
          :current="templateSearchForm.pageNumber"
          :total="templateTotal"
          :page-size="templateSearchForm.pageSize"
          @on-change="templateChangePage"
          @on-page-size-change="templateChangePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Modal>


    <Modal v-model="showGoodsVideo" title="查看视频">
      <div id="dplayer">

@@ -605,6 +665,7 @@
  </div>
</template>
<script>
import * as API_GOODS_CUSTOMEIZE from "@/api/goods-customeize-template"
import * as API_GOODS from "@/api/goods";
import * as API_Shop from "@/api/shops";
import cloneObj from "@/utils/index";
@@ -653,6 +714,42 @@
      }, 1000);
    };
    return {
      showTemplateModal:false,
      showTemplate:'',
      templateSearchForm: {
        // 搜索框初始化对象
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        status:"ENABLE"
      },
      templateLoading:false,
      templateColumns:[
        {
          title: "模板名称",
          key: "templateName",
          tooltip: true,
        },
        {
          title: '启用状态',
          key: 'status',
          width: 120,
          align: 'center',
          render: (h, params) => {
            const status = params.row.status;
            const color = status === 'ENABLE' ? 'success' : status === 'DISABLE' ? 'default' : 'warning';
            const text = status === 'ENABLE' ? '启用' : status === 'DISABLE' ? '未启用' : '未知';

            return h('Tag', {
              props: {
                color: color
              }
            }, text);
          }
        },
      ],
      templateData:[],
      templateTotal:0,

      currentRow:null,
      showCouponModal:false,
      showCoupon:'',
@@ -824,6 +921,7 @@
      ],
      /** 发布商品基本参数 */
      baseInfoForm: {
        customizeGoodsType:"",
        virtualGoodsType:"",
        salesModel: "RETAIL",
        /** 商品相册列表 */
@@ -922,6 +1020,8 @@
        "quantity",
        "couponName",
        "couponId",
        "customizeTemplateName",
        "customizetemplateId",
        // "alertQuantity",
        "specId",
        "specValueId",
@@ -947,7 +1047,23 @@
    }
  },
  methods: {
    showCouponListModal(row){
    showTemplateListModal(event,row){
      if (event.target.classList.contains('ivu-icon-ios-close-circle') ||
        event.target.closest('.ivu-input-wrapper-clear-icon')) {
        return; // 如果是清除按钮，不执行后续逻辑
      }
      console.log(row)
      console.log("触发点击")
      this.showTemplateModal = true;
      this.showTemplate='';
      this.getTemplateDataList()
      this.currentRow = row;
    },
    showCouponListModal(event,row){
      if (event.target.classList.contains('ivu-icon-ios-close-circle') ||
        event.target.closest('.ivu-input-wrapper-clear-icon')) {
        return; // 如果是清除按钮，不执行后续逻辑
      }
      this.showCouponModal = true;
      this.showCoupon ='';
      this.getCouponDataList()
@@ -956,6 +1072,18 @@
    handleGoodsType(){
      //重新渲染
      this.renderTableData(this.skuTableData);
    },
    getTemplateDataList() {
      // 获取数据
      this.templateLoading = true;
      API_GOODS_CUSTOMEIZE.getPage(this.templateSearchForm).then((res) => {
        this.templateLoading = false;
        if (res.code === 200) {
          this.templateData = res.data;
          this.templateTotal = res.total;
        }
      });
      this.templateLoading = false;
    },
    getCouponDataList() {
      // 获取数据
@@ -969,6 +1097,16 @@
      });
      this.couponLoading = false;
    },
    templateHandleRowClick(currentRow ,oldCurrentRow){
      this.showTemplate = currentRow.templateName;
      this.$set(this.currentRow, 'customizeTemplateName', currentRow.templateName);
      this.currentRow.customizeTemplateId = currentRow.id
      console.log(this.currentRow)
      this.updateSkuTable(this.currentRow,"customizeTemplateName")
      this.updateSkuTable(this.currentRow,"customizeTemplateId")
      console.log(this.skuTableData)
    },

    // 处理行点击事件
    handleRowClick(currentRow ,oldCurrentRow){
      this.showCoupon = currentRow.couponName;
@@ -978,6 +1116,15 @@
      this.updateSkuTable(this.currentRow,"couponName")
      this.updateSkuTable(this.currentRow,"couponId")
      console.log(this.skuTableData)
    },
    templateChangePage(v){
      this.templateSearchForm.pageNumber = v;
      this.getTemplateDataList();
    },
    templateChangePageSize(v){
      this.templateSearchForm.pageNumber = 1;
      this.templateSearchForm.pageSize = v;
      this.getTemplateDataList();
    },
    couponChangePage(v) {
      // 改变页码
@@ -1548,6 +1695,8 @@
          // alertQuantity: e.alertQuantity,
          couponName:e.couponName,
          couponId:e.couponId,
          customizeTemplateName:e.customizeTemplateName,
          customizeTemplateId:e.customizeTemplateId,
          weight: e.weight,
        };
        if (e.goodsGalleryList && e.goodsGalleryList.length >= 1) {
@@ -1901,6 +2050,8 @@
              // find.alertQuantity && (find.alertQuantity = "");
              find.couponName && (find.couponName = "");
              find.couponId && (find.couponId = "");
              find.customizeTemplateName && (find.customizeTemplateName = "");
              find.customizeTemplateId && (find.customizeTemplateId ="");
              find.weight && (find.weight = "");

              this.skuTableData.splice(this.skuTableData.length, 0, find);
@@ -1917,6 +2068,8 @@
              find.quantity && (find.quantity = "");
              find.couponName && (find.couponName = "");
              find.couponId && (find.couponId = "");
              find.customizeTemplateName && (find.customizeTemplateName = "");
              find.customizeTemplateId && (find.customizeTemplateId ="");
              // find.alertQuantity && (find.alertQuantity = "");
              find.weight && (find.weight = "");

@@ -2012,11 +2165,18 @@
      if (this.baseInfoForm.goodsType ==="VIRTUAL_GOODS" && this.baseInfoForm.virtualGoodsType==="COUPON"){
        pushData.push(
          {
            title:"优惠卷",
            title:"优惠劵",
            slot:"COUPON"
          }
        )
      }
      if(this.baseInfoForm.goodsType==="PHYSICAL_GOODS" &&this.baseInfoForm.customizeGoodsType==="CUSTOMIZE"){
        pushData.push({
          title:"定制商品模板",
          slot:"CUSTOMIZE"
        })
      }

      pushData.push(
        {
          title: "库存",
@@ -2070,6 +2230,7 @@
              sn: skus[index].sn,
              quantity: skus[index].quantity,
              coupon: skus[index].coupon,
              customize: skus[index].customize,
              cost: skus[index].cost,
              price: skus[index].price,
              // [spec[0].name]: skus[index][spec[0].name] ? skus[index][spec[0].name] : specItem.value,
@@ -2219,6 +2380,7 @@
    },
    /**  添加商品 **/
    save() {
      console.log(this.skuTableData)
      try {
        this.submitLoading = true;
        this.$refs["baseInfoForm"].validate((valid) => {
@@ -2271,22 +2433,34 @@
                cost: 1,
                price: sku.price,
                quantity: sku.quantity,
                couponName:sku.couponName,
                couponId:sku.couponId,
                couponName:this.baseInfoForm.virtualGoodsType === "COUPON" ? sku.couponName:null,
                couponId:this.baseInfoForm.virtualGoodsType === "COUPON" ? sku.couponId:null,
                customizeTemplateName:this.baseInfoForm.customizeGoodsType === "CUSTOMIZE" ? sku.customizeTemplateName : null,
                customizeTemplateId:this.baseInfoForm.customizeGoodsType === "CUSTOMIZE" ? sku.customizeTemplateId :null,
                // alertQuantity: sku.alertQuantity,
                sn: sku.sn,
                images: [],
              };
              if(this.baseInfoForm.goodsType === "VIRTUAL_GOODS" &&
                this.baseInfoForm.virtualGoodsType !== '' &&
                this.baseInfoForm.virtualGoodsType !== undefined &&
                this.baseInfoForm.virtualGoodsType !== null){
                this.baseInfoForm.virtualGoodsType === "COUPON"
              ){
                if (sku.couponId === null || sku.couponId === undefined){
                  this.$Message.error("请选择优惠劵")
                  return;
                }
                if (sku.couponName === null || sku.couponName === undefined){
                  this.$Message.error("请选择优惠劵")
                  return;
                }
              }
              if(this.baseInfoForm.goodsType === "PHYSICAL_GOODS" &&
                this.baseInfoForm.customizeGoodsType === "CUSTOMIZE"){
                if (sku.customizeTemplateId === null || sku.customizeTemplateId === undefined){
                  this.$Message.error("请选择定制模板")
                  return;
                }
                if (sku.customizeTemplateName === null || sku.customizeTemplateName === undefined){
                  this.$Message.error("请选择定制模板")
                  return;
                }
              }
@@ -2335,6 +2509,7 @@
              ? (submit.recommend = true)
              : (submit.recommend = false);
            if (this.goodsId) {
              console.log(this.submit)
              API_GOODS.editGoods(this.goodsId, submit).then((res) => {
                if (res.success) {
                  this.submitLoading = false;
@@ -2533,6 +2708,7 @@
    },
  },
  mounted() {

    this.accessToken = {
      accessToken: this.getStore("accessToken"),
    };
@@ -2554,7 +2730,7 @@
        this.categoryId = cateId[2];
        this.baseInfoForm.categoryPath = cateId.toString();
        this.baseInfoForm.goodsType = this.firstData.goodsType;

        console.log(this.baseInfoForm)

        if (this.categoryId != null && this.categoryId !== '') {
          /** 获取该商城分类下 商品参数信息 */

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

@@ -146,7 +146,76 @@
            }}
          </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>
        </Col>

      </Row>
    </Card>

@@ -600,6 +669,10 @@
  },
  data () {
    return {
      isPreviewVisible: false,
      currentPreviewImage: '',
      currentPreviewIndex: 0,

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

        {
          title: "数量",
          key: "num",
@@ -953,7 +1025,41 @@
      packageTraceList: []
    };
  },
  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 = '';
    },
    // 选中
    selectGroupShipGoodsMethods (selected) {
      console.log('selectGroupShipGoodsMethods被调用, selected:', JSON.stringify(selected));
@@ -1366,6 +1472,89 @@
};
</script>
<style lang="scss" scoped>
.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;
}

// 建议引入通用样式 可删除下面样式代码
// @import "@/styles/table-common.scss";
.lineH30 {