优化登陆界面，增加手机密码的登陆方式
YunaiV
parent
55ee2fcad7
commit
07fe12483a
|
|
@ -1,52 +1,58 @@
|
|||
<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>
|
||||
<!-- 左上角的 x 关闭 -->
|
||||
<view class="back-btn mix-icon icon-guanbi" @click="navBack"></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>
|
||||
<text class="title" @click="navToAgreementDetail(1)">《用户服务协议》</text>
|
||||
<text class="title" @click="navToAgreementDetail(2)">《隐私权政策》</text>
|
||||
</view>
|
||||
<!-- 登录表单 -->
|
||||
<view class="wrapper">
|
||||
<view class="left-top-sign">LOGIN</view>
|
||||
<view class="welcome">
|
||||
欢迎回来！
|
||||
</view>
|
||||
<view class="welcome">手机登录/注册</view>
|
||||
<!-- 手机验证码登录 -->
|
||||
<view class="input-content">
|
||||
<view class="input-item">
|
||||
<text class="tit">手机号码</text>
|
||||
<text class="title">手机号码</text>
|
||||
<view class="row">
|
||||
<input
|
||||
v-model="username"
|
||||
type="number"
|
||||
maxlength="11"
|
||||
placeholder="请输入手机号码"
|
||||
placeholder-style="color: #909399"
|
||||
/>
|
||||
<input v-model="mobile" type="number" maxlength="11"
|
||||
placeholder="请输入手机号码" placeholder-style="color: #909399"/>
|
||||
</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">
|
||||
<input
|
||||
v-model="code"
|
||||
type="number"
|
||||
maxlength="6"
|
||||
placeholder="请输入手机验证码"
|
||||
placeholder-style="color: #909399"
|
||||
/>
|
||||
<mix-code :mobile="username" templateCode="SMS_194050994"></mix-code>
|
||||
<input v-model="code" type="number" maxlength="6"
|
||||
placeholder="请输入手机验证码" placeholder-style="color: #909399">
|
||||
<mix-code :mobile="mobile" templateCode="SMS_194050994"></mix-code>
|
||||
</view>
|
||||
</view>
|
||||
<view class="input-item" v-else>
|
||||
<text class="title">密码</text>
|
||||
<view class="row">
|
||||
<input v-model="password" type="password" maxlength="16"
|
||||
placeholder="请输入密码" placeholder-style="color: #909399"/>
|
||||
</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>
|
||||
<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>
|
||||
<text class="title">快捷登录</text>
|
||||
</view>
|
||||
<view class="list row">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
|
|
@ -56,10 +62,6 @@
|
|||
<!-- #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>
|
||||
|
|
@ -70,6 +72,7 @@
|
|||
<!-- #endif -->
|
||||
</view>
|
||||
|
||||
<!-- Loading 框 -->
|
||||
<mix-loading v-if="isLoading"></mix-loading>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -78,23 +81,22 @@
|
|||
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],
|
||||
mixins: [loginMpWx, loginAppWx],
|
||||
data(){
|
||||
return {
|
||||
canUseAppleLogin: false,
|
||||
agreement: true,
|
||||
username: '',
|
||||
loginType: 'code', // 登录方式，code 验证码；password 密码
|
||||
mobile: '',
|
||||
code: '',
|
||||
password: '',
|
||||
agreement: true,
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
console.log(1);
|
||||
},
|
||||
methods: {
|
||||
loginSuccessCallBack(data){
|
||||
this.$util.msg('登陆成功');
|
||||
this.$util.msg('登录成功');
|
||||
this.$store.commit('setToken', data);
|
||||
setTimeout(()=>{
|
||||
uni.navigateBack();
|
||||
|
|
@ -102,13 +104,14 @@
|
|||
},
|
||||
// 手机号登录
|
||||
async login(){
|
||||
// 参数校验
|
||||
if (!this.agreement){
|
||||
this.$util.msg('请阅读并同意用户服务及隐私协议');
|
||||
this.$refs.confirmBtn.stop();
|
||||
return;
|
||||
}
|
||||
const {username, code} = this;
|
||||
if(!checkStr(username, 'mobile')){
|
||||
const {mobile, code, password} = this;
|
||||
if (!checkStr(mobile, 'mobile')){
|
||||
this.$util.msg('请输入正确的手机号码');
|
||||
this.$refs.confirmBtn.stop();
|
||||
return;
|
||||
|
|
@ -118,7 +121,9 @@
|
|||
this.$refs.confirmBtn.stop();
|
||||
return;
|
||||
}
|
||||
const res = await this.$request('user', 'login', {username,code});
|
||||
|
||||
// 执行登陆
|
||||
const res = await this.$request('user', 'login', {mobile,code});
|
||||
this.$refs.confirmBtn.stop();
|
||||
|
||||
if (res.status === 1){
|
||||
|
|
@ -130,6 +135,9 @@
|
|||
navBack(){
|
||||
uni.navigateBack();
|
||||
},
|
||||
setLoginType(loginType) {
|
||||
this.loginType = loginType;
|
||||
},
|
||||
//同意协议
|
||||
checkAgreement(){
|
||||
this.agreement = !this.agreement;
|
||||
|
|
@ -166,6 +174,14 @@
|
|||
position:relative;
|
||||
z-index: 90;
|
||||
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 {
|
||||
position:absolute;
|
||||
|
|
@ -182,12 +198,19 @@
|
|||
position:relative;
|
||||
left: -12rpx;
|
||||
}
|
||||
.left-bottom-sign {
|
||||
position: absolute;
|
||||
left: -270rpx;
|
||||
bottom: -320rpx;
|
||||
border: 100rpx solid #d0d1fd;
|
||||
border-radius: 50%;
|
||||
padding: 180rpx;
|
||||
}
|
||||
.right-top-sign {
|
||||
position:absolute;
|
||||
top: 80rpx;
|
||||
right: -30rpx;
|
||||
z-index: 95;
|
||||
|
||||
&:before, &:after{
|
||||
display:block;
|
||||
content:"";
|
||||
|
|
@ -207,25 +230,10 @@
|
|||
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;
|
||||
|
|
@ -236,14 +244,13 @@
|
|||
height: 120rpx;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 50rpx;
|
||||
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.row{
|
||||
width: 100%;
|
||||
}
|
||||
.tit{
|
||||
.title{
|
||||
height: 50rpx;
|
||||
line-height: 56rpx;
|
||||
font-size: 26rpx;
|
||||
|
|
@ -257,6 +264,15 @@
|
|||
width: 100%;
|
||||
}
|
||||
}
|
||||
.login-type {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
font-size: 13px;
|
||||
color: #40a2ff;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 其他登录方式 */
|
||||
.other-wrapper{
|
||||
display: flex;
|
||||
|
|
@ -264,11 +280,9 @@
|
|||
align-items: center;
|
||||
padding-top: 20rpx;
|
||||
margin-top: 80rpx;
|
||||
|
||||
.line{
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.tit{
|
||||
.title {
|
||||
margin: 0 32rpx;
|
||||
font-size: 24rpx;
|
||||
color: #606266;
|
||||
|
|
@ -285,7 +299,6 @@
|
|||
color: #606266;
|
||||
background-color: #fff;
|
||||
border: 0;
|
||||
|
||||
&:after{
|
||||
border: 0;
|
||||
}
|
||||
|
|
@ -305,18 +318,16 @@
|
|||
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{
|
||||
.title {
|
||||
color: #40a2ff;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue