mdapp/pages/user/login/register.vue

<template>
	<view class="app">
		<!-- logo -->
		<view class="header">
			<u-avatar src="/static/logo.png" size="200"></u-avatar>
			<view class="nickname"></view>
		</view>

		<!-- 输入框 -->
		<view class="body">
			<u-form :model="form1" ref="uForm" style="width: 100%;">
				<u-form-item label-width="0" prop="username" :borderBottom="false">
					<u-input border placeholder="请输入手机号" v-model="form1.username" @blur="phoneBlurHandle" type="text" height="90"></u-input>
				</u-form-item>
				<u-form-item label-width="0" prop="password" :borderBottom="false">
					<u-input border placeholder="请输入密码" v-model="form1.password" type="password" height="90"></u-input>
				</u-form-item>
				<u-form-item label-width="0" prop="re_password" :borderBottom="false">
					<u-input border placeholder="请重复输入密码" v-model="form1.re_password" type="password" height="90"></u-input>
				</u-form-item>
				<u-form-item label-width="0" prop="image_code" :borderBottom="false" v-if="isImgCoedShow">
					<u-input border placeholder="请输入右侧4位字符" v-model="form1.image_code" type="text" height="90"></u-input>
					<view slot="right" style="display: inline-block;" @click="getImgCode()">
						<u-image width="150rpx" height="90rpx" :src="imgCodeUrl"></u-image>
					</view>
				</u-form-item>
				<u-form-item label-width="0" prop="sms_code" :borderBottom="false">
					<u-input border placeholder="请输入短信验证码" v-model="form1.sms_code" type="text" height="90"></u-input>
					<view slot="right" style="display: inline-block;">
						<view v-if="smsTimer" class="scoped-sms-btn">{{smsTimeNum}}s</view>
						<view v-else class="scoped-sms-btn s" @click="smsHandle()">获取短信</view>
					</view>
				</u-form-item>
			</u-form>
			<u-gap></u-gap>
			<u-button class="bwin-btn-100 u-m-b-10" type="primary" @click="register">注册</u-button>
			<!-- <u-button class="bwin-btn-100">取消</u-button> -->
		</view>

		<!-- 忘记密码导航 -->
		<view class="function-row">
			<!-- <navigator url="/pages/user/login/login">忘记密码</navigator>
			<text style="margin: 0 16rpx;">|</text> -->
			<navigator url="/pages/user/login/login">直接登录</navigator>
		</view>

		<view class="footer">
			注册、登录即代表同意
			<text class="agreement">《用户协议》</text>
		</view>
	</view>
</template>

<script>
var that;
export default {
	data() {
		// 页面数据变量
		return {
			isImgCoedShow: false,
			imgCodeUrl: '',
			smsTimer: null,
			smsTimeNum: 60,
			// init请求返回的数据
			data: {},
			// 表单请求数据
			form1: {
				username: null,
				password: '',
				re_password: '',
				image_code: '',
				sms_code: '',
			},
			rules: {
				username: [
					{
						required: true,
						message: '请输入账号',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					},
				],
				password: [
					{
						min: 6,
						message: '密码不能少于6个字符',
						trigger: 'change'
					},
				],
				re_password: [
					{
						min: 6,
						message: '密码不能少于6个字符',
						trigger: 'change'
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							return that.form1.password == value;
						},
						message: '与上次输入的不一致',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur']
					}
				],
				image_code: [
					{
						required: true,
						message: '请输入图形验证码',
						trigger: 'blur,change'
					}
				],
				sms_code: [
					{						
						required: true,
						message: '请输入短信验证码',
						trigger: 'blur,change'
					}
				]
			},
			scrollTop: 0
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	// 监听 - 页面每次【加载时】执行(如：前进)
	onLoad(options = {}) {
		that = this;
		that.options = options;
		if (this.form1.username) {
			this.getImgCode()
		}
		// if (xxxx.checkToken()) {
		// 	xxxx.toast('您已登录', 'none', 1500, true, function() {
		// 		xxxx.navigateToHome();
		// 	});
		// }
	},
	// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	/**
	 * 监听 - 点击右上角转发时 文档 https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage
	 * 如果删除onShareAppMessage函数，则微信小程序右上角转发按钮会自动变灰
	 */
	onShareAppMessage(options) {},
	// 函数
	methods: {
		getImgCode () {
			this.imgCodeUrl = `${uni.baseUrl}api/captcha?phone=${this.form1.username}&r=${Math.random()}`
		},
		phoneBlurHandle () {
			if (this.form1.username && this.form1.username.length === 11) {				
				uni.api.base.apicheckcaptcha({phone: this.form1.username}).then(res => {
					this.isImgCoedShow = res
					this.getImgCode()
				})
			} else {
				this.isImgCoedShow = false
			}
		},
		smsHandle () {
			if (this.form1.username && this.form1.username.length === 11) {
				let params = {
					phone: this.form1.username,
					user_type: 'wx',
				}
				if (this.isImgCoedShow) {
					if (!this.form1.image_code) {
						uni.$msg('请输入图形验证码')
						return
					}
					params.img_code = this.form1.image_code
				}
				uni.api.base.apisendsms(params).then(res => {
					this.smsTimer = setInterval(() => {
						this.smsTimeNum--
						if (this.smsTimeNum === 0) {
							this.smsTimeNum = 60
							clearInterval(this.smsTimer)
							this.smsTimer = null
						}
					}, 1000)
				})
			} else {
				uni.$msg('请输入正确的手机号')
			}
		},
		// 注册
		register() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					uni.api.base.apiregister({
						phone: this.form1.username,
						password: this.form1.password,
						sms_code	: this.form1.sms_code,
					}).then(res => {
						uni.setStorageSync('MD_phone', this.form1.username)
						uni.$msgConfirm('注册成功~', () =>{
							uni.navigateTo({
								url: '/pages/user/login/login'
							})
						}, () => {
							uni.navigateTo({
								url: '/pages/user/login/login'
							})
						})
					})
				} else {
					console.log('验证失败');
					return;
				}
			});
		},
	},
	// 监听器
	watch: {},
	// 计算属性
	computed: {}
};
</script>
<style lang="scss" scoped>
.app {
	box-sizing: border-box;
	padding-bottom: 100rpx;
}
.header {
	padding-top: 15%;
	margin-bottom: 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;

	.avatar {
		width: 200rpx;
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
	}

	.nickname {
		font-size: $u-h3;
	}
}

.body {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx 100rpx;
	margin: 40rpx 0;

	.title {
		font-size: $u-p;
		margin-bottom: 20rpx;
	}

	.tips {
		font-size: $u-p2;
		color: $u-tips-color;
		margin-bottom: 60rpx;
	}
}

.third-login {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 32rpx;
}

.function-row {
	font-size: $u-p2;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	width: 300rpx;
}

.footer {
	width: 100%;
	text-align: center;
	bottom: 20rpx;
	font-size: $u-p2;
	color: $u-content-color;
	.agreement {
		color: $u-theme-color;
	}
}



.scoped-sms-btn {
	width: 150rpx;
	height: 90rpx;
	font-size: 28rpx;
	border: 1PX solid #dcdcdc;
	border-radius: 10rpx;
	text-align: center;
	line-height: 90rpx;
	&.s {
		background: #2979ff;
		color: #fff;
		border: none;
	}
}

</style>