From 341baf3bdd5e8e7e83a01a03b8636f1f3aeb8f6a Mon Sep 17 00:00:00 2001
From: wzy <wzy19931122ai@163.com>
Date: Sun, 28 Nov 2021 16:15:45 +0800
Subject: [PATCH] fix
---
zq-erp/src/main/resources/templates/views/admin/shop/shopAdvertisType-list.html | 148 ++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 140 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 911708e..084a646 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>
@@ -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,8 +597,38 @@
},
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;
+ }
+
},
//改变编辑页面，切换页面元素
@@ -521,7 +636,6 @@
this.currentPage=this.pageList[index];
this.currentPageCode=this.pageList[index].code;
- console.log(this.currentPageCode);
this.loadPageAds();
},
loadPageAds() {
@@ -537,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;
@@ -601,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){
+ 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 = {
@@ -673,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