Skip to content

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

页面修改

parent 6be93e19
Show whitespace changes
Inline Side-by-side
Showing with 412 additions and 26 deletions
src/components/Fsetting.vue
View file @ 06ef873c
......@@ -162,7 +162,7 @@
<div class="mainLeftMenu">
<div class="leftMenu1">
<div class="F_Logo">
<div class="asideInner" @click="CommonJump('zanIndex')">{{currentUser.MallName}}
<div class="asideInner" @click="CommonJump('mallIndex')">{{currentUser.MallName}}
</div>
</div>
<ul class="FsettingUU">
......
src/components/Ftemplate.vue
View file @ 06ef873c
......@@ -171,7 +171,7 @@
<div class="mainLeftMenu">
<div class="leftMenu1">
<div class="F_Logo">
<div class="asideInner" @click="CommonJump('zanIndex')">{{currentUser.MallName}}
<div class="asideInner" @click="CommonJump('mallIndex')">{{currentUser.MallName}}
</div>
</div>
<ul class="FsettingUU">
......
src/components/common/choiceAreaAuth.vue 0 → 100644
View file @ 06ef873c
<style>
.app-hotspot .shadow {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
border: 1px solid #2E9FFF;
}
.app-hotspot .hotspot {
position: absolute;
left: 0;
top: 0;
border: 1px dashed #5CB3FD;
z-index: 100;
}
.app-hotspot .hotspot .close {
position: absolute;
right: -16px;
top: -16px;
z-index: 101
}
.app-hotspot .el-input {
width: 70px;
}
.app-hotspot .right label {
padding: 0 10px;
}
.app-hotspot .inside {
position: relative;
width: 750px;
min-height: 1334px;
background-color: #eee;
zoom: 0.5;
}
.app-hotspot .pic {
width: auto;
height: auto;
max-width: 750px;
max-height: 1334px;
transform: scale(0.5);
}
.app-hotspot .pic-list {
position: relative;
}
.app-hotspot .pic-list div {
position: absolute;
left: 0;
top: 0;
}
.app-hotspot {
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.app-hotspot .el-input-group__append {
background-color: #fff;
}
</style>
<template id="app-hotspot">
<div class="app-hotspot">
<div @click="dialogVisible = !dialogVisible" style="display: inline-block">
<slot></slot>
</div>
<el-dialog append-to-body title="热区划分" :visible.sync="dialogVisible" :close-on-click-modal="false"
class="app-hotspot" width="900px">
<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="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">
<img style="width: 32px;height: 32px" :src="getIconLink('/Static/icon-close.png')">
</div>
</div>
<div class="pic-list" :style="style" v-if="picList && picList.length > 0">
<template v-for="(item, index) in picList">
<div :style="item" :key="index">
<img :src="item.pic_url" style="width: 100%;visibility: hidden;display: block;">
</div>
<img :src="item.pic_url" :key="index" style="width: 100%;visibility: hidden;display: block;">
</template>
</div>
<div :style="style" flex="dir:left main:center cross:center" v-else>
<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">
<el-form-item label="热区尺寸">
<el-row type="flex">
<el-col :span="12">
<div flex="dir:left">
<label>W</label>
<el-input size="small" type="number" v-model.number="hotspotList[index].width" :max="maxWidth">
</el-input>
<label>px</label>
</div>
</el-col>
<el-col :span="12">
<div flex="dir:left">
<label>H</label>
<el-input size="small" type="number" v-model.number="hotspotList[index].height" :max="maxHeight">
</el-input>
<label>px</label>
</div>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="热区位置">
<el-row type="flex">
<el-col :span="12">
<div flex="dir:left">
<label>X</label>
<el-input size="small" type="number" v-model.number="hotspotList[index].left">
</el-input>
<label>px</label>
</div>
</el-col>
<el-col :span="12">
<div flex="dir:left">
<label>Y</label>
<el-input size="small" type="number" v-model.number="hotspotList[index].top">
</el-input>
<label>px</label>
</div>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="热区链接" v-if="isLink">
<el-input size="small" style="width: 100%;" :disabled="true" v-model="hotspotList[index].link.PageName">
<template slot="append">
<el-button @click="isShowLink=true">选择链接</el-button>
</template>
</el-input>
</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>
</el-form-item>
</div>
<div v-if="index == -1 && hotspotList.length == 0" style="padding: 20px 40px;">请先在左侧蓝框内用鼠标划出热区范围</div>
<el-form-item v-else 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>
</el-form-item>
</el-form>
</div>
</el-dialog>
<el-dialog title="选择链接" :visible.sync="isShowLink" width="800px">
<chooseMenu ref="chooseMenu"></chooseMenu>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="isShowLink=false">取 消</el-button>
<el-button size="small" type="danger" @click="getChoiceLink()">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import chooseMenu from "../common/chooseMenu.vue";
export default {
props: {
multiple: Boolean,
picUrl: String,
width: {
type: String,
default: '750px'
},
height: {
type: String,
default: '1334px'
},
hotspotArray: {
type: Array,
default: []
},
isLink: Boolean,
picList: Array,
max: Number,
mode: String
},
data() {
return {
isShowLink: false,
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: [],
index: -1,
zIndex: 99,
};
},
components: {
chooseMenu
},
watch: {
dialogVisible(oldVal, newVal) {
this.hotspotList = JSON.parse(JSON.stringify(this.hotspotArray))
this.index = -1;
if(this.hotspotList.length>0){
this.select(1);
}
}
},
computed: {
style() {
return {
width: this.width,
height: this.height
};
},
maxWidth() {
return parseFloat(this.width) - this.hotspotList[this.index].left;
},
maxHeight() {
return parseFloat(this.height) - this.hotspotList[this.index].top;
},
},
methods: {
click(e) {
this.is_mousedown = false;
},
position(e) {
function getElementPosition(e) {
var x = 0,
y = 0;
while (e != null) {
x += e.offsetLeft;
y += e.offsetTop;
e = e.offsetParent;
}
return {
x: x,
y: y
};
}
// 缩放比例
let zoom = 2;
// 获取图片距离浏览器的x/y（真实的尺寸，不受zoom属性影响）
// let position = getElementPosition(this.$refs.box);
// 获取父容器距离浏览器的x/y（真实的尺寸，不受zoom属性影响）
// let inside = getElementPosition(this.$refs.inside);
// 图片距离缩放容器左边和顶部
// let picX = (position.x - inside.x) / zoom;
// let picY = (position.y - inside.y) / zoom;
// 鼠标点下时距离浏览器的x/y（需要计算zoom属性的影响）
// position.x = e.clientX + (e.offsetX + picX) * (zoom - 1) - position.x;
// position.y = e.clientY + (e.offsetY + picY) * (zoom - 1) - position.y;
// position.x = (e.clientX - inside.x) * zoom - (position.x - inside.x);
// position.y = (e.clientY - inside.y) * zoom - (position.y - inside.y);
let position = {
x: e.offsetX * zoom,
y: e.offsetY * zoom
};
return position;
},
mousedown(e) {
if (!this.multiple) {
if (this.hotspotList.length > 0) {
return;
}
} else {
if (this.max && this.hotspotList.length === 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.zIndex = 102;
},
mousemove(e) {
if (this.is_mousedown) {
if (this.index === -1) {
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);
this.is_mousemove = true;
}
},
mouseout(e) {
if (this.index === -1) {
return;
}
this.is_mousedown = false;
this.hotspotList[this.index].is_close = true;
this.is_mousemove = false;
this.zIndex = 99;
},
mouseup(e) {
if (this.index === -1) {
return;
}
this.is_mousedown = false;
this.hotspotList[this.index].is_close = true;
this.is_mousemove = false;
this.zIndex = 99;
},
del(index) {
this.hotspotList.splice(index, 1);
this.index = -1;
},
select(index) {
if (this.is_mousemove) {
return;
}
this.index = index;
},
clearAll() {
this.index = -1;
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;
},
//获取选择链接
getChoiceLink() {
//调用子组件方法
var obj = this.$refs.chooseMenu.getChooseMenu();
if (this.index > -1 && this.hotspotList.length > 0) {
this.hotspotList[this.index].link = obj
}
this.isShowLink = false;
},
}
};
</script>
src/components/mall.vue
View file @ 06ef873c
......@@ -291,7 +291,7 @@
<div class="is-show-menu-2" v-if="isShowOne" @click="showTwo=true,isShowOne=false">>></div>
<div class="leftMenu1">
<div class="aside-logo">
<div class="asideInner" @click="CommonJump('zanIndex'),firstCked=0,showTwo=false">{{currentUser.MallName}}
<div class="asideInner" @click="CommonJump('mallIndex'),firstCked=0,showTwo=false">{{currentUser.MallName}}
</div>
</div>
<ul>
......@@ -472,7 +472,7 @@
mounted() {
this.getMenuList();
if(this.$route.query.FIndex){
this.CommonJump('zanIndex');
this.CommonJump('mallIndex');
}
this.Height = document.documentElement.clientHeight - 60;
//监听浏览器窗口变化　
......
src/components/zanIndex.vue → src/components/mallIndex.vue
View file @ 06ef873c
......@@ -5,7 +5,7 @@
border-bottom: 1px solid #EBEEF5;
}
.zanIndex_Second {
.mallIndex_Second {
background-color: #fff;
position: relative;
padding-bottom: 50px;
......@@ -24,13 +24,13 @@
width: 6%;
}
.zanIndex .el-input__inner {
.mallIndex .el-input__inner {
height: 32px;
line-height: 32px;
padding: 0 10px;
}
.zanIndex .el-input__icon {
.mallIndex .el-input__icon {
line-height: 32px;
}
......@@ -38,12 +38,12 @@
margin-right: 5px;
}
.zanIndex .zanIndex_Second .el-tabs__nav-scroll {
.mallIndex .mallIndex_Second .el-tabs__nav-scroll {
width: 120px;
margin-left: 30px;
}
.zanIndex .zanIndex_Second .el-tabs__nav-wrap::after {
.mallIndex .mallIndex_Second .el-tabs__nav-wrap::after {
content: "";
position: absolute;
left: 0;
......@@ -55,12 +55,12 @@
height: 1px;
}
.zanIndex .el-tabs__item {
.mallIndex .el-tabs__item {
height: 32px;
line-height: 32px;
}
.zanIndex .clean {
.mallIndex .clean {
color: #92959B;
margin-left: 30px;
cursor: pointer;
......@@ -99,7 +99,7 @@
border-left: 1px dashed #EFF1F7;
}
.zanIndexThrid {
.mallIndexThrid {
border: 1px solid #EBEEF5;
background-color: #FFF;
color: #303133;
......@@ -132,7 +132,7 @@
background-color: transparent;
}
.zanIndex .el-card__body {
.mallIndex .el-card__body {
padding: 20px;
}
......@@ -193,11 +193,11 @@
overflow: hidden;
}
.el-zanIndex_btmheader {
.el-mallIndex_btmheader {
padding: 14px 20px;
}
.el-zanIndex_btmheader span {
.el-mallIndex_btmheader span {
/* float:left; */
height: 32px;
line-height: 32px;
......@@ -299,9 +299,9 @@
</style>
<template>
<div class="zanIndex">
<div class="mallIndex">
<div class="zanTotalTop">数据概况</div>
<div class="zanIndex_Second">
<div class="mallIndex_Second">
<div class="searchDiv">
<div>
<el-select v-model="basicQMsg.Source" class="w120" @change="getChange">
......@@ -355,7 +355,7 @@
</div>
</div>
</div>
<div class="zanIndexThrid">
<div class="mallIndexThrid">
<div class="el-card_header">
<div>
<span>销售情况</span>
......@@ -415,7 +415,7 @@
</div>
<div class="zantable-area">
<div class="el-card">
<div class="el-zanIndex_btmheader">
<div class="el-mallIndex_btmheader">
<span>商品购买力TOP排行</span>
<el-button type="primary" class="ZexportBtn" size="mini" @click="DownLoadSalesGoods">导出TOP100</el-button>
</div>
......@@ -460,7 +460,7 @@
</div>
</div>
<div class="el-card">
<div class="el-zanIndex_btmheader">
<div class="el-mallIndex_btmheader">
<span>用户购买力TOP排行</span>
<el-button type="primary" class="ZexportBtn" size="mini" @click="DownLoadSalesUser">导出TOP100</el-button>
</div>
......
src/plug/index.js
View file @ 06ef873c
......@@ -54,7 +54,8 @@ export default {
//域名管理对象
Vue.prototype.domainManager = function () {
let domainUrl = '';
domainUrl = "http://192.168.2.214:8200"
domainUrl = "http://192.168.2.214:8200";
domainUrl = "https://localhost:5001";
let locationName = window.location.hostname;
if (locationName.indexOf('testmall.oytour') !== -1) {
domainUrl = "http://mallapi.oytour.com";
......@@ -69,7 +70,6 @@ export default {
ImageUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com',
UploadFileUrl: domainUrl + '/api/File/LocalFileUploadImport',
UploadBlob: domainUrl + '/api/File/UploadBlob',
};
return obj;
},
......
src/router/index.js
View file @ 06ef873c
......@@ -106,9 +106,9 @@ export default new Router({
name: 'mall',
component: resolve => require(['@/components/mall'], resolve),
children: [{
path: '/zanIndex',
name: 'zanIndex',
component: resolve => require(['@/components/zanIndex'], resolve),
path: '/mallIndex',
name: 'mallIndex',
component: resolve => require(['@/components/mallIndex'], resolve),
},
// 用户管理 用户列表
{
......
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