mp-ui-user/src/pages/login/code.vue

<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 pat">
					<u-input placeholder="请输入手机号" type="number" v-model="mobile" border="none" clearable @blur="changeNumber"/>
				</view>
				<view class="login-input">
					<u-input placeholder="请输入短信验证码" type="number" v-model="code" clearable  @blur="changeCode">
						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="60" changeText="Xs"></u-code>
							<u-button @click="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) {
					
					// 这里此提示会被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('倒计时结束后再发送');
				}
			},

			changeNumber(e) {
				this.mobile = e
			},
			changeCode(e) {
				this.code = e
			},
			
			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 || MP-ALIPAY
						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;

			::v-deep .u-input__content__field-wrapper__field {
				background: none;
			}

			::v-deep .u-border {
				border: none;
			}
		}
		
		.pat{
			padding: 10rpx 66rpx;
		}

		::v-deep .u-button {
			width: 100%;
			background-color: $uni-bg-color;
			color: #fff;
			border-radius: 32px;
		}
		
		::v-deep .u-button--success{
			background-color: none;
		}
	}
</style>