From 591ed8b5d3a204725140be62e89d1124b674db77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=8B=BE=E5=A3=B9?=
 <10942926+linzh1@user.noreply.gitee.com>
Date: Wed, 20 Sep 2023 17:09:04 +0800
Subject: [PATCH] lzh

---
 src/request/api.js             |  13 ++-
 src/router/index.js            |   5 +-
 src/store/modules/userInfos.js |   7 +-
 src/views/Detail.vue           |  24 +++++-
 src/views/Order.vue            |   1 +
 src/views/User.vue             | 148 ++++++++++++++++++++++++++++++---
 6 files changed, 183 insertions(+), 15 deletions(-)

diff --git a/src/request/api.js b/src/request/api.js
index 10a81fb..66f5e22 100644
--- a/src/request/api.js
+++ b/src/request/api.js
@@ -28,4 +28,15 @@ export const phoneReginAPI = (data) => request(
 )
 // 获取用户信息
 // /shop/userProfiles
-export const userProfilesAPI = () =>request.get("/shop/userProfiles")
\ No newline at end of file
+export const userProfilesAPI = () =>request.get("/shop/userProfiles")
+
+export const cartAddAPI = (data) => request(
+    {
+    method:'POST',
+    url:'/shop/carts/add',
+    data,
+    headers:{
+    'Content-Type': 'application/x-www-form-urlencoded'
+    }
+    }
+    )
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 4f9adbd..86c37bc 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -15,7 +15,10 @@ component:()=>import("../views/Goods.vue")
 },
 {
 path:"/user",
-component:()=>import("../views/User.vue")
+component:()=>import("../views/User.vue"),
+children:[
+    { path:"cart",component: () => import('../components/user/Cart.vue')}
+ ]
 },
 {
 path:"/order",
diff --git a/src/store/modules/userInfos.js b/src/store/modules/userInfos.js
index 7aff794..1cc22bd 100644
--- a/src/store/modules/userInfos.js
+++ b/src/store/modules/userInfos.js
@@ -15,6 +15,7 @@ export const userInfos = defineStore('userInfos', {
         }
         }
     },
+
     getters: {
         initUserInfo(state) {
             return state.userInfo = {
@@ -22,7 +23,11 @@ export const userInfos = defineStore('userInfos', {
             coin: 0,
             headImg
             }
-            }
+            },
+            
+        initCartTotal(state){
+            return (val) => state.cartTotal = val;
+            },
     },
     actions: {
         // 修改用户信息
diff --git a/src/views/Detail.vue b/src/views/Detail.vue
index c392c24..6fe6bf5 100644
--- a/src/views/Detail.vue
+++ b/src/views/Detail.vue
@@ -49,7 +49,7 @@
             </div>
             </div>
             <div class="btns">
-              <div class="addToCart">加入购物车</div>
+              <div class="addToCart" @click="addCart">加入购物车</div>
               <div class="buyNow">立即购买</div>
             </div>
           </div>
@@ -116,7 +116,9 @@ import { useRoute,useRouter } from "vue-router";
 const route = useRoute();
 console.log(route);
 import {  ref,watch } from "vue";
-import {DetailAPI} from "../request/api"
+import {DetailAPI,cartAddAPI} from "../request/api"
+import { userInfos } from "../store/modules/userInfos"
+const storeuserInfos = userInfos();
 // 获取商品详情数据
 
 // “面包屑”模块数据
@@ -179,6 +181,24 @@ stepNum.value += val
 }
 }
 
+// 点击加入购物车按钮执行
+async function addCart(){
+// 发起加入购物车请求
+const res = await cartAddAPI({
+productId:route.query.id,
+total:stepNum.value,
+modified:1
+});
+console.log(res);
+if(res.code == 0){
+// 加入购物车成功
+// 修改购物车数据
+storeuserInfos.initCartTotal(res.data.total)
+}else {
+alert(res.message);
+}
+}
+
 
 </script>
  
diff --git a/src/views/Order.vue b/src/views/Order.vue
index 7415a46..8818b45 100644
--- a/src/views/Order.vue
+++ b/src/views/Order.vue
@@ -1,5 +1,6 @@
 <template>
  <div>我的订单</div>
