<!DOCTYPE HTML>
|
<html xmlns:th="http://www.thymeleaf.org" xmlns:matrix="http://www.w3.org/1999/xhtml">
|
<head>
|
<meta charset="utf-8">
|
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
|
<meta name="renderer" content="webkit|ie-comp|ie-stand">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport"
|
content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
|
<meta http-equiv="Cache-Control" content="no-siteapp"/>
|
<!-- 本框架基本脚本和样式 -->
|
<script type="text/javascript" th:src="@{/js/systools/MBaseVue.js}"></script>
|
|
<link rel="stylesheet" th:href="@{/plugin/bootstrap-3.3.5/css/bootstrap.min.css}">
|
<link rel="stylesheet" th:href="@{/plugin/element-ui/index.css}">
|
|
<link th:href="@{/css/styleOne/style.min.css}" rel="stylesheet" type="text/css"/>
|
|
|
<style>
|
|
.work_plan {
|
background: #efefef;
|
top: 0;
|
left: 0;
|
min-height: 100%;
|
height: auto;
|
overflow: scroll;
|
}
|
|
.mobile_page img {
|
max-width: 100%;
|
|
}
|
|
.mobile_page {
|
width: 770px;
|
border: 5px solid #f1f1f1;
|
margin: 0px auto;
|
overflow: scroll;
|
|
}
|
|
.marquee {
|
background: #ffffff;
|
}
|
|
.marquee div {
|
display: block;
|
width: 100%;
|
text-align: center;
|
overflow: hidden;
|
-webkit-animation: marquee 15s linear infinite;
|
animation: marquee 15s linear infinite;
|
height: 80px;
|
line-height: 60px;
|
background: #ffffff;
|
}
|
|
.marquee span {
|
color: #ee2929;
|
white-space: nowrap;
|
font-size: 20 rpx;
|
height: 80 rpx;
|
line-height: 80 rpx;
|
width: 660 rpx;
|
display: inline-block;
|
overflow: hidden;
|
}
|
|
@keyframes marquee {
|
0% {
|
transform: translateX(-25);
|
}
|
100% {
|
transform: translateX(-675px);
|
/ / 每行高50
|
}
|
}
|
|
|
.huakuai {
|
width: 100%;
|
white-space: nowrap;
|
overflow: scroll;
|
}
|
|
.myform img {
|
max-width: 200px !important;
|
}
|
|
.drawer {
|
overflow: scroll;
|
}
|
|
.assembly-style .el-form-item__content{
|
margin-left: 0px !important;
|
display: flex;
|
align-items: center;
|
}
|
.assembly-style .el-input{
|
width: 100px !important;
|
}
|
.assembly-style i{
|
font-size: 30px;
|
}
|
.assembly-style .active{
|
color: #409eff;
|
}
|
|
.module-property{
|
display: flex;
|
flex-wrap: wrap;
|
}
|
.module-property .el-form-item__content{
|
margin-left: 0px !important;
|
display: flex;
|
align-items: center;
|
}
|
.module-property .el-input{
|
width: 100px !important;
|
}
|
</style>
|
</head>
|
<body>
|
<div class="ibox-content" id="app" v-cloak>
|
|
<el-row :gutter="20">
|
<el-col :span="2" class="fixe">
|
<h3>页面</h3>
|
<table class="table table-bordered">
|
<tr v-for="(page,index) in pageList" >
|
<td @click="changePage(index)" >
|
<el-link v-if="currentPage.id==page.id" type="primary">{{page.name}}</el-link>
|
<el-link v-else type="info">{{page.name}}</el-link>
|
</td>
|
</tr>
|
</table>
|
|
</el-col>
|
<el-col :span="4" class="fixe">
|
|
<h3>添加模块</h3>
|
|
<table class="table table-bordered">
|
|
|
<tr>
|
<td>
|
<el-link @click="addNode(1)" type="primary">图片</el-link>
|
</td>
|
</tr>
|
<tr>
|
<td>
|
<el-link @click="addNode(6)" type="primary">滑块</el-link>
|
</td>
|
</tr>
|
<tr>
|
<td>
|
<el-link @click="addNode(3)" type="primary">轮播图</el-link>
|
</td>
|
</tr>
|
<tr>
|
<td>
|
<el-link @click="addNode(4)" type="primary">视频</el-link>
|
</td>
|
</tr>
|
<tr>
|
<td>
|
<el-link @click="addNode(5)" type="primary">跑马灯文字</el-link>
|
</td>
|
</tr>
|
</table>
|
|
|
</el-col>
|
<el-col :span="18" class="work_plan" :style="{height:height}">
|
<div class="mobile_page">
|
<template v-for="item in adNodes">
|
<!-- 1.image 图片展示-->
|
<img @click="clickNode(item)" v-if="item.nodeType==1" :style="item.nodeStyle"
|
:src="item.nodeValue"/>
|
<!-- 文字展示 -->
|
<span @click="clickNode(item)" v-if="item.nodeType==2"
|
:style="item.nodeStyle">{{item.nodeValue}}</span>
|
<div @click="clickNode(item)" class="marquee" v-if="item.nodeType==5">
|
<div>
|
<span :style="item.nodeStyle">{{item.nodeValue}}</span>
|
</div>
|
</div>
|
|
<!-- 视频展示 -->
|
<video @click="clickNode(item)" v-if="item.nodeType==4" :src="item.nodeValue"
|
:style="item.nodeStyle"
|
controls="true"></video>
|
<!-- 轮播图展示 -->
|
<div @click="clickNode(item)" v-if="item.nodeType==3">
|
<!-- 轮播图 -->
|
<el-carousel indicator-position="outside" :height="item.nodeStyle.height"
|
:style="item.nodeStyle">
|
<el-carousel-item v-for="img in item.ads">
|
<img :style="item.nodeStyle" :src="img.imgUrl"/>
|
</el-carousel-item>
|
</el-carousel>
|
</div>
|
<!-- 滑块展示 -->
|
<div @click="clickNode(item)" v-if="item.nodeType==6" class="huakuai" :key="item.adtId">
|
<div>
|
<img :style="item.nodeStyle" v-for="img in item.ads" :src="img.imgUrl" :key="img.adId"/>
|
</div>
|
</div>
|
</template>
|
</div>
|
</el-col>
|
</el-row>
|
|
<el-drawer
|
custom-class="drawer"
|
:visible.sync="drawer"
|
size="50%"
|
>
|
|
|
<el-form ref="form" :model="currentNode" label-width="80px" class="pd-10 myform">
|
|
<el-form-item label="元素类型">
|
<el-select v-model="currentNode.nodeType" placeholder="请选择">
|
<el-option
|
v-for="item in nodeTypes"
|
:key="item.code"
|
:label="item.name"
|
:value="item.code">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
|
<el-form-item label="元素名称">
|
<el-input v-model="currentNode.adtName"></el-input>
|
</el-form-item>
|
|
<el-form-item label="内容" v-if="currentNode.nodeType==2||currentNode.nodeType==5">
|
<el-input v-model="currentNode.nodeValue"></el-input>
|
</el-form-item>
|
|
<el-form-item label="图片" v-if="currentNode.nodeType==1">
|
|
<img :src="currentNode.nodeValue"/>
|
|
</el-form-item>
|
|
<el-form-item label="视频" v-if="currentNode.nodeType==4">
|
<!-- 视频展示 -->
|
<video :src="currentNode.nodeValue" controls="true"></video>
|
</el-form-item>
|
|
<el-form-item label="选择文件" v-if="currentNode.nodeType==1||currentNode.nodeType==4">
|
<input @change="selectFile" type="file" placeholder="请选择要上传的文件"></input>
|
</el-form-item>
|
|
<el-form-item label="排序">
|
<el-input v-model="currentNode.adtSort"></el-input>
|
</el-form-item>
|
|
<el-form-item v-if="currentNode.nodeType==3||currentNode.nodeType==6">
|
|
<el-form-item>
|
<el-button type="primary" @click="addDetail">新增元素</el-button>
|
</el-form-item>
|
|
|
<el-table
|
:data="currentNode.ads"
|
:default-sort="{prop: '', order: 'descending'}"
|
style="width: 100%" >
|
|
<el-table-column
|
label="排序"
|
min-width="70">
|
<template slot-scope="scope">
|
<el-input v-model="scope.row.sort"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="元素"
|
min-width="100">
|
<template slot-scope="scope">
|
<img :src="scope.row.imgUrl"/>
|
<input @change="selectDetailFile($event,scope.$index)" type="file"
|
placeholder="请选择要上传的文件"></input>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="链接类型"
|
min-width="100">
|
<template slot-scope="scope">
|
<el-select v-model="scope.row.linkType" placeholder="请选择">
|
<el-option
|
v-for="item in linkTypes"
|
:key="item.value"
|
:label="item.name"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="链接地址"
|
min-width="100">
|
<template slot-scope="scope">
|
<el-input v-model="scope.row.linkUrl"></el-input>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<el-button
|
size="mini"
|
type="danger"
|
@click="handleDelete(scope.$index, scope.row)">删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-form-item>
|
|
<el-form-item label="链接类型" v-if="currentNode.nodeType!=3 && currentNode.nodeType!=6">
|
<el-select v-model="currentNode.linkType" placeholder="请选择">
|
<el-option
|
v-for="item in linkTypes"
|
:key="item.value"
|
:label="item.name"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="链接地址" v-if="currentNode.nodeType!=3 && currentNode.nodeType!=6">
|
<el-col :span="18">
|
<el-input v-model="currentNode.linkUrl"></el-input>
|
</el-col>
|
|
<!--
|
//TODO 自动选择链接地址，非紧急需求，暂缓
|
<el-col :offset="2" :span="4">
|
<el-button type="primary" size="small">选择地址</el-button>
|
</el-col>-->
|
</el-form-item>
|
|
<!-- <el-form-item label="CSS样式">-->
|
<!-- <el-input v-model="currentNode.nodeStyleStr"></el-input>-->
|
<!-- </el-form-item>-->
|
<el-form-item label="组件宽高" class="assembly-style">
|
<el-input v-model="zjwidth" v-on:input="widthChange"></el-input>
|
<i :class="selected ? 'el-icon-link active' : 'el-icon-link'" @click="fixedProportion"></i>
|
<el-input v-model="zjheight" v-on:input="heightChange"></el-input>
|
</el-form-item>
|
<!-- <el-form-item label="节点属性">-->
|
<!-- <el-input v-model="currentNode.nodeAttribute"></el-input>-->
|
<!-- </el-form-item>-->
|
<el-form-item label="组件属性">
|
<!-- 1.图片-->
|
<!-- 6.滑块-->
|
<!-- 3.轮播图-->
|
<!-- 4.视频-->
|
<!-- 5.跑马灯文字-->
|
<el-from class="module-property" >
|
<el-form-item label="自动切换时间间隔(毫秒)">
|
<el-input v-model="interval"></el-input>
|
</el-form-item>
|
<el-form-item label="前边距">
|
<el-input v-model="previousMargin"></el-input>
|
</el-form-item>
|
<el-form-item label="后边距">
|
<el-input v-model="nextMargin"></el-input>
|
</el-form-item>
|
</el-from>
|
</el-form-item>
|
|
|
<el-form-item label="页面组">
|
<el-input v-model="currentNode.pageCode"></el-input>
|
</el-form-item>
|
|
|
<el-form-item>
|
<el-button type="primary" @click="onSubmit">保存</el-button>
|
<el-button type="danger" @click="centerDialogVisible = true">删除</el-button>
|
<el-button @click="clickNode({})">取消</el-button>
|
</el-form-item>
|
</el-form>
|
|
|
</el-drawer>
|
|
<el-dialog
|
title="提示"
|
:visible.sync="centerDialogVisible"
|
width="200">
|
<span>确认删除节点吗？</span>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="centerDialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="removeNode">确 定</el-button>
|
</span>
|
</el-dialog>
|
|
|
</div>
|
</body>
|
<script type="text/javascript" th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script>
|
<script type="text/javascript" th:src="@{/js/plugin/jquery.query.js}"></script>
|
<script type="text/javascript" th:src="@{/plugin/bootstrap-3.3.5/js/bootstrap.min.js}"></script>
|
|
<script type="text/javascript" th:src="@{/js/systools/AjaxProxyVue.js}"></script>
|
<script type="text/javascript" th:src="@{/js/plugin/vue.js}"></script>
|
<script type="text/javascript" th:src="@{/plugin/element-ui/index.js}"></script>
|
|
|
<script>
|
var id = $.query.get("id");
|
|
|
var app = new Vue({
|
el: '#app',
|
data: {
|
process: "0%",
|
adNodes: [],
|
currentNode: {},
|
drawer: false,
|
linkTypes: [
|
{"name": '导航页', "value": 1},
|
{"name": '功能页', "value": 2},
|
{"name": '广告页', "value": 3},
|
{"name": 'H5页面', "value": 4},
|
],
|
nodeTypes: [],
|
currentPageCode: 'index',
|
centerDialogVisible: false,
|
height:500,
|
pageList:[],
|
//当前编辑页面
|
currentPage:{},
|
zjwidth:'',
|
zjheight:'',
|
selected:false,
|
//宽高比
|
aspectRatio:'',
|
interval:'',
|
previousMargin:'',
|
nextMargin:'',
|
|
},
|
created: function () {
|
this.getHeight()
|
this.loadInfo();
|
let _this=this;
|
AjaxProxy.requst({
|
app: _this,
|
url: basePath + '/admin/shopPage/showAllList',
|
callback: function (data) {
|
console.log('findShopByRole')
|
_this.pageList = data.rows;
|
_this.currentPage=data.rows[0];
|
_this.loadPageAds();
|
}
|
});
|
window.addEventListener('resize', this.getHeight);
|
console.log('加载完')
|
|
},
|
|
mounted: function () {
|
|
},
|
methods: {
|
widthChange(){
|
if(this.selected){
|
this.zjheight = parseInt(this.zjwidth/this.aspectRatio)
|
}
|
},
|
heightChange(){
|
if(this.selected){
|
this.zjwidth = parseInt(this.zjheight*this.aspectRatio)
|
}
|
},
|
getHeight() {
|
this.height = window.innerHeight - 40 + 'px';
|
},
|
handleDelete(index, row) {
|
this.currentNode.ads.splice(index, 1);
|
},
|
selectDetailFile(e, index) {
|
let _this = this;
|
|
let loading = _this.$loading({
|
lock: true,
|
text: '上传中' + _this.process,
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.7)'
|
});
|
let f = e.target.files[0];
|
let reader = new FileReader();
|
reader.onload = function (e) {
|
let data = e.target.result;
|
//加载图片获取图片真实宽度和高度
|
let image = new Image();
|
image.onload=function(){
|
let width = image.width;
|
let height = image.height;
|
_this.aspectRatio= width/height
|
};
|
image.src= data;
|
};
|
reader.readAsDataURL(f);
|
|
uploadForImage(
|
basePath + "/admin/multipleUploadFile/doUpload",
|
e.target.files[0],
|
function (d, result) {
|
|
_this.process = d + "%";
|
if (d == 100) {
|
|
if (result) {
|
if (result.status == 200) {
|
|
loading.close();
|
_this.currentNode.ads[index].imgUrl = result.path;
|
} else {
|
_this.$message({
|
message: result.msg,
|
type: 'error'
|
});
|
}
|
}
|
}
|
},
|
"1"
|
);
|
},
|
/**
|
* 新增明细
|
*/
|
addDetail() {
|
let _this = this;
|
let sort = 1;
|
if( _this.currentNode.ads){
|
sort=_this.currentNode.ads.length + 1;
|
}else{
|
_this.currentNode.ads=[];
|
}
|
var ad = {
|
sort:sort ,
|
imgUrl: '-'
|
};
|
this.currentNode.ads.push(ad);
|
|
},
|
removeNode() {
|
this.centerDialogVisible = false;
|
let _this = this;
|
AjaxProxy.requst({
|
app: _this,
|
data: {},
|
url: basePath + '/admin/shopAdvertisType/del?keys=' + _this.currentNode.adtId,
|
callback: function (data) {
|
_this.$message({
|
message: data.info,
|
type: 'success'
|
});
|
_this.loadPageAds();
|
_this.drawer = !_this.drawer;
|
|
}
|
});
|
},
|
|
addNode(nodeType) {
|
var _this = this;
|
|
|
let node = {
|
nodeType: nodeType,
|
pageCode: _this.currentPageCode,
|
nodeValue: "-",
|
nodeStyle:{"width":"750px","height":"344px"},
|
nodeStyleStr:'{"width":"750px","height":"344px"}'
|
};
|
|
|
if (nodeType == 3 || nodeType == 6) {
|
node.ads = [];
|
}
|
this.currentNode = node;
|
this.drawer = !this.drawer;
|
},
|
|
clickNode(node) {
|
console.log(node)
|
var _this = this;
|
this.currentNode = node;
|
this.drawer = !this.drawer;
|
this.zjwidth = node.nodeStyle.width.substring(0,node.nodeStyle.width.length-2);
|
this.zjheight = node.nodeStyle.height.substring(0,node.nodeStyle.height.length-2);
|
let nodeAttribute = JSON.parse(node.nodeAttribute)
|
console.log(1111)
|
console.log(nodeAttribute)
|
if(nodeAttribute.interval){
|
_this.interval = nodeAttribute['interval'];
|
_this.previousMargin = nodeAttribute['previous-margin'];
|
_this.nextMargin = nodeAttribute['next-margin'];
|
}
|
|
|
|
|
let image = new Image();
|
image.onload = function() {
|
let width = image.width; // 宽 px
|
let height = image.height; // 高 px
|
_this.aspectRatio = width/height;
|
console.log(1111);
|
console.log(_this.aspectRatio);
|
}
|
if(node.ads){
|
image.src = node.ads[0].imgUrl;
|
}else {
|
image.src = node.nodeValue;
|
}
|
|
},
|
|
//改变编辑页面，切换页面元素
|
changePage(index){
|
|
this.currentPage=this.pageList[index];
|
this.currentPageCode=this.pageList[index].code;
|
this.loadPageAds();
|
},
|
loadPageAds() {
|
let _this = this;
|
//加载配置
|
AjaxProxy.requst({
|
app: _this,
|
data: {pageCode: _this.currentPage.code },
|
url: basePath + '/admin/shopAdvertisType/getAdPage',
|
callback: function (data) {
|
for (let i = 0; i < data.rows.length; i++) {
|
var node = data.rows[i];
|
if (node.nodeStyle != null && node.nodeStyle.length > 1) {
|
node.nodeStyleStr = node.nodeStyle;
|
node.nodeStyle = JSON.parse(node.nodeStyle);
|
_this.zjwidth = node.nodeStyle.width.substring(0,node.nodeStyle.width.length-2);
|
_this.zjheight = node.nodeStyle.height.substring(0,node.nodeStyle.height.length-2);
|
}
|
}
|
_this.adNodes = data.rows;
|
console.log("over");
|
}
|
});
|
},
|
|
loadInfo() {
|
let _this = this;
|
|
//获取门店
|
console.log('loadInfo')
|
AjaxProxy.requst({
|
app: _this,
|
url: basePath + '/admin/shopAdvertisType/getShopAdvertisType',
|
callback: function (data) {
|
console.log('loadInfocallback')
|
_this.nodeTypes = data.rows;
|
}
|
});
|
|
|
|
|
},
|
|
validation(cNode) {
|
if (cNode.nodeType == 3 || cNode.nodeType == 6) {
|
var hasAd = false;
|
for (let i = 0; i < cNode.ads.length; i++) {
|
if (cNode.ads[i].imgUrl.length > 1) {
|
hasAd = true;
|
break;
|
}
|
}
|
if (!hasAd) {
|
this.$message({
|
message: '至少上传一个元素',
|
type: 'warning'
|
});
|
}
|
return hasAd;
|
} else {
|
|
if (cNode.nodeValue != null && cNode.nodeValue.trim().length > 0) {
|
return true;
|
} else {
|
this.$message({
|
message: '必须输入节点内容',
|
type: 'warning'
|
});
|
return false;
|
}
|
}
|
|
},
|
onSubmit() {
|
let _this = this;
|
let cNode = _this.currentNode;
|
|
if (!this.validation(cNode)) {
|
return false;
|
}
|
let zjw = this.zjwidth;
|
let zjh = this.zjheight;
|
if(zjw != null && zjh != null){
|
cNode.nodeStyleStr = '{"width":"'+zjw+'px","height":"'+zjh+'px"}';
|
}
|
if(this.interval != null && this.previousMargin != null && this.nextMargin != null && this.interval != '' && this.previousMargin != '' && this.nextMargin != ''){
|
cNode.nodeAttribute = '{\"interval\":'+this.interval+',\"previous-margin\":'+this.previousMargin+',\"next-margin\":'+this.nextMargin+'}';
|
}
|
|
if (cNode.nodeStyleStr != null && cNode.nodeStyleStr.length > 1) {
|
cNode.nodeStyle = JSON.parse(cNode.nodeStyleStr);
|
|
}
|
|
let data = {
|
adtId: cNode.adtId,
|
nodeValue: cNode.nodeValue,
|
nodeStyle: cNode.nodeStyleStr,
|
nodeAttribute: cNode.nodeAttribute,
|
nodeValue: cNode.nodeValue,
|
adtName: cNode.adtName,
|
adtMark: cNode.adtMark,
|
adtCapacity: cNode.adtCapacity,
|
adtSort: cNode.adtSort,
|
nodeType: cNode.nodeType,
|
linkType: cNode.linkType,
|
linkUrl: cNode.linkUrl,
|
pageCode: cNode.pageCode,
|
pageName: cNode.pageName,
|
ads: cNode.ads,
|
//shopId:_this.shopId,
|
}
|
|
|
AjaxProxy.requst({
|
app: _this,
|
data: data,
|
url: basePath + '/admin/shopAdvertisType/modifyShopAdvertisType',
|
callback: function (data) {
|
_this.$message({
|
message: data.info,
|
type: 'success'
|
});
|
_this.loadPageAds();
|
_this.drawer = !_this.drawer;
|
}
|
});
|
},
|
|
selectFile(e) {
|
let _this = this;
|
|
let loading = _this.$loading({
|
lock: true,
|
text: '上传中' + _this.process,
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.7)'
|
});
|
uploadForImage(
|
basePath + "/admin/multipleUploadFile/doUpload",
|
e.target.files[0],
|
function (d, result) {
|
_this.process = d + "%";
|
if (d == 100) {
|
|
if (result) {
|
if (result.status == 200) {
|
loading.close();
|
_this.currentNode.nodeValue = result.path;
|
} else {
|
_this.$message({
|
message: result.msg,
|
type: 'error'
|
});
|
}
|
}
|
}
|
},
|
"1"
|
);
|
},
|
fixedProportion(){
|
let _this = this;
|
_this.selected = !_this.selected
|
if(_this.selected){
|
_this.zjwidth = 0
|
_this.zjheight = 0
|
}
|
},
|
|
},
|
destroyed() {
|
window.removeEventListener('resize', this.getHeight)
|
}
|
|
|
})
|
</script>
|
|
</body>
|
</html>
|
