增加接口请求loading动画

src/App.vue

@@ -10,6 +10,32 @@
     <div class="nsgk-noNav-main" v-else>
       <router-view />
     </div>
+    <!-- <div
+      class="nsgk-global-main"
+      v-if="!$route.meta.hidden || $route.meta.hidden == undefined"
+    >
+      <transition
+        :name="
+          direction == ''
+            ? ''
+            : 'fade-' + (direction === 'forward' ? 'last' : 'next')
+        "
+      >
+        <router-view />
+      </transition>
+      <navFooter></navFooter>
+    </div>
+    <div class="nsgk-noNav-main" v-else>
+      <transition
+        :name="
+          direction == ''
+            ? ''
+            : 'fade-' + (direction === 'forward' ? 'last' : 'next')
+        "
+      >
+        <router-view />
+      </transition>
+    </div> -->
   </div>
 </template>
 
@@ -18,7 +44,19 @@ import navFooter from "@/components/common/nav_footer";
 export default {
   name: "App",
   components: { navFooter },
-  mounted() {},
+  data: () => {
+    return {
+      direction: "",
+    };
+  },
+  watch: {
+    // $route(to, from) {
+    //   let toName = to.name;
+    //   const toIndex = to.meta.index;
+    //   const fromIndex = from.meta.index;
+    //   this.direction = toIndex < fromIndex ? "forward" : "backward";
+    // },
+  },
 };
 </script>
 
@@ -28,4 +66,26 @@ export default {
   min-height: 100vh;
   padding-bottom: 110px;
 }
+// .fade-last-enter-active {
+//   animation: bounce-in 0.6s;
+// }
+// .fade-next-enter-active {
+//   animation: bounce-out 0.6s;
+// }
+// @keyframes bounce-in {
+//   0% {
+//     transform: translateX(-100%);
+//   }
+//   100% {
+//     transform: translateX(0rem);
+//   }
+// }
+// @keyframes bounce-out {
+//   0% {
+//     transform: translateX(100%);
+//   }
+//   100% {
+//     transform: translateX(0rem);
+//   }
+// }
 </style>

src/components/workbench/index/header.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="workbench-header">
+    <div class="company-title">
+      测试公司<van-icon name="arrow-down" class="control-icon" size="18" />
+    </div>
+  </div>
+</template>
+<script>
+export default {};
+</script>
+<style scoped lang="scss">
+.workbench-header {
+  height: 85px;
+  line-height: 85px;
+  background: #fff;
+  padding: 0 40px;
+  .company-title {
+    font-size: 34px;
+    font-weight: bold;
+    float: left;
+    .control-icon {
+      margin-left: 10px;
+      vertical-align: -6px;
+    }
+  }
+}
+</style>

src/router/index.js

@@ -14,6 +14,7 @@ export const constantRoutes = [
     name: 'index',
     meta: {
       title: '主页',
+      index: 1
     },
     component: (resolve) => require(['@/views/index'], resolve)
   },
@@ -22,7 +23,7 @@ export const constantRoutes = [
     name: 'login',
     meta: {
       title: '登录页',
-      hidden: true
+      hidden: true,
     },
     component: (resolve) => require(['@/views/login'], resolve)
   },
@@ -31,6 +32,7 @@ export const constantRoutes = [
     name: 'document',
     meta: {
       title: '文档',
+      index: 2
     },
     component: (resolve) => require(['@/views/document'], resolve)
   },
@@ -39,6 +41,7 @@ export const constantRoutes = [
     name: 'workbench',
     meta: {
       title: '工作台',
+      index: 3
     },
     component: (resolve) => require(['@/views/workbench'], resolve)
   },
@@ -47,6 +50,7 @@ export const constantRoutes = [
     name: 'addressBook',
     meta: {
       title: '通讯录',
+      index: 4
     },
     component: (resolve) => require(['@/views/addressBook'], resolve)
   },
@@ -55,8 +59,9 @@ export const constantRoutes = [
     name: 'mynsgk',
     meta: {
       title: '我的',
+      index: 5
     },
-    component: (resolve) => require(['@/views/addressBook'], resolve)
+    component: (resolve) => require(['@/views/mynsgk'], resolve)
   }
 ];
 

src/utils/request.js

@@ -1,6 +1,6 @@
 import axios from 'axios'
 // import { Notification, MessageBox, Message } from 'element-ui'
-import { Notify,Dialog  } from 'vant';
+import { Notify, Dialog, Toast } from 'vant';
 import store from '@/store'
 import { getToken } from '@/utils/auth'
 import errorCode from '@/utils/errorCode'
@@ -15,6 +15,11 @@ const service = axios.create({
 })
 // request拦截器
 service.interceptors.request.use(config => {
+  Toast.loading({
+    message: '加载中...',
+    forbidClick: true,
+    duration: 0
+  });
   // 是否需要设置 token
   const isToken = (config.headers || {}).isToken === false
   if (getToken() && !isToken) {
@@ -26,7 +31,7 @@ service.interceptors.request.use(config => {
     for (const propName of Object.keys(config.params)) {
       const value = config.params[propName];
       var part = encodeURIComponent(propName) + "=";
-      if (value !== null && typeof(value) !== "undefined") {
+      if (value !== null && typeof (value) !== "undefined") {
         if (typeof value === 'object') {
           for (const key of Object.keys(value)) {
             let params = propName + '[' + key + ']';
@@ -50,6 +55,7 @@ service.interceptors.request.use(config => {
 
 // 响应拦截器
 service.interceptors.response.use(res => {
+  Toast.clear();
   // 未设置状态码则默认成功状态
   const code = res.data.code || 200;
   // 获取错误信息
@@ -59,13 +65,13 @@ service.interceptors.response.use(res => {
     Dialog.confirm({
       title: '系统提示',
       message: '登录状态已过期，您可以继续留在该页面，或者重新登录',
-      confirmButtonText:'重新登录',
-      cancelButtonText:'取消'
+      confirmButtonText: '重新登录',
+      cancelButtonText: '取消'
     })
       .then(() => {
         store.dispatch('LogOut').then(() => {
-              location.href = '/index';
-          })
+          location.href = '/index';
+        })
       })
   } else if (code === 500) {
     Notify({ type: 'warning', message: msg });
@@ -89,6 +95,7 @@ service.interceptors.response.use(res => {
     else if (message.includes("Request failed with status code")) {
       message = "系统接口" + message.substr(message.length - 3) + "异常";
     }
+    Toast.clear();
     // Message({
     //   message: message,
     //   type: 'error',

src/views/document/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="app-container">文档</div>
+  <div class="app-container">
+    文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档
+  </div>
 </template>
 
 <script>

src/views/workbench/index.vue

@@ -1,18 +1,23 @@
 <template>
-    <div class="app-container">工作台</div>
+  <div class="app-container">
+    <workbenchHeader></workbenchHeader>
+  </div>
 </template>
 
 <script>
-    export default {
-        name: "workbench",
-        data() {
-            return {};
-        },
-        mounted() { },
-        methods: {},
-    };
+import workbenchHeader from "@/components/workbench/index/header";
+export default {
+  name: "workbench",
+  components: { workbenchHeader },
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {},
+};
 </script>
 
 <style scoped lang="scss">
-    .app-container {}
+.app-container {
+}
 </style>