+
 </template>
 
 <script setup>
diff --git a/src/views/User.vue b/src/views/User.vue
index c436fd3..d09eeb2 100644
--- a/src/views/User.vue
+++ b/src/views/User.vue
@@ -1,11 +1,139 @@
 <template>
-  <div>个人中心</div>
- </template>
- 
- <script setup>
- 
- </script>
- 
- <style scoped>
- 
- </style>
\ No newline at end of file
+  <div class="person_page">
+    <div class="person wrap">
+      <Crumb :nav="[{name:'首页'},{name:'个人中心'}]"></Crumb>
+      <main>
+        <aside>
+          <!-- <div
+            class="avatar"
+            :style="{ backgroundImage: `url(${userInfo.headImg})` }"
+          ></div>
+          <div class="name">{{ userInfo.nickName }} <span @click="loginOutFn" style="cursor:pointer;">[退出]</span></div> -->
+          <div class="title">
+            <img
+              :src="transaction"
+              width="20"
+              alt="交易管理"
+            />
+            交易管理
+          </div>
+          <ul class="list">
+            <li :class="/\/person1/g.test($route.path) ? 'active' : ''">
+              个人中心
+            </li>
+            <li :class="/\/person1/g.test($route.path) ? 'active' : ''">
+              我的订单
+            </li>
+            <li :class="/\/cart/g.test($route.path) ? 'active' : ''">购物车</li>
+            <!-- <Cart></Cart> -->
+
+            <li :class="/\/person1/g.test($route.path) ? 'active' : ''">
+              消息通知
+            </li>
+            <li :class="/\/person1/g.test($route.path) ? 'active' : ''">
+              积分明细
+            </li>
+            <li :class="/\/person1/g.test($route.path) ? 'active' : ''">
+              积分攻略
+            </li>
+          </ul>
+          <div class="title">
+            <img
+              :src="transaction"
+              width="20"
+              alt="交易管理"
+            />
+            个人信息管理
+          </div>
+          <ul class="list">
+            <li>地址管理</li>
+            <li>账号安全</li>
+          </ul>
+        </aside>
+        <article>
+          <Cart></Cart>
+          <router-view></router-view>
+        </article>
+      </main>
+    </div>
+  </div>
+</template>
+<script setup>
+import Crumb from "../components/Crumb.vue";
+import Cart from "../components/user/Cart.vue";
+import transaction from "../assets//img/transaction.png"
+
+</script>
+<style lang="less" scoped>
+@import "../assets/css/global.less";
+.person_page {
+  background: #fff;
+  main {
+    border-top: 1px solid #e1e1e1;
+    padding: 28px 0 48px;
+    display: flex;
+    justify-content: space-between;
+    background: #fff;
+    aside {
+      width: 200px;
+      height: 740px;
+      background: #e7e7e7;
+      margin-right: 60px;
+      box-sizing: border-box;
+      padding: 30px 18px 0;
+      .avatar {
+        width: 100px;
+        height: 100px;
+        margin: auto;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+      }
+      .name {
+        text-align: center;
+        margin-top: 19px;
+        margin-bottom: 43px;
+        span {
+          text-decoration: underline;
+          color: #2a5df1;
+        }
+      }
+      .title {
+        font-size: 16px;
+        color: #333333;
+        display: flex;
+        align-items: center;
+        margin-bottom: 14px;
+        img {
+          margin-right: 6px;
+        }
+      }
+      .list {
+        li {
+          margin-bottom: 17px;
+          font-weight: 300;
+          color: #666666;
+          cursor: pointer;
+          &.active {
+            color: @base-color;
+            font-weight: bold;
+            &::before {
+              width: 2px;
+              height: 14px;
+              background:@base-color;
+              display: inline-block;
+              content: "";
+              margin-right: 10px;
+            }
+          }
+        }
+      }
+    }
+    article {
+      flex: 1;
+      padding: 20px 0 0 0px;
+      box-sizing: border-box;
+      background: #fff;
+    }
+  }
+}
+</style>
\ No newline at end of file
-- 
Gitee