Skip to content

E
ElectricitySheep
Commit 93708096 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 79ef8d74
Show whitespace changes
Inline Side-by-side
Showing with 214 additions and 116 deletions
src/components/common/choiceAreaAuth.vue
View file @ 93708096
......@@ -79,38 +79,47 @@
<div flex="dir:left box:first">
<div class="inside" flex="dir:left main:center cross:center" ref="inside">
<div style="position: relative;" ref="box">
<div class="shadow" :style="{zIndex: zIndex}" @click="click" @mousedown="mousedown" @mouseup="mouseup"
@mousemove="mousemove" @mouseout="mouseout "></div>
<div class="shadow" :style="{zIndex: zIndex}" @click="hotSpotclick" @mousedown="mousedown"
@mouseup="mouseup" @mousemove="mousemove" @mouseout="mouseout "></div>
<div class="hotspot"
:style="{width:item.width+'px',height:item.height+'px',left:item.left+'px',
top:item.top+'px', maxWidth:'calc('+width+' - '+item.left+'px)',
maxHeight:'calc('+height+' - '+item.top+'px)', backgroundColor: index == key ? 'rgba(92, 179, 253, 0.2)' : ''}"
@click="select(key)" v-for="(item, key) in hotspotList" :key="key" :data-index="key">
<div class="close" @click.stop="del(key)" v-if="item.is_close">
@click="selectHotSpot(key)" v-for="(item, key) in hotspotList" :key="key" :data-index="key">
<div class="close" @click.stop="delHotSpot()" v-if="item.width>0 && item.IsChecked">
<img style="width: 32px;height: 32px" :src="getIconLink('/Static/icon-close.png')">
</div>
</div>
<div :style="calcstyle" flex="dir:left main:center cross:center">
<img style="width: auto;height: auto;max-width: 100%;max-height: 100%" :src="picUrl">
<img style="width:auto;height:auto;max-width:100%;max-height:100%" :src="picUrl">
</div>
</div>
</div>
<el-form label-width="120px">
<div class="right" v-if="index > -1">
<table>
<tr>
<td>
<el-checkbox v-if="hotspotList&&hotspotList.length>0" v-model="hotspotList[0].IsChecked"
@change="changeItem(hotspotList[0],0)">不登录按钮
</el-checkbox>
</td>
<td>
<el-form-item label="热区尺寸">
<el-row type="flex">
<el-col :span="12">
<el-col :span="15">
<div flex="dir:left">
<label>W</label>
<el-input size="small" type="number" v-model.number="hotspotList[index].width" :max="maxWidth">
<el-input size="small" type="number" v-if="hotspotList&&hotspotList.length>0"
v-model="hotspotList[0].width" :max="maxWidth_Cancel">
</el-input>
<label>px</label>
</div>
</el-col>
<el-col :span="12">
<el-col :span="15">
<div flex="dir:left">
<label>H</label>
<el-input size="small" type="number" v-model.number="hotspotList[index].height" :max="maxHeight">
<el-input size="small" type="number" v-if="hotspotList&&hotspotList.length>0"
v-model="hotspotList[0].height" :max="maxHeight_Cancel">
</el-input>
<label>px</label>
</div>
......@@ -119,33 +128,84 @@
</el-form-item>
<el-form-item label="热区位置">
<el-row type="flex">
<el-col :span="12">
<el-col :span="15">
<div flex="dir:left">
<label>X</label>
<el-input size="small" type="number" v-model.number="hotspotList[index].left">
<el-input size="small" type="number" v-if="hotspotList&&hotspotList.length>0"
v-model.number="hotspotList[0].left">
</el-input>
<label>px</label>
</div>
</el-col>
<el-col :span="12">
<el-col :span="15">
<div flex="dir:left">
<label>Y</label>
<el-input size="small" type="number" v-model.number="hotspotList[index].top">
<el-input size="small" type="number" v-if="hotspotList&&hotspotList.length>0"
v-model.number="hotspotList[0].top">
</el-input>
<label>px</label>
</div>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="热区属性" v-if="mode == 'auth'">
<el-radio-group v-model="hotspotList[index].open_type">
<el-radio label="login" :disabled="radioDisabled('login')">登录按钮</el-radio>
<el-radio label="cancel" :disabled="radioDisabled('cancel')">不登录按钮</el-radio>
</el-radio-group>
</td>
</tr>
<tr>
<td>
<el-checkbox v-if="hotspotList&&hotspotList.length>1" v-model="hotspotList[1].IsChecked"
@change="changeItem(hotspotList[1],1)">登录按钮
</el-checkbox>
</td>
<td>
<el-form-item label="热区尺寸">
<el-row type="flex">
<el-col :span="15">
<div flex="dir:left">
<label>W</label>
<el-input size="small" type="number" v-if="hotspotList&&hotspotList.length>1"
v-model="hotspotList[1].width" :max="maxWidth_Login">
</el-input>
<label>px</label>
</div>
</el-col>
<el-col :span="15">
<div flex="dir:left">
<label>H</label>
<el-input size="small" type="number" v-if="hotspotList&&hotspotList.length>1"
v-model="hotspotList[1].height" :max="maxHeight_Login">
</el-input>
<label>px</label>
</div>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="热区位置">
<el-row type="flex">
<el-col :span="15">
<div flex="dir:left">
<label>X</label>
<el-input size="small" type="number" v-if="hotspotList&&hotspotList.length>1"
v-model.number="hotspotList[1].left">
</el-input>
<label>px</label>
</div>
<div v-if="index == -1 && hotspotList.length == 0" style="padding: 20px 40px;">请先在左侧蓝框内用鼠标划出热区范围</div>
<el-form-item v-else label="">
</el-col>
<el-col :span="15">
<div flex="dir:left">
<label>Y</label>
<el-input size="small" type="number" v-if="hotspotList&&hotspotList.length>1"
v-model.number="hotspotList[1].top">
</el-input>
<label>px</label>
</div>
</el-col>
</el-row>
</el-form-item>
</td>
</tr>
</table>
<div style="padding: 20px 40px;">请先在左侧蓝框内用鼠标划出热区范围</div>
<el-form-item label="">
<el-button style="margin-left: 10px" v-if="hotspotList.length==2" type="primary" size="small"
@click="confirm">保存</el-button>
<el-button size="small" @click="clearAll">重置</el-button>
......@@ -180,19 +240,7 @@
dialogVisible: false,
is_mousedown: false,
is_mousemove: false,
is_close: false,
hotspot: {
height: 0,
width: 0,
left: 0,
top: 0,
defaultX: 0,
defaultY: 0,
is_close: false,
link: '',
open_type: ''
},
hotspotList: [],
hotspotList: JSON.parse(JSON.stringify(this.hotspotArray)),
index: -1,
zIndex: 99,
};
......@@ -202,7 +250,10 @@
this.hotspotList = JSON.parse(JSON.stringify(this.hotspotArray))
this.index = -1;
if (this.hotspotList.length > 0) {
this.select(1);
this.index = 0;
this.hotspotList[0].IsChecked = true;
this.hotspotList[1].IsChecked = false;
this.selectHotSpot(0);
}
}
},
......@@ -215,15 +266,65 @@
};
return objStyle;
},
maxWidth() {
return parseFloat(this.width) - this.hotspotList[this.index].left;
//不登录按钮最大宽度
maxWidth_Cancel() {
var widthStr = this.width.replace("px", "");
var tempWidth = parseFloat(widthStr);
var firstLeft = 0;
if (this.hotspotList && this.hotspotList.length > 0 && this.hotspotList[0].left) {
firstLeft = this.hotspotList[0].left;
}
tempWidth = tempWidth - firstLeft;
return tempWidth;
},
//不登录按钮最大高度
maxHeight_Cancel() {
var heightStr = this.height.replace("px", "");
var maxHeight = parseFloat(heightStr);
var firstTop = 0;
if (this.hotspotList && this.hotspotList.length > 0 && this.hotspotList[0].top) {
firstTop = this.hotspotList[0].top;
}
maxHeight = maxHeight - firstTop;
return maxHeight;
},
maxHeight() {
return parseFloat(this.height) - this.hotspotList[this.index].top;
//登录按钮最大宽度
maxWidth_Login() {
var widthStr = this.width.replace("px", "");
var tempWidth = parseFloat(widthStr);
var secondLeft = 0;
if (this.hotspotList && this.hotspotList.length > 1 && this.hotspotList[1].left) {
secondLeft = this.hotspotList[1].left;
}
tempWidth = tempWidth - secondLeft;
return tempWidth;
},
//登录按钮最大高度
maxHeight_Login() {
var heightStr = this.height.replace("px", "");
var maxHeight = parseFloat(heightStr);
var secondTop = 0;
if (this.hotspotList && this.hotspotList.length > 1 && this.hotspotList[1].top) {
secondTop = this.hotspotList[1].top;
}
maxHeight = maxHeight - secondTop;
return maxHeight;
},
},
created() {
},
methods: {
click(e) {
//选中项
changeItem(item, index) {
this.hotspotList.forEach(subItem => {
subItem.IsChecked = false;
});
item.IsChecked = !item.IsChecked;
this.selectHotSpot(index);
},
//热区点击
hotSpotclick(e) {
this.is_mousedown = false;
},
position(e) {
......@@ -249,24 +350,21 @@
return position;
},
mousedown(e) {
if (!this.multiple) {
if (this.hotspotList.length > 0) {
return;
var count = 0;
this.hotspotList.forEach(item => {
if (item.width > 0) {
count++;
}
} else {
if (this.max && this.hotspotList.length === this.max) {
})
if (this.max && count === this.max) {
return;
}
}
let position = this.position(e);
this.is_mousedown = true;
let hotspot = JSON.parse(JSON.stringify(this.hotspot));
hotspot.left = position.x;
hotspot.top = position.y;
hotspot.defaultX = position.x;
hotspot.defaultY = position.y;
this.hotspotList.push(hotspot);
this.index = this.hotspotList.length - 1;
this.hotspotList[this.index].left = position.x;
this.hotspotList[this.index].top = position.y;
this.hotspotList[this.index].defaultX = position.x;
this.hotspotList[this.index].defaultY = position.y;
this.zIndex = 102;
},
mousemove(e) {
......@@ -275,11 +373,11 @@
return;
}
let position = this.position(e);
let hotspot = this.hotspotList[this.index];
this.hotspotList[this.index].left = Math.min(position.x, hotspot.defaultX);
this.hotspotList[this.index].top = Math.min(position.y, hotspot.defaultY);
this.hotspotList[this.index].width = Math.abs(hotspot.defaultX - position.x);
this.hotspotList[this.index].height = Math.abs(hotspot.defaultY - position.y);
let tempHotspot = this.hotspotList[this.index];
this.hotspotList[this.index].left = Math.min(position.x, tempHotspot.defaultX);
this.hotspotList[this.index].top = Math.min(position.y, tempHotspot.defaultY);
this.hotspotList[this.index].width = Math.abs(tempHotspot.defaultX - position.x);
this.hotspotList[this.index].height = Math.abs(tempHotspot.defaultY - position.y);
this.is_mousemove = true;
}
},
......@@ -301,11 +399,15 @@
this.is_mousemove = false;
this.zIndex = 99;
},
del(index) {
this.hotspotList.splice(index, 1);
this.index = -1;
delHotSpot() {
this.hotspotList[this.index].left = 0;
this.hotspotList[this.index].top = 0;
this.hotspotList[this.index].width = 0;
this.hotspotList[this.index].height = 0;
this.hotspotList[this.index].defaultX = 0;
this.hotspotList[this.index].defaultY = 0;
},
select(index) {
selectHotSpot(index) {
if (this.is_mousemove) {
return;
}
......@@ -313,21 +415,13 @@
},
clearAll() {
this.index = -1;
this.hotspotList = [];
//this.hotspotList = [];
},
confirm() {
this.dialogVisible = false;
this.index = -1;
this.$emit('confirm', this.hotspotList);
},
radioDisabled(name) {
for (let i in this.hotspotList) {
if (this.hotspotList[i].open_type && this.hotspotList[i].open_type == name && i != this.index) {
return true;
}
}
return false;
},
}
};
......
src/components/sallCenter/authorization.vue
View file @ 93708096
......@@ -102,28 +102,32 @@
},
//热区设置默认值
GetDefaultSpot() {
var objLogin = {
var objCancel = {
width: 224,
height: 80,
left: 340,
left: 84,
top: 566,
defaultX: 340,
defaultX: 84,
defaultY: 566,
link: "",
open_type: "login"
open_type: "cancel",
IsChecked:false,
};
this.addMsg.AuthDataList.push(objLogin);
var objCancel = {
this.addMsg.AuthDataList.push(objCancel);
var objLogin = {
width: 224,
height: 80,
left: 84,
left: 340,
top: 566,
defaultX: 84,
defaultX: 340,
defaultY: 566,
link: "",
open_type: "cancel"
open_type: "login",
IsChecked:false,
};
this.addMsg.AuthDataList.push(objCancel);
this.addMsg.AuthDataList.push(objLogin);
},
//保存
saveMsg() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment