CommunityApp/pages/register/register.vue

<template>
	<view class="container edit_wrap">
		<view class="flex justify-between	" style="padding: 40rpx 30rpx;;box-sizing: border-box;">
			<view class="" style="font-size: 38rpx;">
				<text class="text-bold text-black">注册认证</text>
			</view>
			<view class="text-red" style="padding-top: 12rpx;">
				<text style="font-size: 38rpx;">1</text>
				<text class="text-df">/3</text>
			</view>
		</view>
		<form>
			<view class="form_group">
				<text class="red">*</text>
				<text class="sex">姓名：</text>
				<input placeholder="请与物业登记处保持一致" placeholder-class="placeholder_style" type="text"
					class="placeholder_style" @input="nameInput">
				</input>
			</view>
			<view class="form_group">
				<text class="red">*</text>
				<text class="sex">手机：</text>
				<input placeholder="请与物业登记处保持一致" v-model="tel" placeholder-class="placeholder_style" type="number"
					maxlength="11" class="placeholder_style">
				</input>
			</view>
			<view class="form_group">
				<text class="red">*</text>
				<text class="sex">验证码：</text>
				<input type="text" class="sendmsg_input" @input="verifyCodeInput"></input>
				<button class="right code_btn" @tap="sendMsgButton" :disabled="disabled"
					:style="'background-color:' + color">{{text}}</button>
			</view>
			<view style="display:flex;margin:20rpx 20rpx">
				<u-checkbox v-model="isCheck" active-color="blue">
				</u-checkbox>
				<view style="display: flex;">
					<text>请阅读并同意</text>
					<navigator class="text-red" :url="webviewUrl1">《隐私协议》</navigator>
					<text>和</text>
					<navigator class="text-red" :url="webviewUrl2">《用户协议》</navigator>
				</view>
			</view>
			<view class="tips">
				<text style="padding-left: 40rpx;">认证后用户可享受更多权益，随时获取到您所在小区的动态</text>
			</view>

			<button style="border-radius: 0;" open-type="getUserInfo" @getuserinfo="showDialogBtn"
				class=" footer-fixed">
				<view class="cu-btn  flex  text-lg bg-red-btn" style="padding: 46rpx 0;">
					确认
				</view>
			</button>
		</form>
	</view>
</template>

