feat:更新首页组件、商品详情，修复登录状态检测

package.json

@@ -1,6 +1,6 @@
 {
   "name": "knock-ding-yanxuan",
-  "version": "1.4.0",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/App.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="root">
 		<!-- 顶部 -->
-		<TopBar></TopBar>
+		<TopBar :key="topBarKeyValue"></TopBar>
 		<Header></Header>
 		<!-- 路由出口 -->
 		<router-view></router-view>
@@ -22,7 +22,7 @@ import { mapState } from "vuex";
 
 export default {
 	data() {
-		return {};
+		return {topBarKeyValue: 0};
 	},
 	name      : "App",
 	//注册组件
@@ -32,6 +32,16 @@ export default {
 		Footer,
 		Login
 	},
+	watch: {
+		"$route.path": {
+			deep: true,
+			handler(newVal, oldVal) {
+				if (newVal !== oldVal) {
+					this.topBarKeyValue++;
+				}
+			}
+		}
+	},
 	// 计算属性
 	computed: {
 		...mapState({

src/assets/scss/global.scss

@@ -30,7 +30,7 @@ body {
     line-height: 1.375;
 }
 
-.warp {
+.warp,.wrap {
     width: $content-width;
     margin: 0 auto;
 }

src/components/Login.vue

@@ -68,7 +68,7 @@
 </template>
 
 <script>
-import { mapMutations } from "vuex";
+import { mapMutations, mapActions } from "vuex";
 import { reqBindPhone, reqGetSmsCode, reqLogin } from "@/request/api";
 export default {
 	data() {
@@ -87,6 +87,7 @@ export default {
 			setIsShowLoginModal: "isShowLoginModal/setIsShowLoginModal",
 			setIsShowCartModal : "loginStatus/setLoginStatus"
 		}),
+		...mapActions({ asyncGetUserInfo: "userInfo/asyncGetUserInfo" }),
 		close() {
 			this.setIsShowLoginModal(false);
 		},
@@ -135,11 +136,14 @@ export default {
 			this.close();
 			sessionStorage.setItem("token", res["x-auth-token"]);
 			this.setIsShowCartModal(true);
+			//删除uuid
 			if (uuid) {
 				sessionStorage.removeItem("loginUuid");
 				//清除地址栏code
 				await this.$router.push("/home");
 			}
+			//获取用户信息
+			await this.asyncGetUserInfo();
 		},
 		verify() {
 			//正则验证手机号

src/components/TopBar.vue

@@ -5,10 +5,10 @@
 			<div class="right">
 				<ul>
 					<li>
-						<img src="../assets/img/userImg.f8bbec5e.png" alt="" />
-						<span>用户名：游客</span>
+						<img :src="userInfo.headImg" alt="" />
+						<span>用户名：{{ userInfo.nickName }}</span>
 					</li>
-					<li>我的鸡腿：--</li>
+					<li>我的鸡腿：{{ userInfo.coin }}</li>
 					<li>获取鸡腿</li>
 					<li>叩丁狼官网</li>
 					<li class="btn" @click="login" v-show="!isLogined">登录</li>
@@ -28,37 +28,44 @@
 </template>
 
 <script>
-import { mapMutations, mapState } from "vuex";
+import { mapMutations, mapState, mapActions } from "vuex";
 import { reqQrcodeLogin } from "@/request/api";
 export default {
 	name: "TopBar",
 	data() {
-		return { cartTotal: 0 };
-	},
-	watch: {
-		"$route.path": {
-			deep: true,
-			handler(newVal, oldVal) {
-				let sessionToken = sessionStorage.getItem("token");
-				this.setLoginStatus(Boolean(sessionToken));
-				console.log("路由变化了");
-				console.log(newVal, oldVal);
-			}
-		}
+		return {};
 	},
+	// watch: {
+	// 	"$route.path": {
+	// 		deep: true,
+	// 		handler(newVal, oldVal) {
+	// 			let sessionToken = sessionStorage.getItem("token");
+	// 			this.setLoginStatus(Boolean(sessionToken));
+	// 		}
+	// 	}
+	// },
 	methods: {
 		...mapMutations({
 			setIsShowLoginModal: "isShowLoginModal/setIsShowLoginModal",
-			setLoginStatus     : "loginStatus/setLoginStatus"
+			setLoginStatus     : "loginStatus/setLoginStatus",
+			initUserInfo       : "userInfo/initUserInfo"
 		}),
+		...mapActions({ asyncGetUserInfo: "userInfo/asyncGetUserInfo" }),
 		login() {
 			// 触发登录弹窗
 			this.setIsShowLoginModal(true);
 		}
 	},
-	computed: {...mapState({ isLogined: (state) => state.loginStatus.isLogined })},
+	computed: {
+		...mapState({
+			isLogined: (state) => state.loginStatus.isLogined,
+			cartTotal: (state) => state.userInfo.cartTotal,
+			userInfo : (state) => state.userInfo.userInfo
+		})
+	},
 	created() {
-		setTimeout(async() => {
+		this.$nextTick().then(async() => {
+			//扫码登录
 			let loginCode = this.$route.query.code;
 			if (loginCode) {
 				const res = await reqQrcodeLogin({ code: loginCode });
@@ -69,6 +76,8 @@ export default {
 					this.setLoginStatus(true);
 					//清除地址栏code
 					await this.$router.push("/home");
+					//获取用户信息
+					await this.asyncGetUserInfo();
 				}
 				else if (res.code === 400) {
 					this.$message.error(res.msg);
@@ -80,7 +89,20 @@ export default {
 					this.setIsShowLoginModal(true);
 				}
 			}
-		}, 100);
+			else {
+				//正常登陆
+				let sessionToken = sessionStorage.getItem("token");
+				this.setLoginStatus(Boolean(sessionToken));
+				if (sessionToken) {
+					//有登录获取用户信息
+					await this.asyncGetUserInfo();
+				}
+				else {
+					//没有登录,初始化用户信息
+					await this.initUserInfo();
+				}
+			}
+		});
 	}
 };
 </script>

src/components/home/JfTitle.vue

@@ -0,0 +1,49 @@
+<template>
+	<div class="title">
+		<div class="l">
+			<img :src="imgSrc" alt="" />
+			<h2>{{ title1 }}</h2>
+		</div>
+		<div class="r" v-show="title1 != '积分攻略'">
+			更多
+			<span><img src="../../assets/img/arrow.png" alt="" /></span>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	props: ["title1", "imgSrc"],
+	data() {
+		return {};
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.title {
+	display: flex;
+	justify-content: space-between;
+	padding-top: 50px;
+	padding-bottom: 20px;
+	.l {
+		display: flex;
+		align-items: center;
+		font-size: 30px;
+		font-family: SourceHanSansSC;
+		font-weight: bold;
+		color: #242b39;
+		h2 {
+			margin-left: 10px;
+		}
+	}
+	.r {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		span {
+			margin-left: 6px;
+		}
+	}
+}
+</style>

src/components/home/List.vue

@@ -0,0 +1,125 @@
+<template>
+	<ul class="list">
+		<li
+			v-for="(item, index) in arr"
+			:key="item.id"
+			v-show="index < 4"
+			@click="goToDetails(item.id)"
+		>
+			<section>
+				<img :src="`http://sc.wolfcode.cn${item.coverImg}`" alt="" />
+				<div class="bottom-box">
+					<h3>{{ item.name }}</h3>
+					<p>{{ item.coin }} 积分</p>
+					<div class="btn">立即兑换</div>
+				</div>
+				<img
+					class="flag"
+					src="../../assets/img/section_new.png"
+					alt=""
+				/>
+				<img
+					class="flag"
+					src="../../assets/img/section_hot.png"
+					alt=""
+				/>
+			</section>
+		</li>
+	</ul>
+</template>
+
+<script>
+export default {
+	props: ["arr"],
+	data() {
+		return {};
+	},
+	methods: {
+		goToDetails(id) {
+			this.$router.push(`/detail?id=${id}`);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.list {
+	/* width: 1220px; */
+	/* overflow: hidden; */
+	display: flex;
+	/* 自动换行 */
+	flex-wrap: wrap;
+
+	li {
+		& section :nth-child(1) {
+			width: 285px;
+			height: 330px;
+		}
+		&:nth-of-type(4n) {
+			margin-right: 0px;
+		}
+		width: 285px;
+		float: left;
+		margin-bottom: 20px;
+		margin-right: 20px;
+		position: relative;
+		section {
+			width: 285px;
+			height: 492px;
+			position: relative;
+			transition: all 0.5s linear;
+		}
+
+		.bottom-box {
+			width: 285px;
+			height: 162px;
+			background-color: #fff;
+			text-align: center;
+			h3 {
+				font-size: 18px;
+				font-family: SourceHanSansSC;
+				font-weight: 300;
+				color: #333333;
+				height: 56px;
+				line-height: 56px;
+				/* background-color: #ffc; */
+			}
+			p {
+				font-size: 18px;
+				font-family: SourceHanSansSC;
+				font-weight: bold;
+				color: #fd604d;
+			}
+			.btn {
+				width: 100px;
+				height: 36px;
+				line-height: 36px;
+				border: 1px solid #0a328e;
+				margin: 20px auto 0;
+				font-size: 18px;
+				font-family: SourceHanSansSC;
+				font-weight: 300;
+				color: #0a328e;
+			}
+		}
+
+		.flag {
+			position: absolute;
+			left: 0;
+			top: 0;
+		}
+
+		&:hover {
+			cursor: pointer;
+			section {
+				margin-top: -15px;
+				box-shadow: 0 0 10px #ccc;
+				.btn {
+					background-color: #0a328e;
+					color: #fff;
+				}
+			}
+		}
+	}
+}
+</style>