Merge branch 'development' of https://gitlab.33.cn/yyh/traceSourceMb into development

src/router/index.ts

@@ -4,7 +4,6 @@ import Main from '@/views/Main.vue';
 import { Route } from 'vue-router';
 import store from '@/store/index';
 Vue.use(VueRouter);
-
 const routes: RouteConfig[] = [
   {
     path: '/',
@@ -16,7 +15,7 @@ const routes: RouteConfig[] = [
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
         // which is lazy-loaded when the route is visited.
-        component: () => import(/* webpackChunkName: "template-list" */ '@/views/template/Index.vue'),
+        component: () => import( /* webpackChunkName: "template-list" */ `@/views/index/Index-${process.env.VUE_APP_CATEGORY}.vue`) ,
       },
       {
         path: '/proofList',

src/views/index/Index-sy.vue

+<template>
+  <div class="index">
+    <div class="header">
+      <div class="login" v-if="!isLogin">
+         <p>~ 欢迎来到{{APP_NAME}}平台</p>
+         <div class="button" @click="toLogin">登录/注册</div>
+      </div>
+      <div class="proof" v-else>
+        <div>我的存证数量</div>
+        <div class="count">{{proofCount}}</div>
+      </div>
+    </div>
+    <div class="template-list">
+      <div class="system-template">
+        <p style="font-size:16px;color:#353535;font-weight:500;">系统模版</p>
+        <ul>
+          <li
+            v-for="{ id, folder_simg_url, folder_name, detail} of systemList"
+            :key="id"
+            @click="goTemplList(detail)"
+          >
+            <van-image :src="folder_simg_url" width="44px" 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>
+        <router-link to="addTemplate" tag="p" style="color:#3F79FE;">+添加模板</router-link>
+      </div>
+        <!-- <template-item
+          v-for="{id, folder_img_url, folder_name, detail} of list"
+          :key="id"
+          @click.native="goTemplList(detail)"
+          :thumb="folder_img_url"
+          :title="folder_name"
+          :desc="`${detail.length}条模板`"
+        ></template-item> -->
+         <!-- <van-empty 
+            v-if="!list.length"
+            description="您还未添加模板"
+            image="@/assets/notemplate.png">
+          </van-empty> -->
+        <empty v-if="!list.length && !loading && isSy" name="moban" tip="您还未添加模板"></empty>
+        <div v-if="isSy">
+          <div class="folder-item" v-for="{id, folder_simg_url, folder_name, detail} of list" :key="id" @click="goTemplList(detail)">
+           <van-image
+            class="thumb"
+            :src="folder_simg_url"
+            fit="contain"
+            ></van-image>
+           <div class="title" style="#353535;font-size:18px;font-weight:500;">{{folder_name}}</div>
+           <div class="desc" style="color: #AAAAAA;">{{(detail || []).length}}条模版</div>
+           <common-svg name="jinru" class="right-icon"></common-svg>
+          </div>
+        </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue, Watch, Inject } from 'vue-property-decorator';
+import { List, Image, Empty } from 'vant';
+import { TEMPLATETYPE } from '@/const/enum';
+import { State, Action } from 'vuex-class';
+@Component({
+  components: {
+    [List.name]: List,
+    [Image.name]: Image,
+    [Empty.name]: Empty,
+  },
+})
+export default class Index 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;
+  private systemList: any[] = [];
+  private list: any[] = [];
+  private loading: boolean = true;
+  @Watch('isLogin', { immediate: true })
+  private async onIsLoginChange(newVal: boolean, oldVal: boolean) {
+    if (!newVal) {
+      this.loading = false;
+    }
+    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.systemList = results;
+  }
+  private goTemplList(templList: [] = []) {
+    this.$router.push({ name: 'TemplList', query: { templList: JSON.stringify(templList) } });
+  }
+}
+</script>
+<style scoped lang="scss">
+.index {
+  margin-bottom: $tabHeight;
+  div.header {
+    padding: 36px 21px;
+    text-align: left;
+    background: url("../../assets/index.png");
+    background-size: cover;
+    box-shadow: 0px 5px 20px 0px rgba(63, 121, 254, 0.34);
+    .login {
+      p {
+        font-size: 20px;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 1);
+      }
+      div.button {
+        display: inline-block;
+        padding: 10px 20px;
+        border-radius: 18px;
+        font-size: 12px;
+        font-weight: 500;
+        color: rgba(13, 88, 227, 1);
+        background: #ffffff;
+      }
+    }
+    .proof {
+      font-size: 12px;
+      font-weight: 400;
+      color: rgba(255, 255, 255, 1);
+      .count {
+        font-size: 40px;
+        font-weight: 500;
+      }
+    }
+    
+  }
+  .template-list {
+    box-sizing: border-box;
+    padding: 11px 14px;
+    background: #f9fbff;
+    position: relative;
+
+    .system-template {
+      text-align: left;
+      ul {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        font-size: 12px;
+        text-align: center;
+      }
+    }
+    .folder-item{
+      display: grid;
+      grid-template-columns: 44px auto 30px;
+      grid-template-rows: repeat(2, 25px);
+      grid-auto-flow: column dense;
+      place-items: center start;
+      grid-gap: 0 17px;
+      padding: 13px;
+      background:rgba(255,255,255,1);
+      box-shadow:0px 2px 10px 0px rgba(218,218,218,0.31);
+      border-radius:5px;
+      margin-bottom: 10px;
+      .thumb, .right-icon{
+        place-self: center;
+        grid-row: span 2;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file