feat(error): 异常页面处理

app/web/page/activity/component/EmptyState/index.vue

+<template>
+  <cr-empty
+    class="empty-state"
+    image="error"
+    description="你访问的页面不存在"
+  />
+</template>
+<script>
+export default {
+  name: 'EmptyState',
+  mounted() {
+    const loadingEle = document.querySelector('.mainload');
+    if (!loadingEle) { return; }
+    loadingEle.style.display = 'none';
+  }
+}
+</script>
+<style lang="less" scoped>
+.empty-state {
+  padding-top: 100px;
+}
+
+</style>
\ No newline at end of file

app/web/page/activity/view/activity/index.ts

@@ -2,6 +2,7 @@ import { Vue, Component, Watch, Provide, Mixins } from 'vue-property-decorator';
 import { Getter, State, Mutation } from 'vuex-class';
 import FreedomContainer from '../../component/FreedomContainer/index.vue';
 import BackTop from '../../component/BackTop/index.vue';
+import EmptyState from '../../component/EmptyState/index.vue';
 import PageBottomTip from '../../component/PageBottomTip/index.vue';
 import GridLayout from '../../component/VueGridLayout/GridLayout.vue';
 import GridItem from '../../component/VueGridLayout/GridItem.vue';
@@ -9,10 +10,11 @@ import TransformStyleMixin from '@/page/mixins/transformStyle.mixin';
 import SaMixin from '@/page/mixins/sa.mixin';
 import { getStyle, debounce, isApp, isWxMp } from '@/service/utils.service';
 import { setAppTitleColor } from '@/service/color.service';
-@Component({ components: { FreedomContainer, GridLayout, GridItem, PageBottomTip, BackTop }, name: 'Activity'})
+@Component({ components: { FreedomContainer, GridLayout, GridItem, PageBottomTip, BackTop, EmptyState }, name: 'Activity'})
 export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
   @Getter('pageData') pageData;
   @State(state => state.activity.pageInfo.pageName) pageName;
+  @State(state => state.activity.noPageData) noPageData;
   @State(state => state.activity.gridLayout.rowHeight) rowHeight;
   @Mutation('SET_PAGE_ELEMENTS') setPageElement;
 

app/web/page/activity/view/activity/index.vue

 <template>
   <div class="activity" :style="transformStyle(pageData.commonStyle)">
-  	<grid-layout
-  	  :layout.sync="layout"
-  	  :isDraggable="false"
-  	  :isResizable="false"
-  	  :col-num="12"
-  	  :row-height="rowHeight"
-  	  :margin="[0, 0]"
-  	  :is-draggable="true"
-  	  :is-resizable="true"
-  	  :is-mirrored="false"
-  	  :vertical-compact="true"
-  	  :use-css-transforms="true"
-      @layout-mounted="layoutReadyEvent"
-      @layout-updated="layoutUpdatedEvent"
-  	>
-  	  <grid-item :style="transformStyle(item.commonStyle)" v-for="(item, index) in pageData.elements"
-        :x="item.point.x"
-        :y="item.point.y"
-        :w="item.point.w"
-        :h="item.point.h"
-        :i="item.point.i"
-        :key="item.point.i"
-        :no-transforms="item.noTransforms"
-        @click.native="dot(item.title)"  
+    <template v-if="!noPageData">
+      <grid-layout
+        :layout.sync="layout"
+        :isDraggable="false"
+        :isResizable="false"
+        :col-num="12"
+        :row-height="rowHeight"
+        :margin="[0, 0]"
+        :is-draggable="true"
+        :is-resizable="true"
+        :is-mirrored="false"
+        :vertical-compact="true"
+        :use-css-transforms="true"
+        @layout-mounted="layoutReadyEvent"
+        @layout-updated="layoutUpdatedEvent"
       >
-        <component :data-index="index" :id="item.id" :containerIndex="index" :childItem="item" :is="item.name" :key="item.id" :sa-info="getSaInfo(item)" v-bind="item.props"></component>
-  	  </grid-item>
-      <grid-item
-        v-if="pageData.props.showPageBottomTip"
-        :x="bottomInfo.x"
-        :y="bottomInfo.y"
-        :w="bottomInfo.w"
-        :h="bottomInfo.h"
-        :i="bottomInfo.i"
-        :static="true"
-        :key="bottomInfo.i + pageData.elements.length"
-      >
-        <page-bottom-tip />
-      </grid-item>
-  	</grid-layout>
-    <back-top :show-back-top="showBackTop" ref="backTop" />
+        <grid-item :style="transformStyle(item.commonStyle)" v-for="(item, index) in pageData.elements"
+          :x="item.point.x"
+          :y="item.point.y"
+          :w="item.point.w"
+          :h="item.point.h"
+          :i="item.point.i"
+          :key="item.point.i"
+          :no-transforms="item.noTransforms"
+          @click.native="dot(item.title)"  
+        >
+          <component :data-index="index" :id="item.id" :containerIndex="index" :childItem="item" :is="item.name" :key="item.id" :sa-info="getSaInfo(item)" v-bind="item.props"></component>
+        </grid-item>
+        <grid-item
+          v-if="pageData.props.showPageBottomTip"
+          :x="bottomInfo.x"
+          :y="bottomInfo.y"
+          :w="bottomInfo.w"
+          :h="bottomInfo.h"
+          :i="bottomInfo.i"
+          :static="true"
+          :key="bottomInfo.i + pageData.elements.length"
+        >
+          <page-bottom-tip />
+        </grid-item>
+      </grid-layout>
+      <back-top :show-back-top="showBackTop" ref="backTop" />
+    </template>
+  	<empty-state v-else />
   </div>
 </template>
 <script lang="ts" src="./index.ts"></script>

