zenghuapei
/
cyywl_server
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化登陆界面，增加手机密码的登陆方式

pull/2/head
YunaiV 2021-11-25 09:58:14 +08:00
parent 55ee2fcad7
commit 07fe12483a
2 changed files with 117 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

223
yudao-vue-ui/pages/auth/login.vue
View File

@ -1,52 +1,58 @@
<template> <template>
<view class="app"> <view class="app">
<!-- 左下角的环 -->
<view class="left-bottom-sign"></view> <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="right-top-sign"></view>
<!-- 左上角的 x 关闭 -->
<view class="back-btn mix-icon icon-guanbi" @click="navBack"></view>
<!-- 用户协议 -->
<view class="agreement center"> <view class="agreement center">
<text class="mix-icon icon-xuanzhong" :class="{active: agreement}" @click="checkAgreement"></text> <text class="mix-icon icon-xuanzhong" :class="{active: agreement}" @click="checkAgreement"></text>
<text @click="checkAgreement">请认真阅读并同意</text> <text @click="checkAgreement">请认真阅读并同意</text>
<text class="tit" @click="navToAgreementDetail(1)">《用户服务协议》</text> <text class="title" @click="navToAgreementDetail(1)">《用户服务协议》</text>
<text class="tit" @click="navToAgreementDetail(2)">《隐私权政策》</text> <text class="title" @click="navToAgreementDetail(2)">《隐私权政策》</text>
</view> </view>
<!-- 登录表单 -->
<view class="wrapper"> <view class="wrapper">
<view class="left-top-sign">LOGIN</view> <view class="left-top-sign">LOGIN</view>
<view class="welcome"> <view class="welcome">手机登录/注册</view>
欢迎回来！ <!-- 手机验证码登录 -->
</view>
<view class="input-content"> <view class="input-content">
<view class="input-item"> <view class="input-item">
<text class="tit">手机号码</text> <text class="title">手机号码</text>
<view class="row"> <view class="row">
<input <input v-model="mobile" type="number" maxlength="11"
v-model="username" placeholder="请输入手机号码" placeholder-style="color: #909399"/>
type="number"
maxlength="11"
placeholder="请输入手机号码"
placeholder-style="color: #909399"
/>
</view> </view>
</view> </view>
<view class="input-item"> <!-- 判断使用验证码还是密码 -->
<text class="tit">验证码</text> <view class="input-item" v-if="loginType == 'code'">
<text class="title">验证码</text>
<view class="row"> <view class="row">
<input <input v-model="code" type="number" maxlength="6"
v-model="code" placeholder="请输入手机验证码" placeholder-style="color: #909399">
type="number" <mix-code :mobile="mobile" templateCode="SMS_194050994"></mix-code>
maxlength="6" </view>
placeholder="请输入手机验证码" </view>
placeholder-style="color: #909399" <view class="input-item" v-else>
/> <text class="title">密码</text>
<mix-code :mobile="username" templateCode="SMS_194050994"></mix-code> <view class="row">
<input v-model="password" type="password" maxlength="16"
placeholder="请输入密码" placeholder-style="color: #909399"/>
</view> </view>
</view> </view>
<mix-button ref="confirmBtn" text="立即登录" marginTop="60rpx" @onConfirm="login"></mix-button>
<!-- 切换登陆 -->
<view class="login-type" v-if="loginType == 'code'" @click="setLoginType('password')">账号密码登录</view>
<view class="login-type" v-else @click="setLoginType('code')">免密登录</view>
</view> </view>
<mix-button ref="confirmBtn" text="登录" marginTop="60rpx" @onConfirm="login"></mix-button>
<!-- 快捷登录 -->
<!-- #ifdef APP-PLUS || MP-WEIXIN --> <!-- #ifdef APP-PLUS || MP-WEIXIN -->
<view class="other-wrapper"> <view class="other-wrapper">
<view class="line center"> <view class="line center">
<text class="tit">快捷登录</text> <text class="title">快捷登录</text>
</view> </view>
<view class="list row"> <view class="list row">
<!-- #ifdef MP-WEIXIN --> <!-- #ifdef MP-WEIXIN -->
@ -56,10 +62,6 @@
<!-- #endif --> <!-- #endif -->
<!-- #ifdef APP-PLUS --> <!-- #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"> <view class="item column center" style="width: 180rpx;" @click="loginByWxApp">
<image class="icon" src="/static/icon/login-wx.png"></image> <image class="icon" src="/static/icon/login-wx.png"></image>
<text>微信登录</text> <text>微信登录</text>
@ -70,6 +72,7 @@
<!-- #endif --> <!-- #endif -->
</view> </view>
<!-- Loading 框 -->
<mix-loading v-if="isLoading"></mix-loading> <mix-loading v-if="isLoading"></mix-loading>
</view> </view>
</template> </template>
@ -78,58 +81,63 @@
import {checkStr} from '@/common/js/util' import {checkStr} from '@/common/js/util'
import loginMpWx from './mixin/login-mp-wx.js' import loginMpWx from './mixin/login-mp-wx.js'
import loginAppWx from './mixin/login-app-wx.js' import loginAppWx from './mixin/login-app-wx.js'
import loginApple from './mixin/login-apple.js'
export default{ export default{
mixins: [loginMpWx, loginAppWx, loginApple], mixins: [loginMpWx, loginAppWx],
data(){ data(){
return { return {
canUseAppleLogin: false, loginType: 'code', // 登录方式，code 验证码；password 密码
agreement: true, mobile: '',
username: '',
code: '', code: '',
password: '',
agreement: true,
} }
}, },
onLoad() { onLoad() {
console.log(1);
}, },
methods: { methods: {
loginSuccessCallBack(data){ loginSuccessCallBack(data){
this.$util.msg('登陆成功'); this.$util.msg('登录成功');
this.$store.commit('setToken', data); this.$store.commit('setToken', data);
setTimeout(()=>{ setTimeout(()=>{
uni.navigateBack(); uni.navigateBack();
}, 1000) }, 1000)
}, },
//手机号登录 // 手机号登录
async login(){ async login(){
if(!this.agreement){ // 参数校验
if (!this.agreement){
this.$util.msg('请阅读并同意用户服务及隐私协议'); this.$util.msg('请阅读并同意用户服务及隐私协议');
this.$refs.confirmBtn.stop(); this.$refs.confirmBtn.stop();
return; return;
} }
const {username, code} = this; const {mobile, code, password} = this;
if(!checkStr(username, 'mobile')){ if (!checkStr(mobile, 'mobile')){
this.$util.msg('请输入正确的手机号码'); this.$util.msg('请输入正确的手机号码');
this.$refs.confirmBtn.stop(); this.$refs.confirmBtn.stop();
return; return;
} }
if(!checkStr(code, 'mobileCode')){ if (!checkStr(code, 'mobileCode')) {
this.$util.msg('验证码错误'); this.$util.msg('验证码错误');
this.$refs.confirmBtn.stop(); this.$refs.confirmBtn.stop();
return; return;
} }
const res = await this.$request('user', 'login', {username,code});
// 执行登陆
const res = await this.$request('user', 'login', {mobile,code});
this.$refs.confirmBtn.stop(); this.$refs.confirmBtn.stop();
if(res.status === 1){ if (res.status === 1){
this.loginSuccessCallBack(res.data); this.loginSuccessCallBack(res.data);
}else{ } else{
this.$util.msg(res.msg); this.$util.msg(res.msg);
} }
}, },
navBack(){ navBack(){
uni.navigateBack(); uni.navigateBack();
}, },
setLoginType(loginType) {
this.loginType = loginType;
},
//同意协议 //同意协议
checkAgreement(){ checkAgreement(){
this.agreement = !this.agreement; this.agreement = !this.agreement;
@ -154,7 +162,7 @@
} }
</style> </style>
<style scoped lang='scss'> <style scoped lang='scss'>
.app{ .app {
padding-top: 15vh; padding-top: 15vh;
position:relative; position:relative;
width: 100vw; width: 100vw;
@ -162,12 +170,20 @@
overflow: hidden; overflow: hidden;
background: #fff; background: #fff;
} }
.wrapper{ .wrapper {
position:relative; position:relative;
z-index: 90; z-index: 90;
padding-bottom: 40rpx; padding-bottom: 40rpx;
.welcome {
position:relative;
left: 50rpx;
top: -90rpx;
font-size: 46rpx;
color: #555;
text-shadow: 1px 0px 1px rgba(0,0,0,.3);
}
} }
.back-btn{ .back-btn {
position:absolute; position:absolute;
left: 20rpx; left: 20rpx;
top: calc(var(--status-bar-height) + 20rpx); top: calc(var(--status-bar-height) + 20rpx);
@ -176,18 +192,25 @@
font-size: 32rpx; font-size: 32rpx;
color: #606266; color: #606266;
} }
.left-top-sign{ .left-top-sign {
font-size: 120rpx; font-size: 120rpx;
color: #f8f8f8; color: #f8f8f8;
position:relative; position:relative;
left: -12rpx; left: -12rpx;
} }
.right-top-sign{ .left-bottom-sign {
position: absolute;
left: -270rpx;
bottom: -320rpx;
border: 100rpx solid #d0d1fd;
border-radius: 50%;
padding: 180rpx;
}
.right-top-sign {
position:absolute; position:absolute;
top: 80rpx; top: 80rpx;
right: -30rpx; right: -30rpx;
z-index: 95; z-index: 95;
&:before, &:after{ &:before, &:after{
display:block; display:block;
content:""; content:"";
@ -207,56 +230,49 @@
border-top-left-radius: 50px; border-top-left-radius: 50px;
} }
} }
.left-bottom-sign{
position:absolute; /** 手机登录部分 */
left: -270rpx; .input-content {
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; 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%;
}
.title{
height: 50rpx;
line-height: 56rpx;
font-size: 26rpx;
color: #606266;
}
input {
flex: 1;
height: 60rpx;
font-size: 30rpx;
color: #303133;
width: 100%;
}
}
.login-type {
display: flex;
justify-content: flex-end;
font-size: 13px;
color: #40a2ff;
margin-top: 20rpx;
}
} }
.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{ .other-wrapper{
display: flex; display: flex;
@ -264,11 +280,9 @@
align-items: center; align-items: center;
padding-top: 20rpx; padding-top: 20rpx;
margin-top: 80rpx; margin-top: 80rpx;
.line{ .line{
margin-bottom: 40rpx; margin-bottom: 40rpx;
.title {
.tit{
margin: 0 32rpx; margin: 0 32rpx;
font-size: 24rpx; font-size: 24rpx;
color: #606266; color: #606266;
@ -285,7 +299,6 @@
color: #606266; color: #606266;
background-color: #fff; background-color: #fff;
border: 0; border: 0;
&:after{ &:after{
border: 0; border: 0;
} }
@ -305,18 +318,16 @@
height: 90rpx; height: 90rpx;
font-size: 24rpx; font-size: 24rpx;
color: #999; color: #999;
.mix-icon{ .mix-icon{
font-size: 36rpx; font-size: 36rpx;
color: #ccc; color: #ccc;
margin-right: 8rpx; margin-right: 8rpx;
margin-top: 1px; margin-top: 1px;
&.active{ &.active{
color: $base-color; color: $base-color;
} }
} }
.tit{ .title {
color: #40a2ff; color: #40a2ff;
} }
} }

83
yudao-vue-ui/pages/auth/mixin/login-apple.js
View File

@ -1,83 +0,0 @@
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);
})
})
}
}
}