feats

src/App.vue

@@ -1,7 +1,16 @@
 <template>
-  <div id="app"><router-view /></div>
+  <div id="app">
+    <x-loading :show="loading" size="36px" style="position: fixed; top: 0; width: 100vw; z-index: 999" />
+    <router-view />
+  </div>
 </template>
 
+<script setup>
+import { useModel } from '@zjxpcyc/vue-tiny-store'
+
+const { loading } = useModel('app')
+</script>
+
 <style>
 html, body, #app {
   height: 100%;

src/components/loading/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="cmp-loading" v-if="show">
+    <van-loading color="#1989fa" :size="size" />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  show: false,
+  size: {
+    type: String,
+    default: '48px',
+  }
+})
+
+</script>
+
+<style lang="less" scoped>
+.cmp-loading {
+  padding-top: 30%;
+  display: flex;
+  justify-content: center;
+}
+</style>

src/main.js

@@ -1,11 +1,16 @@
 import { createApp } from 'vue'
+import Loading from '@/components/loading/index.vue'
 import App from './App.vue'
 import vant from './vant'
 import router from './router'
 import store from './store'
 
 const app = createApp(App)
+
 vant(app)
 app.use(router)
 app.use(store)
+
+app.component('x-loading', Loading);
+
 app.mount('#app')

src/pages/login.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="login-page">
-    <van-loading color="#1989fa" size="48px" />
+    <x-loading :show="true" />
   </div>
 </template>
 
@@ -9,6 +9,7 @@ import { onMounted } from 'vue';
 import { useRouter, useRoute } from 'vue-router'
 import { useModel } from '@zjxpcyc/vue-tiny-store'
 import { getRedirectURL } from '@/utils/wx';
+import { Notify } from 'vant';
 
 const { signIn } = useModel('user')
 const router = useRouter();
@@ -31,6 +32,8 @@ onMounted(() => {
       } else {
         router.replace({ name: 'index' })
       }
+    }).catch((err) => {
+      Notify({ type: 'warning', message: err.message });
     })
   }
 })
@@ -39,8 +42,6 @@ onMounted(() => {
 
 <style lang="less" scoped>
 .login-page {
-  padding-top: 30vh;
-  display: flex;
-  justify-content: center;
+  height: 100%;
 }
 </style>

src/router/index.js

@@ -22,7 +22,7 @@ router.beforeEach((to, from, next) => {
   }
 
   const { user, getCurrent } = store.getState('user');
-  if (!user && !user.personId) {
+  if (!user || !user.personId) {
     getCurrent().then(() => {
       NProgress.done();
       next();

src/store/index.js

@@ -1,8 +1,10 @@
 import createStore from '@zjxpcyc/vue-tiny-store'
 
+import useApp from './models/app'
 import useUser from './models/user'
 
 const models = {
+  'app': useApp,
   'user': useUser,
 }
 

src/store/models/app.js

@@ -0,0 +1,13 @@
+import { ref } from "vue";
+
+export default function useApp() {
+  const loading = ref(false)
+
+  const setLoading = b => loading.value = b;
+  window.__setloading = setLoading;
+
+  return {
+    loading,
+    setLoading,
+  }
+}

src/utils/request.js

@@ -11,6 +11,9 @@ request.interceptors.request.use(function (config = {}) {
   const token = getToken()
   const Authorization = token ? { Authorization: token } : {};
 
+  // 加载动画
+  window.__setloading(true);
+
   // 在发送请求之前做些什么
   return {
     ...config,
@@ -26,6 +29,8 @@ request.interceptors.request.use(function (config = {}) {
 
 // 添加响应拦截器
 request.interceptors.response.use(function (response) {
+  window.__setloading(false);
+
   // 2xx 范围内的状态码都会触发该函数。
   // 对响应数据做点什么
   const { data : respData } = response;
@@ -37,6 +42,8 @@ request.interceptors.response.use(function (response) {
     return Promise.reject(new Error(message));
   }
 }, function (error) {
+  window.__setloading(false);
+
   // 超出 2xx 范围的状态码都会触发该函数。
   // 对响应错误做点什么
   return Promise.reject(error);