添加结账页面

src/assets/scss/style.css

@@ -6109,7 +6109,7 @@
 }
 
 .checkout-page-area {
-  padding-top: 140px;
+  padding-top: 100px;
   padding-bottom: 140px;
 }
 .checkout-page-area .form-control {

src/components/HeaderBreadcrumb.vue

@@ -0,0 +1,31 @@
+<script setup>
+defineProps({
+  path: Array
+})
+</script>
+
+<template>
+  <div class="breadcrumb-area-2 bg-overlay-3 relative bg-img"
+       style="background-image: url(/img/bg-img/home-3/bg.png);margin-top: 40px">
+    <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>
+              <template v-for="item in path">
+                <li><i class="icon-down-arrow-11"></i></li>
+                <li>{{ item }}</li>
+              </template>
+            </ul>
+            <h4 class="mb-0">{{ path[path.length - 1] }}</h4>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/TopHeader.vue

@@ -6,6 +6,14 @@ import {useAccount} from "@/stores/user.js";
 
 const account = useAccount()
 
+const avatar = computed(() => {
+  if(account.info.avatar) {
+    return `${request.defaults.baseURL}${account.info.avatar}`
+  } else {
+    return '/img/avatar/profile.jpg'
+  }
+})
+
 const isLogin = computed(() => !!getToken())
 </script>
 
@@ -34,11 +42,10 @@ const isLogin = computed(() => !!getToken())
             <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.nickName }}</div>
-                <div>{{ account.info.email }}</div>
+                <div style="color: gray">{{ account.info.email ?? '暂无电子邮件地址' }}</div>
               </div>
-              <img :src="`${request.defaults.baseURL}${account.info.avatar}`"
+              <img :src="avatar" class="user-avatar">
-                   class="user-avatar">
             </div>
             <div class="contact-info" v-if="!isLogin">
               <a class="login-btn"  style="margin-left: 10px" href="/login">

src/router/index.js

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

src/views/Cart.vue

@@ -2,6 +2,8 @@
 import {computed, onMounted, ref} from "vue";
 import request from "@/net/index.js";
 import Swal from "sweetalert2";
+import router from "@/router/index.js";
+import HeaderBreadcrumb from "@/components/HeaderBreadcrumb.vue";
 
 const cartList = ref([])
 
