Merge branch 'master' of http://192.168.4.246:3000/zhangs/surveyMaker

# Conflicts:
#	src/views/h5editor/index.vue

package-lock.json

@@ -1569,7 +1569,6 @@
       "version": "2.10.1",
       "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
       "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
-      "optional": true,
       "requires": {
         "hoek": "2.x.x"
       }
@@ -4829,8 +4828,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4873,8 +4871,7 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
@@ -4885,8 +4882,7 @@
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5003,8 +4999,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5016,7 +5011,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5046,7 +5040,6 @@
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -5065,7 +5058,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5146,8 +5138,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5159,7 +5150,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5245,8 +5235,7 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5282,7 +5271,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5302,7 +5290,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5346,14 +5333,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -9406,7 +9391,7 @@
     },
     "normalize-wheel": {
       "version": "1.0.1",
-      "resolved": "http://r.cnpmjs.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
       "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
     },
     "normalize.css": {

src/components/EditPanel.vue

@@ -38,31 +38,36 @@
       <div v-show="panelState === 11||panelState===15">
 
         <div
-          style="vertical-align: middle;display: flex; flex-direction: row; padding: 12px 0; padding-left: 20px; border-bottom: #E2E4EE solid 1px;"
+          style="vertical-align: middle;display: flex; flex-direction: column; padding: 12px 0; border-bottom: #E2E4EE solid 1px; align-items: center"
           v-show="panelState == 15">
-          <div>
-            <div :style="{ backgroundImage: 'url(' + element.imgSrc + ')','width':'100px', 'height':'100px','background-repeat': 'no-repeat',
+          <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',
               'background-position': 'center',
               'background-size': 'contain'}"></div>
-          </div>
-          <div style="display:flex; flex-direction: column;margin-left: 16px;">
-            <span style="font-size:14px;
-            font-family:MicrosoftYaHei;
-            margin-bottom: 4px;
-            color:rgba(100,107,129,1);
-            line-height:19px;">当前图片</span>
-            <span style="font-size:14px;
-            font-family:MicrosoftYaHei;
-            color:rgba(100,107,129,1);
-            line-height:19px;">
-              {{element.imgSrc|currentImageName}}
-            </span>
+              <span style="font-size:12px;
+              font-family:MicrosoftYaHei;
+              color:rgba(51,51,51,1);
+              display: block;
+              line-height:16px;">未选中状态</span>
+            </div>
 
-            <label style="display: block;
-            cursor: pointer; width:108px; position: relative;
+            <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',
+              'background-position': 'center',
+              'background-size': 'contain'}"></div>
+              <span style="font-size:12px;
+              font-family:MicrosoftYaHei;
+              color:rgba(51,51,51,1);
+              line-height:16px;">选中状态</span>
+            </div>
+          </div>
+          <label style="display: block;
+            cursor: pointer; width:166px; position: relative;
             margin-bottom: 12px;
               height:28px;">
-              <div style="width:108px;
+            <div @click="showSelectedPicOrUnSelectedPic" style="width:166px;
               height:28px;
               background:rgba(78,93,255,1);
               border-radius:14px;font-size:14px;
@@ -70,12 +75,11 @@
               color:rgba(255,255,255,1);
               display: flex;
               justify-content: center;
-              line-height:28px;">替换元素
-              </div>
-              <input style="display: none;position: absolute;top: 0px;" type="file" @change="fileChange"
-                multiple="false">
-            </label>
-          </div>
+              line-height:28px;">替换按钮样式
+            </div>
+            <!-- <input style="display: none;position: absolute;top: 0px;" type="file" @change="fileChange"
+                multiple="false"> -->
+          </label>
         </div>
         <div style="vertical-align: middle;display: flex;flex-direction: column;border-bottom: #E2E4EE solid 1px">
           <div style="font-size: 12px; font-family:MicrosoftYaHei;
@@ -718,6 +722,9 @@
       },
       panelState: {
         type: Number
+      },
+      showSelectedPicOrUnSelectedPic: {
+        type: Function
       }
     },
     data() {
@@ -876,23 +883,19 @@
           return false;
         }
         var ele = {};
