提交按钮

src/components/EditPanel.vue

@@ -43,7 +43,7 @@
           <div style="display: flex;flex-direction: row;background:rgba(244,246,255,1);
           border-radius:8px; padding: 12px;">
             <div style="display: flex; flex-direction: column; align-items: center">
-              <div :style="{ backgroundImage: 'url(' + element.imgSrc + ')','width':'100px', 'height':'100px','background-repeat': 'no-repeat',
+              <div :style="{ backgroundImage: 'url(' + element.backgroundUnselectedImg + ')','width':'100px', 'height':'100px','background-repeat': 'no-repeat',
               'background-position': 'center',
               'background-size': 'contain'}"></div>
               <span style="font-size:12px;
@@ -54,7 +54,7 @@
             </div>
 
             <div style="margin-left: 14px; display: flex; flex-direction: column; align-items: center">
-              <div :style="{ backgroundImage: 'url(' + element.imgSrc + ')','width':'100px', 'height':'100px','background-repeat': 'no-repeat',
+              <div :style="{ backgroundImage: 'url(' + element.backgroundSelectedImg + ')','width':'100px', 'height':'100px','background-repeat': 'no-repeat',
               'background-position': 'center',
               'background-size': 'contain'}"></div>
               <span style="font-size:12px;

src/components/Element/ButtonElement.vue

@@ -3,7 +3,7 @@
     @mouseup="mouseup">
     <template v-if="!element.eleCanvas">
       <img :style="{'z-index':1,width:'100%',height:'100%','border-radius': element.circular+'%'}"
-        :src="element.imgSrc&&element.imgSrc.indexOf('http://dm.static.elab-plus.com')>-1?element.imgSrc.replace('http://dm.static.elab-plus.com','https://dm.static.elab-plus.com'):element.imgSrc">
+        :src="element.backgroundUnselectedImg">
 
       <img
         src="https://dm.static.elab-plus.com/launchTemplate/0a3b783c-c54a-4e13-ba50-8f0ac6bb35f4-%E6%92%AD%E6%94%BE.png"
@@ -31,7 +31,7 @@
     </template>
     <elab-background-canvas v-else-if="element.eleCanvas=='WaterRipple'" :width="element.width" :height="element.height"
       :cstyle="`position:absolute;z-index: 1;border-radius:${element.circular+'%'}`" :type="element.eleCanvas"
-      :picSrc="element.imgSrc&&element.imgSrc.indexOf('http://dm.static.elab-plus.com')>-1?element.imgSrc.replace('http://dm.static.elab-plus.com','https://dm.static.elab-plus.com'):element.imgSrc">
+      :picSrc="element.backgroundUnselectedImg">
     </elab-background-canvas>
 
     <Operate v-show="showOperate || show|| $store.state.editor.complexEditorElement.indexOf(element)>-1"

src/components/ImgPanel.vue

@@ -10,7 +10,7 @@
         @click="selectedImg(element)" v-for="element in picList1"></div>
     </template>
     <template v-else-if="isButton">
-      <div class="ele" :style="{ backgroundImage: 'url(' + element.filePath + ')' }" @click="selectedImg(element)"
+      <div class="ele" :style="{ backgroundImage: 'url(' + element.backgroundUnselectedImg + ')' }" @click="selectedImg(element)"
         v-for="element in picList3"></div>
     </template>
     <template v-else>

src/model/Element.js

@@ -57,6 +57,6 @@ export default class Element {
     this.swiperType = ele.swiperType || 'mtswiper'
     this.isFixed = ele.isFixed || false
     this.backgroundSelectedImg = ele.backgroundSelectedImg || ''
-    this.backgroundUnSelectedImg = ele.backgroundUnselectedImg || ''
+    this.backgroundUnselectedImg = ele.backgroundUnselectedImg || ''
   }
 }

src/views/h5editor/index.vue

@@ -299,7 +299,7 @@
           line-height:34px;">上传按钮样式</span>
 
           <img src="../../assets/images/close-icon.png"
-            style="width: 16px; height: 16px; margin-right: 10px; cursor: pointer;" @click="dialogVisible=false"></img>
+            style="width: 16px; height: 16px; margin-right: 10px; cursor: pointer;" @click="closeUploadButton"></img>
 
         </div>
         <div style="display: flex;flex-direction: row; justify-content: center;margin-top:42px;margin-bottom:40px;">
@@ -310,7 +310,10 @@
             font-family:MicrosoftYaHei;display:block;
             color:rgba(51,51,51,1); margin-bottom:14px;
             line-height:19px;">默认状态</span>
-            <label class="lable">
+                 <div v-if="unSelectedButtom" :style="{ backgroundImage: 'url(' + buttonData.backgroundUnselectedImg + ')','width':'130px', 'height':'130px','background-repeat': 'no-repeat',
+                 'background-position': 'center',
+                 'background-size': 'contain'}"></div>
+            <label class="lable" v-else>
               <div style="width:100%;
                   display: flex;
                   flex-direction: column;
