增加登陆界面

This commit is contained in:
YunaiV
2021-11-25 07:57:23 +08:00
parent d12912080e
commit 55ee2fcad7
11 changed files with 1086 additions and 2 deletions

View File

@ -0,0 +1,323 @@
<template>
<view class="app">
<view class="left-bottom-sign"></view>
<view class="back-btn mix-icon icon-guanbi" @click="navBack"></view>
<view class="right-top-sign"></view>
<view class="agreement center">
<text class="mix-icon icon-xuanzhong" :class="{active: agreement}" @click="checkAgreement"></text>
<text @click="checkAgreement">请认真阅读并同意</text>
<text class="tit" @click="navToAgreementDetail(1)">用户服务协议</text>
<text class="tit" @click="navToAgreementDetail(2)">隐私权政策</text>
</view>
<view class="wrapper">
<view class="left-top-sign">LOGIN</view>
<view class="welcome">
欢迎回来
</view>
<view class="input-content">
<view class="input-item">
<text class="tit">手机号码</text>
<view class="row">
<input
v-model="username"
type="number"
maxlength="11"
placeholder="请输入手机号码"
placeholder-style="color: #909399"
/>
</view>
</view>
<view class="input-item">
<text class="tit">验证码</text>
<view class="row">
<input
v-model="code"
type="number"
maxlength="6"
placeholder="请输入手机验证码"
placeholder-style="color: #909399"
/>
<mix-code :mobile="username" templateCode="SMS_194050994"></mix-code>
</view>
</view>
</view>
<mix-button ref="confirmBtn" text="登录" marginTop="60rpx" @onConfirm="login"></mix-button>
<!-- #ifdef APP-PLUS || MP-WEIXIN -->
<view class="other-wrapper">
<view class="line center">
<text class="tit">快捷登录</text>
</view>
<view class="list row">
<!-- #ifdef MP-WEIXIN -->
<view class="item column center" @click="mpWxGetUserInfo">
<image class="icon" src="/static/icon/login-wx.png"></image>
</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view v-if="canUseAppleLogin && false" class="item column center" style="width: 180rpx;" @click="loginByApple">
<image class="icon" src="/static/icon/apple.png"></image>
<text>Apple登录</text>
</view>
<view class="item column center" style="width: 180rpx;" @click="loginByWxApp">
<image class="icon" src="/static/icon/login-wx.png"></image>
<text>微信登录</text>
</view>
<!-- #endif -->
</view>
</view>
<!-- #endif -->
</view>
<mix-loading v-if="isLoading"></mix-loading>
</view>
</template>
<script>
import {checkStr} from '@/common/js/util'
import loginMpWx from './mixin/login-mp-wx.js'
import loginAppWx from './mixin/login-app-wx.js'
import loginApple from './mixin/login-apple.js'
export default{
mixins: [loginMpWx, loginAppWx, loginApple],
data(){
return {
canUseAppleLogin: false,
agreement: true,
username: '',
code: '',
}
},
onLoad() {
console.log(1);
},
methods: {
loginSuccessCallBack(data){
this.$util.msg('登陆成功');
this.$store.commit('setToken', data);
setTimeout(()=>{
uni.navigateBack();
}, 1000)
},
//手机号登录
async login(){
if(!this.agreement){
this.$util.msg('请阅读并同意用户服务及隐私协议');
this.$refs.confirmBtn.stop();
return;
}
const {username, code} = this;
if(!checkStr(username, 'mobile')){
this.$util.msg('请输入正确的手机号码');
this.$refs.confirmBtn.stop();
return;
}
if(!checkStr(code, 'mobileCode')){
this.$util.msg('验证码错误');
this.$refs.confirmBtn.stop();
return;
}
const res = await this.$request('user', 'login', {username,code});
this.$refs.confirmBtn.stop();
if(res.status === 1){
this.loginSuccessCallBack(res.data);
}else{
this.$util.msg(res.msg);
}
},
navBack(){
uni.navigateBack();
},
//同意协议
checkAgreement(){
this.agreement = !this.agreement;
},
//打开协议
navToAgreementDetail(type){
this.navTo('/pages/public/article?param=' + JSON.stringify({
module: 'article',
operation: 'getAgreement',
data: {
type
}
}))
},
}
}
</script>
<style>
page{
background: #fff;
}
</style>
<style scoped lang='scss'>
.app{
padding-top: 15vh;
position:relative;
width: 100vw;
height: 100vh;
overflow: hidden;
background: #fff;
}
.wrapper{
position:relative;
z-index: 90;
padding-bottom: 40rpx;
}
.back-btn{
position:absolute;
left: 20rpx;
top: calc(var(--status-bar-height) + 20rpx);
z-index: 90;
padding: 20rpx;
font-size: 32rpx;
color: #606266;
}
.left-top-sign{
font-size: 120rpx;
color: #f8f8f8;
position:relative;
left: -12rpx;
}
.right-top-sign{
position:absolute;
top: 80rpx;
right: -30rpx;
z-index: 95;
&:before, &:after{
display:block;
content:"";
width: 400rpx;
height: 80rpx;
background: #b4f3e2;
}
&:before{
transform: rotate(50deg);
border-top-right-radius: 50px;
}
&:after{
position: absolute;
right: -198rpx;
top: 0;
transform: rotate(-50deg);
border-top-left-radius: 50px;
}
}
.left-bottom-sign{
position:absolute;
left: -270rpx;
bottom: -320rpx;
border: 100rpx solid #d0d1fd;
border-radius: 50%;
padding: 180rpx;
}
.welcome{
position:relative;
left: 50rpx;
top: -90rpx;
font-size: 46rpx;
color: #555;
text-shadow: 1px 0px 1px rgba(0,0,0,.3);
}
.input-content{
padding: 0 60rpx;
}
.input-item{
display:flex;
flex-direction: column;
align-items:flex-start;
justify-content: center;
padding: 0 30rpx;
background: #f8f6fc;
height: 120rpx;
border-radius: 4px;
margin-bottom: 50rpx;
&:last-child{
margin-bottom: 0;
}
.row{
width: 100%;
}
.tit{
height: 50rpx;
line-height: 56rpx;
font-size: 26rpx;
color: #606266;
}
input{
flex: 1;
height: 60rpx;
font-size: 30rpx;
color: #303133;
width: 100%;
}
}
/* 其他登录方式 */
.other-wrapper{
display: flex;
flex-direction: column;
align-items: center;
padding-top: 20rpx;
margin-top: 80rpx;
.line{
margin-bottom: 40rpx;
.tit{
margin: 0 32rpx;
font-size: 24rpx;
color: #606266;
}
&:before, &:after{
content: '';
width: 160rpx;
height: 0;
border-top: 1px solid #e0e0e0;
}
}
.item{
font-size: 24rpx;
color: #606266;
background-color: #fff;
border: 0;
&:after{
border: 0;
}
}
.icon{
width: 90rpx;
height: 90rpx;
margin: 0 24rpx 16rpx;
}
}
.agreement{
position: absolute;
left: 0;
bottom: 6vh;
z-index: 1;
width: 750rpx;
height: 90rpx;
font-size: 24rpx;
color: #999;
.mix-icon{
font-size: 36rpx;
color: #ccc;
margin-right: 8rpx;
margin-top: 1px;
&.active{
color: $base-color;
}
}
.tit{
color: #40a2ff;
}
}
</style>

