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)">
+    <template v-if="!noPageData">
       <grid-layout
         :layout.sync="layout"
         :isDraggable="false"
@@ -41,6 +42,8 @@
         </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);
+      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

@@ -14,3 +14,4 @@ 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';
+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);