feat: 基于 @xiaochangbai 老哥的代码进行了一点样式优化
看到老哥有引入其他的qr插件，在项目里面本身自带了一个，稍微改了一下部分样式 https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp/pulls/3master
lemon橪
parent
1e9df74034
commit
d8cca8b372
17
api/login.js
17
api/login.js
|
|
@ -91,3 +91,20 @@ export function logout () {
|
|||
needToken: true,
|
||||
})
|
||||
}
|
||||
|
||||
export function scannerCodeLogin(params){
|
||||
return http.request({
|
||||
url: '/passport/member/app_scanner',
|
||||
method: "POST",
|
||||
params,
|
||||
needToken: true,
|
||||
});
|
||||
}
|
||||
export function scannerCodeLoginConfirm(params){
|
||||
return http.request({
|
||||
url: '/passport/member/app_confirm',
|
||||
method: "POST",
|
||||
params,
|
||||
needToken: true,
|
||||
});
|
||||
}
|
||||
|
|
|
|||
10
pages.json
10
pages.json
|
|
@ -244,6 +244,8 @@
|
|||
"navigationBarTitleText": "面容登录"
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
"path": "set/securityCenter/editPassword",
|
||||
"style": {
|
||||
|
|
@ -455,6 +457,14 @@
|
|||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "scannerCodeLoginConfirm",
|
||||
"style": {
|
||||
"navigationBarTitleText": "扫码登录",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,164 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<u-navbar title="扫码登录授权"></u-navbar>
|
||||
<view class="wx-auth-container">
|
||||
<div class="box">
|
||||
<!-- <div v-if="!errorMsg"> -->
|
||||
<div>
|
||||
<view class="small-tips flex flex-center">
|
||||
<u-image
|
||||
width="400rpx"
|
||||
height="300rpx"
|
||||
src="https://lili-system.oss-cn-beijing.aliyuncs.com/confirm.png"
|
||||
></u-image>
|
||||
<div>电脑端登录确认</div>
|
||||
<div>为确保帐号安全，请确认是您本人操作</div>
|
||||
</view>
|
||||
|
||||
<view class="btns">
|
||||
<button @click="confirmLogin()" class="btn-auth">确认登录</button>
|
||||
<div @click="cancelLogin()" class="btn-callback">取消登录</div>
|
||||
</view>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { scannerCodeLogin, scannerCodeLoginConfirm } from "@/api/login";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
errorMsg: "",
|
||||
token: "",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
errorMsg(val) {
|
||||
if (val) {
|
||||
uni.showToast({
|
||||
title: val,
|
||||
icon: "none",
|
||||
});
|
||||
// uni.navigateBack()
|
||||
}
|
||||
},
|
||||
},
|
||||
onShow() {
|
||||
this.$options.filters.forceLogin();
|
||||
scannerCodeLogin({ token: this.token }).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
let code = res.data.result;
|
||||
switch (code) {
|
||||
case 0:
|
||||
case 1:
|
||||
this.errorMsg = "";
|
||||
break;
|
||||
case 2:
|
||||
case 3:
|
||||
this.errorMsg = "请勿重复扫码";
|
||||
break;
|
||||
case 4:
|
||||
this.errorMsg = "二维码已过期，重新扫码";
|
||||
break;
|
||||
default:
|
||||
this.errorMsg = "状态异常";
|
||||
}
|
||||
} else {
|
||||
this.errorMsg = res.data.message;
|
||||
}
|
||||
});
|
||||
},
|
||||
onLoad(params) {
|
||||
this.token = params.token;
|
||||
if (this.token == undefined || this.token == "") {
|
||||
this.errorMsg = "信息异常";
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confirmLogin() {
|
||||
this.config(1);
|
||||
},
|
||||
cancelLogin() {
|
||||
this.config(0);
|
||||
},
|
||||
config(code) {
|
||||
scannerCodeLoginConfirm({ token: this.token, code: code }).then((res) => {
|
||||
let title = res.data.success ? "操作成功" : "操作失败";
|
||||
uni.showToast({
|
||||
title: title,
|
||||
duration: 1500,
|
||||
icon: "none",
|
||||
});
|
||||
setTimeout(function () {
|
||||
uni.navigateBack();
|
||||
}, 1000);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
background-color: #fff;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.wx-auth-container {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
margin-top: 20%;
|
||||
}
|
||||
text.title,
|
||||
text.shop {
|
||||
display: inline-block;
|
||||
font-size: 60rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin: 0 32rpx;
|
||||
}
|
||||
|
||||
/* 文字提示*/
|
||||
.small-tips {
|
||||
width: 100%;
|
||||
|
||||
padding: 20rpx;
|
||||
font-size: 29rpx;
|
||||
margin: 0 0 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.btn-auth {
|
||||
width: 92%;
|
||||
background: $main-color;
|
||||
color: #fff;
|
||||
margin: 0 auto 40rpx;
|
||||
border-radius: 100px;
|
||||
}
|
||||
.btn-callback {
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
background: #ededed;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
border-radius: 100px;
|
||||
width: 92%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.btns {
|
||||
margin-top: 100rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -147,6 +147,18 @@ export default {
|
|||
success: function (res) {
|
||||
let path = encodeURIComponent(res.result);
|
||||
|
||||
|
||||
|
||||
if(path!=undefined && path.indexOf("QR_CODE_LOGIN_SESSION")==0){
|
||||
console.log(path)
|
||||
//app扫码登录
|
||||
uni.navigateTo({
|
||||
url:"/pages/passport/scannerCodeLoginConfirm?token="+path
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// WX_CODE 为小程序码
|
||||
if (res.scanType == "WX_CODE") {
|
||||
console.log(res);
|
||||
|
|
|
|||
Loading…
Reference in New Issue