From 6d78f8ab222498d727e91983d0511d8119d95aa3 Mon Sep 17 00:00:00 2001
From: 935090232@qq.com <ak473600000>
Date: Mon, 24 Jan 2022 19:34:42 +0800
Subject: [PATCH] Merge branch 'score_shop' into api_score_meger

---
 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..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>
@@ -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 && 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 = {
@@ -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