新增验证码登录

pages/login/code.vue

@@ -0,0 +1,202 @@
+<template>
+	<view class="container">
+		<u-navbar title="手机验证码登录" :border="true" :placeholder="true" :autoBack="true" />
+		<view class="container">
+			<view class="login">
+				<view class="login-title">验证码登录</view>
+				<view class="login-input">
+					<u--input placeholder="请输入手机号" type="number" v-model="mobile" border="none" shape="circle" clearable></u--input>
+				</view>
+				<view class="login-input">
+					<u-input placeholder="请输入短信验证码" type="number" v-model="code">
+						<template slot="suffix">
+							<u-code ref="uCode" @change="codeChange" seconds="60" changeText="Xs"></u-code>
+							<u-button @tap="getCode" :text="tips" type="default" size="mini"></u-button>
+						</template>
+					</u-input>
+				</view>
+				<u-button @click="login" text="登录" shape="circle" :loading="loading"></u-button>
+			</view>
+		</view>
+		<auth :auth-show="authShow" @close="authClose" />
+	</view>
+</template>
+
+<script>
+	import $http from '@/utils/request.js'
+	import Auth from '../../components/auth/auth.vue'
+	export default {
+		components: {
+			Auth
+		},
+		data() {
+			return {
+				loading: false,
+				mobile: '',
+				codeId: '',
+				code: '',
+				tips: '',
+				authShow: false,
+			};
+		},
+		methods: {
+			codeChange(text) {
+				this.tips = text;
+			},
+			
+			getCode() {
+				const rule = /^[1][0-9][0-9]{9}$/
+				if (!this.mobile) {
+					uni.$u.toast('请输入手机号');
+					return
+				}
+				if (!rule.test(this.mobile)) {
+					uni.$u.toast('请输入正确的手机号');
+					return
+				}
+				if (this.$refs.uCode.canGetCode) {
+					// 模拟向后端请求验证码
+					uni.showLoading({
+						title: '正在获取验证码'
+					})
+					// 这里此提示会被this.start()方法中的提示覆盖
+					uni.$u.toast('验证码已发送');
+					// 通知验证码组件内部开始倒计时
+					this.$refs.uCode.start();
+					$http.post('/api/v1/mp/sms/sendSmsCode', {
+						mobile: this.mobile,
+						noToken: true
+					}).then(res => {
+						if (res.code === 0 && res.data) {
+							this.codeId = res.data
+						}
+					})
+				} else {
+					uni.$u.toast('倒计时结束后再发送');
+				}
+			},
+
+			login() {
+				let _this = this
+				if (!_this.mobile) {
+					uni.$u.toast('请输入手机号');
+					return
+				}
+				const rule = /^[1][0-9][0-9]{9}$/
+				if (!rule.test(_this.mobile)) {
+					uni.$u.toast('请输入正确的手机号');
+					return
+				}
+				if (!_this.code) {
+					uni.$u.toast('请输入验证码');
+					return
+				}
+				_this.loading = true
+				$http.post('/auth/mobile', {
+					mobile: _this.mobile,
+					messageId: _this.codeId,
+					code: _this.code,
+					identity: 1,
+					noToken: true
+				}).then(res => {
+					_this.loading = false
+					if (res.code === 0 && res.token) {
+						// #ifdef MP-WEIXIN
+						uni.setStorageSync('token', res.token)
+						_this.getBaseInfo()
+						// #endif
+						// #ifdef H5
+						uni.$u.toast('登录成功');
+						uni.setStorageSync('token', res.token)
+						setTimeout(() => {
+							uni.navigateBack({
+								delta: 2
+							})
+						}, 500)
+						// #endif
+					}
+				}).catch(() => {
+					_this.loading = false
+				})
+			},
+			
+			getBaseInfo() {
+				$http.post('/api/v1/mp/user/getLoginUserinfo', {}).then(res => {
+					uni.hideLoading();
+					if (res.code == 0) {
+						uni.setStorageSync('userInfo', res.data)
+						if (res.data.openId) {
+							uni.$u.toast('登录成功');
+							setTimeout(() => {
+								uni.navigateBack({
+									delta: 2
+								})
+							}, 500)
+						} else {
+							this.authShow = true
+						}
+					}
+				}).catch(() => {
+					uni.hideLoading();
+				})
+			},
+			
+			authClose() {
+				this.authShow = false
+				setTimeout(() => {
+					uni.navigateBack({
+						delta: 2
+					})
+				}, 500)
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		height: 100vh;
+		width: 100%;
+		overflow: hidden;
+	}
+	
+	.login {
+		padding: 70rpx 70rpx 0;
+
+		&-title {
+			font-size: 56rpx;
+			color: #333;
+			line-height: 80rpx;
+			margin-bottom: 60rpx;
+		}
+
+		&-input {
+			display: flex;
+			align-items: center;
+			margin-bottom: 50rpx;
+			height: 80rpx;
+			background-color: #EDEDED !important;
+			border-radius: 100rpx;
+			padding: 10rpx 48rpx;
+
+			/deep/ .u-input__content__field-wrapper__field {
+				background: none;
+			}
+
+			/deep/ .u-border {
+				border: none;
+			}
+		}
+
+		/deep/ .u-button {
+			width: 100%;
+			background-color: $uni-bg-color;
+			color: #fff;
+			border-radius: 32px;
+		}
+		
+		/deep/ .u-button--success{
+			background-color: none;
+		}
+	}
+</style>

pages/login/index.vue

@@ -1,15 +1,29 @@
 <template>
 	<view class="container">
-		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" title="微信授权"></u-navbar>
+		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" title="登录"></u-navbar>
 		<view class="flex login">
 			<view class="flex login-image">
 				<image src="../../static/logo.png" mode=""></image>
 				<view class="login-image-txt">盲票</view>
 			</view>
-			<view class="login-txt">盲票将为您提供</view>
-			<view class="login-title">商品兑换、盲票购买等服务 请先完成授权登录</view>
 			<view class="login-btn">
-				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信授权登录</button>
+				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="checked">微信登录</button>
+				<button @click="getPhoneNumber" v-else>微信登录</button>
+			</view>
+			<view class="flex login-code" @click="toCode">手机号登录/注册</view>
+		</view>
+
+		<view class="footer-fixed">
+			<view class="flex about">
+				<view class="checked">
+					<u-checkbox-group>
+						<u-checkbox :value="checked" :checked="checked" size="20" shape="circle" activeColor="#E96737"
+							@change="changeChecked"></u-checkbox>
+					</u-checkbox-group>
+				</view>
+				<view class="txt">登录代表您已同意</view>
+				<navigator hover-class="none" class="txt-about" url="/pages/about/protect">《用户使用协议》</navigator>
+				<navigator hover-class="none" class="txt-about" url="/pages/about/conceal">、《隐私保护声明》</navigator>
 			</view>
 		</view>
 
@@ -29,12 +43,22 @@
 			return {
 				authShow: false,
 				token: '',
+				checked: false
 			};
 		},
+		
+		onShow() {
+			this.checked = false
+		},
+		
 		methods: {
 			getPhoneNumber(e) {
 				let _this = this
-				if(e.detail.errMsg == 'getPhoneNumber:ok'){
+				if (!_this.checked) {
+					uni.$u.toast('请阅读并勾选底部协议');
+					return
+				}
+				if (e.detail.errMsg == 'getPhoneNumber:ok') {
 					uni.showLoading({
 						title: '登录中'
 					});
@@ -48,22 +72,26 @@
 							if (res.code == 0) {
 								uni.setStorageSync('token', res.token)
 								_this.getBaseInfo()
-							}else{
+							} else {
 								uni.getSystemInfo({
-								  success (res) {
-								    log.info(`错误信息：===基础库：${ res.SDKVersion },设备：${ res.model }-${ res.system }.===`)
-								  }
+									success(res) {
+										log.info(
+											`错误信息：===基础库：${ res.SDKVersion },设备：${ res.model }-${ res.system }.===`
+										)
+									}
 								})
 							}
 						}).catch(() => {
 							uni.hideLoading();
 							uni.getSystemInfo({
-							  success (res) {
-							    log.info(`错误信息：===基础库：${ res.SDKVersion },设备：${ res.model }-${ res.system }.===`)
-							  }
+								success(res) {
+									log.info(
+										`错误信息：===基础库：${ res.SDKVersion },设备：${ res.model }-${ res.system }.===`
+									)
+								}
 							})
 						})
-					}else{
+					} else {
 						uni.login({
 							success(res) {
 								$http.post('/api/v1/mp/user/wxauth/mobile', {
@@ -76,19 +104,23 @@
 									if (res.code == 0) {
 										uni.setStorageSync('token', res.token)
 										_this.getBaseInfo()
-									}else{
+									} else {
 										uni.getSystemInfo({
-										  success (res) {
-										    log.info(`错误信息：===基础库：${ res.SDKVersion },设备：${ res.model }-${ res.system }.===`)
-										  }
+											success(res) {
+												log.info(
+													`错误信息：===基础库：${ res.SDKVersion },设备：${ res.model }-${ res.system }.===`
+												)
+											}
 										})
 									}
 								}).catch(() => {
 									uni.hideLoading();
 									uni.getSystemInfo({
-									  success (res) {
-									    log.info(`错误信息：===基础库：${ res.SDKVersion },设备：${ res.model }-${ res.system }.===`)
-									  }
+										success(res) {
+											log.info(
+												`错误信息：===基础库：${ res.SDKVersion },设备：${ res.model }-${ res.system }.===`
+											)
+										}
 									})
 								})
 							}
@@ -107,6 +139,20 @@
 				}, 500)
 			},
 
+			changeChecked(e) {
+				this.checked = e
+			},
+
+			toCode() {
+				if (!this.checked) {
+					uni.$u.toast('请阅读并勾选底部协议');
+					return
+				}
+				uni.navigateTo({
+					url: '/pages/login/code'
+				})
+			},
+
 			getBaseInfo() {
 				$http.post('/api/v1/mp/user/getLoginUserinfo', {}).then(res => {
 					uni.hideLoading();
@@ -142,13 +188,12 @@
 
 		&-image {
 			flex-direction: column;
-			padding: 100rpx 0 200rpx;
+			padding: 128rpx 0 200rpx;
 
 			image {
-				width: 164rpx;
-				height: 164rpx;
-				border-radius: 10rpx;
-				margin-bottom: 14rpx;
+				width: 296rpx;
+				height: 296rpx;
+				margin-bottom: 28rpx;
 			}
 
 			&-txt {
@@ -156,7 +201,7 @@
 				line-height: 40rpx;
 				font-weight: bold;
 				margin-bottom: 20rpx;
-				font-size: 36rpx;
+				font-size: 28rpx;
 			}
 
 		}
@@ -176,6 +221,8 @@
 		}
 
 		&-btn {
+			margin-bottom: 44rpx;
+
 			button {
 				width: 600rpx;
 				height: 80rpx;
@@ -187,5 +234,31 @@
 				font-size: 28rpx;
 			}
 		}
+
+		&-code {
+			text-align: center;
+			color: rgba(242, 113, 32, 100);
+		}
+	}
+
+	.footer-fixed {
+		position: fixed;
+		bottom: var(--window-bottom);
+		left: 0;
+		right: 0;
+		z-index: 11;
+		background: #fff;
+		// 设置ios刘海屏底部横线安全区域
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+
+		.about {
+			padding: 60rpx 0;
+			font-size: 24rpx;
+
+			.txt-about {
+				color: #007aff;
+			}
+		}
 	}
 </style>