加载页面

src/App.vue

@@ -1,23 +1,24 @@
 <template>
   <div id="app">
     <HeaderBanner></HeaderBanner>
-    <Navigation :navTitle='navTitle'></Navigation>
+    <div v-if="!loadingFlag">
+      <Navigation></Navigation>
+    </div>
     <div class="app_content">
-      <div class="router">
-        <LoginInfo
-        :userAccount='userAccount'
-        ></LoginInfo>
-        <Routerbanner
-          :isManufacturer="isManufacturer"
-        />
+      <div class="router" v-if="!loadingFlag">
+        <LoginInfo :userAccount="userAccount"></LoginInfo>
+        <Routerbanner :isManufacturer="isManufacturer" />
       </div>
       <div class="router_view">
         <router-view
           :isManufacturer="isManufacturer"
+          :isLoading="loadingFlag"
         ></router-view>
       </div>
     </div>
-    <FooterBanner/>
+    <div v-if="!loadingFlag">
+      <FooterBanner />
+    </div>
   </div>
 </template>
 
@@ -33,58 +34,58 @@ export default {
     Navigation,
     LoginInfo,
     Routerbanner,
-    FooterBanner
+    FooterBanner,
   },
   data() {
     return {
-      navTitle: [
-        {
-          title: '数据管理',
-          url: '/uploadInfor'
-        }
-      ],
-      isManufacturer: 'manufacturer', // distributor 经销商 manufacturer 厂商
-      userAccount: '',
-      userToken:''
-    }
+      isManufacturer: "manufacturer", // distributor 经销商 manufacturer 厂商
+      userAccount: "",
+      userToken: "",
+      loadingFlag: true,
+    };
   },
   methods: {
-    getTokenRequest(){
+    getTokenRequest() {
       this.$http({
-        method: 'post',
-        url: '/auth/checkSign',
-        data:this.userToken
-      }).then((res) => {
-        console.log(res);
-        if(res.data.code === 200) {
-          let userInfo = res.data.data;
-          this.userAccount = userInfo.userCode;
-          localStorage.setItem('userOutId',userInfo.outId);
-          localStorage.setItem("userId", userInfo.agentId);
-          sessionStorage.setItem("userNameAccount", userInfo.userCode);
-          console.log(userInfo.agentId)
-          if (!userInfo.agentId) {
-            this.isManufacturer = 'manufacturer';
-            this.$router.replace({ path: "/uploadInfor" });
+        method: "post",
+        url: "/auth/checkSign",
+        data: this.userToken,
+      })
+        .then((res) => {
+          console.log(res);
+          if (res.data.code === 200) {
+            let userInfo = res.data.data;
+            this.userAccount = userInfo.userCode;
+            localStorage.setItem("userId", userInfo.agentId);
+            sessionStorage.setItem("userNameAccount", userInfo.userCode);
+            if (!userInfo.agentId) {
+              this.isManufacturer = "manufacturer";
+              // this.$router.replace({ path: "/uploadInfor" });
+            } else {
+              if (userInfo.userRole == "1" || userInfo.userRole == "2") {
+                this.isManufacturer = "distributor";
+                // this.$router.replace({ path: "/inforList" });
+              } else {
+                this.isManufacturer = "manufacturer";
+                // this.$router.replace({ path: "/uploadInfor" });
+              }
+            }
+            sessionStorage.setItem("userPath", this.isManufacturer);
+            this.loadingFlag = false;
           } else {
-            if (userInfo.userRole == '1' || userInfo.userRole == '2') {
-              this.isManufacturer = 'distributor';
-              this.$router.replace({ path: "/inforList" });
+            if (process.env.NODE_ENV === "development") {
+              this.loadingFlag = false;
+              console.log(this.loadingFlag)
             } else {
-              this.isManufacturer = 'manufacturer';
-              this.$router.replace({ path: "/uploadInfor" });
+              let message = res.data.message;
+              alert(message);
             }
           }
-          sessionStorage.setItem('userPath',this.isManufacturer)
-        }else {
-          let message = res.data.message;
-          console.log('message', message);
-          alert(message);
-        }
-      }).catch((err) => {
-        alert('无法校验的字符串');
-        console.log(err);
-      })
+        })
+        .catch((err) => {
+          alert("无法校验的字符串");
+          console.log(err);
+        });
     },
 
     // 测试接口
@@ -92,36 +93,42 @@ export default {
       // 正常token
       // dXNlcklkPTEwMDEmYWNjb3VudD1MMDIxMF9NTSZmcm9tPXNpd2VpJnRpbWVzdGFtcD0xNjE4NTU2MTQ4JnNpZ249MWI3MmIwODkzNmZhNDdmMDU5MDRiNDc3N2FkOTdkMTI== //测试经销商TOKEN
       // dXNlcklkPTE1NiZhY2NvdW50PUwwTTE0X01NJmZyb209c2l3ZWkmdGltZXN0YW1wPTE2MTg1NTYzMDAmc2lnbj1lNDZmM2Q3MmFiZDI3ODYwMDYyMmY2N2NmZjFiNjZmNw== //测试厂商TOKEN
-      this.userToken = sessionStorage.getItem('setToken');
-      if(this.userToken){
-        console.log('已登录',this.userToken,this.$route.path,sessionStorage.getItem('userNameAccount'));
-        this.userAccount = sessionStorage.getItem('userNameAccount');
-        if(sessionStorage.getItem('userPath') === 'distributor'){
-          this.isManufacturer = 'distributor';
-          if(this.$route.path !== '/inforList') this.$router.replace({ path: "/inforList" });
-        }else if (sessionStorage.getItem('userPath') === 'manufacturer') {
-          this.isManufacturer = 'manufacturer';
-          if(this.$route.path !== '/uploadInfor') this.$router.replace({ path: "/uploadInfor" });
-        }else {
-          console.log(this.isManufacturer)
+      this.userToken = sessionStorage.getItem("setToken");
+      if (this.userToken) {
+        console.log(
+          "已登录",
+          this.userToken,
+          this.$route.path,
+          sessionStorage.getItem("userNameAccount")
+        );
+        this.userAccount = sessionStorage.getItem("userNameAccount");
+        if (sessionStorage.getItem("userPath") === "distributor") {
+          this.isManufacturer = "distributor";
+          // if(this.$route.path !== '/inforList') this.$router.replace({ path: "/inforList" });
+          this.loadingFlag = false;
+        } else if (sessionStorage.getItem("userPath") === "manufacturer") {
+          this.isManufacturer = "manufacturer";
+          this.loadingFlag = false;
+          // if(this.$route.path !== '/uploadInfor') this.$router.replace({ path: "/uploadInfor" });
+        } else {
+          this.loadingFlag = false;
         }
-      }else {
+      } else {
         sessionStorage.clear();
         localStorage.clear();
         let query = this.$route.query || {};
-        sessionStorage.setItem('setToken',query.token);
+        sessionStorage.setItem("setToken", query.token);
         this.userToken = query.token;
-        console.log('token:', this.userToken);
+        console.log("token:", this.userToken);
         this.getTokenRequest();
       }
-    }
-  },
-  mounted() {
+    },
   },
+  mounted() {},
   created() {
+    this.loadingFlag = true;
     this.getData();
-    console.log(process.env.NODE_ENV);
-  }
+  },
 };
 </script>
 <style lang="less">
