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

src/components/ShareSetting.vue

@@ -0,0 +1,268 @@
+<template>
+  <div class="share">
+    <div class="preview">
+      <div class="preview-area"></div>
+    </div>
+    <div class="setting">
+      <img class="share-close" src="../assets/images/share-close.png" alt="" @click="closeBtn">
+      <div class="share-title">分享设置</div>
+      <div class="share-titleBox">
+        <div class="top">
+          <el-input type="text" placeholder="h5测试分享标题" v-model="text" maxlength="30" show-word-limit>
+          </el-input>
+        </div>
+        <div class="content">
+          <el-input class="input" type="textarea" :rows="3" placeholder="请输入内容" v-model="textarea" maxlength="30"
+            show-word-limit>
+          </el-input>
+          <img class="cover" src="" alt="" @click="closeBtn">
+          <div class="cover-title">更换封面</div>
+        </div>
+      </div>
+      <div class="qrcode-title">渠道二维码
+        <div class="qrcode-copy" @click="save">
+          <img class="qrcode-copy-img" src="../assets/images/qrcode-copy.png" alt="">
+          复制链接
+        </div>
+      </div>
+
+      <!-- <div class="qrcode">
+        <el-input v-model="input" placeholder="请输入内容"></el-input>
+        <img class="qrcode-img" src="" alt="">
+        <div class="qrcode-btn">
+          <div class="qrcode-download" @click="save">下载二维码</div>
+          <div class="qrcode-copy" @click="save">
+            <img class="qrcode-copy-img" src="../assets/images/qrcode-copy.png" alt="">
+            复制链接</div>
+        </div>
+      </div>
+      <div class="qrcode-add">添加渠道</div> -->
+      <div class="share-save" @click="save">确定</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      text: "",
+      textarea: ""
+    };
+  },
+  props: {
+    close: {
+      type: Function,
+      default: null
+    }
+  },
+  methods: {
+    closeBtn() {
+      this.close();
+    },
+    save() {
+      console.log("XXXX");
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.share {
+  z-index: 1000;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  flex-direction: row;
+  .preview {
+    flex-grow: 2;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .preview-area {
+      width: 340px;
+      height: 530px;
+      border: 1px solid #d6d6d6;
+      background: red;
+    }
+  }
+  .setting {
+    overflow: auto;
+    width: 446px;
+    height: 100%;
+    background: #fff;
+    .share-close {
+      z-index: 1001;
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      width: 63px;
+      height: 57px;
+      cursor: pointer;
+    }
+    .share-title {
+      margin: 80px 0px 10px 18px;
+      font-size: 16px;
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 1);
+      line-height: 22px;
+    }
+    .share-titleBox {
+      margin: 0px 12px;
+      height: 150px;
+      border-radius: 4px;
+      border: 1px solid rgba(204, 204, 204, 1);
+      .top {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin: 10px;
+      }
+      .content {
+        display: flex;
+        position: relative;
+        .input {
+          width: 326px;
+          margin-left: 10px;
+        }
+        .cover {
+          width: 70px;
+          height: 70px;
+          background: rgba(239, 239, 239, 1);
+          margin: 0px 10px;
+          cursor: pointer;
+        }
+        .cover-title {
+          position: absolute;
+          bottom: 0px;
+          right: 10px;
+          width: 70px;
+          height: 20px;
+          background: rgba(0, 0, 0, 0.8);
+          color: #fff;
+          font-size: 12px;
+          line-height: 20px;
+          text-align: center;
+        }
+      }
+    }
+    .qrcode-title {
+      margin: 28px 0px 10px 18px;
+      font-size: 16px;
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 1);
+      line-height: 22px;
+      position: relative;
+      .qrcode-copy {
+        position: absolute;
+        top: -5px;
+        left: 100px;
+        font-size: 14px;
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        color: rgba(78, 93, 255, 1);
+        line-height: 30px;
+        text-align: center;
+        width: 125px;
+        height: 30px;
+        background: rgba(230, 237, 255, 1);
+        border-radius: 15px;
+        cursor: pointer;
+        .qrcode-copy-img {
+          width: 16px;
+          height: 16px;
+          vertical-align: middle;
+        }
+      }
+    }
+    .qrcode {
+      margin-left: 18px;
+      margin-bottom: 10px;
+      width: 408px;
+      height: 283px;
+      border: 1px solid rgba(204, 204, 204, 1);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .el-input {
+        margin-top: 16px;
+        width: 265px;
+      }
+      .qrcode-img {
+        margin-top: 16px;
+        width: 140px;
+        height: 140px;
+        background: rgba(239, 239, 239, 1);
+      }
+      .qrcode-btn {
+        display: flex;
+        justify-content: space-between;
+        width: 250px;
+        height: 31px;
+        margin-top: 20px;
+        font-size: 14px;
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        color: rgba(78, 93, 255, 1);
+        line-height: 30px;
+        text-align: center;
+        .qrcode-download {
+          width: 91px;
+          height: 30px;
+          background: rgba(230, 237, 255, 1);
+          border-radius: 15px;
+          cursor: pointer;
+        }
+        .qrcode-copy {
+          width: 125px;
+          height: 30px;
+          background: rgba(230, 237, 255, 1);
+          border-radius: 15px;
+          cursor: pointer;
+          .qrcode-copy-img {
+            width: 16px;
+            height: 16px;
+            vertical-align: middle;
+          }
+        }
+      }
+    }
+
+    .qrcode-add {
+      margin-left: 18px;
+      margin-top: 20px;
+      width: 408px;
+      height: 44px;
+      background: rgba(241, 241, 241, 1);
+      border: 1px dotted rgba(192, 192, 192, 1);
+      line-height: 44px;
+      text-align: center;
+      font-size: 14px;
+      font-weight: 400;
+      color: rgba(78, 93, 255, 1);
+      cursor: pointer;
+    }
+    .share-save {
+      text-align: center;
+      width: 105px;
+      height: 34px;
+      background: rgba(78, 93, 255, 1);
+      border-radius: 19px;
+      margin-top: 167px;
+      margin-bottom: 94px;
+      margin-left: 174px;
+      font-weight: 500;
+      color: rgba(255, 255, 255, 1);
+      line-height: 34px;
+      font-size: 14px;
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/routers.js

@@ -9,6 +9,10 @@ const router = new Router({
     path: '/',
     name: 'myHistoryTest',
     component: require('./views/myHistoryTest/myHistoryTest.vue')
+  }, {
+    path: '/myHistoryTest',
+    name: 'myHistoryTest',
+    component: require('./views/myHistoryTest/myHistoryTest.vue')
   }, {
     path: '/login',
     name: 'login',

src/views/h5editor/index.vue

@@ -412,12 +412,14 @@ export default {
           .then(() => {
             window.hasSaveFlag = true;
             return Promise.resolve().then(() =>
-              this.$router.replace("themeList")
+              this.$router.replace("myHistoryTest")
             );
           })
           .catch(() => {});
       } else {
-        return Promise.resolve().then(() => this.$router.replace("themeList"));
+        return Promise.resolve().then(() =>
+          this.$router.replace("myHistoryTest")
+        );
       }
     },
     getPicList(_id) {
@@ -749,7 +751,7 @@ export default {
 
 <style lang="less" scoped>
 .editor {
-  background-color: #eaedef;
+  background-color: rgb(237, 239, 247);
   position: relative;
   height: 100%;
   overflow: hidden;
@@ -767,7 +769,7 @@ export default {
 .overview {
   position: absolute;
   left: 0;
-  width: 160px;
+  width: 225px;
   height: 100%;
   z-index: 10;
 }

src/views/h5editor/overview.vue

@@ -1,26 +1,61 @@
 <template>
   <div class="overview">
     <!-- 顶部tag -->
-    <div class="clearfix">
-      <span class="panel" :class="{ active: viewState === 0 }" @click="function () { viewState = 0 }">页面</span>
-      <span class="panel" :class="{ active: viewState === 1 }" @click="function () { viewState = 1 }">图层</span>
+    <div class="preview-tag">
+      <div class="page-tag-btn tagPage" :class="{ active: viewState === 0 }" @click="function () { viewState = 0 }">
+      </div>
+      <div class="page-tag-btn tagElement" :class="{ active: viewState === 1 }" @click="function () { viewState = 1 }">
+      </div>
     </div>
     <!-- 页面 -->
-    <ul class="list custom-scrollbar" style="z-index: 1;">
-      <li v-for="(page,index) in pages">
-        <div class="page" :class="{ active: page === editingPage }"
-          :style="{ width: 131 + 8 + 'px', height: (131 / canvasWidth) * canvasHeight + 34 + 'px' }"
-          @click="setEditingPage(page,index)">
-          <Page :isOverView="true" class="content" :hideFoot="index == (pages.length-1)?false:true"
-            :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px', transform: 'scale(' + 131 / canvasWidth +')',backgroundColor: bodyBackgroundColor }"
-            :elements="page.elements" type="see" />
-          <div class="icons clearfix">
-            <i class="icon el-icon-delete" @click="delPage(page)" v-show="index"></i>
-            <i class="icon el-icon-document" @click="copyPage(page)"></i>
+    <div class="page-preview" style="z-index: 1;">
+      <ul class="list custom-scrollbar">
+        <li class="cover">
+          <img class="page_preview_tag" src="../../assets/images/page_preview_tag.png" alt="">
+          <div class="page_preview_tag_title">封面</div>
+          <div class="item-page">
+            <span>1</span>
+            <div class="page" :class="{ active: pages[0] === editingPage }"
+              :style="{ width: 70 + 4 + 'px', height: (70 / canvasWidth) * canvasHeight + 4 + 'px' }"
+              @click="setEditingPage(pages[0],0)">
+              <Page :isOverView="true" class="content" :hideFoot="true"
+                :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px', transform: 'scale(' + 70 / canvasWidth +')',backgroundColor: bodyBackgroundColor }"
+                :elements="pages[0].elements" type="see" />
+            </div>
+          </div>
+        </li>
+        <li class="cover">
+          <img class="page_preview_tag" src="../../assets/images/page_preview_tag.png" alt="">
+          <div class="page_preview_tag_title">题目</div>
+          <div class="item-page" v-for="(page,index) in pages">
+            <span v-show="isShow(index)">{{index + 1 }}</span>
+            <div v-show="isShow(index)" class="page" :class="{ active: page === editingPage }"
+              :style="{ width: 70 + 4 + 'px', height: (70 / canvasWidth) * canvasHeight + 4 + 'px' }"
+              @click="setEditingPage(page,index)">
+              <Page :isOverView="true" class="content" :hideFoot="true"
+                :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px', transform: 'scale(' + 70 / canvasWidth +')',backgroundColor: bodyBackgroundColor }"
+                :elements="page.elements" type="see" />
+            </div>
+          </div>
+          <div class="item-page-add" @click="addPage">添加题目页</div>
+        </li>
+        <li class="cover">
+          <img class="page_preview_tag" src="../../assets/images/page_preview_tag.png" alt="">
+          <div class="page_preview_tag_title">结论</div>
+          <div class="item-page" v-for="(page,index) in pages">
+            <span v-show="isShowResult(index)">1</span>
+            <div v-show="isShowResult(index)" class="page" :class="{ active: page === editingPage }"
+              :style="{ width: 70 + 4 + 'px', height: (70 / canvasWidth) * canvasHeight + 4 + 'px' }"
+              @click="setEditingPage(page,index)">
+              <Page :isOverView="true" class="content" :hideFoot="true"
+                :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px', transform: 'scale(' + 70 / canvasWidth +')',backgroundColor: bodyBackgroundColor }"
+                :elements="page.elements" type="see" />
+            </div>
           </div>
-        </div>
-      </li>
-    </ul>
+          <div class="item-page-add" @click="addResultPage">添加结论页</div>
+        </li>
+      </ul>
+    </div>
     <!-- 图层 -->
     <div class="list custom-scrollbar" style="z-index: 2;" v-show="viewState === 1"
       :class="{ dragging: dragState === 1 }">
@@ -37,8 +72,6 @@
         <span class="thumb" :style="{ backgroundImage: 'url(' + layer.imgSrc + ')' }"></span>{{ layer.type }}
       </div>
     </div>
-    <!-- 添加按钮 -->
-    <button class="add el-icon-plus" @click="addPage"></button>
   </div>
 </template>
 <script>
@@ -52,7 +85,10 @@ export default {
       http: AppConst.BACKEND_DOMAIN,
       canvasWidth: 750,
       canvasHeight: 1334,
-      bodyBackgroundColor: "rgba(255,255,255,0)"
+      bodyBackgroundColor: "rgba(255,255,255,0)",
+      questionPages: [],
+      resultPageCount: 0,
+      resultPages: []
     };
   },
   computed: {
@@ -84,6 +120,27 @@ export default {
     }
   },
   methods: {
+    isShow: function(index) {
+      var result = false;
+      if (index > 0) {
+        console.log(this.pages.length, index, this.resultPageCount);
+        if (this.pages.length - index > this.resultPageCount) {
+          result = true;
+        }
+      }
+      return result;
+    },
+    isShowResult(index) {
+      var result = false;
+      console.log(this.pages.length, index, this.resultPageCount);
+      if (
+        this.pages.length - index <= this.resultPageCount &&
+        this.resultPageCount > 0
+      ) {
+        result = true;
+      }
+      return result;
+    },
     moveLayer(downEvent) {
       let height = 30;
       let timer = null;
@@ -156,6 +213,13 @@ export default {
         "rgba(255,255,255,0)";
       this.$store.dispatch("addPage");
     },
+    addResultPage() {
+      this.bodyBackgroundColor =
+        this.$store.state.editor.editorTheme.bodyBackgroundColor ||
+        "rgba(255,255,255,0)";
+      this.$store.dispatch("addPage");
+      this.resultPageCount += 1;
+    },
     setEditingPage(page) {
       this.bodyBackgroundColor =
         this.$store.state.editor.editorTheme.bodyBackgroundColor ||
@@ -175,9 +239,51 @@ export default {
 <style lang="less" scoped>
 .overview {
   position: relative;
-  border-right: 1px solid #d6d6d6;
-  background-color: #ececec;
+  background-color: rgb(196, 185, 185);
   height: 100%;
+  .preview-tag {
+    width: 44px;
+    height: 100%;
+    background: #fff;
+    box-shadow: 5px 0px 10px 0px rgba(62, 67, 116, 0.1);
+    position: absolute;
+    top: 0px;
+    left: 226px;
+    z-index: 3;
+    padding-top: 10px;
+    .page-tag-btn {
+      margin-top: 10px;
+      margin-left: 5px;
+      width: 34px;
+      height: 34px;
+    }
+    .tagPage {
+      background: url(../../assets/images/page-tag.png) center no-repeat;
+      background-size: cover;
+      &.active {
+        background: url(../../assets/images/page-tag-sel.png) center no-repeat;
+        background-size: cover;
+      }
+    }
+    .tagPage:hover {
+      background: url(../../assets/images/page-tag-hover.png) center no-repeat;
+      background-size: cover;
+    }
+    .tagElement {
+      background: url(../../assets/images/element-tag.png) center no-repeat;
+      background-size: cover;
+      &.active {
+        background: url(../../assets/images/element-tag-sel.png) center
+          no-repeat;
+        background-size: cover;
+      }
+    }
+    .tagElement:hover {
+      background: url(../../assets/images/element-tag-hover.png) center
+        no-repeat;
+      background-size: cover;
+    }
+  }
   .panel {
     float: left;
     line-height: 40px;
@@ -190,13 +296,77 @@ export default {
     }
   }
   .list {
-    background-color: #ececec;
+    background-color: #fff;
     position: absolute;
-    top: 40px;
-    bottom: 50px;
+    top: 0px;
+    bottom: 0px;
     width: 100%;
     overflow-y: auto;
     overflow-x: hidden;
+    padding-top: 10px;
+    padding-bottom: 20px;
+    .cover {
+      margin-left: 16px;
+      width: 180px;
+      background: rgba(230, 237, 255, 1);
+      border-radius: 6px;
+      padding-top: 10px;
+      padding-bottom: 10px;
+      position: relative;
+      margin-top: 16px;
+      .page_preview_tag {
+        position: absolute;
+        top: 6px;
+        left: 0px;
+        width: 49px;
+        height: 22px;
+      }
+      .page_preview_tag_title {
+        position: absolute;
+        top: 6px;
+        left: 0px;
+        line-height: 22px;
+        margin-left: 10px;
+        font-size: 12px;
+        color: rgba(255, 255, 255, 1);
+      }
+      .item-page {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        font-size: 14px;
+        font-weight: 500;
+        color: rgba(100, 107, 129, 1);
+        .preview-page {
+          margin-left: 10px;
+          width: 70px;
+          height: 114px;
+          box-shadow: 0px 2px 4px 0px rgba(78, 93, 255, 1);
+          border: 2px solid rgba(255, 255, 255, 1);
+          background: #fff;
+        }
+      }
+      .item-page-add {
+        width: 70px;
+        height: 114px;
+        margin-left: 64px;
+        margin-bottom: 30px;
+        font-size: 12px;
+        color: rgba(100, 107, 129, 1);
+        line-height: 154px;
+        text-align: center;
+        background: url(../../assets/images/item-page-add.png) center no-repeat;
+        background-size: cover;
+      }
+      .item-page-add:hover {
+        color: rgba(51, 51, 51, 1);
+        background: url(../../assets/images/item-page-add-hover.png) center
+          no-repeat;
+        background-size: cover;
+      }
+    }
   }
   .dragging:before {
     content: "";
@@ -209,12 +379,12 @@ export default {
   }
   .page {
     position: relative;
-    border-color: transparent;
-    border-style: solid;
-    border-width: 4px 4px 30px;
-    margin: 10px;
+    margin-left: 10px;
+    border: 2px solid rgba(255, 255, 255, 1);
+    background: #fff;
     &.active {
-      border-color: #18ccc0;
+      border-color: rgba(78, 93, 255, 1);
+      box-shadow: 0px 2px 4px 0px rgba(78, 93, 255, 1);
       .icons {
         display: block;
       }

src/views/h5editor/overview1.vue

@@ -0,0 +1,390 @@
+<template>
+  <div class="overview">
+    <!-- 顶部tag -->
+    <div class="clearfix">
+      <div class="panel" :class="{ active: viewState === 0 }" @click="function () { viewState = 0 }">页面</div>
+      <div class="panel" :class="{ active: viewState === 1 }" @click="function () { viewState = 1 }">图层</div>
+    </div>
+    <!-- 页面 -->
+    <div class="page-preview">
+      <div class="item">
+        <div class="item-cover">
+          <img class="page_preview_tag" src="../../assets/images/page_preview_tag.png" alt="">
+          <div class="page_preview_tag_title">封面</div>
+          <div class="item-page" v-for="(page,index) in pages">
+            <span>1</span>
+            <div class="preview-page">
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="item">
+        <div class="item-cover">
+          <img class="page_preview_tag" src="../../assets/images/page_preview_tag.png" alt="">
+          <div class="page_preview_tag_title">题目</div>
+          <div class="item-page">
+            <span>1</span>
+            <div class="preview-page"></div>
+          </div>
+          <div class="item-page">
+            <span>1</span>
+            <div class="preview-page"></div>
+          </div>
+          <div class="item-page">
+            <span>1</span>
+            <div class="preview-page"></div>
+          </div>
+          <div class="item-page">
+            <span>1</span>
+            <div class="preview-page"></div>
+          </div>
+        </div>
+      </div>
+      <div class="item">
+        <div class="item-cover">
+          <img class="page_preview_tag" src="../../assets/images/page_preview_tag.png" alt="">
+          <div class="page_preview_tag_title">结论</div>
+          <div class="item-page">
+            <span>1</span>
+            <div class="preview-page"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 图层 -->
+    <div class="list custom-scrollbar" style="z-index: 2;" v-show="viewState === 1"
+      :class="{ dragging: dragState === 1 }">
+      <ul>
+        <li v-for="layer in layersNoBg">
+          <div class="layer" :class="{ active: editingLayer === layer}" @click="setEditingLayer($event, layer)"
+            @mousedown="moveLayer">
+            <span class="thumb" :style="{ backgroundImage: 'url(' + layer.imgSrc + ')' }"></span>{{ layer.type }}
+          </div>
+        </li>
+      </ul>
+      <div v-for="layer in layersBg" class="layer" :class="{ active: editingLayer === layer}"
+        @click="setEditingLayer($event, layer)">
+        <span class="thumb" :style="{ backgroundImage: 'url(' + layer.imgSrc + ')' }"></span>{{ layer.type }}
+      </div>
+    </div>
+    <!-- 添加按钮 -->
+    <!-- <button class="add el-icon-plus" @click="addPage"></button> -->
+  </div>
+</template>
+<script>
+import Page from "./../../components/Page";
+import AppConst from "../../util/appConst";
+export default {
+  data() {
+    return {
+      viewState: 0,
+      dragState: 0,
+      http: AppConst.BACKEND_DOMAIN,
+      canvasWidth: 750,
+      canvasHeight: 1334,
+      bodyBackgroundColor: "rgba(255,255,255,0)"
+    };
+  },
+  computed: {
+    vxEditor() {
+      return this.$store.state["editor"];
+    },
+    pages() {
+      this.bodyBackgroundColor =
+        this.$store.state.editor.editorTheme.bodyBackgroundColor ||
+        "rgba(255,255,255,0)";
+      return this.vxEditor["editorTheme"]["pages"];
+    },
+    editingPage() {
+      return this.vxEditor["editorPage"];
+    },
+    layers() {
+      return this.editingPage["elements"];
+    },
+    layersNoBg() {
+      return (
+        this.layers && this.layers.filter(v => v["type"] !== "bg").reverse()
+      );
+    },
+    layersBg() {
+      return this.layers && this.layers.filter(v => v["type"] === "bg");
+    },
+    editingLayer() {
+      return this.vxEditor["editorElement"];
+    }
+  },
+  methods: {
+    moveLayer(downEvent) {
+      let height = 30;
+      let timer = null;
+      let layer = downEvent.target;
+      let li = layer.parentNode;
+      let parent = li.parentNode;
+      let liLen = parent.childNodes.length;
+      let startTop = li.offsetTop;
+      let startIndex = Math.round(startTop / height);
+      let targetIndex = null;
+      let placeholder = document.createElement("li");
+      placeholder.style = "height: " + height + "px; background-color: #d6d6d6";
+      let move = moveEvent => {
+        if (!timer) {
+          // 被拖动的层
+          let top = moveEvent.clientY - downEvent.clientY + startTop;
+          layer.setAttribute("data-moving", true);
+          layer.style.top = top + "px";
+          this.dragState = 1;
+          // 占位层
+          let nowIndex = Math.round(top / height);
+          nowIndex =
+            nowIndex <= 0 ? 0 : nowIndex > liLen - 1 ? liLen - 1 : nowIndex;
+          if (targetIndex !== nowIndex) {
+            (targetIndex || targetIndex === 0) &&
+              parent.removeChild(placeholder);
+            targetIndex = nowIndex;
+            parent.insertBefore(
+              placeholder,
+              parent.childNodes[nowIndex + (startIndex >= targetIndex ? 0 : 1)]
+            );
+          }
+          // timer负责减少onmousemove对客户端的负担
+          timer = setTimeout(() => {
+            timer = null;
+          }, 20);
+        }
+      };
+      let up = upEvent => {
+        if (layer.getAttribute("data-moving")) {
+          layer.removeAttribute("data-moving");
+          layer.style.top = "";
+          parent.removeChild(placeholder);
+          this.layersNoBg[startIndex]["zindex"] =
+            this.layersNoBg[targetIndex]["zindex"] +
+            (targetIndex > startIndex ? -0.5 : 0.5);
+          this.updateLayersSort();
+        }
+        document.removeEventListener("mousemove", move);
+        document.removeEventListener("mouseup", up);
+        this.dragState = 0;
+      };
+      if (liLen > 1) {
+        document.addEventListener("mousemove", move);
+        document.addEventListener("mouseup", up);
+      }
+    },
+    copyPage(page) {
+      this.bodyBackgroundColor =
+        this.$store.state.editor.editorTheme.bodyBackgroundColor ||
+        "rgba(255,255,255,0)";
+      this.$store.dispatch("copyPage", page);
+    },
+    delPage(page) {
+      this.$store.dispatch("delPage", page);
+    },
+    addPage() {
+      this.bodyBackgroundColor =
+        this.$store.state.editor.editorTheme.bodyBackgroundColor ||
+        "rgba(255,255,255,0)";
+      this.$store.dispatch("addPage");
+    },
+    setEditingPage(page) {
+      this.bodyBackgroundColor =
+        this.$store.state.editor.editorTheme.bodyBackgroundColor ||
+        "rgba(255,255,255,0)";
+      this.$store.dispatch("setEditorPage", page);
+    },
+    setEditingLayer(event, layer) {
+      this.$store.dispatch("setEditorElement", layer);
+    },
+    updateLayersSort() {
+      this.$store.dispatch("sortElementsByZindex");
+    }
+  },
+  components: { Page }
+};
+</script>
+<style lang="less" scoped>
+.overview {
+  position: relative;
+  border-right: 1px solid #d6d6d6;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .clearfix {
+    width: 44px;
+    height: 100%;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 5px 0px 10px 0px rgba(62, 67, 116, 0.1);
+    position: absolute;
+    top: 0px;
+    left: 180px;
+    z-index: 1000;
+  }
+  .page-preview {
+    background-color: rgba(237, 239, 247, 1);
+    position: absolute;
+    top: 0px;
+    bottom: 0px;
+    width: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    .item {
+      width: 225px;
+      background: #fff;
+      padding-top: 20px;
+      padding-bottom: 20px;
+      .item-cover {
+        margin-left: 16px;
+        width: 180px;
+        background: rgba(230, 237, 255, 1);
+        border-radius: 6px;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        position: relative;
+        .page_preview_tag {
+          position: absolute;
+          top: 6px;
+          left: 0px;
+          width: 49px;
+          height: 22px;
+        }
+        .page_preview_tag_title {
+          position: absolute;
+          top: 6px;
+          left: 0px;
+          line-height: 22px;
+          margin-left: 10px;
+          font-size: 12px;
+          color: rgba(255, 255, 255, 1);
+        }
+        .item-page {
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          margin-top: 20px;
+          margin-bottom: 20px;
+          font-size: 14px;
+          font-weight: 500;
+          color: rgba(100, 107, 129, 1);
+          .preview-page {
+            margin-left: 10px;
+            width: 70px;
+            height: 114px;
+            box-shadow: 0px 2px 4px 0px rgba(78, 93, 255, 1);
+            border: 2px solid rgba(255, 255, 255, 1);
+            background: #fff;
+          }
+        }
+      }
+      .list {
+      }
+    }
+  }
+  .panel {
+    float: left;
+    line-height: 40px;
+    width: 50%;
+    text-align: center;
+    background-color: #d6d6d6;
+    cursor: pointer;
+    &.active {
+      background-color: transparent;
+    }
+  }
+
+  .dragging:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 10;
+  }
+  .page {
+    position: relative;
+    border-color: transparent;
+    border-style: solid;
+    border-width: 4px 4px 30px;
+    margin: 10px;
+    &.active {
+      border-color: #18ccc0;
+      .icons {
+        display: block;
+      }
+    }
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      z-index: 2;
+    }
+    .content {
+      transform-origin: left top;
+      background-color: #fff;
+      overflow: hidden;
+      position: relative;
+    }
+    .icons {
+      position: absolute;
+      bottom: -1.5em;
+      right: 0.5em;
+      display: none;
+      width: 100%;
+      color: #fff;
+      .icon {
+        float: right;
+        margin-left: 1em;
+        opacity: 0.5;
+        cursor: pointer;
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+  }
+  .layer {
+    padding-left: 20px;
+    height: 30px;
+    line-height: 30px;
+    border-bottom: 1px solid #d6d6d6;
+    cursor: pointer;
+    &[data-moving] {
+      background-color: #d6d6d6;
+      position: absolute;
+      width: 100%;
+    }
+    &:hover {
+      background-color: #d6d6d6;
+    }
+    &.active {
+      background-color: #18ccc0;
+      color: #fff;
+    }
+    .thumb {
+      display: inline-block;
+      width: 15px;
+      height: 15px;
+      margin-right: 1em;
+      background: white center no-repeat;
+      background-size: cover;
+    }
+  }
+  .add {
+    border: none;
+    position: absolute;
+    bottom: 0;
+    height: 50px;
+    line-height: 50px;
+    width: 100%;
+    left: 0;
+    background-color: #373f42;
+    text-align: center;
+    color: #fff;
+    cursor: pointer;
+  }
+}
+</style>

src/views/myHistoryTest/myHistoryTest.html

@@ -25,7 +25,7 @@
       </el-dropdown>
     </div>
     <div class="right">
-      <el-button type="primary" icon="el-icon-circle-plus-outline">创建测试</el-button>
+      <el-button type="primary" icon="el-icon-circle-plus-outline" @click="createTest">创建测试</el-button>
     </div>
   </div>
   <!-- 列表 -->
@@ -34,8 +34,8 @@
       <div class="tools">
         <img class="item-img delete" src="" alt="" @click="deleteTest(index)">
         <img class="item-img copy" src="" alt="" @click="copyTest">
-        <img class="item-img share" src="" alt="">
-        <img class="item-img edit" src="" alt="" style="float:right;margin-right:10px;">
+        <img class="item-img share" src="" alt="" @click="shareTest()">
+        <img class="item-img edit" src="" alt="" @click="editTest" style="float:right;margin-right:10px;">
       </div>
       <img class="item-img" mode="" src="https://dm.static.elab-plus.com/diaoyanbao/coverImg/GT95_preview.jpg" alt="">
       <div class="title">定制你的家具香气{{item.index}}</div>
@@ -45,9 +45,11 @@
         <span>1天前</span>
       </div>
     </div>
-    <div class="item add">
+    <div class="item add" @click="createTest">
       <i class="el-icon-circle-plus add-icon"></i>
       <span>创建测试</span>
     </div>
   </div>
+  <!-- 分享设置 -->
+  <ShareSetting v-show="isShareSetting" :close="closeShare"></ShareSetting>
 </div>

src/views/myHistoryTest/myHistoryTest.js

@@ -1,11 +1,13 @@
 import HeaderMain from "../../components/HeaderMain";
+import ShareSetting from "../../components/ShareSetting";
 export default {
   components: {
-    HeaderMain
+    HeaderMain, ShareSetting
   },
   data() {
     return {
       isCopy: false,
+      isShareSetting: false,
       cities: [{
         value: 'Beijing',
         label: '北京'
@@ -29,7 +31,21 @@ export default {
       lists: [{ index: 0 }, { index: 1 }, { index: 2 }, { index: 3 }, { index: 4 }, { index: 5 }, { index: 6 }, { index: 7 }, { index: 8 }, { index: 9 }, { index: 10 }, { index: 11 }, { index: 12 }, { index: 13 }, { index: 14 }, { index: 15 }, { index: 16 }, { index: 17 }, { index: 18 }, { index: 19 }]
     }
   },
+  watch: {
+    isShareSetting: function (val) {
+      var mo = function (e) { e.preventDefault(); };
+      document.body.style.overflow = val ? 'hidden' : '';
+      if (val) {
+        document.addEventListener("touchmove", mo, false);
+      } else {
+        document.removeEventListener("touchmove", mo, false);
+      }
+    }
+  },
   methods: {
+    createTest() {
+      this.$router.push({ path: '/cncTestLists' });
+    },
     deleteTest(index) {
       const h = this.$createElement;
       this.$msgbox({
@@ -70,6 +86,15 @@ export default {
       setTimeout(() => {
         this.isCopy = false;
       }, 2000);
+    },
+    editTest() {
+      this.$router.replace({ path: '/h5editor', query: { itemId: 0 } })
+    },
+    shareTest() {
+      this.isShareSetting = true;
+    },
+    closeShare() {
+      this.isShareSetting = false;
     }
   },
 }

src/views/myHistoryTest/myHistoryTest.scss

@@ -157,6 +157,7 @@
     color:rgba(78,93,255,1);
     line-height:22px;
     text-align: center;
+    cursor:pointer;
     .add-icon {
       font-size:28px;
       margin-bottom: 10px;

src/views/spaeditor/overview.vue

@@ -6,8 +6,12 @@
     </div>
     <ul class="list custom-scrollbar" style="z-index: 1;">
       <li v-for="page in pages">
-        <div class="page" :class="{ active: page === editingPage }" :style="{ width: 131 + 8 + 'px', height: (131 / canvasWidth) * canvasHeight + 34 + 'px' }" @click="setEditingPage(page)">
-          <Page :isOverView="true" class="content" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px', transform: 'scale(' + 131 / canvasWidth +')' }" :elements="page.elements" type="see" />
+        <div class="page" :class="{ active: page === editingPage }"
+          :style="{ width: 131 + 8 + 'px', height: (131 / canvasWidth) * canvasHeight + 34 + 'px' }"
+          @click="setEditingPage(page)">
+          <Page :isOverView="true" class="content"
+            :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px', transform: 'scale(' + 131 / canvasWidth +')' }"
+            :elements="page.elements" type="see" />
           <div class="icons clearfix">
             <i class="icon el-icon-delete" @click="delPage(page)"></i>
             <i class="icon el-icon-document" @click="copyPage(page)"></i>
@@ -15,21 +19,32 @@
         </div>
       </li>
     </ul>
-    <div class="list custom-scrollbar" style="z-index: 2;" v-show="viewState === 1" :class="{ dragging: dragState === 1 }">
+    <div class="list custom-scrollbar" style="z-index: 2;" v-show="viewState === 1"
+      :class="{ dragging: dragState === 1 }">
       <ul>
-        <li v-for="(layer,index) in layersNoBg">{{layer.des===undefined?layer.des=layer.type:''}}{{layer.locked===undefined?layer.locked=false:''}}
-          <div class="layer" :class="{ active: editingLayer === layer}" @click="setEditingLayer($event, layer)" @mousedown="moveLayer">
+        <li v-for="(layer,index) in layersNoBg">
+          {{layer.des===undefined?layer.des=layer.type:''}}{{layer.locked===undefined?layer.locked=false:''}}
+          <div class="layer" :class="{ active: editingLayer === layer}" @click="setEditingLayer($event, layer)"
+            @mousedown="moveLayer">
             <!--<span class="thumb" :style="{ backgroundImage: 'url(' + layer.imgSrc + ')' }"></span>{{ layer.type }}-->
-            <img v-if="layer.locked" src="../../../static/img/unLocked.png" alt="" @mousedown.stop="1" @click.stop="layer.locked=false;setEditingLayer($event, null)"  style="width: 20px;height: 20px;display: inline-block">
-            <img v-else src="../../../static/img/locked.png" alt="" @mousedown.stop="1" @click.stop="layer.locked=true;setEditingLayer($event, null)"  style="width: 20px;height: 20px;display: inline-block;">
+            <img v-if="layer.locked" src="../../../static/img/unLocked.png" alt="" @mousedown.stop="1"
+              @click.stop="layer.locked=false;setEditingLayer($event, null)"
+              style="width: 20px;height: 20px;display: inline-block">
+            <img v-else src="../../../static/img/locked.png" alt="" @mousedown.stop="1"
+              @click.stop="layer.locked=true;setEditingLayer($event, null)"
+              style="width: 20px;height: 20px;display: inline-block;">
             <span @mousedown.stop="1" class="thumb" :style="{ backgroundImage: 'url(' + layer.imgSrc + ')' }"></span>
-            <div @mousedown.stop="1" style="display:inline-block;width: 50%;height: 26px;"  @dblclick="editflag=index">
-              <el-input v-model="layer.des" :title="layer.des" @blur="editflag=''" :disabled="editflag!==index" :class="{ active: editingLayer === layer}" placeholder="请输入" style="width: 100%;height: 100%;"></el-input>
+            <div @mousedown.stop="1" style="display:inline-block;width: 50%;height: 26px;" @dblclick="editflag=index">
+              <el-input v-model="layer.des" :title="layer.des" @blur="editflag=''" :disabled="editflag!==index"
+                :class="{ active: editingLayer === layer}" placeholder="请输入" style="width: 100%;height: 100%;">
+              </el-input>
             </div>
           </div>
         </li>
       </ul>
-      <div v-for="layer in layersBg" class="layer" :class="{ active: editingLayer === layer}" @click="setEditingLayer($event, layer)">{{layer.des===undefined?layer.des=layer.type:''}}{{layer.locked===undefined?layer.locked=false:''}}
+      <div v-for="layer in layersBg" class="layer" :class="{ active: editingLayer === layer}"
+        @click="setEditingLayer($event, layer)">
+        {{layer.des===undefined?layer.des=layer.type:''}}{{layer.locked===undefined?layer.locked=false:''}}
         <span class="thumb" :style="{ backgroundImage: 'url(' + layer.imgSrc + ')' }"></span>{{ layer.type }}
       </div>
     </div>
@@ -37,238 +52,247 @@
   </div>
 </template>
 <script>
-  import Page from './../../components/Page'
-  import AppConst from '../../util/appConst'
-  export default {
-    data () {
-      return {
-        editflag:"",
-        viewState: 1,
-        dragState: 0,
-        http: AppConst.BACKEND_DOMAIN
-      }
+import Page from "./../../components/Page";
+import AppConst from "../../util/appConst";
+export default {
+  data() {
+    return {
+      editflag: "",
+      viewState: 1,
+      dragState: 0,
+      http: AppConst.BACKEND_DOMAIN
+    };
+  },
+  computed: {
+    vxEditor() {
+      return this.$store.state["editor"];
     },
-    computed: {
-      vxEditor () {
-        return this.$store.state['editor']
-      },
-      canvasWidth () {
-        return this.vxEditor['canvasWidth']
-      },
-      canvasHeight () {
-        return this.vxEditor['canvasHeight']
-      },
-      pages () {
-        return this.vxEditor['editorTheme']['pages']
-      },
-      editingPage () {
-        return this.vxEditor['editorPage']
-      },
-      layers () {
-        return this.editingPage['elements']
-      },
-      layersNoBg () {
-        return this.layers && this.layers.filter(v => v['type'] !== 'bg').reverse()
-      },
-      layersBg () {
-        return this.layers && this.layers.filter(v => v['type'] === 'bg')
-      },
-      editingLayer () {
-        return this.vxEditor['editorElement']
-      }
+    canvasWidth() {
+      return this.vxEditor["canvasWidth"];
     },
-    methods: {
-      moveLayer (downEvent) {
-        let height = 30
-        let timer = null
-        let layer = downEvent.target
-        let li = layer.parentNode
-        let parent = li.parentNode
-        let liLen = parent.childNodes.length
-        let startTop = li.offsetTop
-        let startIndex = Math.round(startTop / height)
-        let targetIndex = null
-        let placeholder = document.createElement('li')
-        placeholder.style = 'height: ' + height + 'px; background-color: #d6d6d6'
-        let move = (moveEvent) => {
-          if (!timer) {
-            // 被拖动的层
-            let top = moveEvent.clientY - downEvent.clientY + startTop
-            layer.setAttribute('data-moving', true)
-            layer.style.top = top + 'px'
-            this.dragState = 1
-            // 占位层
-            let nowIndex = Math.round(top / height)
-            nowIndex = nowIndex <= 0 ? 0 : nowIndex > liLen - 1 ? liLen - 1 : nowIndex
-            if (targetIndex !== nowIndex) {
-              (targetIndex || targetIndex === 0) && parent.removeChild(placeholder)
-              targetIndex = nowIndex
-              parent.insertBefore(placeholder, parent.childNodes[nowIndex + (startIndex >= targetIndex ? 0 : 1)])
-            }
-            // timer负责减少onmousemove对客户端的负担
-            timer = setTimeout(() => {
-              timer = null
-            }, 20)
-          }
-        }
-        let up = (upEvent) => {
-          if (layer.getAttribute('data-moving')) {
-            layer.removeAttribute('data-moving')
-            layer.style.top = ''
-            parent.removeChild(placeholder)
-            this.layersNoBg[startIndex]['zindex'] = this.layersNoBg[targetIndex]['zindex'] + (targetIndex > startIndex ? -0.5 : 0.5)
-            this.updateLayersSort()
+    canvasHeight() {
+      return this.vxEditor["canvasHeight"];
+    },
+    pages() {
+      return this.vxEditor["editorTheme"]["pages"];
+    },
+    editingPage() {
+      return this.vxEditor["editorPage"];
+    },
+    layers() {
+      return this.editingPage["elements"];
+    },
+    layersNoBg() {
+      return (
+        this.layers && this.layers.filter(v => v["type"] !== "bg").reverse()
+      );
+    },
+    layersBg() {
+      return this.layers && this.layers.filter(v => v["type"] === "bg");
+    },
+    editingLayer() {
+      return this.vxEditor["editorElement"];
+    }
+  },
+  methods: {
+    moveLayer(downEvent) {
+      let height = 30;
+      let timer = null;
+      let layer = downEvent.target;
+      let li = layer.parentNode;
+      let parent = li.parentNode;
+      let liLen = parent.childNodes.length;
+      let startTop = li.offsetTop;
+      let startIndex = Math.round(startTop / height);
+      let targetIndex = null;
+      let placeholder = document.createElement("li");
+      placeholder.style = "height: " + height + "px; background-color: #d6d6d6";
+      let move = moveEvent => {
+        if (!timer) {
+          // 被拖动的层
+          let top = moveEvent.clientY - downEvent.clientY + startTop;
+          layer.setAttribute("data-moving", true);
+          layer.style.top = top + "px";
+          this.dragState = 1;
+          // 占位层
+          let nowIndex = Math.round(top / height);
+          nowIndex =
+            nowIndex <= 0 ? 0 : nowIndex > liLen - 1 ? liLen - 1 : nowIndex;
+          if (targetIndex !== nowIndex) {
+            (targetIndex || targetIndex === 0) &&
+              parent.removeChild(placeholder);
+            targetIndex = nowIndex;
+            parent.insertBefore(
+              placeholder,
+              parent.childNodes[nowIndex + (startIndex >= targetIndex ? 0 : 1)]
+            );
           }
-          document.removeEventListener('mousemove', move)
-          document.removeEventListener('mouseup', up)
-          this.dragState = 0
+          // timer负责减少onmousemove对客户端的负担
+          timer = setTimeout(() => {
+            timer = null;
+          }, 20);
         }
-        if (liLen > 1) {
-          document.addEventListener('mousemove', move)
-          document.addEventListener('mouseup', up)
+      };
+      let up = upEvent => {
+        if (layer.getAttribute("data-moving")) {
+          layer.removeAttribute("data-moving");
+          layer.style.top = "";
+          parent.removeChild(placeholder);
+          this.layersNoBg[startIndex]["zindex"] =
+            this.layersNoBg[targetIndex]["zindex"] +
+            (targetIndex > startIndex ? -0.5 : 0.5);
+          this.updateLayersSort();
         }
-      },
-      copyPage (page) {
-        this.$store.dispatch('copyPage', page)
-      },
-      delPage (page) {
-        this.$store.dispatch('delPage', page)
-      },
-      addPage () {
-        this.$store.dispatch('addPage')
-      },
-      setEditingPage (page) {
-        this.$store.dispatch('setEditorPage', page)
-      },
-      setEditingLayer (event, layer) {
-        this.$store.dispatch('setEditorElement', layer)
-      },
-      updateLayersSort () {
-        this.$store.dispatch('sortElementsByZindex')
+        document.removeEventListener("mousemove", move);
+        document.removeEventListener("mouseup", up);
+        this.dragState = 0;
+      };
+      if (liLen > 1) {
+        document.addEventListener("mousemove", move);
+        document.addEventListener("mouseup", up);
       }
     },
-    components: { Page }
-  }
+    copyPage(page) {
+      this.$store.dispatch("copyPage", page);
+    },
+    delPage(page) {
+      this.$store.dispatch("delPage", page);
+    },
+    addPage() {
+      this.$store.dispatch("addPage");
+    },
+    setEditingPage(page) {
+      this.$store.dispatch("setEditorPage", page);
+    },
+    setEditingLayer(event, layer) {
+      this.$store.dispatch("setEditorElement", layer);
+    },
+    updateLayersSort() {
+      this.$store.dispatch("sortElementsByZindex");
+    }
+  },
+  components: { Page }
+};
 </script>
 <style lang="less" scoped>
-  .overview {
-    position: relative;
-    border-right: 1px solid #d6d6d6;
+.overview {
+  position: relative;
+  border-right: 1px solid #d6d6d6;
+  background-color: #ececec;
+  height: 100%;
+  .panel {
+    float: left;
+    line-height: 40px;
+    width: 50%;
+    text-align: center;
+    background-color: #d6d6d6;
+    cursor: pointer;
+    &.active {
+      background-color: transparent;
+    }
+  }
+  .list {
     background-color: #ececec;
-    height: 100%;
-    .panel {
-      float: left;
-      line-height: 40px;
-      width: 50%;
-      text-align: center;
-      background-color: #d6d6d6;
-      cursor: pointer;
-      &.active {
-        background-color: transparent;
+    position: absolute;
+    top: 40px;
+    bottom: 0px;
+    width: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .dragging:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 10;
+  }
+  .page {
+    position: relative;
+    border-color: transparent;
+    border-style: solid;
+    border-width: 4px 4px 30px;
+    margin: 10px;
+    &.active {
+      border-color: #18ccc0;
+      .icons {
+        display: block;
       }
     }
-    .list {
-      background-color: #ececec;
-      position: absolute;
-      top: 40px;
-      bottom: 50px;
-      width: 100%;
-      overflow-y: auto;
-      overflow-x: hidden;
-    }
-    .dragging:before {
+    &:before {
       content: "";
       position: absolute;
       top: 0;
-      right: 0;
-      bottom: 0;
       left: 0;
-      z-index: 10;
+      bottom: 0;
+      right: 0;
+      z-index: 2;
     }
-    .page {
+    .content {
+      transform-origin: left top;
+      background-color: #fff;
+      overflow: hidden;
       position: relative;
-      border-color: transparent;
-      border-style: solid;
-      border-width: 4px 4px 30px;
-      margin: 10px;
-      &.active {
-        border-color: #18ccc0;
-        .icons {
-          display: block;
-        }
-      }
-      &:before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
-        z-index: 2;
-      }
-      .content {
-        transform-origin: left top;
-        background-color: #fff;
-        overflow: hidden;
-        position: relative;
-      }
-      .icons {
-        position: absolute;
-        bottom: -1.5em;
-        right: 0.5em;
-        display: none;
-        width: 100%;
-        color: #fff;
-        .icon {
-          float: right;
-          margin-left: 1em;
-          opacity: 0.5;
-          cursor: pointer;
-          &:hover {
-            opacity: 1;
-          }
-        }
-      }
     }
-    .layer {
-      /*padding-left: 20px;*/
-      height: 30px;
-      line-height: 30px;
-      border-bottom: 1px solid #d6d6d6;
-      cursor: pointer;
-      &[data-moving] {
-        background-color: #d6d6d6;
-        position: absolute;
-        width: 100%;
-      }
-      &:hover {
-        background-color: #d6d6d6;
-      }
-      &.active {
-        background-color: #18ccc0;
-        color: #fff;
-      }
-      .thumb {
-        display: inline-block;
-        width: 15px;
-        height: 15px;
-        margin-right: 1em;
-        background: white center no-repeat;
-        background-size: cover;
+    .icons {
+      position: absolute;
+      bottom: -1.5em;
+      right: 0.5em;
+      display: none;
+      width: 100%;
+      color: #fff;
+      .icon {
+        float: right;
+        margin-left: 1em;
+        opacity: 0.5;
+        cursor: pointer;
+        &:hover {
+          opacity: 1;
+        }
       }
     }
-    .add {
-      border: none;
+  }
+  .layer {
+    /*padding-left: 20px;*/
+    height: 30px;
+    line-height: 30px;
+    border-bottom: 1px solid #d6d6d6;
+    cursor: pointer;
+    &[data-moving] {
+      background-color: #d6d6d6;
       position: absolute;
-      bottom: 0;
-      height: 50px;
-      line-height: 50px;
       width: 100%;
-      left: 0;
-      background-color: #373f42;
-      text-align: center;
+    }
+    &:hover {
+      background-color: #d6d6d6;
+    }
+    &.active {
+      background-color: #18ccc0;
       color: #fff;
-      cursor: pointer;
     }
+    .thumb {
+      display: inline-block;
+      width: 15px;
+      height: 15px;
+      margin-right: 1em;
+      background: white center no-repeat;
+      background-size: cover;
+    }
+  }
+  .add {
+    border: none;
+    position: absolute;
+    bottom: 0;
+    height: 50px;
+    line-height: 50px;
+    width: 100%;
+    left: 0;
+    background-color: #373f42;
+    text-align: center;
+    color: #fff;
+    cursor: pointer;
   }
+}
 </style>

src/vuex/editor/actions.js

@@ -8,16 +8,16 @@ import { Loading } from 'element-ui';
 /**
  * 保存页面数据
  */
-export const saveTheme = ({commit}, theme) => {
+export const saveTheme = ({ commit }, theme) => {
   if (theme && theme._id) {
     return Promise.resolve(api.updateTheme(theme).then((res) => {
       commit(types.UPDATE_THEME_SUCCESS, res)
-      window.hasSaveFlag=true;
+      window.hasSaveFlag = true;
     }))
   } else {
     return Promise.resolve(api.saveTheme(theme).then((res) => {
       commit(types.ADD_THEME_SUCCESS, res)
-      window.hasSaveFlag=true;
+      window.hasSaveFlag = true;
     }))
   }
 }
@@ -26,7 +26,7 @@ export const saveTheme = ({commit}, theme) => {
  * 获取用户所有场景主题
  * @param commit
  */
-export const getUserThemeList = ({commit}, type) => {
+export const getUserThemeList = ({ commit }, type) => {
   api.getUserThemeList(type).then((res) => {
     commit(types.GET_USER_THEME_LIST, res)
   })
@@ -37,8 +37,8 @@ export const getUserThemeList = ({commit}, type) => {
  * @param commit
  */
 
-export const createTheme = ({commit}, type) => {
-  var theme = new Theme({type: type})
+export const createTheme = ({ commit }, type) => {
+  var theme = new Theme({ type: type })
   commit(types.CREATE_THEME, theme)
   commit(types.SET_CUR_EDITOR_THEME, theme)
 }
@@ -46,7 +46,7 @@ export const createTheme = ({commit}, type) => {
 /**
  * 设置当前编辑的主题
  */
-export const setEditorTheme = ({commit}, theme) => {
+export const setEditorTheme = ({ commit }, theme) => {
   var newTheme = new Theme(theme)
   commit(types.SET_CUR_EDITOR_THEME, newTheme)
 }
@@ -56,7 +56,7 @@ export const setEditorTheme = ({commit}, theme) => {
  * @param commit
  * @param page
  */
-export const setEditorPage = ({commit}, page) => {
+export const setEditorPage = ({ commit }, page) => {
   commit(types.SET_CUR_EDITOR_PAGE, page)
 }
 
@@ -64,16 +64,22 @@ export const setEditorPage = ({commit}, page) => {
  * 给主题添加页面
  * @param commit
  */
-export const addPage = ({commit}) => {
+export const addPage = ({ commit }) => {
   var page = new Page()
   commit(types.ADD_PAGE, page)
   commit(types.SET_CUR_EDITOR_PAGE, page)
 }
+export const addPage1 = ({ commit }, position) => {
+  console.log("SSSSSSSSSSSSSSSS", position);
+  var page = new Page()
+  commit(types.ADD_PAGE_POSITION, page, position)
+  commit(types.SET_CUR_EDITOR_PAGE, page)
+}
 
 /**
  * 添加页面元素
  */
-export const addElement = ({commit, state}, data) => {
+export const addElement = ({ commit, state }, data) => {
   commit(types.ADD_PIC_ELEMENT, new Element(data))
   var list = state.editorPage.elements
   var lastIndex = list.length - 1
@@ -84,7 +90,7 @@ export const addElement = ({commit, state}, data) => {
 /**
  * 添加背景图片
  */
-export const addBGElement = ({commit}, data) => {
+export const addBGElement = ({ commit }, data) => {
   var element = new Element(data)
   commit(types.SET_BG_ELEMENT, element)
   commit(types.SET_CUR_EDITOR_ELEMENT, null)
@@ -95,25 +101,25 @@ export const addBGElement = ({commit}, data) => {
  * @param commit
  * @param data
  */
-export const savePic = ({commit}, data) => {
+export const savePic = ({ commit }, data) => {
   commit(types.PUSH_PIC_LIST, data)
 }
 /**
  * 清除背景
  * @param commit
  */
-export const cleanBG = ({commit}) => {
+export const cleanBG = ({ commit }) => {
   commit(types.CLEAN_BG)
 }
 
-export const cleanEle = ({commit}, ele) => {
+export const cleanEle = ({ commit }, ele) => {
   commit(types.CLEAN_ELE, ele)
 }
 /**
  * 复制页面
  * @param commit
  */
-export const copyPage = ({commit}, data) => {
+export const copyPage = ({ commit }, data) => {
   var page = tools.vue2json(data)
   commit(types.ADD_PAGE, page)
 }
@@ -122,24 +128,24 @@ export const copyPage = ({commit}, data) => {
  * 删除页面
  * @param commit
  */
-export const delPage = ({commit}, page) => {
+export const delPage = ({ commit }, page) => {
   commit(types.DELETE_PAGE, page)
 }
 
-export const getPageByThemeId = ({dispatch, commit}, id) => {
-  let loading=Loading.service({
+export const getPageByThemeId = ({ dispatch, commit }, id) => {
+  let loading = Loading.service({
     lock: true,
     text: '模板加载中...',
     spinner: 'el-icon-loading',
     background: 'rgba(0, 0, 0, 0.7)'
   });
   api.getPageByThemeId(id).then((res) => {
-    res.pages=res.pages||[];
-    res.backgroundAudio = res.backgroundAudio|| '';
-    res.pages.forEach((page)=>{
-      page.elements.forEach((element)=>{
-        element.animatedFont = element.animatedFont||''
-        element.eleCanvas = element.eleCanvas||''
+    res.pages = res.pages || [];
+    res.backgroundAudio = res.backgroundAudio || '';
+    res.pages.forEach((page) => {
+      page.elements.forEach((element) => {
+        element.animatedFont = element.animatedFont || ''
+        element.eleCanvas = element.eleCanvas || ''
       })
     })
     commit(types.SET_CUR_EDITOR_THEME, res)
@@ -147,35 +153,35 @@ export const getPageByThemeId = ({dispatch, commit}, id) => {
     loading.close()
     setTimeout(function () {
 
-      window.revocationFlag=true
-    },800)
+      window.revocationFlag = true
+    }, 800)
   }).then(() => {
     dispatch('sortElementsByZindex')
     loading.close()
     setTimeout(function () {
 
-      window.revocationFlag=true
-    },800)
+      window.revocationFlag = true
+    }, 800)
   })
 }
 
-export const setEditorElement = ({commit}, element) => {
-  if(element&&element.locked){
+export const setEditorElement = ({ commit }, element) => {
+  if (element && element.locked) {
     return false
   }
   commit(types.SET_CUR_EDITOR_ELEMENT, element)
 }
 
 // 删除元素
-export const deleteElement = ({commit}, element) => {
+export const deleteElement = ({ commit }, element) => {
   commit(types.DELETE_ELEMENT, element)
 }
 
-export const deleteSelectedElement = ({commit, state}) => {
+export const deleteSelectedElement = ({ commit, state }) => {
   commit(types.DELETE_ELEMENT, state.editorElement)
 }
 
-export const playAnimate = ({state, commit, getters}) => {
+export const playAnimate = ({ state, commit, getters }) => {
   commit(types.PLAY_ANIMATE)
   let target = getters['editingElement'] || getters['editingPageElements'] || null
   let time = 0
@@ -191,27 +197,27 @@ export const playAnimate = ({state, commit, getters}) => {
   }, time * 1000)
 }
 
-export const getPicListByThemeId = ({commit}, _id) => {
+export const getPicListByThemeId = ({ commit }, _id) => {
   api.getPicListByThemeId(_id).then((res) => {
     commit(types.FETCH_PIC_LIST, res)
   })
 }
 
-export const cleanPicList = ({commit}) => {
+export const cleanPicList = ({ commit }) => {
   commit(types.CLEAN_PIC_LIST)
 }
 
-export const sortElementsByZindex = ({commit}, location) => {
+export const sortElementsByZindex = ({ commit }, location) => {
   commit(types.SORTELEMENTS_BY_ZINDEX, location)
 }
 
-export const deleteTheme = ({commit}, theme) => {
+export const deleteTheme = ({ commit }, theme) => {
   return Promise.resolve(api.delTheme(theme).then((res) => {
     commit(types.DELETE_THEME, theme)
   }))
 }
 
-export const uploadPsd = ({commit}, _file) => {
+export const uploadPsd = ({ commit }, _file) => {
   api.uploadPsd(_file).then((res) => {
   })
 }

src/vuex/editor/mutation-type.js

@@ -3,6 +3,7 @@ export const ADD_PIC_ELEMENT = 'ADD_PIC_ELEMENT' // 添加图片元素
 export const PLAY_ANIMATE = 'PLAY_ANIMATE' // 播放动画
 export const STOP_ANIMATE = 'STOP_ANIMATE' // 播放动画
 export const ADD_PAGE = 'ADD_PAGE' // 添加页面
+export const ADD_PAGE_POSITION = 'ADD_PAGE_POSITION' // 添加页面到指定位置
 export const DELETE_PAGE = 'DELETE_PAGE' // 删除页面
 export const SET_CUR_EDITOR_PAGE = 'SET_CUR_EDITOR_PAGE' // 设置当前编辑的页面
 export const GET_USER_THEME_LIST = 'GET_USER_THEME_LIST' // 获取用户h5列表

src/vuex/editor/mutations.js

@@ -3,13 +3,13 @@ import app from '../../util/appConst'
 import Element from '../../model/Element'
 
 const mutations = {
-  [types.SET_CUR_EDITOR_ELEMENT] (state, data) {
+  [types.SET_CUR_EDITOR_ELEMENT](state, data) {
     state.editorElement = data
   },
-  [types.ADD_PIC_ELEMENT] (state, data) {
+  [types.ADD_PIC_ELEMENT](state, data) {
     state.editorPage.elements.push(new Element(data))
   },
-  [types.SET_BG_ELEMENT] (state, data) {
+  [types.SET_BG_ELEMENT](state, data) {
     let haveBG = false
     state.editorPage.elements.findIndex((value, index, arr) => {
       if (value.type === 'bg') {
@@ -24,7 +24,7 @@ const mutations = {
     }
   },
   // 播放动画
-  [types.PLAY_ANIMATE] (state) {
+  [types.PLAY_ANIMATE](state) {
     let elements = state.editorPage.elements
     let editingElement = state.editorElement
     if (editingElement && editingElement.animatedName) {
@@ -38,7 +38,7 @@ const mutations = {
     }
   },
   // 停止播放动画
-  [types.STOP_ANIMATE] (state, data) {
+  [types.STOP_ANIMATE](state, data) {
     if (data instanceof Array) {
       // 该页元素
       data.forEach(v => {
@@ -54,31 +54,35 @@ const mutations = {
       })
     }
   },
-  [types.ADD_PAGE] (state, page) {
-    state.editorTheme.pages.push(page)
+  [types.ADD_PAGE](state, page) {
+    state.editorTheme.pages.push(page);
   },
-  [types.DELETE_PAGE] (state, data) {
+  [types.ADD_PAGE_POSITION](state, page, position) {
+    console.log("XXXXXXXXX", position);
+    state.editorTheme.pages.splice(2, 0, page);
+  },
+  [types.DELETE_PAGE](state, data) {
     state.editorTheme.pages.findIndex((value, index, arr) => {
       if (value === data) {
         state.editorTheme.pages.splice(index, 1)
       }
     })
   },
-  [types.SET_CUR_EDITOR_PAGE] (state, data) {
+  [types.SET_CUR_EDITOR_PAGE](state, data) {
     state.editorPage = data
   },
-  [types.GET_USER_THEME_LIST] (state, data) {
+  [types.GET_USER_THEME_LIST](state, data) {
     state.themeList = data
   },
-  [types.SET_CUR_EDITOR_THEME] (state, data) {
+  [types.SET_CUR_EDITOR_THEME](state, data) {
     state.editorTheme = data
   },
-  [types.UPDATE_THEME_DES] (state, {title, description, canvasHeight}) {
+  [types.UPDATE_THEME_DES](state, { title, description, canvasHeight }) {
     state.editorTheme.title = title
     state.editorTheme.description = description
     state.editorTheme.canvasHeight = canvasHeight
   },
-  [types.DELETE_ELEMENT] (state, data) {
+  [types.DELETE_ELEMENT](state, data) {
     state.editorPage.elements.findIndex((value, index, arr) => {
       if (value === data) {
         state.editorPage.elements.splice(index, 1)
@@ -86,40 +90,40 @@ const mutations = {
       }
     })
   },
-  [types.CREATE_THEME] (state, data) {
+  [types.CREATE_THEME](state, data) {
     state.themeList.push(data)
   },
-  [types.ADD_THEME_SUCCESS] (state, data) {
+  [types.ADD_THEME_SUCCESS](state, data) {
     state.editorTheme._id = data._id
   },
-  [types.UPDATE_THEME_SUCCESS] (state, data) {
+  [types.UPDATE_THEME_SUCCESS](state, data) {
   },
-  [types.SAVE_PIC] (state, data) {
+  [types.SAVE_PIC](state, data) {
     state.editorElement.imgSrc = app.APP_MALL_API_URL + data.filePath
   },
-  [types.GET_PAGE_THEMEID] (state, data) {
+  [types.GET_PAGE_THEMEID](state, data) {
     state.editorPage = data
   },
-  [types.CLEAN_BG] (state) {
+  [types.CLEAN_BG](state) {
     state.editorPage.elements.findIndex((value, index, arr) => {
       if (value && value.type === 'bg') {
         state.editorPage.elements.splice(index, 1)
       }
     })
   },
-  [types.CLEAN_ELE] (state, ele) {
+  [types.CLEAN_ELE](state, ele) {
     state.editorPage.elements.splice(state.editorPage.elements.indexOf(ele), 1)
   },
-  [types.FETCH_PIC_LIST] (state, picList) {
+  [types.FETCH_PIC_LIST](state, picList) {
     state.picList = picList
   },
-  [types.PUSH_PIC_LIST] (state, ele) {
+  [types.PUSH_PIC_LIST](state, ele) {
     state.picList.push(ele)
   },
-  [types.CLEAN_PIC_LIST] (state) {
+  [types.CLEAN_PIC_LIST](state) {
     state.picList = []
   },
-  [types.SORTELEMENTS] (state, data) {
+  [types.SORTELEMENTS](state, data) {
     let element = state.editorPage.elements[data.start]
     let end = parseInt(data.end)
     if (end !== -1) {
@@ -134,14 +138,14 @@ const mutations = {
       })
     }
   },
-  [types.DELETE_THEME] (state, data) {
+  [types.DELETE_THEME](state, data) {
     state.themeList.findIndex((value, index, arr) => {
       if (value === data) {
         state.themeList.splice(index, 1)
       }
     })
   },
-  [types.SORTELEMENTS_BY_ZINDEX] (state, data) {
+  [types.SORTELEMENTS_BY_ZINDEX](state, data) {
     state.editorPage.elements.sort((a, b) => a['zindex'] - b['zindex'])
     state.editorPage.elements.forEach((v, i, arr) => {
       arr[i]['zindex'] = i + 1