From c6675668f762d12b1a78337691adf3e0a4a6fb6b Mon Sep 17 00:00:00 2001
From: nagocoler <nagocoler@qq.com>
Date: Sat, 9 Nov 2024 22:32:36 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E8=B4=AD=E7=89=A9=E8=BD=A6?=
 =?UTF-8?q?=E5=95=86=E5=93=81=E6=B7=BB=E5=8A=A0=E5=9F=BA=E6=9C=AC=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                     | 13 ++++++++++++-
 src/components/TopHeader.vue    | 27 ++++++++++++++++++++++++---
 src/stores/user.js              | 16 ++++++++++++++++
 src/utils/token.js              |  2 +-
 src/views/auth/Login.vue        |  5 +++++
 src/views/course/CourseList.vue |  8 +++++++-
 6 files changed, 65 insertions(+), 6 deletions(-)
 create mode 100644 src/stores/user.js

diff --git a/src/App.vue b/src/App.vue
index 991a615..dd02eaa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,13 +3,24 @@ import TopHeader from "@/components/TopHeader.vue";
 import IndexHeader from "@/components/IndexHeader.vue";
 import IndexFooter from "@/components/IndexFooter.vue";
 import BackToTop from "@/components/BackToTop.vue";
-import {computed} from "vue";
+import {computed, onMounted} from "vue";
 import {useRoute} from "vue-router";
+import {useAccount} from "@/stores/user.js";
+import request from "@/net/index.js";
+import {getToken} from "@/utils/token.js";
 
 const route = useRoute()
+const account = useAccount()
 
 const isAuthPage = computed(
     () => route.name === 'login' || route.name === 'register')
+
+onMounted(() => {
+  if(getToken()) {
+    request.get('/getInfo').then(({ data }) =>
+        Object.assign(account.info, data.user))
+  }
+})
 </script>
 
 <template>
diff --git a/src/components/TopHeader.vue b/src/components/TopHeader.vue
index 9648d22..1fb2a45 100644
--- a/src/components/TopHeader.vue
+++ b/src/components/TopHeader.vue
@@ -1,5 +1,12 @@
 <script setup>
+import {computed} from "vue";
+import {getToken} from "@/utils/token.js";
+import request from "@/net/index.js";
+import {useAccount} from "@/stores/user.js";
 
+const account = useAccount()
+
+const isLogin = computed(() => !!getToken())
 </script>
 
 <template>
@@ -24,11 +31,20 @@
                 <li><a href="#"><span class="icon-instagram"></span></a></li>
               </ul>
             </div>
-            <div class="contact-info">
+            <div class="contact-info" v-if="isLogin"
+                 style="display: flex;align-items: center;margin-left: 20px">
+              <div style="color: white;text-align: right;font-size: 13px;line-height: 15px">
+                <div>{{ account.info.userName }}</div>
+                <div>{{ account.info.email }}</div>
+              </div>
+              <img :src="`${request.defaults.baseURL}${account.info.avatar}`"
+                   class="user-avatar">
+            </div>
+            <div class="contact-info" v-if="!isLogin">
               <a class="login-btn"  style="margin-left: 10px" href="/login">
                 <span class="icon-user-notes"></span> 登录</a>
             </div>
-            <div class="contact-info">
+            <div class="contact-info" v-if="!isLogin">
               <a class="login-btn" style="margin-left: 10px" href="/register">
                 <span class="icon-user-plus-solid-1"></span> 注册</a>
             </div>
@@ -40,5 +56,10 @@
 </template>
 
 <style scoped>
-
+.user-avatar {
+  height: 35px;
+  width: 35px;
+  margin-left: 10px;
+  border-radius: 50%;
+}
 </style>
\ No newline at end of file
diff --git a/src/stores/user.js b/src/stores/user.js
new file mode 100644
index 0000000..66cbf2e
--- /dev/null
+++ b/src/stores/user.js
@@ -0,0 +1,16 @@
+import {defineStore} from "pinia";
+import {ref} from "vue";
+
+export const useAccount = defineStore('account', () => {
+
+    const info = ref({
+        avatar: '',
+        userName: '',
+        nickName: '',
+        email: '',
+    })
+
+    return {
+        info
+    }
+})
\ No newline at end of file
diff --git a/src/utils/token.js b/src/utils/token.js
index c0d586c..3a518e6 100644
--- a/src/utils/token.js
+++ b/src/utils/token.js
@@ -2,7 +2,7 @@ export function setToken(token) {
     localStorage.setItem("access_token", token);
 }
 
-export function getToken(token) {
+export function getToken() {
     return localStorage.getItem("access_token");
 }
 
diff --git a/src/views/auth/Login.vue b/src/views/auth/Login.vue
index 46f461b..10d6795 100644
--- a/src/views/auth/Login.vue
+++ b/src/views/auth/Login.vue
@@ -4,6 +4,9 @@ import request from "@/net/index.js";
 import Swal from "sweetalert2";
 import router from "@/router/index.js";
 import {setToken} from "@/utils/token.js";
+import {useAccount} from "@/stores/user.js";
+
+const account = useAccount()
 
 const verify = reactive({
   img: '',
@@ -37,6 +40,8 @@ function login() {
         icon: "success"
       }).then(() => {
         setToken(data.token)
+        request.get('/getInfo').then(({ data }) =>
+            Object.assign(account.info, data.user))
         router.push('/')
       })
     }
diff --git a/src/views/course/CourseList.vue b/src/views/course/CourseList.vue
index 92cba66..305055b 100644
--- a/src/views/course/CourseList.vue
+++ b/src/views/course/CourseList.vue
@@ -8,6 +8,12 @@ const data = ref([])
 
 request.get('/system/course/list')
     .then((res) => data.value = res.data.rows)
+
+function addCourseToCart(id) {
+  request.post(`/system/item/add/${id}`).then(({ data }) => {
+    console.info(data)
+  })
+}
 </script>
 
 <template>
@@ -47,7 +53,7 @@ request.get('/system/course/list')
                     <p>￥{{ (course.price * 0.9).toFixed(0) }} <span>￥{{ course.price }}</span></p>
                   </div>
                   <div class="course-buy">
-                    <p><a href="#">
+                    <p><a @click="addCourseToCart(course.id)">
                       <i class="icon-icon_cart_alt"></i>&nbsp;
                       <span>添加到购物车</span>
                     </a>