1

src/views/app/business/lineManage/addEdit.vue

@@ -11,7 +11,8 @@
 						<Col span="24">
 						<FormItem label="广告位置" prop="position">
 							<Select v-model="form.position" style="width:200px">
-								<Option v-for="item in dictData" :value="item.value" :key="item.value">{{ item.title }}</Option>
+								<Option v-for="item in dictData" :value="item.value" :key="item.value">{{ item.title }}
+								</Option>
 							</Select>
 						</FormItem>
 						</Col>
@@ -19,16 +20,26 @@
 					<Row :gutter="32">
 						<Col span="12">
 						<FormItem label="商家名" prop="value">
-							<Select v-model="form.merchantId" filterable @on-change="checkShop" :remote-method="sreachShop" :loading="loading1">
-								<Option v-for="item in shopList" v-model="item.value" :key="item.value">{{ item.label }}</Option>
+							<Select v-model="form.merchantId" filterable @on-change="checkShop"
+								:remote-method="sreachShop" :loading="loading1">
+								<Option v-for="item in shopList" v-model="item.value" :key="item.value">{{ item.label }}
+								</Option>
 							</Select>
 						</FormItem>
 						</Col>
 					</Row>
 					<Row :gutter="32">
 						<Col span="24">
+
 						<FormItem label="广告图" prop="adImage">
-							<upload-pic-input v-model="form.adImage"></upload-pic-input>
+							<div v-for="(item,index) in adList" :key="index" style="display: flex;line-height: 30px;">
+								<upload-pic-input v-model="item.pic"></upload-pic-input>
+								<Icon @click="delOne(index)" type="ios-trash-outline" v-if="adList.length>1" size="30"
+									color="red" />
+							</div>
+							<div v-if="form.position == 'home_top'" style="margin-top:10px;" @click="addOne">
+								<Icon type="ios-add-circle-outline" size="30" color="#000" />
+							</div>
 						</FormItem>
 						</Col>
 					</Row>
@@ -49,7 +60,8 @@
 					<Row :gutter="32">
 						<Col span="24">
 						<FormItem label="广告关联商品" prop="productList1">
-							<div @click="checkGoods" style="display: flex;height: 35px;width: 100%;border: 1px solid #eee;padding: 0 0 0 10px;border-radius: 5px;line-height: 35px;">
+							<div @click="checkGoods"
+								style="display: flex;height: 35px;width: 100%;border: 1px solid #eee;padding: 0 0 0 10px;border-radius: 5px;line-height: 35px;">
 								<div style="flex: 1;">{{form.productList1.productName}}</div>
 								<Icon type="ios-arrow-forward" size="24" style="line-height: 35px;" />
 							</div>
@@ -118,6 +130,9 @@
 		},
 		data() {
 			return {
+				adList: [{
+					pic: ''
+				}],
 				loading1: false,
 				aaVisiable: false,
 				shopList: [],
@@ -187,10 +202,23 @@
 		methods: {
 			init() {
 
+			},
+			addOne() {
+				let data = {
+					pic: ''
+				}
+				this.adList.push(data)
+			},
+			delOne(i) {
+				this.adList.splice(i, 1);
 			},
 			submit() {
 				this.form.productList.push(this.form.productList1)
 				this.form.linkUrl = '/package1/group/groupBuySingle?type=shop&item='
+				this.form.adImage = ''
+				for (let i = 0; i < this.adList.length; i++) {
+					this.form.adImage += this.adList[i].pic + ','
+				}
 				this.$refs.form.validate((valid) => {
 					if (valid) {
 						if (this.type == "1") {
@@ -362,6 +390,21 @@
 					// 回显
 					this.form = data;
 
+					// 判断字符串中是否包含逗号
+					if (this.form.adImage.indexOf(',') !== -1) {
+						// 有逗号：先按逗号分割，再过滤掉空字符串或纯空白字符串，最后映射为 {pic: url} 对象数组
+						this.adList = this.form.adImage
+							.split(',')
+							.filter(item => item.trim() !== '') // 过滤掉空项
+							.map(url => ({
+								pic: url.trim()
+							}));
+					} else {
+						// 没有逗号：整个字符串作为一个对象
+						this.adList = [{
+							pic: this.form.adImage.trim()
+						}];
+					}
 					getShopData(this.searchForm).then((res) => {
 						this.loading = false;
 						if (res.success) {

src/views/app/business/lineManage/lineManage.vue

@@ -155,23 +155,49 @@
 						width: 100,
 						render: (h, params) => {
 							
-							return h("img", {
+							 // 处理图片字符串：分割、过滤空项、去空格
+							    const imageStr = params.row.adImage || '';
+							    const imageUrls = imageStr.indexOf(',') !== -1 
+							        ? imageStr.split(',').filter(item => item.trim() !== '').map(url => url.trim())
+							        : [imageStr.trim()];
+							    
+							    // 如果没有任何有效图片，显示占位符
+							    if (imageUrls.length === 0 || (imageUrls.length === 1 && imageUrls[0] === '')) {
+							        return h('span', '无图片');
+							    }
+							    
+							    // 创建多个 img 标签
+							    const imgElements = imageUrls.map(url => {
+							        return h('img', {
 							            attrs: {
-									src: params.row.adImage,
+							                src: url,
 							            },
 							            style: {
 							                cursor: "zoom-in",
 							                width: "80px",
 							                height: "60px",
-									margin: "10px 0",
+							                margin: "10px 5px",   // 横向间距
 							                "object-fit": "contain",
+							                "border-radius": "4px",
+							                "background": "#f5f5f5"
 							            },
 							            on: {
 							                click: () => {
-										this.showPic(params.row.adImage);
+							                    this.showPic(url);   // 注意：点击时传入当前图片的 URL
 							                },
 							            },
 							        });
+							    });
+							    
+							    // 用 div 包裹，flex 布局横向排列，允许换行
+							    return h('div', {
+							        style: {
+							            display: "flex",
+							            "flex-wrap": "wrap",
+							            "align-items": "center",
+							            "gap": "8px"
+							        }
+							    }, imgElements);
 						},
 					},
 					{