@@ -132,9 +139,9 @@ export default {
   color: #333;
   font-size: 12px;
 }
-button{
+button {
   border: none;
-  background-color: #0056A0;
+  background-color: #0056a0;
   height: 30px;
   width: 58px;
   color: #fff;
@@ -142,12 +149,12 @@ button{
   font-family: Arial;
   margin-left: 18px;
   font-size: 14px;
-  &:hover{
+  &:hover {
     cursor: pointer;
   }
 }
-.current_button{
-  background-color: #0056A0;
+.current_button {
+  background-color: #0056a0;
   height: 30px;
   width: 58px;
   line-height: 30px;
@@ -157,7 +164,7 @@ button{
   font-family: Arial;
   margin-left: 18px;
   font-size: 14px;
-  &:hover{
+  &:hover {
     cursor: pointer;
   }
 }
@@ -173,20 +180,20 @@ button{
     font-family: "微软雅黑";
     display: flex;
     justify-content: space-between;
-    .router{
+    .router {
       width: 150px;
       height: 100%;
       background-color: #d4d4d4;
       height: auto;
       min-height: 50vh;
     }
-    .router_view{
+    .router_view {
       width: 1030px;
     }
   }
 }
 @media screen and (max-width: 1190px) {
-  #app{
+  #app {
     width: 1190px;
   }
 }

src/components/Loading.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="loading_page">
+    <img src="../img/loading.gif" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    isLoading: {
+      type: Boolean,
+      default: true,
+    },
+    isManufacturer: {
+      type: String,
+      default: "",
+    },
+  },
+  computed: {
+
+  },
+  watch: {
+    isLoading: function (newValue) {
+      if (!newValue) {
+        if (this.isManufacturer === "manufacturer") {
+          this.$router.replace({ path: "/uploadInfor" });
+        } else {
+          this.$router.replace({ path: "/inforList" });
+        }
+      }
+    },
+  },
+  created() {
+    console.log('1')
+  },
+};
+</script>
+
+<style scoped lang="less">
+.loading_page {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  img {
+    transform: translateY(8rem);
+  }
+}
+</style>

src/components/Navigation.vue

@@ -3,7 +3,7 @@
     <p class="fixedTitle">经销商社交媒体数据平台</p>
     <div v-for="(meta, index) in $route.meta" :key="index">
       <div v-if="meta.url">
-        <router-link :to="meta.url" @click="aaaaa(meta.url)" tag="li"><span>></span>{{meta.name}}</router-link>
+        <router-link :to="meta.url" tag="li"><span>></span>{{meta.name}}</router-link>
       </div>
       <div v-else><span>></span>{{meta.name}}</div>
     </div>
@@ -12,22 +12,9 @@
 
 <script>
 export default {
-  props: {
-    navTitle: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    }
-  },
   methods: {
-    changepage: function(url) {
-      // this.$router.push({ path: url });
-      console.log(url);
-    },
   },
   mounted() {
-    console.log(this.$route, 222)
   }
 };
 </script>

src/router/index.js

@@ -1,5 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
+// 加载页面
+import Loading from '../components/Loading'
 // 上传记录
 import UploadRecord from '../views/data/UploadRecord.vue'
 import UploadRecordDetail from '../views/data/components/UploadRecordDetail'
@@ -49,8 +51,12 @@ Vue.use(VueRouter)
 const routes = [
     {
         path: '/',
-        component: InforList,
-        redirect: '/inforList'
+        component: Loading,
+        redirect: '/loading'
+    },
+    {
+        path: '/loading',
+        component: Loading,
     },
     {
         path: '/uploadRecord',