页面添加

src/views/h5editor/overview.vue

@@ -28,8 +28,8 @@
           <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="index > 0">{{index + 1 }}</span>
-            <div v-show="index > 0" class="page" :class="{ active: page === editingPage }"
+            <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"
@@ -42,13 +42,17 @@
         <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: page === editingPage }"
-              :style="{ width: 70 + 4 + 'px', height: (70 / canvasWidth) * canvasHeight + 4 + 'px' }">
+          <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 class="item-page-add">添加结论页</div>
+          <div class="item-page-add" @click="addResultPage">添加结论页</div>
         </li>
       </ul>
     </div>
@@ -81,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: {
@@ -113,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;
@@ -185,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 ||

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