odd_job_applet/pages/register/register.vue

<template>
	<view>
		<image class="syslogo" mode="widthFix" :src="param.syslogo"></image>
		<view class="formbox">
			<view class="finput">
				<input placeholder="请输入姓名..." @input="bindInput" data-val="realname" :value="userinfo.realname" />
			</view>
			<view class="finput">
				<input type="number" maxlength="11" placeholder="请输入手机号..." @input="bindInput" data-val="mobile" :value="userinfo.mobile" />
			</view>
			<view class="finput codebox">
				<input type="number" maxlength="6" placeholder="请输入短信验证码..." @input="bindInput" data-val="smscode" :value="userinfo.smscode" />
				<view class="codeimg" @tap="getSmsCode">{{smsbtn.text}}</view>
			</view>
			<view class="finput">
				<input placeholder="请输入登录密码(至少8位)..." @input="bindInput" data-val="password" :value="userinfo.password" />
			</view>

			<button class="registerbtn" type="primary" @click="goRegister"> {{ loading ? "注册中...":"立即注册"}} </button>
			<view class="pagetip">
				<view class="left">
					<navigator open-type="switchTab" url="/pages/index/index">返回首页</navigator>
				</view>
				<view class="right"><text>已有账号，</text>
					<navigator open-type="redirect" url="/pages/login/login">立即登录</navigator>
				</view>
			</view>
			<view class="registertip">
				<text>注册即表示同意</text>
				<navigator open-type="navigate" url="/pages/sinpage/sinpage?op=register">《用户协议》</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				param: {},
				loading: false,
				userinfo: {
					workerid: 0,
					parentid: 0,
					realname: "",
					mobile: "",
					smscode: "",
					password: ""
				},
				smsbtn: {
					text: '获取验证码',
					status: false,
					codeTime: 60
				},
				smscodemd5: "",
				timerId: null
			}
		},
		onLoad: function(option) {
			that = this;
			that.smscodemd5 = uni.getStorageSync('smscodemd5') || "";
			that.$req.ajax({
				data: {
					do: 'register',
					op: 'display'
				},
			}).then((data) => {
				that.param = data.param;
			}).catch((err) => {
				console.log("err: " + JSON.stringify(err));
			});
			
			// #ifdef H5
			that.userinfo.workerid = workerid;
			that.userinfo.parentid = parentid;
			// #endif
		},
		onShareAppMessage: function(res) {
			return {
				title: that.param.sharetitle,
				path: '/pages/index/index'
			}
		},
		onNavigationBarButtonTap: function(e) {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		methods: {
			getSmsCode: function() {
				if (that.smsbtn.status == true) {
					return true;
				}
				var myreg = /^((1)+\d{10})$/;
				if (!myreg.test(that.userinfo.mobile)) {
					uni.showModal({
						title: '温馨提示',
						content: '手机号格式不对。',
						showCancel: false
					});
					return;
				}
				that.smsbtn.status = true;
				that.$req.ajax({
					data: {
						do: 'register',
						op: 'getsmscode',
						mobile: that.userinfo.mobile
					}
				}).then((data) => {
					uni.setStorageSync('smscodemd5', data.smscodemd5);
					that.smscodemd5 = data.smscodemd5;
					that.timerId = setInterval(() => {
						var codeTime = that.smsbtn.codeTime;
						codeTime--;
						that.smsbtn.codeTime = codeTime;
						that.smsbtn.text = codeTime + "S";
						if (codeTime < 1) {
							clearInterval(that.timerId);
							that.smsbtn.text = "重新获取";
							that.smsbtn.codeTime = 60;
							that.smsbtn.status = false;
						}
					}, 1000);
				}).catch((err) => {
					uni.showModal({
						title: '温馨提示',
						content: err,
						showCancel: false
					});
					that.smsbtn.status = false;
				});
				return false;
			},

			goRegister: function() {
				that.loading = true;
				that.$req.ajax({
					data: {
						do: 'register',
						op: 'goregister',
						workerid: that.userinfo.workerid,
						parentid: that.userinfo.parentid,
						realname: that.userinfo.realname,
						mobile: that.userinfo.mobile,
						smscode: that.userinfo.smscode,
						password: that.userinfo.password,
						smscodemd5: that.smscodemd5
					}
				}).then((data) => {
					if (data.regstatus == 2) {
						uni.setStorageSync('userinfo', data.user);
						uni.showModal({
							title: '温馨提示',
							content: '注册成功，请尽快完善个人信息。',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.reLaunch({
										url: "/pages/my/my"
									})
								}
							}
						});
					} else if (data.regstatus == 1) {
						uni.showModal({
							title: '温馨提示',
							content: '注册成功，请耐心等待审核。',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.reLaunch({
										url: "/pages/login/login"
									})
								}
							}
						});
					}
					uni.removeStorageSync('smscodemd5');
					that.loading = false;
				}).catch((err) => {
					uni.showModal({
						title: '温馨提示',
						content: err,
						showCancel: false
					});
					that.loading = false;
				});
			},
			bindInput: function(e) {
				const that = this;
				var dataval = e.currentTarget.dataset.val;
				that.userinfo[dataval] = e.detail.value;
			}

		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}

	.syslogo {
		width: 750rpx;
	}

	.formbox {
		width: 80%;
		margin: 0 auto;
	}

	.finput {
		padding-bottom: 30rpx;
	}

	.finput input {
		height: 72rpx;
		font-size: 32rpx;
		border: 1rpx solid #DDDDDD;
		padding: 5rpx 30rpx;
		border-radius: 40rpx;
	}

	.codebox {
		position: relative;
	}

	.codebox .codeimg {
		position: absolute;
		right: 0rpx;
		top: 0rpx;
		line-height: 80rpx;
		width: 200rpx;
		text-align: center;
		z-index: 999;
	}

	.registerbtn {
		border-radius: 50rpx;
		margin-top: 20rpx;
	}

	.pagetip {
		display: flex;
		justify-content: space-between;
		padding-top: 30rpx;
		color: #888888;
	}

	.pagetip>view.left {
		display: flex;
		justify-content: flex-start;
	}

	.pagetip>view.right {
		display: flex;
		justify-content: flex-end;
	}

	.pagetip navigator {
		color: #007AFF;
	}

	.registertip {
		display: flex;
		justify-content: center;
		padding-top: 40rpx;
		padding-bottom: 80rpx;
		color: #888888;
		font-size: 32rpx;
	}

	.registertip navigator {
		color: #007AFF;
	}
</style>