View File

@ -0,0 +1,73 @@
export default{
// #ifdef APP-PLUS
methods: {
/**
* 微信App登录
* "openId": "o0yywwGWxtBCvBuE8vH4Naof0cqU",
* "nickName": "S .",
* "gender": 1,
* "city": "临沂",
* "province": "山东",
* "country": "中国",
* "avatarUrl": "http://thirdwx.qlogo.cn/mmopen/vi_32/xqpCtHRBBmdlf201Fykhtx7P7JcicIbgV3Weic1oOvN6iaR3tEbuu74f2fkKQWXvzK3VDgNTZzgf0g8FqPvq8LCNQ/132",
* "unionId": "oYqy4wmMcs78x9P-tsyMeM3MQ1PU"
*/
loginByWxApp(userInfoData){
if(!this.agreement){
this.$util.msg('请阅读并同意用户服务及隐私协议');
return;
}
this.$util.throttle(async ()=>{
let [err, res] = await uni.login({
provider: 'weixin'
})
if(err){
console.log(err);
return;
}
uni.getUserInfo({
provider: 'weixin',
success: async res=>{
const response = await this.$request('user', 'loginByWeixin', {
userInfo: res.userInfo,
}, {
showLoading: true
});
if(response.status === 0){
this.$util.msg(response.msg);
return;
}
if(response.hasBindMobile && response.data.token){
this.loginSuccessCallBack({
token: response.data.token,
tokenExpired: response.data.tokenExpired
});
}else{
this.navTo('/pages/auth/bindMobile?data='+JSON.stringify(response.data))
}
plus.oauth.getServices(oauthRes=>{
oauthRes[0].logout(logoutRes => {
console.log(logoutRes);
}, error => {
console.log(error);
})
})
},
fail(err) {
console.log(err);
}
})
})
}
}
// #endif
}

