全局filter components

src/components/index.ts

+import Vue from 'vue';
+import { importAll } from '@/utils/utils';
+const components = importAll(require.context('./', true,  /\.vue$/ ));
+Object.keys(components).forEach(key => {
+Vue.component(key, components[key]);
+});

src/filter/filters.ts

+function timeFormat(dateRoTimestamp: any, fmt: string = 'yyyy/MM/dd hh:mm:ss'): string {
+    let date: any = {};
+    if (typeof dateRoTimestamp === 'object' && dateRoTimestamp.constructor === Date) {
+        date = dateRoTimestamp;
+    } else {
+        date = new Date(dateRoTimestamp ? (parseInt(dateRoTimestamp) * 1000) : new Date().getTime());
+    }
+
+    const o: any = {
+        'M+': date.getMonth() + 1, // 月份
+        'd+': date.getDate(), // 日
+        'h+': date.getHours(), // 小时
+        'm+': date.getMinutes(), // 分
+        's+': date.getSeconds(), // 秒
+        'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
+        'S': date.getMilliseconds(), // 毫秒
+    };
+    if (/(y+)/.test(fmt)) {
+        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
+    }
+    for (const k in o) {
+        if (new RegExp('(' + k + ')').test(fmt)) {
+            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ?
+             (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
+        }
+    }
+    return fmt;
+}
+export default {
+    timeFormat,
+};

src/filter/index.ts

-function timeFormat(dateRoTimestamp: any, fmt: string = 'yyyy/MM/dd hh:mm:ss'): string {
-    let date: any = {};
-    if (typeof dateRoTimestamp === 'object' && dateRoTimestamp.constructor === Date) {
-        date = dateRoTimestamp;
-    } else {
-        date = new Date(dateRoTimestamp ? (parseInt(dateRoTimestamp) * 1000) : new Date().getTime());
-    }
-
-    const o: any = {
-        'M+': date.getMonth() + 1, // 月份
-        'd+': date.getDate(), // 日
-        'h+': date.getHours(), // 小时
-        'm+': date.getMinutes(), // 分
-        's+': date.getSeconds(), // 秒
-        'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
-        'S': date.getMilliseconds(), // 毫秒
-    };
-    if (/(y+)/.test(fmt)) {
-        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
-    }
-    for (const k in o) {
-        if (new RegExp('(' + k + ')').test(fmt)) {
-            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ?
-             (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
-        }
-    }
-    return fmt;
-}
-export default {
-    timeFormat,
-};
+import Vue from 'vue';
+import filters from './filters';
+Object.keys(filters).forEach( (key: string) => Vue.filter(key, (filters as any)[key]));

src/main.ts

@@ -5,25 +5,24 @@ import store from './store';
 import api from './api';
 Vue.prototype.$api = api;
 
+import '@/components';
+import '@/filter';
+
 import VueClipboard from 'vue-clipboard2';
 Vue.use(VueClipboard);
 
 import { Lazyload } from 'vant';
 Vue.use(Lazyload);
 
-import CommonSvg from '@/components/svg/CommonSvg.vue';
-Vue.component('common-svg', CommonSvg);
 
 import Component from 'vue-class-component';
-
 Component.registerHooks([
   'beforeRouteEnter', // 进入路由之前
   'beforeRouteLeave', // 离开路由之前
   'beforeRouteUpdate',
 ]);
 
-import filters from '@/filter/index';
-Object.keys(filters).forEach( (key: string) => Vue.filter(key, (filters as any)[key]));
+
 Vue.config.productionTip = false;
 
 new Vue({

src/router/index.ts

@@ -6,7 +6,7 @@ Vue.use(VueRouter);
 
 const routes: RouteConfig[] = [
   {
-    path: '/home',
+    path: '/',
     name: 'Main',
     component: Main,
     children: [
@@ -16,7 +16,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: "about" */ '@/views/TemplateList.vue'),
+        component: () => import(/* webpackChunkName: "about" */ '@/views/template/Index.vue'),
       },
       {
         path: '/proofList',
@@ -24,7 +24,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: "about" */ '@/views/ProofList.vue'),
+        component: () => import(/* webpackChunkName: "about" */ '@/views/proof/Index.vue'),
       },
       {
         path: '/userCenter/index',
@@ -42,11 +42,11 @@ 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: "about" */ '@/views/ProofDetail.vue'),
+    component: () => import(/* webpackChunkName: "about" */ '@/views/proof/Detail.vue'),
     props: (route) => ({ templateId: route.query.templateId, proofId: route.query.proofId}) ,
   },
   {
-    path: '/',
+    path: '/login',
     name: 'Login',
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route

src/router/modules/index.ts

+import Vue from 'vue';
+import VueRouter, { RouteConfig } from 'vue-router';
+import Main from '@/views/Main.vue';
+
+Vue.use(VueRouter);
+
+const routes: RouteConfig[] = [
+  {
+    path: '/home',
+    name: 'Main',
+    component: Main,
+    children: [
+      {
+        path: '',
+        name: 'TemplateList',
+        // 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: "about" */ '@/views/template/Index.vue'),
+      },
+      {
+        path: '/proofList',
+        name: 'ProofList',
+        // 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: "about" */ '@/views/proof/Index.vue'),
+      },
+      {
+        path: '/userCenter/index',
+        name: 'UserCenter',
+        // 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: "about" */ '@/views/userCenter/Index.vue'),
+      },
+    ],
+  },
+  {
+    path: '/proofDetail',
+    name: 'ProofDetail',
+    // 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: "about" */ '@/views/proof/Detail.vue'),
+    props: (route) => ({ templateId: route.query.templateId, proofId: route.query.proofId}) ,
+  },
+  {
+    path: '/',
+    name: 'Login',
+    // 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: "about" */ '@/views/Login.vue'),
+  },
+  {
+    path: '/viewCode',
+    name: 'ViewCode',
+    // 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: "about" */ '@/views/ViewCode.vue'),
+  },
+  {
+    path: '/recycleList',
+    name: 'RecycleList',
+    // 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: "about" */ '@/views/userCenter/RecycleList.vue'),
+  },
+];
+
+const router = new VueRouter({
+  routes,
+});
+
+export default router;

src/utils/utils.ts

+export function importAll(r) {
+    const __modules: any = {};
+    r.keys().forEach( key => {
+        let m = (r(key)).default;
+        let n = m.name;
+        __modules[n] = m;
+    });
+    return __modules;
+}
\ No newline at end of file

src/views/Login.vue

@@ -46,7 +46,7 @@ export default class Login extends Vue {
       code: this.smsCode,
     });
     localStorage.setItem('userInfo', JSON.stringify(res));
-    this.$router.replace({path: '/home'});
+    this.$router.replace({path: '/'});
   }
   get btnStr() {
     return this.count <= 0 ? '发送验证码' : `${this.count}s`;

src/views/Main.vue

@@ -4,7 +4,7 @@
       <router-view ></router-view>
     </keep-alive>
     <van-tabbar route>
-      <van-tabbar-item replace icon="home-o" to="/home">
+      <van-tabbar-item replace icon="home-o" to="/">
         <span>首页</span>
         <template #icon="props">
           <common-svg :name="props.active? 'shouye-lanse':'shouye-huise'"></common-svg>

src/views/ProofDetail.vue → src/views/proof/Detail.vue

@@ -15,17 +15,15 @@
 <script lang="ts">
 import { Component, Prop, Watch, Vue } from 'vue-property-decorator';
 import { Button, Field } from 'vant';
-import TemplateDetail from '@/components/TemplateDetail.vue';
 import { TemplateDataItem } from '@/const/interface';
 import { Route } from 'vue-router';
 @Component({
   components: {
     [Button.name]: Button,
     [Field.name]: Field,
-    TemplateDetail,
   },
 })
-export default class ProofDetail extends Vue {
+export default class Detail extends Vue {
   private id: number = 0;
   private name: string = '';
   private detail: any[]  = [] ;

src/views/ProofList.vue → src/views/proof/Index.vue

@@ -16,7 +16,7 @@
       <van-empty 
         v-if="!list.length && !loading"
         description="您还未添加存证"
-        :image="require('@/assets/empty.png')">
+        image="@/assets/empty.png">
         <van-button
           :to="{name: 'TemplateList'}"
           round 
@@ -70,13 +70,11 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 import { List, Popup, Button, Image, Picker, Grid, GridItem, Empty } from 'vant';
-import ProofItem from '@/components/ProofItem.vue';
 import { ChainStatus } from '@/const/enum';
 import { ActionList, ChainStatusStr } from '@/const/constants';
 
 @Component({
   components: {
-    ProofItem,
     [Picker.name]: Picker,
     [Image.name]: Image,
     [Button.name]: Button,
@@ -87,7 +85,7 @@ import { ActionList, ChainStatusStr } from '@/const/constants';
     [Empty.name]: Empty,
   },
 })
-export default class ProofList extends Vue {
+export default class Index extends Vue {
 
   private show: boolean = false;
   private showFilterPicker: boolean = false;

src/views/TemplateList.vue → src/views/template/Index.vue

@@ -27,16 +27,14 @@
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import TemplateItem from '@/components/TemplateItem.vue';
 import { List, Image } from 'vant';
 @Component({
   components: {
-    TemplateItem,
     [List.name]: List,
     [Image.name]: Image,
   },
 })
-export default class TemplateList extends Vue {
+export default class Index extends Vue {
   private list: any[] = [];
   private page: number = 1;
   private pageSize: number = 20;