@@ -327,7 +330,7 @@
                   color:rgba(51,51,51,1);
                   line-height:17px;">上传素材</span>
               </div>
-              <input style="display: none;" type="file">
+              <input style="display: none;" type="file" @change="upload($event, false)">
             </label>
           </div>
 
@@ -338,7 +341,10 @@
               font-family:MicrosoftYaHei;display:block;
               color:rgba(51,51,51,1);margin-bottom:14px;
               line-height:19px;">选中状态</span>
-            <label class="lable">
+              <div v-if="selectedButtom" :style="{ backgroundImage: 'url(' + buttonData.backgroundSelectedImg + ')','width':'130px', 'height':'130px','background-repeat': 'no-repeat',
+              'background-position': 'center',
+              'background-size': 'contain'}"></div>
+            <label class="lable" v-else>
               <div style="width:100%;
                     display: flex;
                     flex-direction: column;
@@ -346,6 +352,7 @@
                     align-items: center;
                     height:100%;
                     border:1px dashed rgba(100,107,129,1);">
+                
                 <img style="width:16px;
                     height:16px;" src="../../assets/images/add-ele.png" />
                 <span style="font-size:12px;
@@ -355,8 +362,9 @@
                     color:rgba(51,51,51,1);
                     line-height:17px;">上传素材</span>
               </div>
-              <input style="display: none;" type="file">
+              <input style="display: none;" type="file" @change="upload($event, true)">
             </label>
+  
           </div>
         </div>
 
@@ -367,7 +375,7 @@
         font-family:PingFangSC;
         font-weight:500; text-align: center;
         color:rgba(255,255,255,1);
-        line-height:34px;cursor: pointer;">确定</div>
+        line-height:34px;cursor: pointer;" @click="uploadButton">确定</div>
       </div>
 
     </div>
@@ -392,6 +400,7 @@
   import elabBackgroundCanvas from "../../util/canvas/elabBackgroundCanvas";
   import AudioPanel from "../../components/AudioPanel";
   import HeaderMain from "../../components/HeaderMain";
+  import * as http from '../../util/http';
   const $ = require("jquery");
 
   export default {
@@ -442,7 +451,10 @@
         animatedNameBackgroundGlobal: "",
         animatedBackgroundCustom: false,
         globalAnimatedBackgroundTag: false,
-        dialogVisible: false
+        dialogVisible: false,
+        buttonData: {},
+        unSelectedButtom: false,
+        selectedButtom:false,
       };
     },
     watch: {
@@ -606,7 +618,8 @@
         obj.left = 0;
         obj.width = ele.width;
         obj.height = ele.height;
-        obj.imgSrc = ele.filePath;
+        obj.backgroundUnselectedImg = ele.backgroundUnselectedImg;
+        obj.backgroundSelectedImg = ele.backgroundSelectedImg;
         obj.loop = ele.loop;
         this.$store.dispatch("addElement", obj);
         // } else {
@@ -888,7 +901,71 @@
       },
       uploadSelectedPicOrUnSelectedPic() {
         this.dialogVisible = true
+      },
+      closeUploadButton(){
+        this.buttonData = {};
+        this.dialogVisible = false;
+        this.selectedButtom = false;
+        this.unSelectedButtom = false;  
+      },
+      async upload(event, isSelected) {
+        var that = this;
+        let files = event.target.files
+        if (!files.length) {
+          return false
+        }
+
+        const loading = this.$loading({
+          lock: true,
+          text: 'Loading',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        });
+        for (var i = 0; i < files.length; i++) {
+          var file = files[i]
+          if (file) {
+            http.uploadMaterielFile(file, function (res) {
+              loading.close();
+              let img = document.createElement('img')
+
+              img.onload = () => {
+                if (isSelected) {
+                  that.buttonData.backgroundSelectedImg = res;
+                  that.selectedButtom = true;
+                } else {
+                  that.buttonData.backgroundUnselectedImg = res;
+                  that.unSelectedButtom = true;
+                }
+                that.buttonData.itemId = that.itemId;
+                that.buttonData.width = img.width;
+                that.buttonData.height = img.height;
+                that.buttonData.isButton = true;
+              }
+              img.src = res
+            }, function (res) {
+              if (res.total.percent == 100 && (files.length == i + 1)) {
+                loading.close();
+              }
+            })
+          }
+        }
+      },
+      uploadButton() {
+        let that = this;
+        that.$store.dispatch('savePic', {
+          'backgroundUnselectedImg': that.buttonData.backgroundUnselectedImg,
+          'backgroundSelectedImg': that.buttonData.backgroundSelectedImg,
+          'themeId': that.buttonData.itemId,
+          'width': that.buttonData.width,
+          'height': that.buttonData.height,
+          'isButton': that.buttonData.isButton,
+        })
+        that.buttonData = {};
+        that.dialogVisible = false;
+        that.selectedButtom = false;
+        that.unSelectedButtom = false;
       }
+
     },
     components: {
       Overview,