-        if (this.element.children) {//如果有子元素需要深拷贝
-          var children = []
-          for (var i in this.element) {
-            if (i == 'children') {
-              this.element[i].forEach(function (child, index) {
-                var obj = {}
-                for (var k in child) {
-                  obj[k] = child[k]
-                }
-                children.push(obj)
-              })
-            } else {
-              ele[i] = this.element[i];
-            }
+        for (var i in this.element) {
+          if (i == 'children') {//如果有子元素需要深拷贝
+            var children = [];
+            this.element[i].forEach(function (child, index) {
+              var obj = {}
+              for (var k in child) {
+                obj[k] = child[k]
+              }
+              children.push(obj)
+            })
+          } else {
+            ele[i] = this.element[i];
           }
-        } else {
-          ele[i] = this.element[i];
         }
         ele.children = children || [];
         ele.nodeId = 'Id' + Math.random();
@@ -1111,7 +1114,6 @@
 
 </script>
 <style>
-  
   .fontSelect:nth-child(1) span {
     color: #000;
   }

src/components/ImgPanel.vue

@@ -2,7 +2,8 @@
   <div
     style="display: flex;
   flex-wrap: wrap; align-content: baseline; justify-content: space-between ; padding-left: 21px; padding-right: 21px;padding-top: 27px;">
-    <PicPicker class="ele-add" @uploaded="uploadImage" :themeId="themeId" :ismultiple="ismultiple" :isButton='isButton'>
+    <PicPicker class="ele-add" @uploaded="uploadImage" :themeId="themeId" :ismultiple="ismultiple" :isButton='isButton'
+      :showSelectedPic="showSelectedPicOrUnSelectedPic">
     </PicPicker>
     <template v-if="ismultiple">
       <div class="ele" :style="{ backgroundImage: 'url(' + (element.morePic[0]?element.morePic[0].filePath:'') + ')' }"
@@ -31,7 +32,10 @@
         type: String
       },
       isButton: Boolean,
-      ismultiple: Boolean
+      ismultiple: Boolean,
+      showSelectedPicOrUnSelectedPic: {
+        type: Function
+      }
     },
     data() {
       return {

src/components/PicturePicker.vue

@@ -16,7 +16,9 @@
     color:rgba(51,51,51,1);
     line-height:17px;">{{ismultiple?"添加轮播":isButton? "添加按钮":"添加元素"}}</span>
     </div>
-    <input class="input" type="file" @change="fileChange" multiple="true">
+    <div v-if="isButton" @click="showSelectedPic" style="width: 100%;height: 100%; position: absolute;top: 0;left: 0;">
+    </div>
+    <input v-else class="input" type="file" @change="fileChange" multiple="true">
   </label>
 </template>
 
@@ -26,6 +28,7 @@
     cursor: pointer;
     width: 45%;
     height: calc(324px *0.45 * 0.73);
+    position: relative;
   }
 
   .input {
@@ -41,7 +44,10 @@
         type: String
       },
       isButton: Boolean,
-      ismultiple: Boolean
+      ismultiple: Boolean,
+      showSelectedPic: {
+        type: Function
+      }
     },
     methods: {
       fileChange(event) {

src/model/Element.js

@@ -56,5 +56,7 @@ export default class Element {
     this.eleCanvas = ele.eleCanvas || ''
     this.swiperType = ele.swiperType || 'mtswiper'
     this.isFixed = ele.isFixed || false
+    this.backgroundSelectedImg = ele.backgroundSelectedImg || ''
+    this.backgroundUnSelectedImg = ele.backgroundUnselectedImg || ''
   }
 }

src/views/h5editor/index.vue

@@ -270,14 +270,109 @@
           </div>
           <!-- 添加按钮 4 -->
           <div class="panel panel-element clearfix" v-if="panelState === 4">
-            <ImgPanel :selectedImg="addButtonElement" :themeId="itemId" :isButton="true" />
+            <ImgPanel :selectedImg="addButtonElement" :themeId="itemId" :isButton="true"
+              :showSelectedPicOrUnSelectedPic="uploadSelectedPicOrUnSelectedPic" />
           </div>
           <!-- 图层编辑面板 -->
-          <EditPanel :element="element" :panelState="panelState" v-if="panelState > 10" />
+          <EditPanel :element="element" :panelState="panelState" v-if="panelState > 10"
+            :showSelectedPicOrUnSelectedPic="uploadSelectedPicOrUnSelectedPic" />
         </div>
       </div>
     </section>
     <PreView :itemId="itemId" @hideView="showPreView=false" v-if="showPreView" />
+    <div v-show="dialogVisible" class="dialog">
+      <div style="width:560px;height: 353px;background:rgba(255,255,255,1);
+        box-shadow:0px 5px 11px 0px rgba(78,93,255,0.42); margin:0 auto; margin-top:10%;
+        border-radius:6px;">
+        <div style="width:560px;
+          height:34px;
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          background:rgba(78,93,255,1);
+          border-radius:6px 6px 0px 0px;">
+
+          <span style="font-size:16px;
+          font-family:PingFangSC;
+          font-weight:400;
+          color:rgba(255,255,255,1); margin-left:20px;
+          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>
+
+        </div>
+        <div style="display: flex;flex-direction: row; justify-content: center;margin-top:42px;margin-bottom:40px;">
+          <div style="width:130px; display: flex;
+          flex-direction: column; align-items: center;
+          ">
+            <span style="font-size:14px;
+            font-family:MicrosoftYaHei;display:block;
+            color:rgba(51,51,51,1); margin-bottom:14px;
+            line-height:19px;">默认状态</span>
+            <label class="lable">
+              <div style="width:100%;
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: center;
+                  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;
+                  font-family:PingFangSC-Regular;
+                  font-weight:400;
+                  margin-top: 6px;
+                  color:rgba(51,51,51,1);
+                  line-height:17px;">上传素材</span>
+              </div>
+              <input style="display: none;" type="file" multiple="false">
+            </label>
+          </div>
+
+          <div style="width:130px; display: flex;
+          flex-direction: column; align-items: center;
+          margin-left:70px;">
+            <span style="font-size:14px;
+              font-family:MicrosoftYaHei;display:block;
+              color:rgba(51,51,51,1);margin-bottom:14px;
+              line-height:19px;">选中状态</span>
+            <label class="lable">
+              <div style="width:100%;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    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;
+                    font-family:PingFangSC-Regular;
+                    font-weight:400;
+                    margin-top: 6px;
+                    color:rgba(51,51,51,1);
+                    line-height:17px;">上传素材</span>
+              </div>
+              <input style="display: none;" type="file" multiple="false">
+            </label>
+          </div>
+        </div>
+
+        <div style="width:105px;
+        height:34px;margin:0 auto;
+        background:rgba(78,93,255,1);
+        border-radius:19px;font-size:14px;
+        font-family:PingFangSC;
+        font-weight:500; text-align: center;
+        color:rgba(255,255,255,1);
+        line-height:34px;cursor: pointer;">确定</div>
+      </div>
+
+    </div>
+
   </div>
 </template>
 
@@ -348,7 +443,8 @@ export default {
       ],
       animatedNameBackgroundGlobal: "",
       animatedBackgroundCustom: false,
-      globalAnimatedBackgroundTag: false
+      globalAnimatedBackgroundTag: false,
+      dialogVisible: false
     };
   },
   watch: {
@@ -425,7 +521,6 @@ export default {
         this.$store.state.editor.editorTheme.animatedNameBackgroundGlobal || "";
       this.title = this.$store.state.editor.editorTheme.title;
       this.gridTempField = this.$store.state.editor.gridTempField;
-
       var pages = this.$store.state.editor.editorTheme.pages || [];
       console.log("每页数据", pages);
       this.questions = [];
@@ -441,7 +536,6 @@ export default {
         }
       }
       console.log("拼接数据", this.questions);
-
       return this.$store.state.editor.editorPage;
     },
     element() {
@@ -801,6 +895,16 @@ export default {
       complexEditorElement.forEach(ele => {
         ele.top = max - ele.height;
       });
+    },
+    handleClose(done) {
+      this.$confirm("确认关闭？")
+        .then(_ => {
+          done();
+        })
+        .catch(_ => {});
+    },
+    uploadSelectedPicOrUnSelectedPic() {
+      this.dialogVisible = true;
     }
   },
   components: {
@@ -827,6 +931,7 @@ export default {
       if (!this.pages) {
         this.$store.dispatch("getPageByThemeId", this.itemId);
       }
+
       // this.getPicList(this.itemId);
     } else {
       this.$store.dispatch("createTheme");
@@ -844,6 +949,22 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.lable {
+  display: block;
+  cursor: pointer;
+  width: 130px;
+  height: 130px;
+}
+
+.dialog {
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.6);
+  position: absolute;
+  top: 0;
+  z-index: 100;
+}
+
 .tagPage {
   position: relative;
 }