实现购物车商品添加基本操作

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>

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>

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
+    }
+})

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");
 }
 

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('/')
       })
     }

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>