From 4351e71d782741143a98f86f6648acd16689165f Mon Sep 17 00:00:00 2001 From: Helius <wangdoubleone@gmail.com> Date: Fri, 27 May 2022 19:48:02 +0800 Subject: [PATCH] Merge branch 'developer' into hive2.0 --- zq-erp/src/main/resources/templates/views/admin/shop/shopAdvertisType-list.html | 151 +++++++++++++++++++++++++++++++++++++++++++++++-- 1 files changed, 143 insertions(+), 8 deletions(-) diff --git a/zq-erp/src/main/resources/templates/views/admin/shop/shopAdvertisType-list.html b/zq-erp/src/main/resources/templates/views/admin/shop/shopAdvertisType-list.html index 020f4fc..000a29b 100644 --- a/zq-erp/src/main/resources/templates/views/admin/shop/shopAdvertisType-list.html +++ b/zq-erp/src/main/resources/templates/views/admin/shop/shopAdvertisType-list.html @@ -92,6 +92,34 @@ .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> @@ -244,7 +272,7 @@ <el-table :data="currentNode.ads" :default-sort="{prop: '', order: 'descending'}" - style="width: 100%" max-height="250"> + style="width: 100%" > <el-table-column label="排序" @@ -320,12 +348,36 @@ </el-col>--> </el-form-item> - <el-form-item label="CSS样式"> - <el-input v-model="currentNode.nodeStyleStr"></el-input> +<!-- <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 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> @@ -366,7 +418,6 @@ <script> - var id = $.query.get("id"); @@ -390,6 +441,14 @@ pageList:[], //当前编辑页面 currentPage:{}, + zjwidth:'', + zjheight:'', + selected:false, + //宽高比 + aspectRatio:'', + interval:'', + previousMargin:'', + nextMargin:'', }, created: function () { @@ -414,8 +473,17 @@ 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'; }, @@ -431,15 +499,32 @@ 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 { @@ -512,13 +597,45 @@ }, 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() { @@ -534,6 +651,8 @@ 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; @@ -598,9 +717,18 @@ 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 = { @@ -670,7 +798,14 @@ "1" ); }, - + fixedProportion(){ + let _this = this; + _this.selected = !_this.selected + if(_this.selected){ + _this.zjwidth = 0 + _this.zjheight = 0 + } + }, }, destroyed() { -- Gitblit v1.9.1