<script>
	//获取app实例
	var app = getApp();

	export default {
		data() {
			return {
				webviewUrl1: '/pages/webview/webview?url=https://community.58fo.com/appfile/protocal.htm&title=隐私协议',
				webviewUrl2: '/pages/webview/webview?url=https://community.58fo.com/appfile/userprotocal.html&title=用户协议',
				text: '获取验证码',
				//按钮文字
				currentTime: 61,
				//倒计时
				disabled: false,
				//按钮是否禁用
				name: null,
				//姓名
				tel: null,
				//获取到的手机栏中的值
				verify_code: null,
				//验证码
				isCheck: true,
				color: ""
			};
		},
		onLoad() {
			let userinfo = this.$auth.getMineBase().user
			if (!this.$isEmpty(userinfo)) {
				if (userinfo.mobile != '13800000000') {
					this.tel = this.$auth.getMineBase().user.mobile
				}
			}
		},
		methods: {
			//获取姓名栏input中的值
			nameInput: function(e) {
				this.setData({
					name: e.detail.value
				});
			},
			//获取验证码栏input中的值
			verifyCodeInput: function(e) {
				this.setData({
					verify_code: e.detail.value
				});
			},
			//获取验证码按钮
			sendMsgButton: function() {
				let that = this;
				that.setData({
					disabled: true,
					//只要点击了按钮就让按钮禁用 （避免正常情况下多次触发定时器事件）
					color: '#ccc'
				});
				let name = that.name;
				let tel = that.tel; //把手机号跟倒计时值变例成js值

				let currentTime = that.currentTime; //warn为当手机号为空或格式不正确时提示用户的文字，默认为空

				let warn = null;

				if (name == null) {
					warn = "姓名不能为空";
				} else if (tel == null) {
					warn = "手机号码不能为空";
				} else if (!this.$u.test.mobile(tel)) {
					warn = "手机号格式不正确";
				} else {
					//发送短信
					that.sendMessage(); //设置一分钟的倒计时

					let interval = setInterval(function() {
						currentTime--; //每执行一次让倒计时秒数减一

						that.setData({
							text: currentTime + 's' //按钮文字变成倒计时对应秒数

						}); //如果当秒数小于等于0时 停止计时器 且按钮文字变成重新发送 且按钮变成可用状态 倒计时的秒数也要恢复成默认秒数 即让获取验证码的按钮恢复到初始化状态只改变按钮文字

						if (currentTime <= 0) {
							clearInterval(interval);
							that.setData({
								text: '重新发送',
								currentTime: 61,
								disabled: false,
								color: '#59a5f0'
							});
						}
					}, 1000);
				}; //判断 当提示错误信息文字不为空 即手机号输入有问题时提示用户错误信息 并且提示完之后一定要让按钮为可用状态 因为点击按钮时设置了只要点击了按钮就让按钮禁用的情况

				if (warn != null) {
					//自动关闭提示弹窗
					app.globalData.autoFailHint(warn);
					that.setData({
						disabled: false,
						color: '#59a5f0'
					});
					return;
				}

				;
			},
			//确认
			async showDialogBtn(e) {
				console.log(e);
				app.globalData.totalStep = 3
				let that = this;
				let name = that.name;
				if (name == null) {
					//自动关闭提示弹窗
					app.globalData.autoFailHint("请填写姓名");
					return;
				}
				let tel = that.tel;
				if (tel == null) {
					//自动关闭提示弹窗
					app.globalData.autoFailHint("请输入手机号");
					return;
				}
				if (!this.$u.test.mobile(tel)) {
					//自动关闭提示弹窗
					app.globalData.autoFailHint("请填写正确的手机号码");
					return;
				}
				let verify_code = that.verify_code;

				if (verify_code == null) {
					//自动关闭提示弹窗
					app.globalData.autoFailHint("请填写验证码");
					return;
				}

				if (!that.isCheck) {
					app.globalData.autoFailHint("请同意用户协议");
					return;
				} //注册
				//构建参数
				let params = {};
				params['name'] = name;
				params['phone'] = tel;
				params['verify_code'] = verify_code;

				params['create_type'] = 0;
				params['openid'] = uni.getStorageSync("openid");
				// let operation = 'miniprogram/memberRegister';
				let res = await this.$http.memberRegister(params)
				if (res.data.result_code == 0) {
					app.globalData.oneFailHint(res.data.result_msg);
					return
				}
				let houseList=res.data.result_data
				//注册成功
				this.$dialog.showModal("注册成功", false).then(async () => {
					//注册成功之后重新拉取一次会员信息
					let params = {
						openid: uni.getStorageSync("openid")
					};
					let resp = await that.$http.getMemberByOpenid(params)
					if (resp.data.result_code == 0) {
						app.globalData.oneFailHint(resp.data.result_msg);
						return
					}
					let member = resp.data.member;
					app.globalData.member = member;
					if (member.state == 1 || member.state == 2) {
						uni.reLaunch({
							url: '/pages/index/index',
						})
						return
					}
					//去认证
					if (this.$isNotEmpty(houseList)) {
						uni.setStorageSync("houseList",houseList)
						uni.redirectTo({
							url: "/pages/bindRoom/bindRoom",
							fail: (err) => {
								console.log(err);
							}
						})
					} else {
						uni.redirectTo({
							url: "../auth/auth",
						})
					}
				})
			},
			//申请短信验证码
			sendMessage: function() {
				//构建参数
				let params = {};
				params['tel'] = this.tel;
				// params['play_type'] = '2';
				// let operation = 'member/getSmsCode';
				this.$http.getSmsCode(params).then(res => {
					//短信发送成功
					if (res.data.result_code == 1) {
						app.globalData.autoFailHint(res.data.result_msg);
					} else {
						app.globalData.oneFailHint(res.data.result_msg);
					}

				});
			}
		}
	};
</script>
<style lang="scss">
	page {
		background: #fff;
	}


	.edit_wrap {
		font-size: 30rpx;
		padding: 0rpx 20rpx 20rpx;
		color: #333;
	}

	.form_group {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 20rpx 20rpx;
		line-height: 100rpx;
		position: relative;
		font-size: 26rpx;
		border-bottom: 2rpx solid #ddd;

	}

	.form_group .item {
		text-align: right;
		line-height: 80rpx;
	}

	.form_group .red {
		color: red;
		position: absolute;
		left: 0;
	}

	.form_group text.sex {
		margin-left: 15px;
		text-align: right;
	}

	.form_group .radio-group {
		text-align: left;
	}

	.form_group input,
	.form_group picker {
		width: 500rpx;
		border-radius: 8rpx;
		height: 100rpx;
		line-height: 100rpx;
		padding: 0rpx 20rpx;
		color: #333;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
	}

	.form_group button {
		font-size: 24rpx;
		background: $base-btn-color;
		margin: 10rpx 0 0 10rpx;
		color: #fff;
	}

	.form_group .sendmsg_input {
		width: 340rpx;
		margin-left: 36rpx;
	}

	.tips {
		padding: 0 10rpx;
		text-align: center;
		font-size: 24rpx;
		color: #999;
		margin-top: 20rpx;
	}

	.placeholder_style {
		font-family: '微软雅黑';
		color: #adadad;
		font-size: 26rpx;
	}

	.save_btn {
		width: 600rpx;
		background: #d24a58;
		font-size: 32rpx;
		color: #fff;
		border-radius: 0rpx;
		margin: 40rpx 0rpx 10rpx;
	}

	.code_btn {
		width: 150rpx;
		background: $base-btn-color;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #fff;
		font-size: 33rpx;
		padding: 0 10rpx;
	}

	.password_contet image {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.password_contet {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translate(0, -50%);
		width: 80rpx;
		height: 80rpx;
		z-index: 999;
	}

	checkbox .wx-checkbox-input {
		width: 34rpx;
		height: 34rpx;
	}

	checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		color: $base-btn-color;
	}
</style>