From 88ce566fdb66bbc7c253b1ca7a4ed0276d8d240c Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期六, 11 十月 2025 16:08:59 +0800
Subject: [PATCH] 以及新增商品选择定制商品模板，订单详情页面展示定制商品模板信息
---
manager/src/views/order/order/orderDetail.vue | 188 ++++++++++++++++++
seller/src/views/order/order/orderDetail.vue | 191 +++++++++++++++++++
seller/src/views/goods/goods-seller/goodsOperationSec.vue | 202 ++++++++++++++++++-
3 files changed, 567 insertions(+), 14 deletions(-)
diff --git a/manager/src/views/order/order/orderDetail.vue b/manager/src/views/order/order/orderDetail.vue
index 1ee945d..e2bb4d5 100644
--- a/manager/src/views/order/order/orderDetail.vue
+++ b/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;
}
diff --git a/seller/src/views/goods/goods-seller/goodsOperationSec.vue b/seller/src/views/goods/goods-seller/goodsOperationSec.vue
index 8ed6ef2..e300a85 100644
--- a/seller/src/views/goods/goods-seller/goodsOperationSec.vue
+++ b/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 !== '') {
/** 鑾峰彇璇ュ晢鍩庡垎绫讳笅 鍟嗗搧鍙傛暟淇℃伅 */
diff --git a/seller/src/views/order/order/orderDetail.vue b/seller/src/views/order/order/orderDetail.vue
index 6a63b8b..54aa0d6 100644
--- a/seller/src/views/order/order/orderDetail.vue
+++ b/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 {
--
Gitblit v1.8.0