分享接口&结果页添加和编辑

src/components/HeaderEdit.vue

@@ -49,7 +49,7 @@
       </form>
     </div> -->
     <!-- 分享设置 -->
-    <ShareSetting v-show="isShareSetting" :close="closeShare" :currItem="1"></ShareSetting>
+    <ShareSetting v-show="isShareSetting" :close="closeShare" :shareModel="shareModel"></ShareSetting>
   </header>
 </template>
 
@@ -63,7 +63,8 @@ export default {
   props: {
     goback: Function,
     save: Function,
-    title: ""
+    title: "",
+    shareModel: ""
   },
   components: {
     ShareSetting

src/components/ShareSetting.vue

@@ -14,16 +14,23 @@
       <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 type="text" placeholder="h5测试分享标题" v-model="shareModel.shareTitle" maxlength="30" show-word-limit>
           </el-input>
         </div>
         <div class="content">
-          <el-input class="input" type="textarea" :rows="3" placeholder="请输入内容" v-model="currItem.name" maxlength="30"
-            show-word-limit>
+          <el-input class="input" type="textarea" :rows="3" placeholder="请输入内容" v-model="shareModel.shareContent"
+            maxlength="30" show-word-limit>
           </el-input>
-          <img class="cover" src="" alt="" @click="closeBtn">
-          <div class="cover-title">更换封面</div>
+          <el-upload class="upload-demo" action="no_useing" accept="image/*" ref="my-upload" :http-request="uploadFile"
+            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :show-file-list="false">
+            <div class="changeCover">
+              <img class="cover" :src="shareImg" alt="">
+              <div class="cover-title">更换封面</div>
+            </div>
+          </el-upload>
+
         </div>
+
       </div>
       <div class="qrcode-title">渠道二维码
         <div class="qrcode-copy" @click="save">
@@ -49,11 +56,12 @@
 </template>
 
 <script>
+import editorApi from "../api/editor";
+import * as http from "../util/http";
 export default {
   data() {
     return {
-      text: "",
-      textarea: ""
+      shareImg: ""
     };
   },
   props: {
@@ -61,13 +69,48 @@ export default {
       type: Function,
       default: null
     },
-    currItem: ""
+    shareModel: ""
+  },
+  watch: {
+    shareModel(val) {
+      console.log("shareModel", this.shareModel);
+      this.shareImg = val.shareImg;
+    }
   },
   methods: {
+    async uploadFile(file) {
+      console.log("上传", file);
+      var that = this;
+      http.uploadMaterielFile(
+        file.file,
+        function(res) {
+          that.shareImg = res;
+          console.log("上传结果1", res);
+        },
+        function(res) {
+          console.log("上传结果中", res);
+        }
+      );
+    },
+    handleAvatarSuccess() {
+      console.log("成功");
+    },
+    beforeAvatarUpload() {
+      console.log("失败");
+    },
     closeBtn() {
       this.close();
     },
     save() {
+      this.shareModel["updator"] = "admin";
+      this.shareModel["shareImg"] = this.shareImg;
+      editorApi.saveTheme(this.shareModel).then(res => {
+        if (res.success) {
+          this.$message.success("保存成功");
+        } else {
+          this.$message.error("数据加载失败,请重试");
+        }
+      });
       console.log("XXXX", this.currItem);
     }
   }
@@ -173,12 +216,17 @@ export default {
           width: 326px;
           margin-left: 10px;
         }
-        .cover {
+
+        .changeCover {
+          margin: 0px 10px;
           width: 70px;
           height: 70px;
           background: rgba(239, 239, 239, 1);
-          margin: 0px 10px;
           cursor: pointer;
+          .cover {
+            width: 100%;
+            height: 100%;
+          }
         }
         .cover-title {
           position: absolute;

src/views/h5editor/index.vue

@@ -2,11 +2,12 @@
   <div class="editor">
     <!-- 头部 -->
     <HeaderMain></HeaderMain>
-    <HeaderEdit :title="title" :goback="dialogSave" :save="save" @saveThemeSuccess="showPreView=true" />
+    <HeaderEdit :title="title" :shareModel="shareModel" :goback="dialogSave" :save="save"
+      @saveThemeSuccess="showPreView=true" />
     <!-- 内容区域 -->
     <section class="section">
       <!-- 左侧图层 -->
-      <Overview class="overview" :testcaseId="testcaseId" />
+      <Overview ref='overview' class="overview" :testcaseId="testcaseId" :resultCount="resultPageCount" />
       <!-- 编辑区域 -->
       <div class="container" id="h5editor">
         <elab-canvas v-show="animatedNameGlobal!=''" :width="750" :height="1334"
@@ -319,6 +320,8 @@ export default {
       isLoadingPreview: false,
       panelTabState: 0,
       animatedNameGlobal: "",
+      shareModel: null,
+      resultPageCount: 0,
       animateGlobalList: [
         { id: "Snow", name: "下雪", type: 0 },
         { id: "Bubble", name: "冒泡", type: 0 },
@@ -396,6 +399,14 @@ export default {
       return this.$store.state.editor.editorTheme._id;
     },
     editorPage() {
+      this.shareModel = {
+        id: this.itemId,
+        shareTitle: this.$store.state.editor.editorTheme.shareTitle,
+        shareContent: this.$store.state.editor.editorTheme.shareContent,
+        shareImg: this.$store.state.editor.editorTheme.shareImg,
+        shareUrl: this.$store.state.editor.editorTheme.shareUrl
+      };
+      this.resultPageCount = this.$store.state.editor.editorTheme.resultPageCount;
       this.bgc = this.$store.state.editor.editorTheme.bgc || "#B1C096";
       this.btnColor =
         this.$store.state.editor.editorTheme.btnColor || "#5f8a61";
@@ -615,9 +626,12 @@ export default {
           });
         }
       });
+      let chil = this.$refs.overview;
+      console.log("子组件结果页的值:", chil.resultPageCount);
       let param = {
         id: this.itemId,
         jsonString: JSON.stringify(this.$store.state.editor.editorTheme),
+        resultPageCount: chil.resultPageCount,
         updator: "admin"
       };
       console.log("参数", param);
@@ -625,7 +639,6 @@ export default {
         .dispatch("saveTheme", param)
         .then(() => {
           loading.close();
-          å;
           this.$message({
             message: "保存成功",
             type: "success"
@@ -633,6 +646,10 @@ export default {
         })
         .catch(() => {
           loading.close();
+          this.$message({
+            message: "保存失败",
+            type: "error"
+          });
         });
     },
     deploy() {
@@ -818,72 +835,84 @@ export default {
 }
 
 .page-create-txt {
-    width: 34px;
-    height: 34px;
-    background: url('http://yun-image.elab-plus.com/images/dyb/new-text.png') center no-repeat;
+  width: 34px;
+  height: 34px;
+  background: url("http://yun-image.elab-plus.com/images/dyb/new-text.png")
+    center no-repeat;
+  background-size: 34px 34px;
+
+  &:hover {
+    background: url("http://yun-image.elab-plus.com/images/dyb/new-text-hover.png")
+      center no-repeat;
     background-size: 34px 34px;
-
-    &:hover {
-      background: url('http://yun-image.elab-plus.com/images/dyb/new-text-hover.png') center no-repeat;
-      background-size: 34px 34px;
-    }
-
-    &.active {
-      background: url('http://yun-image.elab-plus.com/images/dyb/new-text-active.png') center no-repeat;
-      background-size: 34px 34px;
-    }
   }
 
-  .page-create-btn {
-    width: 34px;
-    height: 34px;
-    background: url('http://yun-image.elab-plus.com/images/dyb/new-zhuangshi.png') center no-repeat;
+  &.active {
+    background: url("http://yun-image.elab-plus.com/images/dyb/new-text-active.png")
+      center no-repeat;
     background-size: 34px 34px;
+  }
+}
 
-    &:hover {
-      background: url('http://yun-image.elab-plus.com/images/dyb/new-zhuangshi-hover.png') center no-repeat;
-      background-size: 34px 34px;
-    }
+.page-create-btn {
+  width: 34px;
+  height: 34px;
+  background: url("http://yun-image.elab-plus.com/images/dyb/new-zhuangshi.png")
+    center no-repeat;
+  background-size: 34px 34px;
 
-    &.active {
-      background: url('http://yun-image.elab-plus.com/images/dyb/new-zhuangshi-active.png') center no-repeat;
-      background-size: 34px 34px;
-    }
+  &:hover {
+    background: url("http://yun-image.elab-plus.com/images/dyb/new-zhuangshi-hover.png")
+      center no-repeat;
+    background-size: 34px 34px;
   }
 
-  .page-create-lunbo {
-    width: 34px;
-    height: 34px;
-    background: url('http://yun-image.elab-plus.com/images/dyb/new-lunbo.png') center no-repeat;
+  &.active {
+    background: url("http://yun-image.elab-plus.com/images/dyb/new-zhuangshi-active.png")
+      center no-repeat;
     background-size: 34px 34px;
+  }
+}
 
-    &:hover {
-      background: url('http://yun-image.elab-plus.com/images/dyb/new-lunbo-hover.png') center no-repeat;
-      background-size: 34px 34px;
-    }
+.page-create-lunbo {
+  width: 34px;
+  height: 34px;
+  background: url("http://yun-image.elab-plus.com/images/dyb/new-lunbo.png")
+    center no-repeat;
+  background-size: 34px 34px;
 
-    &.active {
-      background: url('http://yun-image.elab-plus.com/images/dyb/new-lunbo-active.png') center no-repeat;
-      background-size: 34px 34px;
-    }
+  &:hover {
+    background: url("http://yun-image.elab-plus.com/images/dyb/new-lunbo-hover.png")
+      center no-repeat;
+    background-size: 34px 34px;
   }
 
-  .page-create-jiaohuanniu {
-    width: 34px;
-    height: 34px;
-    background: url('http://yun-image.elab-plus.com/images/dyb/new-jiaohuanniu.png') center no-repeat;
+  &.active {
+    background: url("http://yun-image.elab-plus.com/images/dyb/new-lunbo-active.png")
+      center no-repeat;
     background-size: 34px 34px;
+  }
+}
 
-    &:hover {
-      background: url('http://yun-image.elab-plus.com/images/dyb/new-jiaohuanniu-hover.png') center no-repeat;
-      background-size: 34px 34px;
-    }
+.page-create-jiaohuanniu {
+  width: 34px;
+  height: 34px;
+  background: url("http://yun-image.elab-plus.com/images/dyb/new-jiaohuanniu.png")
+    center no-repeat;
+  background-size: 34px 34px;
 
-    &.active {
-      background: url('http://yun-image.elab-plus.com/images/dyb/new-jiaohuanniu-active.png') center no-repeat;
-      background-size: 34px 34px;
-    }
+  &:hover {
+    background: url("http://yun-image.elab-plus.com/images/dyb/new-jiaohuanniu-hover.png")
+      center no-repeat;
+    background-size: 34px 34px;
+  }
+
+  &.active {
+    background: url("http://yun-image.elab-plus.com/images/dyb/new-jiaohuanniu-active.png")
+      center no-repeat;
+    background-size: 34px 34px;
   }
+}
 
 .page-tag-btn-tip {
   width: 80px;

src/views/h5editor/overview.vue

@@ -75,9 +75,9 @@
       </div>
     </div>
     <!-- 题目 -->
-    <div class="topic-list">
+    <div class="topic-list" v-if="isShowQuestion">
       <div class="topic-top" @click="showTopic = !showTopic">
-        <span>题目列表{{testcaseId}}</span>
+        <span>题目列表</span>
         <img class="topic-top-arrow" :src="topicIcon" alt="">
       </div>
       <el-collapse-transition>
@@ -97,7 +97,8 @@ import editorApi from "../../api/editor";
 
 export default {
   props: {
-    testcaseId: ""
+    testcaseId: "",
+    resultCount: 0
   },
   data() {
     return {
@@ -108,12 +109,13 @@ export default {
       canvasHeight: 1334,
       bodyBackgroundColor: "rgba(255,255,255,0)",
       questionPages: [],
-      resultPageCount: 0,
+      resultPageCount: this.resultCount,
       resultPages: [],
       checkList: ["4.选中且禁用"],
       showTopic: true,
       topicIcon: "../../static/img/up-arrow.png",
-      questionList: []
+      questionList: [],
+      isShowQuestion: false
     };
   },
   mounted() {
@@ -252,6 +254,7 @@ export default {
         "rgba(255,255,255,0)";
       var position = this.pages.length - this.resultPageCount;
       this.$store.dispatch("addPagePosition", position);
+      this.isShowQuestion = true;
     },
     addResultPage() {
       this.bodyBackgroundColor =
@@ -259,8 +262,18 @@ export default {
         "rgba(255,255,255,0)";
       this.$store.dispatch("addPage");
       this.resultPageCount += 1;
+      this.isShowQuestion = false;
     },
-    setEditingPage(page) {
+    setEditingPage(page, index) {
+      if (
+        index == 0 ||
+        (this.pages.length - this.resultPageCount == index &&
+          this.resultPageCount > 0)
+      ) {
+        this.isShowQuestion = false;
+      } else {
+        this.isShowQuestion = true;
+      }
       this.bodyBackgroundColor =
         this.$store.state.editor.editorTheme.bodyBackgroundColor ||
         "rgba(255,255,255,0)";
@@ -281,6 +294,9 @@ export default {
       } else {
         this.topicIcon = "../../static/img/down-arrow.png";
       }
+    },
+    resultCount(val) {
+      this.resultPageCount = val;
     }
   }
 };

src/views/myHistoryTest/myHistoryTest.html

@@ -58,5 +58,5 @@
   <div v-if="loading" class="loading">加载中...</div>
   <div v-if="noMore" class="loading">没有更多了</div>
   <!-- 分享设置 -->
-  <ShareSetting v-show="isShareSetting" :close="closeShare" :currItem="currItem"></ShareSetting>
+  <ShareSetting v-show="isShareSetting" :close="closeShare" :shareModel="shareModel"></ShareSetting>
 </div>

src/views/myHistoryTest/myHistoryTest.js

@@ -38,7 +38,7 @@ export default {
       orderList: [{ orderName: "按创建时间排序", orderType: "created" }, { orderName: "按更新时间排序", orderType: "updated" }],
       currOrderName: "更新时间",
       currOrderType: "",
-      currItem: ""
+      shareModel: ""
     }
   },
   computed: {
@@ -172,9 +172,20 @@ export default {
       this.$router.replace({ path: '/h5editor', query: { itemId: item._id, testcaseId: item.testcaseId } })
     },
     shareTest(item) {
-      this.currItem = item;
-      console.log("XXXXX", item);
-      this.isShareSetting = true;
+      editorApi.getPageByThemeId(item._id).then((res) => {
+        if (res.success) {
+          this.shareModel = {
+            id: item._id,
+            shareTitle: res.single.shareTitle,
+            shareContent: res.single.shareContent,
+            shareImg: res.single.shareImg,
+            shareUrl: res.single.shareUrl
+          };
+          this.isShareSetting = true;
+        } else {
+          this.$message.error('数据加载失败,请重试');
+        }
+      })
     },
     closeShare() {
       this.currItem = "";

src/vuex/editor/actions.js

@@ -146,6 +146,13 @@ export const getPageByThemeId = ({ dispatch, commit }, id) => {
     single.pages = single.pages || [];
     single.backgroundAudio = single.backgroundAudio || '';
     single.title = res.single.title || '';
+    single.resultPageCount = res.single.resultPageCount || 0;
+
+    single.shareContent = res.single.shareContent || '';
+    single.shareImg = res.single.shareImg || '';
+    single.shareTitle = res.single.shareTitle || '';
+    single.shareUrl = res.single.shareUrl || '';
+
     single.pages.forEach((page) => {
       page.elements.forEach((element) => {
         element.animatedFont = element.animatedFont || ''