广告初步完成，可以测试

src/api/adMgr.js

@@ -25,7 +25,6 @@ export function getTableData(forData) {
 
 // 添加广告
 export function addAD(forData) {
-	console.log(forData);
 	let data = {};
 	if (typeof forData.adTitle !== 'undefined') {
 		data.title = forData.adTitle
@@ -36,19 +35,25 @@ export function addAD(forData) {
 	if (typeof forData.logoStyle !== 'undefined') {
 		data.logoUrl = forData.logoStyle
 	}
+	if (typeof forData.logoStyleValue !== 'undefined') {
+		data.styleValue = forData.logoStyleValue
+	}
 	if (typeof forData.checkedTypes !== 'undefined') {
 		if (forData.checkedTypes == 1) {
 			data.jumpWay = '网页'
 			data.jumpDirection = forData.adLink
 			data.jumpPoint = forData.adLink
+			data.subTitle = forData.adPage
 		} else if (forData.checkedTypes == 2) {
 			data.jumpWay = '小程序'
 			data.jumpDirection = forData.jumpDirection
 			data.jumpPoint = forData.adPageId
+			data.subTitle = forData.adPage
 		} else {
 			data.jumpWay = '不跳转'
 			data.jumpDirection = '无'
 			data.jumpPoint = ''
+			data.subTitle = ''
 		}
 	}
 	if (typeof forData.adStatus !== 'undefined') {
@@ -61,8 +66,7 @@ export function addAD(forData) {
 	if (typeof forData.adOrder !== 'undefined') {
 		data.sortLevel = forData.adOrder
 	}
-	console.log(data);
-	// return
+	
 	return request({
 		url: '/mhotel/advertiseinsert.action',
 		method: 'post',
@@ -70,6 +74,60 @@ export function addAD(forData) {
 	})
 }
 
+// 修改广告
+export function modifyAD(forData) {
+	let data = {};
+	if (typeof forData.id !== 'undefined') {
+		data.id = forData.id
+	}
+	if (typeof forData.adTitle !== 'undefined') {
+		data.title = forData.adTitle
+	}
+	if (typeof forData.imageUrl !== 'undefined') {
+		data.imageUrl = forData.imageUrl
+	}
+	if (typeof forData.logoStyle !== 'undefined') {
+		data.logoUrl = forData.logoStyle
+	}
+	if (typeof forData.logoStyleValue !== 'undefined') {
+		data.styleValue = forData.logoStyleValue
+	}
+	if (typeof forData.checkedTypes !== 'undefined') {
+		if (forData.checkedTypes == 1) {
+			data.jumpWay = '网页'
+			data.jumpDirection = forData.adLink
+			data.jumpPoint = forData.adLink
+			data.subTitle = forData.adPage
+		} else if (forData.checkedTypes == 2) {
+			data.jumpWay = '小程序'
+			data.jumpDirection = forData.jumpDirection
+			data.jumpPoint = forData.adPageId
+			data.subTitle = forData.adPage
+		} else {
+			data.jumpWay = '不跳转'
+			data.jumpDirection = '无'
+			data.jumpPoint = ''
+			data.subTitle = ''
+		}
+	}
+	if (typeof forData.adStatus !== 'undefined') {
+		if (forData.adStatus == true) {
+			data.state = 1
+		} else{
+			data.state = 0
+		}
+	}
+	if (typeof forData.adOrder !== 'undefined') {
+		data.sortLevel = forData.adOrder
+	}
+	
+	return request({
+		url: '/mhotel/advertiseupdate.action',
+		method: 'post',
+		data
+	})
+}
+
 // 删除广告
 export function delAD(id) {
 	let param = '';
@@ -151,4 +209,16 @@ export function getShangpinTableData(forData) {
 		method: 'get',
 		data
 	})
+}
+
+// 修改广告状态
+export function ead(forData) {
+	let data = ''
+	data += '?id=' + forData.id + '&state=' + forData.state
+
+	return request({
+		url: '/mhotel/advertiseoperateState.action' + data,
+		method: 'get',
+		data
+	})
 }

src/views/ad/index.vue

@@ -77,8 +77,8 @@
 								<template slot-scope="scope">
 									<el-button type="text" size="small" @click="modifyAd(scope.row)">修改</el-button>
 									<el-button type="text" size="small" @click="delAd(scope.row)">删除</el-button>
-									<el-button v-if="scope.row.state == 1" @click="" type="text" size="small">禁用</el-button>
-									<el-button v-else type="text" size="small" @click="">开启</el-button>
+									<el-button v-if="scope.row.state == 1" @click="enablingAndDisabling(scope.row, 0)" type="text" size="small">禁用</el-button>
+									<el-button v-else type="text" size="small" @click="enablingAndDisabling(scope.row, 1)">开启</el-button>
 								</template>
 							</el-table-column>
 						</el-table>
@@ -99,18 +99,19 @@
 						<el-input placeholder="请输入标题" v-model="formModifyAD.adTitle" maxlength="20" style="width: 90%;" clearable></el-input>
 					</el-form-item>
 					<el-form-item id="uploadImg" label="上传图片" prop="imageUrl" :required="true">
-						<div class="avatar-uploader" @click="uploadImageClick">
+						<div class="avatar-uploader" @click="uploadModifyImageClick">
 							<img v-if="formModifyAD.imageUrl" :src="formModifyAD.imageUrl" class="avatar">
 							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
 						</div>
-						<input type="file" ref="addImageUploadInput" style="display:none" accept=".jpg,.png" @change="uploadImage($event, 'img')" />
+						<input type="file" ref="modifyImageUploadInput" style="display:none" accept=".jpg,.png" @change="uploadImage($event, 'modifyImg')" />
 					</el-form-item>
 					<el-form-item id="logoStyle" label="LOGO样式" prop="logoStyle" :required="true">
 						<div style="display: flex; align-items: center;">
-							<el-image style="width: 100px; height: 40px; margin-right: 30px;" :class="{ 'selected': selectedModify_1, 'unselected': !selectedModify_1 }"
-								@click="getStyle(1)" :src="formModifyAD.url1" @mouseenter="mouseenter(1)" @mouseleave="mouseleaver()">
+							<el-image style="width: 100px; height: 40px; margin-right: 30px;"
+								:class="{ 'selected': selectedModify_1, 'unselected': !selectedModify_1 }" @click="getModifyStyle(1)" :src="formModifyAD.url1"
+								@mouseenter="mouseenter(1)" @mouseleave="mouseleaver()">
 							</el-image>
-							<el-image style="width: 100px; height: 100px; border-radius: 50%;" @click="getStyle(2)"
+							<el-image style="width: 100px; height: 100px; border-radius: 50%;" @click="getModifyStyle(2)"
 								:class="{ 'selected': selectedModify_2, 'unselected': !selectedModify_2 }" :src="formModifyAD.url2" @mouseenter="mouseenter(2)"
 								@mouseleave="mouseleaver()">
 							</el-image>
@@ -124,7 +125,7 @@
 						</el-radio-group>
 					</el-form-item>
 					<el-form-item label="链接" prop="adLink" v-if="formModifyAD.checkedTypes == 1" :required="formModifyAD.checkedTypes == 1">
-						<el-input placeholder="请输入链接" v-model="formModifyAD.adLink" maxlength="20" style="width: 90%;" clearable></el-input>
+						<el-input placeholder="请输入链接" v-model="formModifyAD.adLink" style="width: 90%;" clearable></el-input>
 					</el-form-item>
 					<el-form-item :label="formModifyAD.adSelectClass" prop="adPage" v-if="formModifyAD.checkedTypes == 2"
 						:required="formModifyAD.checkedTypes == 2">
@@ -154,7 +155,7 @@
 			</div>
 			<div slot="footer" class="dialog-footer">
 				<el-button class="cancel-btn" @click="dialogModifyADFormVisible = false">取 消</el-button>
-				<el-button type="primary" class="confirm-btn" style="width: 100px;" @click="handleADAddClick">立即修改</el-button>
+				<el-button type="primary" class="confirm-btn" style="width: 100px;" @click="handleModifyADAddClick">立即修改</el-button>
 			</div>
 		</el-dialog>
 		<!-- 添加广告窗口 -->
@@ -169,7 +170,7 @@
 							<img v-if="formAD.imageUrl" :src="formAD.imageUrl" class="avatar">
 							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
 						</div>
-						<input type="file" ref="addImageUploadInput" style="display:none" accept=".jpg,.png" @change="uploadImage($event, 'img')" />
+						<input type="file" ref="addImageUploadInput" style="display:none" accept=".jpg,.png" @change="uploadImage($event, 'addImg')" />
 					</el-form-item>
 					<el-form-item id="logoStyle" label="LOGO样式" prop="logoStyle" :required="true">
 						<div style="display: flex; align-items: center;">
@@ -190,7 +191,7 @@
 						</el-radio-group>
 					</el-form-item>
 					<el-form-item label="链接" prop="adLink" v-if="formAD.checkedTypes == 1" :required="formAD.checkedTypes == 1">
-						<el-input placeholder="请输入链接" v-model="formAD.adLink" maxlength="20" style="width: 90%;" clearable></el-input>
+						<el-input placeholder="请输入链接" v-model="formAD.adLink" style="width: 90%;" clearable></el-input>
 					</el-form-item>
 					<el-form-item :label="formAD.adSelectClass" prop="adPage" v-if="formAD.checkedTypes == 2" :required="formAD.checkedTypes == 2">
 						<div id="panel" style="width: 100%;">
@@ -561,11 +562,13 @@
 	import {
 		getTableData,
 		addAD,
+		modifyAD,
 		delAD,
 		getMinsuTableData,
 		getYouhuiquanTableData,
 		getGonglueTableData,
-		getShangpinTableData
+		getShangpinTableData,
+		ead
 	} from '@/api/adMgr';
 
 	import {
@@ -815,6 +818,25 @@
 			document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
 		},
 		methods: {
+			enablingAndDisabling(row, state) {
+				let data = {}
+				data.id = row.id;
+				data.state = state;
+				
+				var that = this;
+				// console.log(data);
+				ead(data).then((res) => {
+					// console.log(res);
+					if (res.code === 200) {
+						this.get_table_data('list');
+						that.$message.success(res.message);
+					} else {
+						that.$message.warning(res.message);
+					}
+				}).catch((err) => {
+					that.$message.error(err.message);
+				});
+			},
 			// 民宿只能单选
 			minsuIsSelectable(row, index) {
 				return this.minsuSelectedRow === null || this.minsuSelectedRow === row;
@@ -1017,7 +1039,6 @@
 							d.pageList[i].xuhao = (this.youhuiquanPagination.currentPage - 1) * this.youhuiquanPagination.pageSize + i + 1
 							that.youhuiquanTableData.push(d.pageList[i])
 						}
-						// that.tableData.sort((a,b) => b.createDate.localeCompare(a.createDate))
 					} else {
 						that.youhuiquanTableData = []
 						that.$message.warning('没有符合条件的数据！')
@@ -1059,7 +1080,6 @@
 							}
 							that.gonglueTableData.push(d.pageList[i])
 						}
-						// that.tableData.sort((a,b) => b.createDate.localeCompare(a.createDate))
 					} else {
 						that.gonglueTableData = []
 						that.$message.warning('没有符合条件的数据！')
@@ -1231,15 +1251,31 @@
 			// 获取LOGO样式
 			getStyle(value) {
 				if (value == 1) {
+					this.formAD.logoStyleValue = value;
 					this.formAD.logoStyle = 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20240304103950_2.jpg';
 					this.selected_1 = true;
 					this.selected_2 = false;
 				} else {
+					this.formAD.logoStyleValue = value;
 					this.formAD.logoStyle = 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20240304103921_1.png';
 					this.selected_2 = true;
 					this.selected_1 = false;
 				}
 			},
+			// 获取修改LOGO样式
+			getModifyStyle(value) {
+				if (value == 1) {
+					this.formModifyAD.logoStyleValue = value;
+					this.formModifyAD.logoStyle = 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20240304103950_2.jpg';
+					this.selectedModify_1 = true;
+					this.selectedModify_2 = false;
+				} else {
+					this.formModifyAD.logoStyleValue = value;
+					this.formModifyAD.logoStyle = 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20240304103921_1.png';
+					this.selectedModify_2 = true;
+					this.selectedModify_1 = false;
+				}
+			},
 			// 删除广告
 			delAd(row) {
 				this.$confirm('将永久删除【' + row.title + '】广告，是否继续？', '提示', {
@@ -1270,12 +1306,17 @@
 			modifyAd(row) {
 				this.dialogModifyADFormVisible = true;
 				
+				this.formModifyAD.id = row.id;
 				this.formModifyAD.adTitle = row.title;
 				this.formModifyAD.imageUrl = row.imageUrl;
-				if(row.logoUrl == 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20240304103950_2.jpg') {
+				if (row.logoUrl == 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20240304103950_2.jpg') {
+					this.formModifyAD.logoStyleValue = 1
+					this.formModifyAD.logoStyle = 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20240304103950_2.jpg';
 					this.selectedModify_1 = true;
 					this.selectedModify_2 = false;
 				} else {
+					this.formModifyAD.logoStyleValue = 2
+					this.formModifyAD.logoStyle = 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20240304103921_1.png';
 					this.selectedModify_1 = false;
 					this.selectedModify_2 = true;
 				}
@@ -1286,6 +1327,7 @@
 					this.formModifyAD.checkedTypes = 2;
 					this.formModifyAD.jumpDirection = row.jumpDirection;
 					this.formModifyAD.adSelectClass = row.jumpDirection;
+					this.formModifyAD.adPage = row.subTitle;
 					this.formModifyAD.adPageId = row.jumpPoint;
 				} else {
 					this.formModifyAD.checkedTypes = 3;
@@ -1302,13 +1344,13 @@
 				this.$refs.formModifyADRule.validate((valid) => {
 					if (valid) {
 						// 表单验证通过，可以继续提交表单数据
-						addAD(this.formModifyAD).then((res) => {
+						modifyAD(this.formModifyAD).then((res) => {
 							// console.log(res.data);
 							if (res.code === 200) {
 								this.get_table_data('search')
 								this.$message.success(res.message)
 								this.resetModifyADForm();
-								this.dialogADFormVisible = false;
+								this.dialogModifyADFormVisible = false;
 							} else {
 								this.$message.warning(res.message)
 							}
@@ -1330,7 +1372,8 @@
 					url1: require('../../icons/images/ad/fang.jpg'), // LOGO样式图片：矩形
 					url2: require('../../icons/images/ad/yuan.png'), // LOGO样式图片：圆形
 					showImageUrl: '', // 预览图片
-					logoStyle: '', // 样式的值
+					logoStyle: '', // 样式
+					logoStyleValue: '', // 样式的值
 					checkedTypes: 1, // 跳转类型
 					adStatus: true, // 广告状态
 					adOrder: 1, // 排序
@@ -1375,7 +1418,8 @@
 					url1: require('../../icons/images/ad/fang.jpg'), // LOGO样式图片：矩形
 					url2: require('../../icons/images/ad/yuan.png'), // LOGO样式图片：圆形
 					showImageUrl: '', // 预览图片
-					logoStyle: '', // 样式的值
+					logoStyle: '', // 样式
+					logoStyleValue: '', // 样式的值
 					checkedTypes: 1, // 跳转类型
 					adStatus: true, // 广告状态
 					adOrder: 1, // 排序
@@ -1397,6 +1441,10 @@
 			uploadImageClick() {
 				this.$refs.addImageUploadInput.click();
 			},
+			// 上传图片到cos
+			uploadModifyImageClick() {
+				this.$refs.modifyImageUploadInput.click();
+			},
 			// 上传图片
 			uploadImage(event, imgOrVideo) {
 				const file = event.target.files[0];
@@ -1414,19 +1462,25 @@
 						if (err) {
 							// console.error(err);
 							that.$message.error(err);
-							if (imgOrVideo == 'img') {
+							if (imgOrVideo == 'addImg') {
 								that.$set(that.formAD, 'imageUrl', '')
+							} else if (imgOrVideo == 'modifyImg') {
+								that.$set(that.formModifyAD, 'imageUrl', '')
 							}
 							return;
 						} else {
 							// console.log(data);
 							if (!isEmpty(`${data.Location}`)) {
-								if (imgOrVideo == 'img') {
+								if (imgOrVideo == 'addImg') {
 									that.$set(that.formAD, 'imageUrl', `https://${data.Location}`)
+								} else if (imgOrVideo == 'modifyImg') {
+									that.$set(that.formModifyAD, 'imageUrl', `https://${data.Location}`)
 								}
 							} else {
-								if (imgOrVideo == 'img') {
+								if (imgOrVideo == 'addImg') {
 									that.$set(that.formAD, 'imageUrl', '')
+								} else if (imgOrVideo == 'modifyImg') {
+									that.$set(that.formModifyAD, 'imageUrl', '')
 								}
 							}
 						}
@@ -1434,7 +1488,7 @@
 				);
 			},
 			/**
-			 * 获取消费记录,表格数据
+			 * 获取广告记录,表格数据
 			 */
 			get_table_data(param) {
 				this.loading = true
@@ -1450,12 +1504,17 @@
 				// console.log(data);
 				getTableData(data).then((res) => {
 					// console.log(res);
-					if (res.code === 200) {
+					if (res.code === 200 && res.rows != '') {
 						that.pagination.total = res.total
 						that.tableData = []
 						for (var i = 0; i < res.rows.length; i++) {
 							that.tableData.push(res.rows[i])
 						}
+						if (that.tableData.length == 0 && (that.pagination.currentPage - 1) > 0) {
+							that.pagination.currentPage = that.pagination.currentPage - 1;
+							// that.$set(that.pagination, 'currentPage', that.pagination.currentPage - 1);
+							that.get_table_data('list');
+						}
 					} else {
 						that.tableData = []
 						that.$message.warning('没有符合条件的数据！')