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

<template>
	<view class="container">
		<u-navbar title="手机验证码登录" :border="true" :placeholder="true" :autoBack="true"/>
		<view>
			<view class="login">
				<view class="login-title">验证码登录</view>
				<view class="login-input pat">
					<u-input placeholder="请输入手机号" type="number" v-model="mobile" border="bottom" clearable
						@blur="changeNumber" />
				</view>
				<view class="login-input code">
					<u-input placeholder="请输入短信验证码" type="number" border="bottom" 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 appId from '@/config/appId.js'
	import Auth from '../../components/auth/auth.vue'
	export default {
		components: {
			Auth
		},
		data() {
			return {
				loading: false,
				mobile: '',
				codeId: '',
				code: '',
				tips: '',
				authShow: false,
			};
		},
		onLoad(options) {
			if (options.mobile) {
				this.mobile = options.mobile
			}
		},
		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 || MP-ALIPAY
						uni.setStorageSync('token', res.token)
						_this.getBaseInfo()
						// #endif
						// #ifdef H5 
						uni.$u.toast('登录成功');
						uni.setStorageSync('token', res.token)
						setTimeout(() => {
							uni.navigateBack({
								delta: 3
							})
						}, 500)
						// #endif
					}
				}).catch(() => {
					_this.loading = false
				})
			},

			getBaseInfo() {
				$http.post('/api/v1/mp/user/getLoginUserinfo', { appSource: appId }).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						uni.setStorageSync('userInfo', res.data)
						// #ifdef MP-ALIPAY
						if (res.data.aliuserId) {
							uni.$u.toast('登录成功');
							setTimeout(() => {
								uni.navigateBack({
									delta: 3
								})
							}, 500)
						} else {
							this.authShow = true
						}
						// #endif
						// #ifndef MP-ALIPAY
						if (res.data.openId) {
							uni.$u.toast('登录成功');
							setTimeout(() => {
								uni.navigateBack({
									delta: 3
								})
							}, 500)
						} else {
							this.authShow = true
						}
						// #endif
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},

			authClose() {
				this.authShow = false
				setTimeout(() => {
					uni.navigateBack({
						delta: 3
					})
				}, 500)
			},
		}
	}
</script>


<style lang="scss" scoped>
	.container {
		height: 100vh;
		width: 100%;
		overflow: hidden;
	}

	.login {
		padding: 70rpx 30rpx 0;

		&-title {
			text-align: center;
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
			line-height: 80rpx;
			margin-bottom: 60rpx;
		}

		&-input {
			display: flex;
			align-items: center;
			margin-bottom: 50rpx;
		}

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

		::v-deep .u-button--success {
			background-color: none;
		}
	}
	.code {
		::v-deep .u-button {
			border: 2rpx solid #367481;
			color: #367481;
			background: none;
		}
	}
</style>