修改登录页面

src/api/login.ts

@@ -24,3 +24,8 @@ export function getLoginStatus() {
 export function getUserDetail() {
   return request.get("/user/account");
 }
+
+// /logout
+export function logout() {
+  return request.get("/logout");
+}

src/layout/AppLayout.vue

@@ -9,12 +9,14 @@
                     <search-bar />
                     <!-- 主页面路由 -->
                     <n-layout class="main-content bg-black" :native-scrollbar="false">
-                        <router-view class="main-page" v-slot="{ Component }">
-                            <keep-alive>
-                                <component :is="Component" v-if="$route.meta.keepAlive" />
-                            </keep-alive>
-                            <component :is="Component" v-if="!$route.meta.keepAlive" />
-                        </router-view>
+                        <n-message-provider>
+                            <router-view class="main-page" v-slot="{ Component }">
+                                <keep-alive>
+                                    <component :is="Component" v-if="$route.meta.keepAlive" />
+                                </keep-alive>
+                                <component :is="Component" v-if="!$route.meta.keepAlive" />
+                            </router-view>
+                        </n-message-provider>
                     </n-layout>
                 </div>
             </div>

src/layout/components/SearchBar.vue

@@ -39,7 +39,7 @@
 
 <script lang="ts" setup>
 import { getSearchKeyword, getHotSearch } from '@/api/home';
-import { getUserDetail } from '@/api/login';
+import { getUserDetail, logout } from '@/api/login';
 import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useStore } from 'vuex';
@@ -108,7 +108,10 @@ const selectItem = (key: any) => {
     // switch 判断
     switch (key) {
         case 'logout':
-            store.state.user = null
+            logout().then(() => {
+                store.state.user = null
+                localStorage.clear()
+            })
             break;
     }
 }

src/views/login/index.vue

@@ -2,6 +2,13 @@
 import { getQrKey, createQr, checkQr, getLoginStatus } from '@/api/login'
 import { onMounted } from '@vue/runtime-core';
 import { ref } from 'vue';
+import { getUserDetail } from '@/api/login';
+import { useStore } from 'vuex';
+import { useMessage } from 'naive-ui'
+
+const message = useMessage()
+
+const store = useStore();
 
 const qrUrl = ref<string>()
 onMounted(() => {
@@ -16,15 +23,24 @@ const loadLogin = async () => {
   timerIsQr(key)
 }
 
+
+
 const timerIsQr = (key: string) => {
   const timer = setInterval(async () => {
     const { data } = await checkQr(key)
+
+    console.log(data);
+
     if (data.code === 800) {
       clearInterval(timer)
     }
     if (data.code === 803) {
       // 将token存入localStorage
       localStorage.setItem('token', data.cookie)
+      const user = await getUserDetail()
+      store.state.user = user.data.profile
+      message.success('登录成功')
+
       await getLoginStatus().then(res => {
         console.log(res);
       })
@@ -32,19 +48,27 @@ const timerIsQr = (key: string) => {
     }
   }, 5000);
 }
+
 </script>
 
 <template>
   <div class="login-page">
-    <div>登录</div>
-    <div>
-      <img :src="qrUrl" />
-    </div>
+    <div class="login-title">扫码登陆</div>
+    <img class="qr-img" :src="qrUrl" />
+    <div class="text">使用网易云APP扫码登录</div>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .login-page {
-  @apply p-4;
+  @apply p-4 flex flex-col items-center justify-center p-20;
+}
+
+.login-title {
+  @apply text-3xl font-bold mb-6;
+}
+
+.text {
+  @apply mt-4 text-green-500 text-xs;
 }
 </style>