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

<template>
	<view class="container">
		<!-- #ifdef MP-ALIPAY -->
		<u-navbar title="手机验证码登录" :border="true" :placeholder="true" :autoBack="true" leftIconSize="0" />
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar title="手机验证码登录" :border="true" :placeholder="true" :autoBack="true" />
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN || MP-ALIPAY -->
		<view v-if="$pagesNum() > 1">
			<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" title="登录" />
		</view>
		<view v-else>
			<u-navbar leftIconSize="0" :placeholder="true" bgColor="#fff" title="登录">
				<view class="nav-left flex" slot="left" @click="$toIndex()">
					<u-icon name="arrow-left" size="20" color="#333"></u-icon>
				</view>
			</u-navbar>
		</view>
		<!-- #endif -->
		<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 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,
				pagesNum: "",
			};
		},
		onShow() {
			this.pagesNum = getCurrentPages().length
		},
		methods: {
			toIndex() {
				uni.switchTab({
					url: `/pages/index/index`
				})
			},
			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(() => {
							if(this.pagesNum > 2) {
								uni.navigateBack({
									delta: 2
								})
							}else {
								this.toIndex()
							}
						}, 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: 2
								})
							}, 500)
						} else {
							this.authShow = true
						}
						// #endif
						// #ifndef MP-ALIPAY
						if (res.data.openId) {
							uni.$u.toast('登录成功');
							setTimeout(() => {
								uni.navigateBack({
									delta: 2
								})
							}, 500)
						} else {
							this.authShow = true
						}
						// #endif
					}
				}).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>