app/web/page/mixins/transformStyle.mixin.ts

@@ -40,6 +40,5 @@ export default class TransformStyleMixin extends Vue {
     this.setElementPoint({ id: eleId, data: point });
     console.log('adjustHeight', height, component, element.getAttribute('id'), point);
 
-    // this.updatePageInfo({ containerIndex: this.curEleIndex, data: { ...elements, point: { ...elements.point, h: +height || elements.point.h } } });
   }
 }

app/web/page/store/modules/activity/index.ts

 import api from '@/api/editor.api';
 import { Module, GetterTree, ActionTree, MutationTree } from 'vuex';
 import Vue from 'vue';
-import { UPDATE_PAGE_INFO, SET_PAGE_INFO, SET_PAGE_DATA, SET_PAGE_ELEMENTS, SET_ELEMENT_POINT} from './type';
+import { UPDATE_PAGE_INFO, SET_PAGE_INFO, SET_PAGE_DATA, SET_PAGE_ELEMENTS, SET_ELEMENT_POINT, SET_EMPTY_PAGE } from './type';
 
 import RootState from '../../state';
 import EditorState, { PageInfo, defaultState, Page, PageElement } from './state';
@@ -21,8 +21,13 @@ export default class EditorModule implements Module<EditorState, RootState> {
   actions: ActionTree<EditorState, RootState> = {
     async getPageDate({ commit }, condition) {
       const [res] = await api.getPageById(condition);
-      const { page, ...rest } = res as PageInfo;
-      commit(SET_PAGE_INFO, { ...rest, page: JSON.parse(page as string) });
+      if (res) {
+        const { page, ...rest } = res as PageInfo;
+        commit(SET_PAGE_INFO, { ...rest, page: JSON.parse(page as string) });
+        commit(SET_EMPTY_PAGE, false);
+      } else {
+        commit(SET_EMPTY_PAGE, true);
+      }
     }
   };
 
@@ -44,6 +49,9 @@ export default class EditorModule implements Module<EditorState, RootState> {
     [SET_PAGE_ELEMENTS](state, data) {
       if (data) { (state.pageInfo.page as Page).elements = data; }
     },
+    [SET_EMPTY_PAGE](state, data) {
+      state.noPageData = data;
+    },
     [SET_ELEMENT_POINT](state, { id, data }) {
       const elements = (state.pageInfo.page as Page).elements;
       const element = elements.find(ele => ele.id === id);

app/web/page/store/modules/activity/state.ts

@@ -50,7 +50,7 @@ export interface PageInfo {
 }
 
 export const defaultState = {
-  curEleIndex: null,
+  noPageData: false,
   curChildIndex: null,
   pageInfo: {
     id: 0,
@@ -92,7 +92,7 @@ export const defaultState = {
 export default interface EditorState {
   pageInfo: PageInfo;
   draggable: boolean;
-  curEleIndex: number | null;
+  noPageData: boolean;
   curChildIndex: number | null;
   templateList: any[];
   rowHeight: number;

app/web/page/store/modules/activity/type.ts

@@ -13,4 +13,5 @@ export const UPDATE_COMMON_STYLE = 'UPDATE_COMMON_STYLE';
 export const UPDATE_PAGE_STYLE = 'UPDATE_PAGE_STYLE';
 export const UPDATE_PAGE_PROPS = 'UPDATE_PAGE_PROPS';
 export const SET_PAGE_ELEMENTS = 'SET_PAGE_ELEMENTS';
-export const SET_ELEMENT_POINT = 'SET_ELEMENT_POINT';
\ No newline at end of file
+export const SET_ELEMENT_POINT = 'SET_ELEMENT_POINT';
+export const SET_EMPTY_PAGE = 'SET_EMPTY_PAGE';
\ No newline at end of file

app/web/service/qg.service.ts

@@ -26,7 +26,7 @@ import Vue from 'vue';
 //   Swipe,
 //   SwipeItem,
 //   Toast,
-//   BackTop
+//   BackTop,
 // } from '@qg/cherry-ui';
 // import { KaLoginForm } from '@qg/citrus-ui';
 import Button from '@qg/cherry-ui/src/button';
@@ -44,6 +44,7 @@ import Text from '@qg/cherry-ui/src/text';
 import Tag from '@qg/cherry-ui/src/tag';
 import Popover from '@qg/cherry-ui/src/popover';
 import Icon from '@qg/cherry-ui/src/icon';
+import Empty from '@qg/cherry-ui/src/empty';
 
 Vue.use(Button);
 Vue.use(Image);
@@ -75,6 +76,7 @@ Vue.use(Text);
 Vue.use(Tag);
 Vue.use(Popover);
 Vue.use(Icon);
+Vue.use(Empty);
 
 Vue.use(citrusUi);