|
|
@@ -123,15 +123,19 @@
|
|
|
<img :src="imgs.img3" style="width: 150px; height: 75px;" alt="图片示例" />
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
- <el-form-item id="logoStyle" label="LOGO样式" prop="logoStyle" :required="true">
|
|
|
+ <el-form-item id="logoStyle" label="LOGO样式" prop="logoStyle">
|
|
|
<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="getModifyStyle(1)" :src="formModifyAD.url1"
|
|
|
- @mouseenter="mouseenter(1)" @mouseleave="mouseleaver()">
|
|
|
+ @contextmenu.prevent="handleRightClick(1)">
|
|
|
</el-image>
|
|
|
- <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 style="width: 100px; height: 100px; border-radius: 50%; margin-right: 30px;" @click="getModifyStyle(2)"
|
|
|
+ :class="{ 'selected': selectedModify_2, 'unselected': !selectedModify_2 }" :src="formModifyAD.url2"
|
|
|
+ @contextmenu.prevent="handleRightClick(2)">
|
|
|
+ </el-image>
|
|
|
+ <el-image style="width: 100px; height: 40px; margin-right: 30px; background-color: #9d9d9d;" @click="getModifyStyle(3)"
|
|
|
+ :class="{ 'selected': selectedModify_3, 'unselected': !selectedModify_3 }" :src="formModifyAD.url3"
|
|
|
+ @contextmenu.prevent="handleRightClick(3)">
|
|
|
</el-image>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
@@ -208,14 +212,16 @@
|
|
|
<img :src="imgs.img3" style="width: 150px; height: 75px;" alt="图片示例" />
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
- <el-form-item id="logoStyle" label="LOGO样式" prop="logoStyle" :required="true">
|
|
|
+ <el-form-item id="logoStyle" label="LOGO样式" prop="logoStyle">
|
|
|
<div style="display: flex; align-items: center;">
|
|
|
<el-image style="width: 100px; height: 40px; margin-right: 30px;" :class="{ 'selected': selected_1, 'unselected': !selected_1 }"
|
|
|
- @click="getStyle(1)" :src="formAD.url1" @mouseenter="mouseenter(1)" @mouseleave="mouseleaver()">
|
|
|
+ @click="getStyle(1)" :src="formAD.url1" @contextmenu.prevent="handleRightClick(1)">
|
|
|
+ </el-image>
|
|
|
+ <el-image style="width: 100px; height: 100px; border-radius: 50%; margin-right: 30px;" @click="getStyle(2)"
|
|
|
+ :class="{ 'selected': selected_2, 'unselected': !selected_2 }" :src="formAD.url2" @contextmenu.prevent="handleRightClick(2)">
|
|
|
</el-image>
|
|
|
- <el-image style="width: 100px; height: 100px; border-radius: 50%;" @click="getStyle(2)"
|
|
|
- :class="{ 'selected': selected_2, 'unselected': !selected_2 }" :src="formAD.url2" @mouseenter="mouseenter(2)"
|
|
|
- @mouseleave="mouseleaver()">
|
|
|
+ <el-image style="width: 100px; height: 40px; margin-right: 30px; background-color: #9d9d9d;" @click="getStyle(3)"
|
|
|
+ :class="{ 'selected': selected_3, 'unselected': !selected_3 }" :src="formAD.url3" @contextmenu.prevent="handleRightClick(3)">
|
|
|
</el-image>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
@@ -535,7 +541,8 @@
|
|
|
</el-dialog>
|
|
|
<!-- 鼠标悬停显示图片预览 -->
|
|
|
<el-dialog :visible="showPreview" @update:visible="showPreview = $event" @close="closeDialog" width="500px">
|
|
|
- <div style="height: 450px; width: 450px; display: flex; align-items: center; justify-content: center;">
|
|
|
+ <div style="height: 450px; width: 450px; display: flex; align-items: center; justify-content: center;"
|
|
|
+ :style="{ backgroundColor: backgroundColor }">
|
|
|
<img :src="formAD.showImageUrl" style="width: 450px;" />
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
@@ -744,6 +751,7 @@
|
|
|
imageUrl: '', // 上传成功的图片
|
|
|
url1: require('../../icons/images/ad/fang.jpg'), // LOGO样式图片:矩形
|
|
|
url2: require('../../icons/images/ad/yuan.png'), // LOGO样式图片:圆形
|
|
|
+ url3: require('../../icons/images/ad/bai.png'), // LOGO样式图片:白色
|
|
|
showImageUrl: '', // 预览图片
|
|
|
logoStyle: '', // 样式的值
|
|
|
logoStyleValue: '', // 样式的值
|
|
|
@@ -762,6 +770,7 @@
|
|
|
imageUrl: '', // 上传成功的图片
|
|
|
url1: require('../../icons/images/ad/fang.jpg'), // LOGO样式图片:矩形
|
|
|
url2: require('../../icons/images/ad/yuan.png'), // LOGO样式图片:圆形
|
|
|
+ url3: require('../../icons/images/ad/bai.png'), // LOGO样式图片:白色
|
|
|
showImageUrl: '', // 预览图片
|
|
|
logoStyle: '', // 样式的值
|
|
|
logoStyleValue: '', // 样式的值
|
|
|
@@ -782,10 +791,13 @@
|
|
|
},
|
|
|
previewTimer: null, // 定时对象
|
|
|
showPreview: false, // 鼠标悬停显示图片预览
|
|
|
+ backgroundColor: '#9d9d9d',
|
|
|
selected_1: false, // 控制LOGO样式
|
|
|
selected_2: false, // 控制LOGO样式
|
|
|
+ selected_3: false, // 控制LOGO样式
|
|
|
selectedModify_1: false, // 控制LOGO样式
|
|
|
selectedModify_2: false, // 控制LOGO样式
|
|
|
+ selectedModify_3: false, // 控制LOGO样式
|
|
|
formADRules: {
|
|
|
adTitle: [{
|
|
|
required: true,
|
|
|
@@ -807,11 +819,6 @@
|
|
|
message: '请上传图片',
|
|
|
trigger: 'change'
|
|
|
}],
|
|
|
- logoStyle: [{
|
|
|
- required: true,
|
|
|
- message: '请选择LOGO样式',
|
|
|
- trigger: 'change'
|
|
|
- }],
|
|
|
adLink: [{
|
|
|
required: true,
|
|
|
message: '请输入链接',
|
|
|
@@ -906,7 +913,7 @@
|
|
|
},
|
|
|
// 民宿选择改变
|
|
|
minsuSelectionChange(selection) {
|
|
|
- console.log(selection)
|
|
|
+ // console.log(selection)
|
|
|
if (selection && selection.length > 0) {
|
|
|
this.minsuSelectedRow = selection[0]; // 只获取第一条选中的记录
|
|
|
} else {
|
|
|
@@ -1308,57 +1315,94 @@
|
|
|
this.shangpinVisible = true;
|
|
|
}
|
|
|
},
|
|
|
- // 鼠标悬停退出
|
|
|
- mouseleaver() {
|
|
|
- if (this.showPreview == true) {
|
|
|
- return;
|
|
|
- }
|
|
|
- clearTimeout(this.previewTimer);
|
|
|
- this.showPreview = false;
|
|
|
- this.formAD.showImageUrl = '';
|
|
|
- },
|
|
|
closeDialog() {
|
|
|
clearTimeout(this.previewTimer);
|
|
|
this.showPreview = false;
|
|
|
this.formAD.showImageUrl = '';
|
|
|
},
|
|
|
- // 鼠标进入悬停
|
|
|
- mouseenter(param) {
|
|
|
+ // 添加广告右键单击
|
|
|
+ handleRightClick(param) {
|
|
|
+ event.preventDefault();
|
|
|
if (param == 1) {
|
|
|
this.formAD.showImageUrl = this.formAD.url1
|
|
|
- } else {
|
|
|
+ this.backgroundColor = '#fff'
|
|
|
+ } else if (param == 2) {
|
|
|
this.formAD.showImageUrl = this.formAD.url2
|
|
|
+ this.backgroundColor = '#fff'
|
|
|
+ } else {
|
|
|
+ this.formAD.showImageUrl = this.formAD.url3
|
|
|
+ this.backgroundColor = '#9d9d9d'
|
|
|
}
|
|
|
- this.previewTimer = setTimeout(() => {
|
|
|
- this.showPreview = true
|
|
|
- }, 1500);
|
|
|
+ this.showPreview = true
|
|
|
},
|
|
|
// 获取LOGO样式
|
|
|
getStyle(value) {
|
|
|
if (value == 1) {
|
|
|
this.formAD.logoStyleValue = value;
|
|
|
- this.formAD.logoStyle = 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20240306145048_1.png';
|
|
|
- this.selected_1 = true;
|
|
|
+ this.selected_1 = !this.selected_1;
|
|
|
+ if (this.selected_1 == true) {
|
|
|
+ this.formAD.logoStyle = 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20240306145048_1.png';
|
|
|
+ } else {
|
|
|
+ this.formAD.logoStyle = '';
|
|
|
+ }
|
|
|
this.selected_2 = false;
|
|
|
+ this.selected_3 = false;
|
|
|
+ } else if (value == 2) {
|
|
|
+ this.formAD.logoStyleValue = value;
|
|
|
+ this.selected_2 = !this.selected_2;
|
|
|
+ if (this.selected_2 == true) {
|
|
|
+ this.formAD.logoStyle = 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20240306145140_2.png';
|
|
|
+ } else {
|
|
|
+ this.formAD.logoStyle = '';
|
|
|
+ }
|
|
|
+ this.selected_1 = false;
|
|
|
+ this.selected_3 = false;
|
|
|
} else {
|
|
|
this.formAD.logoStyleValue = value;
|
|
|
- this.formAD.logoStyle = 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20240306145140_2.png';
|
|
|
- this.selected_2 = true;
|
|
|
+ this.selected_3 = !this.selected_3;
|
|
|
+ if (this.selected_3 == true) {
|
|
|
+ this.formAD.logoStyle =
|
|
|
+ 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20240330212452_4dafae643d6143d38ef48e6cecc0ba0.png';
|
|
|
+ } else {
|
|
|
+ this.formAD.logoStyle = '';
|
|
|
+ }
|
|
|
this.selected_1 = false;
|
|
|
+ this.selected_2 = false;
|
|
|
}
|
|
|
},
|
|
|
// 获取修改LOGO样式
|
|
|
getModifyStyle(value) {
|
|
|
if (value == 1) {
|
|
|
this.formModifyAD.logoStyleValue = value;
|
|
|
- this.formModifyAD.logoStyle = 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20240306145048_1.png';
|
|
|
- this.selectedModify_1 = true;
|
|
|
+ this.selectedModify_1 = !this.selectedModify_1;
|
|
|
+ if (this.selectedModify_1 == true) {
|
|
|
+ this.formModifyAD.logoStyle = 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20240306145048_1.png';
|
|
|
+ } else {
|
|
|
+ this.formModifyAD.logoStyle = '';
|
|
|
+ }
|
|
|
this.selectedModify_2 = false;
|
|
|
+ this.selectedModify_3 = false;
|
|
|
+ } else if (value == 2) {
|
|
|
+ this.formModifyAD.logoStyleValue = value;
|
|
|
+ this.selectedModify_2 = !this.selectedModify_2;
|
|
|
+ if (this.selectedModify_2 == true) {
|
|
|
+ this.formModifyAD.logoStyle = 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20240306145140_2.png';
|
|
|
+ } else {
|
|
|
+ this.formModifyAD.logoStyle = '';
|
|
|
+ }
|
|
|
+ this.selectedModify_1 = false;
|
|
|
+ this.selectedModify_3 = false;
|
|
|
} else {
|
|
|
this.formModifyAD.logoStyleValue = value;
|
|
|
- this.formModifyAD.logoStyle = 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20240306145140_2.png';
|
|
|
- this.selectedModify_2 = true;
|
|
|
+ this.selectedModify_3 = !this.selectedModify_3;
|
|
|
+ if (this.selectedModify_3 == true) {
|
|
|
+ this.formModifyAD.logoStyle =
|
|
|
+ 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20240330212452_4dafae643d6143d38ef48e6cecc0ba0.png';
|
|
|
+ } else {
|
|
|
+ this.formModifyAD.logoStyle = '';
|
|
|
+ }
|
|
|
this.selectedModify_1 = false;
|
|
|
+ this.selectedModify_2 = false;
|
|
|
}
|
|
|
},
|
|
|
// 删除广告
|
|
|
@@ -1546,7 +1590,7 @@
|
|
|
// 其他上传逻辑
|
|
|
this.uploadImageAction(file, imgOrVideo);
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
// 实现上传
|
|
|
uploadImageAction(file, imgOrVideo) {
|
|
|
@@ -1974,7 +2018,7 @@
|
|
|
|
|
|
.avatar-uploader {
|
|
|
border: 1px dashed #d9d9d9;
|
|
|
- width: 100px;
|
|
|
+ width: 150px;
|
|
|
border-radius: 6px;
|
|
|
cursor: pointer;
|
|
|
position: relative;
|
|
|
@@ -1988,14 +2032,14 @@
|
|
|
.avatar-uploader-icon {
|
|
|
font-size: 28px;
|
|
|
color: #8c939d;
|
|
|
- width: 100px;
|
|
|
+ width: 150px;
|
|
|
height: 100px;
|
|
|
line-height: 100px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.avatar {
|
|
|
- width: 100px;
|
|
|
+ width: 150px;
|
|
|
height: 100px;
|
|
|
display: block;
|
|
|
}
|