完善购物车所有功能

src/App.vue

@@ -17,8 +17,8 @@ const isAuthPage = computed(
 
 onMounted(() => {
   if(getToken()) {
-    request.get('/getInfo').then(({ data }) =>
-        Object.assign(account.info, data.user))
+    request.get('/getInfo').then(({ data }) => Object.assign(account.info, data.user))
+    request.get('/system/item/count').then(({ data }) => account.cart.count = data.data)
   }
 })
 </script>

src/components/IndexHeader.vue

@@ -1,6 +1,9 @@
 <script setup>
 import {onMounted} from "vue";
 import {useHeaderSticky} from "@/utils/common.js";
+import {useAccount} from "@/stores/user.js";
+
+const account = useAccount()
 
 const routes = [
   { name: '首页', route: "/" },
@@ -66,8 +69,8 @@ onMounted(useHeaderSticky)
               </div>
             </div>
             <div class="cart-btn-area relative">
-              <a href="#" class="relative"><span class="icon-icon_cart_alt"></span></a>
-              <div class="cart-badge bg--dark">0</div>
+              <a href="/cart" class="relative"><span class="icon-icon_cart_alt"></span></a>
+              <div class="cart-badge bg--dark">{{ account.cart.count }}</div>
             </div>
           </div>
         </div>

src/router/index.js

@@ -33,6 +33,10 @@ const router = createRouter({
       path: '/register',
       name: 'register',
       component: () => import('@/views/auth/Register.vue'),
+    }, {
+      path: '/cart',
+      name: 'cart',
+      component: () => import('@/views/Cart.vue'),
     }
   ],
 })

src/stores/user.js

@@ -10,7 +10,11 @@ export const useAccount = defineStore('account', () => {
         email: '',
     })
 
+    const cart = ref({
+        count: 0
+    })
+
     return {
-        info
+        info, cart
     }
 })

src/views/Cart.vue

@@ -0,0 +1,166 @@
+<script setup>
+import {computed, onMounted, ref} from "vue";
+import request from "@/net/index.js";
+import Swal from "sweetalert2";
+
+const cartList = ref([])
+
+const total = computed(() => cartList.value
+    .map(item => item.count * item.price)
+    .reduce((a, b) => a + b, 0))
+
+function deleteItem(id) {
+  request.delete(`/system/item/delete/${id}`).then(({ data }) => {
+    if(data.code === 200) {
+      Swal.fire({ title: "删除商品", text: "此商品已经成功从购物车删除", icon: "success" })
+      const index = cartList.value.findIndex(item => item.id === id)
+      cartList.value.splice(index, 1)
+    }
+  })
+}
+
+function increaseCount(id) {
+  request.put(`/system/item/increase/${id}`).then(({ data }) => {
+    if(data.code === 200) {
+      Swal.fire({ title: "增加数量", text: "此商品已经成功增加数量", icon: "success" })
+      const item = cartList.value.find(item => item.id === id)
+      item.count++
+    }
+  })
+}
+
+function decreaseCount(id) {
+  request.put(`/system/item/decrease/${id}`).then(({ data }) => {
+    if(data.code === 200) {
+      Swal.fire({ title: "减少数量", text: "此商品已经成功减少数量", icon: "success" })
+      const item = cartList.value.find(item => item.id === id)
+      if(--item.count <= 0) {
+        const index = cartList.value.findIndex(item => item.id === id)
+        cartList.value.splice(index, 1)
+      }
+    }
+  })
+}
+
+onMounted(() => {
+  request.get('/system/item/my-list').then(({data}) => cartList.value = data.data)
+})
+</script>
+
+<template>
+  <div>
+    <div class="breadcrumb-area-2 bg-overlay-3 relative bg-img"
+         style="background-image: url(/img/bg-img/home-3/bg.png);">
+      <div class="container h-100">
+        <div class="row h-100 align-items-center">
+          <div class="col-12">
+            <div class="breadcrumb-conetnt">
+              <ul class="bread-list">
+                <li><a href="/">首页</a></li>
+                <li><i class="icon-down-arrow-11"></i></li>
+                <li>购物车</li>
+              </ul>
+              <h4 class="mb-0">购物车</h4>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="product-cart-area">
+      <div class="container">
+        <div class="row">
+          <div class="col-12">
+            <div class="cart-table">
+              <div class="table-responsive">
+                <table class="table">
+                  <thead class="table-navy">
+                  <tr><th></th>
+                    <th></th>
+                    <th>课程名称</th>
+                    <th>单价</th>
+                    <th>数量</th>
+                    <th>合计</th>
+                  </tr></thead>
+                  <tbody>
+                  <tr v-for="item in cartList" :key="item.id">
+                    <td><span @click="deleteItem(item.id)"
+                              style="cursor: pointer"
+                              class="icon-icon_close_alt2"></span></td>
+                    <td class="cart-pro-img"><img :src="`/img/course/list/list-${item.courseId}.png`" alt=""></td>
+                    <td>{{ item.title }}</td>
+                    <td>￥{{ item.price }}</td>
+                    <td>
+                      <div class="qty-pro-area">
+                        <form class="cart-form">
+                          <div class="order-plus-minus d-flex align-items-center">
+                            <div class="quantity-button-handler"
+                                 @click="decreaseCount(item.id)">-</div>
+                            <input class="form-control cart-quantity-input"
+                                   type="text" name="quantity" :value="item.count">
+                            <div class="quantity-button-handler"
+                                 @click="increaseCount(item.id)">+</div>
+                          </div>
+                          <div class="fav-icon">
+                            <i class="icon-icon_ribbon_alt"></i>
+                          </div>
+                        </form>
+                      </div>
+                    </td>
+                    <td>￥{{ item.price * item.count }}</td>
+                  </tr>
+                  </tbody>
+                </table>
+              </div>
+
+
+            </div>
+          </div>
+
+          <div class="col-12">
+            <div class="coupon-cart-btn-area" style="margin-top: 0">
+
+            </div>
+          </div>
+        </div>
+
+        <div class="row justify-content-end">
+          <div class="col-lg-5 col-xl-4">
+            <div class="cart-total-card">
+              <h4>购物车合计</h4>
+
+              <div class="cart-list">
+                <p>合计</p>
+                <p>￥{{ total }}</p>
+              </div>
+
+              <div class="cart-list">
+                <div class="cart-tax-pri">
+                  <p>增值税</p>
+                  <p>CN (8.375%)</p>
+                </div>
+                <p>￥{{ (total * 0.08375).toFixed(2) }}</p>
+              </div>
+
+              <div class="total-order">
+                <h5>结算价格</h5>
+                <div class="total-order-desc">
+                  <h6>￥{{ total * 1.08375 }}</h6>
+                  <span>除去增值税: ￥{{ total }}</span>
+                </div>
+              </div>
+
+              <button type="submit" class="pro-btn mt-4">
+                <span class="icon-padlock"></span> 开始结账
+              </button>
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/views/course/CourseGrid.vue

