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

YunaiV
1 parent 55ee2fca
Showing 2 changed files with 115 additions and 187 deletions
yudao-vue-ui/pages/auth/login.vue
yudao-vue-ui/pages/auth/mixin/login-apple.js
 <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="mobile" templateCode="SMS_194050994"></mix-code>
+					</view>					
+				</view>
+				<view class="input-item" v-else>
+					<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="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,58 +81,63 @@
 	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();
 				}, 1000)
 			},
-			//手机号登录
+			// 手机号登录
 			async login(){
-				if(!this.agreement){
+				// 参数校验
+				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;
 				}
-				if(!checkStr(code, 'mobileCode')){
+				if (!checkStr(code, 'mobileCode')) {
 					this.$util.msg('验证码错误');
 					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){
+				if (res.status === 1){
 					this.loginSuccessCallBack(res.data);
-				}else{
+				} else{
 					this.$util.msg(res.msg);
 				}
 			},
 			navBack(){
 				uni.navigateBack();
 			},
+			setLoginType(loginType) {
+				this.loginType = loginType;
+			},
 			//同意协议
 			checkAgreement(){
 				this.agreement = !this.agreement;
@@ -154,7 +162,7 @@
 	}
 </style>
 <style scoped lang='scss'>
-	.app{
+	.app {
 		padding-top: 15vh;
 		position:relative;
 		width: 100vw;
@@ -162,12 +170,20 @@
 		overflow: hidden;
 		background: #fff;
 	}
-	.wrapper{
+	.wrapper {
 		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{
+	.back-btn {
 		position:absolute;
 		left: 20rpx;
 		top: calc(var(--status-bar-height) + 20rpx);
@@ -176,18 +192,25 @@
 		font-size: 32rpx;
 		color: #606266;
 	}
-	.left-top-sign{
+	.left-top-sign {
 		font-size: 120rpx;
 		color: #f8f8f8;
 		position:relative;
 		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;
 		top: 80rpx;
 		right: -30rpx;
 		z-index: 95;
-		
 		&:before, &:after{
 			display:block;
 			content:"";
@@ -207,56 +230,49 @@
 			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{
+	
+	/** 手机登录部分 */
+	.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%;
+		.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%;
+			}	
 		}
-		.tit{
-			height: 50rpx;
-			line-height: 56rpx;
-			font-size: 26rpx;
-			color: #606266;
+		.login-type {
+			display: flex;
+			justify-content: flex-end;
+			font-size: 13px;
+			color: #40a2ff;
+			margin-top: 20rpx;
 		}
-		input{
-			flex: 1;
-			height: 60rpx;
-			font-size: 30rpx;
-			color: #303133;
-			width: 100%;
-		}	
 	}
+	
 	/* 其他登录方式 */
 	.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;
 		}
 	}
-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);
-				})
-			})
-		}
-	}
-}
-
-
-
-
-
-
-
-
-