From 23e456d26591fe1ede60988f2501fc2e401dfa05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?lemon=E6=A9=AA?= <17633066053@163.com> Date: Fri, 16 Sep 2022 16:37:38 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9F=BA=E4=BA=8E=20@xiaochangbai=20?= =?UTF-8?q?=E8=80=81=E5=93=A5=E7=9A=84=E4=BB=A3=E7=A0=81=E8=BF=9B=E8=A1=8C?= =?UTF-8?q?=E4=BA=86=E4=B8=80=E7=82=B9=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 看到老哥有引入其他的qr插件，在项目里面本身自带了一个，稍微改了一下部分样式 https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp/pulls/3 --- buyer/src/api/login.js | 17 + buyer/src/pages/Login.vue | 362 +++++++++++++----- .../pages/home/memberCenter/Distribution.vue | 1 + 3 files changed, 277 insertions(+), 103 deletions(-) diff --git a/buyer/src/api/login.js b/buyer/src/api/login.js index 6d61f91d..5ad6d9a5 100644 --- a/buyer/src/api/login.js +++ b/buyer/src/api/login.js @@ -92,3 +92,20 @@ export function resetPassword (params) { params }); } + +export function getSCLoginCode(params) { + return request({ + url: `/buyer/passport/member/pc_session`, + method: Method.POST, + needToken: false, + params + }); +} +export function sCLogin(token,params) { + return request({ + url: `/buyer/passport/member/session_login/`+token, + method: Method.POST, + needToken: false, + params + }); +} diff --git a/buyer/src/pages/Login.vue b/buyer/src/pages/Login.vue index 7a556a26..9c2b5238 100644 --- a/buyer/src/pages/Login.vue +++ b/buyer/src/pages/Login.vue @@ -21,69 +21,113 @@
- {{type?'账号登录':'验证码登录'}} - {{type?'验证码登录':'账号登录'}} + {{ type ? '账号登录' : '验证码登录' }} + {{ type ? '验证码登录' : '账号登录' }}
-
立即注册
+ +
{{!scannerCodeLoginFLag ? '扫码登录' : '返回'}}
- -
- - - - - - - - - - - - - -
- -
- - - - - - - - - - - - - - - - - -
-
- 忘记密码 -
-
- - - - - - + +
+
+ +
+
+ +
+

打开手机App/小程序，扫码登录

+
+ +
+

扫码成功，等待确认

+
+ +
+

登录成功，正在页面跳转

+
+ + +
+

取消登录

+
+
+
+ +
+
+ +
+ + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + +
+
+
+ +
+ 还没有账号？点击立即注册 + 忘记密码 +
+
+ +
@@ -108,18 +152,26 @@ import * as RegExp from "@/plugins/RegExp.js"; import { md5 } from "@/plugins/md5.js"; import * as apiLogin from "@/api/login.js"; import { sendSms } from "@/api/common.js"; -import { webLogin, loginCallback } from "@/api/login.js"; +import { webLogin, loginCallback,sCLogin,getSCLoginCode} from "@/api/login.js"; import storage from "@/plugins/storage.js"; import verify from "@/components/verify"; +import vueQr from "vue-qr"; export default { name: "Login", components: { verify, + vueQr }, data() { return { - config:require('@/config'), + qrCode: '', + qrSessionToken:'', + //是否是二维码登录 + scannerCodeLoginFLag: false, + scannerCodeLoginStatus: 0, + qrCodeTimer:null, + config: require('@/config'), type: true, // true 账号登录 false 验证码登录 formData: { // 登录表单 @@ -134,19 +186,19 @@ export default { verifyStatus: false, // 是否图片验证通过 ruleInline: { // 验证规则 - username: [{ required: true, message: "请输入用户名" }], + username: [{required: true, message: "请输入用户名"}], password: [ - { required: true, message: "请输入密码" }, - { type: "string", min: 6, message: "密码不能少于6位" }, + {required: true, message: "请输入密码"}, + {type: "string", min: 6, message: "密码不能少于6位"}, ], mobile: [ - { required: true, message: "请输入手机号码" }, + {required: true, message: "请输入手机号码"}, { pattern: RegExp.mobile, message: "请输入正确的手机号", }, ], - code: [{ required: true, message: "请输入手机验证码" }], + code: [{required: true, message: "请输入手机验证码"}], }, codeMsg: "发送验证码", // 验证码文字 interval: null, // 定时器 @@ -154,7 +206,14 @@ export default { year: new Date().getFullYear(), }; }, + watch:{ + + scannerCodeLoginFLag(val){ + !val ? this.clearInterval() : '' + } + }, methods: { + // 登录 handleSubmit(name) { this.$refs[name].validate((valid) => { @@ -241,24 +300,7 @@ export default { .login(data) .then((res) => { if (res.success) { - this.$Message.success("登录成功"); - storage.setItem("accessToken", res.result.accessToken); - storage.setItem("refreshToken", res.result.refreshToken); - apiLogin.getMemberMsg().then((res) => { - this.$Spin.hide(); - if (res.success) { - storage.setItem("userInfo", res.result); - let query = this.$route.query; - if (query.rePath) { - this.$router.push({ - path: query.rePath, - query: JSON.parse(query.query), - }); - } else { - this.$router.push("/"); - } - } - }); + this.loginSuccess(res.result.accessToken,res.result.refreshToken); } else { this.$Spin.hide(); this.$Message.error(res.message); @@ -282,6 +324,87 @@ export default { // 第三方登录 webLogin(type); }, + loginSuccess(accessToken,refreshToken){ + this.$Message.success("登录成功"); + storage.setItem("accessToken", accessToken); + storage.setItem("refreshToken", refreshToken); + apiLogin.getMemberMsg().then((res) => { + this.$Spin.hide(); + if (res.success) { + storage.setItem("userInfo", res.result); + let query = this.$route.query; + if (query.rePath) { + this.$router.push({ + path: query.rePath, + query: JSON.parse(query.query), + }); + } else { + this.$router.push("/"); + } + } + }); + }, + + async createPCLoginSession() { + getSCLoginCode({}).then(response=>{ + this.clearQRLoginInfo(); + if (response.code == 200) { + let session = response.result; + this.qrSessionToken = session.token; + if (session.status === 0) { + this.qrCode = session.token; + this.refreshQrCode(); + } + this.qrLogin(); + + } + }); + }, + + async refreshQrCode() { + if (!this.qrCodeTimer) { + this.qrCodeTimer = setInterval(() => { + this.createPCLoginSession(); + }, 21 * 1000); + } + }, + + clearQRLoginInfo(){ + this.scannerCodeLoginStatus=0; + this.qrSessionToken=''; + if (this.qrCodeTimer) { + clearInterval(this.qrCodeTimer) + } + this.qrCodeTimer= null; + }, + + async qrLogin() { + if(!this.qrSessionToken) return; + sCLogin(this.qrSessionToken,{beforeSessionStatus:this.scannerCodeLoginStatus}).then(response=>{ + if (response.success) { + this.scannerCodeLoginStatus = response.result.status; + switch (response.result.status) { + case 0: + case 1: + this.qrLogin();break; + case 2: + this.loginSuccess(response.result.token.accessToken,response.result.token.refreshToken); + break; + case 3: + this.createPCLoginSession(); + break; + default: + this.clearQRLoginInfo(); + break + } + } else{ + this.clearQRLoginInfo(); + } + }); + }, + }, + destroyed() { + this.clearQRLoginInfo(); }, mounted() { let uuid = this.$route.query.state; @@ -289,28 +412,21 @@ export default { storage.setItem("uuid", uuid); loginCallback(uuid).then((res) => { if (res.success) { - const result = res.result; - storage.setItem("accessToken", result.accessToken); - storage.setItem("refreshToken", result.refreshToken); - apiLogin.getMemberMsg().then((res) => { - if (res.success) { - storage.setItem("userInfo", res.result); - let query = this.$route.query; - if (query.rePath) { - this.$router.push({ - path: query.rePath, - query: JSON.parse(query.query), - }); - } else { - this.$router.push("/"); - } - } - }); + this.loginSuccess(result.accessToken,result.refreshToken); } }); } }, watch: { + scannerCodeLoginFLag(v){ + if(v){ + this.createPCLoginSession(); + console.log("二维码登录"); + }else{ + console.log("取消二维码登录"); + this.clearQRLoginInfo(); + } + }, type(v) { if (v) { this.$refs.formInline.resetFields(); @@ -327,10 +443,22 @@ export default { };