feat:更新登录

mason369 · Jan 15, 2023 · 1b3a397 · 1b3a397
1 parent e2ad12e
commit 1b3a397
Show file tree

Hide file tree

Showing 9 changed files with 107 additions and 26 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "knock-ding-yanxuan",
-  "version": "1.2.0",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

diff --git a/public/index.html b/public/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
   </head>
   <body>
     <noscript>

diff --git a/src/components/Login.vue b/src/components/Login.vue
@@ -18,7 +18,7 @@
 				<li>|</li>
 				<li
 					:class="!isShowFrom ? 'login-active' : ''"
-					@click="isShowFrom = false"
+					@click="showWeinxinLogin"
 				>
 					微信扫码登录
 				</li>
@@ -59,29 +59,34 @@
 						登录
 					</button>
 				</div>
-				<div class="wx-qrcode" v-show="!isShowFrom">二维码</div>
+				<div class="wx-qrcode" id="weixin" v-show="!isShowFrom">
+					二维码
+				</div>
 			</div>
 		</div>
 	</div>
 </template>
 
 <script>
 import { mapMutations } from "vuex";
-import { reqGetSmsCode, reqLogin } from "@/request/api";
+import { reqBindPhone, reqGetSmsCode, reqLogin } from "@/request/api";
 export default {
 	data() {
 		return {
 			isShowFrom: true,
 			msg       : "请按住滑块，拖动对应位置",
 			//手机号
-			phoneNum  : "15918796216",
+			phoneNum  : "19183879605",
 			//验证码
 			codeText  : "获取验证码",
 			SMScode   : "156"
 		};
 	},
 	methods: {
-		...mapMutations({setIsShowLoginModal: "isShowLoginModal/setIsShowLoginModal"}),
+		...mapMutations({
+			setIsShowLoginModal: "isShowLoginModal/setIsShowLoginModal",
+			setIsShowCartModal : "loginStatus/setLoginStatus"
+		}),
 		close() {
 			this.setIsShowLoginModal(false);
 		},
@@ -97,6 +102,21 @@ export default {
 		},
 		// 提交登录
 		async submitLogin() {
+			let uuid = sessionStorage.getItem("loginUuid");
+			let res = null;
+			if (uuid) {
+				res = await reqBindPhone({
+					phone     : this.phoneNum.trim(),
+					verifyCode: this.SMScode.trim(),
+					uuid
+				});
+			}
+			else {
+				res = await reqLogin({
+					phone     : this.phoneNum.trim(),
+					verifyCode: this.SMScode.trim()
+				});
+			}
 			if (!this.verify()) {
 				return;
 			}
@@ -105,19 +125,20 @@ export default {
 				this.$message.error("请输入验证码");
 				return;
 			}
-			let res = await reqLogin({
-				verifyCode: this.SMScode.trim(),
-				phone     : this.phoneNum.trim()
-			});
-			console.log(res);
+
 			//登录成功
-			if (res.code === 0) {
-				this.$message.success("登录成功");
-				this.close();
-				sessionStorage.setItem("token", res["x-auth-token"]);
+			if (!res) {
+				return;
 			}
-			else {
-				this.$message.error(res.message);
+			console.log(res);
+			this.$message.success("登录成功");
+			this.close();
+			sessionStorage.setItem("token", res["x-auth-token"]);
+			this.setIsShowCartModal(true);
+			if (uuid) {
+				sessionStorage.removeItem("loginUuid");
+				//清除地址栏code
+				await this.$router.push("/home");
 			}
 		},
 		verify() {
@@ -149,18 +170,41 @@ export default {
 		},
 		// 获取验证码
 		async onGetCode() {
+			//防抖
 			if (!this.verify()) {
 				return;
 			}
 			//发送验证码
 			let res = await reqGetSmsCode({ phone: this.phoneNum.trim() });
-			if (res.code == 0 || res.code == 400) {
+			if (res.code === 0 || res.code === 400) {
 				this.countDown();
 				this.$message.success("验证码已发送");
 			}
 			else {
 				this.$message.error(res.msg);
 			}
+		},
+		// 微信登录
+		showWeinxinLogin() {
+			// 切换到展示二维码的界面
+			this.isShowFrom = false;
+			// 获取二维码
+			// 微信登录第一步：申请微信登录二维码
+			let _this = this;
+			new WxLogin({
+				id          : "weixin",
+				appid       : "wx67cfaf9e3ad31a0d", // 这个appid要填死
+				scope       : "snsapi_login",
+				// 扫码成功后重定向的接口
+				redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC",
+				// state填写编码后的url
+				state       : encodeURIComponent(
+					window.btoa("http://127.0.0.1:8080" + _this.$route.path)
+				),
+				// 调用样式文件
+				href:
+					"data:text/css;base64,Lyogd3hsb2dpbi5jc3MgKi8NCi5pbXBvd2VyQm94IC50aXRsZSwgLmltcG93ZXJCb3ggLmluZm97DQogIGRpc3BsYXk6IG5vbmU7DQp9DQoNCi5pbXBvd2VyQm94IC5xcmNvZGV7DQogIG1hcmdpbi10b3A6IDIwcHg7DQp9"
+			});
 		}
 	}
 };
@@ -307,4 +351,7 @@ export default {
 		}
 	}
 }
+.wx-qrcode {
+	margin-top: 100px;
+}
 </style>
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
@@ -29,19 +29,48 @@
 
 <script>
 import { mapMutations, mapState } from "vuex";
+import { reqQrcodeLogin } from "@/request/api";
 export default {
 	data() {
 		return { cartTotal: 0 };
 	},
 	name   : "TopBar",
 	methods: {
-		...mapMutations({setIsShowLoginModal: "isShowLoginModal/setIsShowLoginModal"}),
+		...mapMutations({
+			setIsShowLoginModal: "isShowLoginModal/setIsShowLoginModal",
+			setLoginStatus     : "loginStatus/setLoginStatus"
+		}),
 		login() {
 			// 触发登录弹窗
 			this.setIsShowLoginModal(true);
 		}
 	},
-	computed: {...mapState({isLogined: (state) => state.loginStatus.isLogined})}
+	computed: {...mapState({ isLogined: (state) => state.loginStatus.isLogined })},
+	created() {
+		setTimeout(async() => {
+			let loginCode = this.$route.query.code;
+			if (loginCode) {
+				const res = await reqQrcodeLogin({ code: loginCode });
+				console.log(res);
+				if (res.code === 0) {
+					this.$message.success("登录成功");
+					sessionStorage.setItem("token", res["x-auth-token"]);
+					this.setLoginStatus(true);
+					//清除地址栏code
+					await this.$router.push("/home");
+				}
+				else if (res.code === 400) {
+					this.$message.error(res.msg);
+					setIsShowLoginModal(true);
+				}
+				else if (res.code === 407) {
+					this.$message.warning("请使用手机号绑定登录微信");
+					sessionStorage.setItem("loginUuid", res.uuid);
+					setIsShowLoginModal(true);
+				}
+			}
+		}, 100);
+	}
 };
 </script>
 

diff --git a/src/request/api.js b/src/request/api.js
@@ -9,3 +9,9 @@ export const reqGetSmsCode = (params) => request.post("/sendSMS", qs.stringify(
 
 //登录
 export const reqLogin = (params) => request.post("/phoneRegin", qs.stringify( params ));
+
+//扫码登录
+export const reqQrcodeLogin = (params) => request.post("/wechatUsers/PCLogin", qs.stringify( params ));
+
+//绑定手机号
+export const reqBindPhone = (params) => request.post("/wechatUsers/binding", qs.stringify( params ));
diff --git a/src/router/routes.js b/src/router/routes.js
@@ -2,7 +2,7 @@ export default [
 	//重定向
 	{
 		path    : "/",
-		redirect: "Home"
+		redirect: "home"
 	},
 	//首页组件
 	{

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -197,7 +197,6 @@ export default {
 	comments: {},
 	async created() {
 		const { data: res } = await reqGetRecommended();
-		console.log(res);
 	}
 };
 </script>

diff --git a/vue.config.js b/vue.config.js
@@ -13,9 +13,8 @@ module.exports = {
 	// devServer: {
 	// 	proxy: {
 	// 		"/api": {
-	// 			target      : "http://gmall-h5-api.atguigu.cn", //代理转发路径
+	// 			target      : process.env.VUE_APP_BASE_URL, //代理转发路径
 	// 			pathRewrites: { "^/api": "" }, //匹配字符串
-	// 			ws          : true, //支持websocket
 	// 			changeOrigin: true //跨域
 	// 		}
 	// 	}