@@ -3,11 +3,22 @@ import CourseBreadcrumb from "@/components/course/CourseBreadcrumb.vue";
 import {ref} from "vue";
 import {createRandomInt} from "@/utils/data.js";
 import request from "@/net/index.js";
+import Swal from "sweetalert2";
+import {useAccount} from "@/stores/user.js";
 
 const data = ref([])
 
+const account = useAccount()
+
 request.get('/system/course/list')
     .then((res) => data.value = res.data.rows)
+
+function addCourseToCart(id) {
+  request.post(`/system/item/add/${id}`).then(() => {
+    account.cart.count++
+    Swal.fire({ title: "添加商品", text: "课程已经添加到购物车中，请继续选购", icon: "success" })
+  })
+}
 </script>
 
 <template>
@@ -70,8 +81,10 @@ request.get('/system/course/list')
                   <div class="course-price">
                     <p>￥{{ (course.price * 0.9).toFixed(0) }} <span>￥{{ course.price }}</span></p>
                   </div>
-                  <div class="course-buy">
-                    <p><a href="#"><i class="icon-icon_cart_alt"></i> <span>添加到购物车</span></a>
+                  <div class="course-buy" style="cursor: pointer">
+                    <p><a @click="addCourseToCart(course.id)">
+                      <i class="icon-icon_cart_alt"></i> <span>加到购物车</span>
+                    </a>
                     </p>
                   </div>
                 </div>

src/views/course/CourseList.vue

@@ -3,15 +3,20 @@ import {ref} from "vue";
 import {createRandomInt} from "@/utils/data.js";
 import CourseBreadcrumb from "@/components/course/CourseBreadcrumb.vue";
 import request from "@/net";
+import Swal from "sweetalert2";
+import {useAccount} from "@/stores/user.js";
 
 const data = ref([])
 
+const account = useAccount()
+
 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)
+  request.post(`/system/item/add/${id}`).then(() => {
+    account.cart.count++
+    Swal.fire({ title: "添加商品", text: "课程已经添加到购物车中，请继续选购", icon: "success" })
   })
 }
 </script>
@@ -52,7 +57,7 @@ function addCourseToCart(id) {
                   <div class="course-price">
                     <p>￥{{ (course.price * 0.9).toFixed(0) }} <span>￥{{ course.price }}</span></p>
                   </div>
-                  <div class="course-buy">
+                  <div class="course-buy" style="cursor: pointer">
                     <p><a @click="addCourseToCart(course.id)">
                       <i class="icon-icon_cart_alt"></i>&nbsp;
                       <span>添加到购物车</span>