首页更新

src/mixins/Index.ts

+import { Component, Vue } from 'vue-property-decorator';
+import { State, Action } from 'vuex-class';
+@Component
+export default class Index extends Vue {
+    @Action('getSysTemplateList') private getSysTemplateList!: () => void;
+    public mounted() {
+        this.getSysTemplateList();
+    }
+}

src/store/index.ts

@@ -14,12 +14,13 @@ export default new Vuex.Store({
     authInfo: {}, // 个人认证信息
     companyAuthInfo: {}, // 企业认证信息
     proofCount: 0,
+    sysTemplateList: [],
   },
   getters: {
     isPhone( { userInfo }) {
       return userInfo.phone;
     },
-    isPhoneStr( {userInfo }) {
+    isPhoneStr( { userInfo }) {
       return userInfo.phone ? '手机号' : '邮箱';
     },
     userIcon( {userInfo} ) {
@@ -48,6 +49,9 @@ export default new Vuex.Store({
     updateProofCount(state: any, payload: any) {
       state.proofCount = payload;
     },
+    updateSysTemplateList(state: any, payload: any) {
+      state.sysTemplateList = payload || [];
+    },
   },
   actions: {
     getUserInfo({ commit }) {
@@ -87,6 +91,13 @@ export default new Vuex.Store({
         commit('updateCompanyAuthInfo', res);
       });
     },
+    getSysTemplateList({ commit, state }) {
+      if (state.sysTemplateList.length <= 0) {
+        Vue.prototype.$api.template.systemList().then(({results = []}) => {
+          commit('updateSysTemplateList', results);
+        });
+      }
+    },
   },
   modules: {
   },

src/views/index/Index-cs.vue

@@ -16,10 +16,11 @@
   </div>
 </template>
 <script lang="ts">
-import { Component, Prop, Vue, Watch, Inject } from 'vue-property-decorator';
+import { Component, Prop, Vue, Watch, Inject, Mixins } from 'vue-property-decorator';
 import { List, Image, Empty } from 'vant';
 import { TEMPLATETYPE } from '@/const/enum';
 import { State, Action } from 'vuex-class';
+import IndexMixin from '@/mixins/Index';
 @Component({
   components: {
     [List.name]: List,
@@ -27,46 +28,14 @@ import { State, Action } from 'vuex-class';
     [Empty.name]: Empty,
   },
 })
-export default class IndexCs extends Vue {
-  @Inject('isSy') private isSy!: boolean;
-  @Inject('APP-NAME') private APP_NAME!: string;
-  @State('isLogin') private isLogin!: boolean;
-  @State('proofCount') private proofCount!: number;
-  @Action('getProofCount') private getProofCount!: any;
+export default class IndexCs extends Mixins(IndexMixin) {
+  @State('sysTemplateList') private systemList!: [];
   private charityType: any[] = [];
-  private list: any[] = [];
-  private loading: boolean = true;
-  @Watch('isLogin', { immediate: true })
-  private async onIsLoginChange(newVal: boolean, oldVal: boolean) {
-    if (!newVal) {
-      this.loading = false;
+  @Watch('systemList', { immediate: true, deep: true })
+  private async onChange(newVal: any[], oldVal: any[]) {
+    if (newVal.length) {
+      this.charityType = (newVal[0] as any).detail;
     }
-    if (newVal) {
-      const promises = Promise.all([
-                                    this.getProofCount(),
-                                    this.$api.template.folderList({
-                                                                  template_type: 1,
-                                                                })]);
-      const [ , folderListResult ] = await promises;
-      const { results = [] } = folderListResult;
-      const ids = results.map((folder: any) => folder.id);
-      const res = await this.$api.template.list({id: ids});
-      this.list = res.results || [];
-      this.loading = false;
-    }
-  }
-  private toLogin() {
-    this.$router.push({name: 'Login'});
-  }
-  private mounted() {
-    this.getSystemList();
-  }
-  private async getSystemList() {
-    const { results = []}  = await this.$api.template.systemList();
-    this.charityType = results[0].detail;
-  }
-  private goTemplList(templList: [] = []) {
-    this.$router.push({ name: 'TemplList', query: { templList: JSON.stringify(templList) } });
   }
   private goProofDetail(templateId: string) {
     this.$router.push({ name: 'ProofDetail', query: {templateId} });

src/views/index/Index-sy.vue

@@ -19,13 +19,12 @@
             :key="id"
             @click="goTemplList(detail)"
           >
-            <van-image :src="folder_simg_url" width="44px" fit="contain"></van-image>
+            <van-image :src="folder_simg_url" width="44px" height="64px" fit="contain"></van-image>
             <div style="font-size:14px;color:#353535;">{{folder_name}}</div>
           </li>
         </ul>
       </div>
       <div
-        v-if="isSy"
         style="display:flex;flex-direction:row;justify-content:space-between;font-size:16px;color:#353535;margin-top:10px;"
       >
         <p style="font-weight:500;color:#353535;">我的模版</p>
@@ -44,8 +43,8 @@
             description="您还未添加模板"
             image="@/assets/notemplate.png">
           </van-empty> -->
-        <empty v-if="!list.length && !loading && isSy" name="moban" tip="您还未添加模板"></empty>
-        <div v-if="isSy">
+        <empty v-if="!list.length && !loading" name="moban" tip="您还未添加模板"></empty>
+        <div>
           <div class="folder-item" v-for="{id, folder_simg_url, folder_name, detail} of list" :key="id" @click="goTemplList(detail)">
            <van-image
             class="thumb"
@@ -61,10 +60,12 @@
   </div>
 </template>
 <script lang="ts">
-import { Component, Prop, Vue, Watch, Inject } from 'vue-property-decorator';
+import { Component, Prop, Vue, Watch, Inject, Mixins } from 'vue-property-decorator';
 import { List, Image, Empty } from 'vant';
 import { TEMPLATETYPE } from '@/const/enum';
 import { State, Action } from 'vuex-class';
+import IndexMixin from '@/mixins/Index';
+
 @Component({
   components: {
     [List.name]: List,
@@ -72,13 +73,12 @@ import { State, Action } from 'vuex-class';
     [Empty.name]: Empty,
   },
 })
-export default class IndexSy extends Vue {
-  @Inject('isSy') private isSy!: boolean;
+export default class IndexSy extends Mixins(IndexMixin) {
   @Inject('APP-NAME') private APP_NAME!: string;
   @State('isLogin') private isLogin!: boolean;
   @State('proofCount') private proofCount!: number;
+  @State('sysTemplateList') private systemList!: [];
   @Action('getProofCount') private getProofCount!: any;
-  private systemList: any[] = [];
   private list: any[] = [];
   private loading: boolean = true;
   @Watch('isLogin', { immediate: true })
@@ -103,13 +103,6 @@ export default class IndexSy extends Vue {
   private toLogin() {
     this.$router.push({name: 'Login'});
   }
-  private mounted() {
-    this.getSystemList();
-  }
-  private async getSystemList() {
-    const { results = []}  = await this.$api.template.systemList();
-    this.systemList = results;
-  }
   private goTemplList(templList: [] = []) {
     this.$router.push({ name: 'TemplList', query: { templList: JSON.stringify(templList) } });
   }