View File

@ -0,0 +1,83 @@
export default{
onLoad() {
if(this.systemInfo.platform !== 'ios'){
return;
}
const systemVersion = +this.systemInfo.system.split('.')[0];
if(systemVersion >= 13){
this.canUseAppleLogin = true;
}
},
methods: {
//苹果登录
async loginByApple(){
/* if(!this.canUseAppleLogin){
this.$util.msg('系统版本过低,无法使用苹果登录');
return;
} */
if(!this.agreement){
this.$util.msg('请阅读并同意用户服务及隐私协议');
this.$refs.confirmBtn.stop();
return;
}
uni.login({
provider: 'apple',
success: loginRes=> {
// 登录成功
uni.getUserInfo({
provider: 'apple',
success: async userRes=> {
console.log(userRes);
const response = await this.$request('user', 'loginByApple', {
authorizationCode: userRes.userInfo.authorizationCode,
identityToken: userRes.userInfo.identityToken
}, {
showLoading: true
});
console.log(response);
//注销苹果登录
this.appleLogout();
console.log(response);
if(response.status === 0){
this.$util.msg(response.msg);
return;
}
if(response.hasBindMobile && response.data.token){
this.loginSuccessCallBack({
token: response.data.token,
tokenExpired: response.data.tokenExpired
});
}else{
this.navTo('/pages/auth/bindMobile?type=apple&data='+JSON.stringify(response.data))
}
}
})
},
fail: err=> {
console.log(err);
this.$util.msg('登录失败');
this.appleLogout();
}
})
},
appleLogout(){
plus.oauth.getServices(oauthRes=>{
const oIndex = oauthRes.findIndex(oItem=> oItem.id === 'apple');
oauthRes[oIndex].logout(loRes => {
console.log('appleLogout success=> ', loRes);
}, loErr => {
console.log('appleLogout error=> ', loErr);
})
})
}
}
}

View File

@ -0,0 +1,81 @@
export default{
// #ifdef MP-WEIXIN
data(){
return {
mpCodeTimer: 0,
mpWxCode: '',
}
},
computed: {
timerIdent(){
return this.$store.state.timerIdent;
}
},
watch: {
timerIdent(){
this.mpCodeTimer ++;
if(this.mpCodeTimer % 30 === 0){
this.getMpWxCode();
}
}
},
onShow(){
this.getMpWxCode();
},
methods: {
//微信小程序登录
mpWxGetUserInfo(){
if(!this.agreement){
this.$util.msg('请阅读并同意用户服务及隐私协议');
return;
}
this.$util.throttle(()=>{
uni.getUserProfile({
desc: '用于展示您的头像及昵称',
success: async profileRes=> {
const res = await this.$request('user', 'loginByWeixin', {
code: this.mpWxCode,
...profileRes.userInfo
}, {
showLoading: true
});
if(res.status === 0){
this.$util.msg(res.msg);
return;
}
if(res.hasBindMobile && res.data.token){
this.loginSuccessCallBack({
token: res.data.token,
tokenExpired: res.data.tokenExpired
});
}else{
this.navTo('/pages/auth/bindMobile?data='+JSON.stringify(res.data))
}
console.log(res)
}
})
})
},
//获取code
getMpWxCode(){
uni.login({
provider: 'weixin',
success: res=> {
this.mpWxCode = res.code;
}
})
},
}
// #endif
}