@@ -49,23 +51,7 @@ onMounted(() => {
 
 <template>
   <div>
-    <div class="breadcrumb-area-2 bg-overlay-3 relative bg-img"
+    <header-breadcrumb :path="['购物车']"/>
-         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">
@@ -86,7 +72,9 @@ onMounted(() => {
                     <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 class="cart-pro-img">
+                      <img :src="`/img/course/list/list-${item.courseId}.png`" alt="">
+                    </td>
                     <td>{{ item.title }}</td>
                     <td>￥{{ item.price }}</td>
                     <td>
@@ -149,7 +137,7 @@ onMounted(() => {
                 </div>
               </div>
 
-              <button type="submit" class="pro-btn mt-4">
+              <button type="submit" @click="router.push('/order')" class="pro-btn mt-4">
                 <span class="icon-padlock"></span> 开始结账
               </button>
 

src/views/Order.vue

@@ -0,0 +1,159 @@
+<script setup>
+import HeaderBreadcrumb from "@/components/HeaderBreadcrumb.vue";
+import {computed, onMounted, ref} from "vue";
+import request from "@/net/index.js";
+
+const cartList = ref([])
+
+const total = computed(() => cartList.value
+    .map(item => item.count * item.price)
+    .reduce((a, b) => a + b, 0))
+
+onMounted(() => {
+  request.get('/system/item/my-list').then(({data}) => cartList.value = data.data)
+})
+</script>
+
+<template>
+  <div>
+    <header-breadcrumb :path="['结账']"/>
+    <div class="checkout-page-area">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-6">
+            <div class="client-address-area">
+              <div class="row">
+                <div class="col-12">
+                  <div class="checkout-heading">
+                    <h4>订单详情</h4>
+                  </div>
+                </div>
+                <div class="col-md-6 mb-4">
+                  <label for="firstName" class="form-label">姓氏 *</label>
+                  <input type="text" class="form-control" id="firstName" placeholder="" value="" required="">
+                </div>
+
+                <div class="col-md-6 mb-4">
+                  <label for="lastName" class="form-label">名字 *</label>
+                  <input type="text" class="form-control" id="lastName" placeholder="" value="" required="">
+                </div>
+
+                <div class="col-12 mb-4">
+                  <label for="comName" class="form-label">公司名称 (可选)</label>
+                  <input type="text" class="form-control" id="comName" placeholder="" value="" required="">
+                </div>
+
+                <div class="col-12 mb-4">
+                  <label for="country" class="form-label">国家 / 地区 *</label>
+                  <select class="form-select" id="country" required="">
+                    <option value="">请选择国家或地区...</option>
+                    <option>中国</option>
+                    <option>美国</option>
+                  </select>
+
+                </div>
+
+                <div class="col-12 mb-4">
+                  <label for="address" class="form-label">街道名称 *</label>
+                  <input type="text" class="form-control" id="address" placeholder="" required="">
+                </div>
+
+                <div class="col-12 mb-4">
+                  <input type="text" class="form-control" id="address1" placeholder="" required="">
+                </div>
+
+                <div class="col-12 mb-4">
+                  <label for="country2" class="form-label">所在城市/省份 *</label>
+                  <select class="form-select" id="country2" required="">
+                    <option value="">请选择省份或城市...</option>
+                    <option>四川省</option>
+                    <option>重庆市</option>
+                  </select>
+                </div>
+
+                <div class="col-md-6 mb-4">
+                  <label for="zip" class="form-label">邮政编码 *</label>
+                  <input type="text" class="form-control" id="zip" placeholder="" required="">
+
+                </div>
+                <div class="col-md-6 mb-4">
+                  <label for="phone" class="form-label">手机号</label>
+                  <input type="number" class="form-control" id="phone" placeholder="" required="">
+                </div>
+
+                <div class="col-12">
+                  <label for="email" class="form-label">电子邮件地址 *</label>
+                  <input type="email" class="form-control" id="email" placeholder="">
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-md-6">
+            <div class="row">
+              <div class="col-12">
+                <div class="checkout-heading">
+                  <h4>额外订单信息</h4>
+                </div>
+              </div>
+              <div class="col-12 mb-5">
+                <label for="lastName" class="form-label">订单备注 (可选)</label>
+                <textarea class="form-control" placeholder="请输入您对此订单的一些额外需求..."
+                          id="message" name="message" cols="30" rows="10"></textarea>
+              </div>
+
+              <div class="col-12">
+                <div class="checkout-order-area">
+                  <h4>请确认你的订单</h4>
+                  <ul class="order-list-check mb-5">
+                    <li class="order-list-header"><span class="heading-title-pro">商品</span>
+                      <span class="heading-title-pro">合计</span></li>
+                    <li class="order-list-info-pro" v-for="item in cartList">
+                      <span class="product-list-single">
+                        <img class="order-product" :src="`/img/course/list/list-${item.courseId}.png`" alt="">
+                        <div>
+                          <div>{{ item.title }}</div>
+                          <div>x{{ item.count }}</div>
+                        </div>
+                      </span>
+                      <span class="pro-price">￥{{ item.price * item.count }}</span>
+                    </li>
+                    <li class="order-price"><span>商品合计</span> <span class="pur-price">￥{{ total }}</span></li>
+                    <li class="order-price"><span>付款金额</span> <span class="pur-price">￥{{ total * 1.08375 }}</span></li>
+                  </ul>
+
+                  <h4 class="mb-3">付款方式</h4>
+
+                  <div class="payment-gate-sys">
+                    <div class="form-check mb-4">
+                      <input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked="" required="">
+                      <label class="form-check-label" for="credit">信用卡</label>
+                    </div>
+                    <div class="form-check mb-4">
+                      <input id="debit" name="paymentMethod" type="radio" class="form-check-input" required="">
+                      <label class="form-check-label" for="debit">储蓄卡</label>
+                    </div>
+                    <div class="form-check mb-4">
+                      <input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required="">
+                      <label class="form-check-label" for="paypal">支付宝</label>
+                    </div>
+                  </div>
+                  <div class="pay-policy-des">
+                    <p> 您的个人数据将用于处理您的订单，支持您在本网站的体验，以及用于我们隐私政策中描述的其他目的</p>
+                  </div>
+                  <div class="post-btn-area">
+                    <button type="submit" class="auth-btn post">确认订单</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/views/course/CourseDetail.vue

@@ -4,6 +4,7 @@ import request from "@/net/index.js";
 import router from "@/router/index.js";
 import {ref} from "vue";
 import {createRandomInt, formatTime} from "../../utils/data.js";
+import HeaderBreadcrumb from "@/components/HeaderBreadcrumb.vue";
 
 const route = useRoute()
 const id = route.params.id
@@ -21,25 +22,7 @@ request.get(`/system/course/${route.params.id}`).then((res) => {
 
 <template>
   <div>
-    <div class="breadcrumb-area-2 bg-overlay-3 relative bg-img"
+    <header-breadcrumb :path="[data.title]"/>
-         style="background-image: url(/img/bg-img/home-3/bg.png);margin-top: 40px">
-      <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>{{ data.title }}
-                </li>
-              </ul>
-              <h4 class="mb-0">{{ data.title }}
-              </h4>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <div class="course-details-area">
       <div class="container">
         <div class="row">