yicangzongtai_app_240321/pages/research/register/register.vue

<template>
	<view class="register">
		<navbar ref="navbar" :config="config" backColor="#666"></navbar>
		<form @submit="formSubmit">
			<view class="item">

				<view class="top">
					手机号注册
				</view>
				<!-- <view class="phone">
					<view class="name">
						手机号
					</view>
					<input type="number" name="phone" @input="onPhone" placeholder="请输入手机号" maxlength="11"
						placeholder-style="color:#cccccc; font-size:28rpx;" />
				</view> -->
				<view class="verification">
					<view class="name">
						手机号
					</view>
					<input type="number" @input="onPhone" v-model="phone" name="phone" placeholder="请填写手机号" maxlength="11"
						placeholder-style="color:#cccccc; font-size:28rpx;" />
					<!-- <button :loading="loading" class="obtain active" open-type="getPhoneNumber" @getphonenumber="getPhone">获取手机号</button> -->
				</view>
				<view class="verification">
					<view class="name">
						验证码
					</view>
					<input type="number" class="adjustment" v-model="code" name="code" maxlength="6" placeholder="请输入验证码"
						placeholder-style="color:#cccccc; font-size:28rpx;" />
					<button class="obtain" :disabled="disabled" :class="isPhone?'active':''" @click="judgeRegister">
						{{verification}}
					</button>
				</view>
				<view class="invitation">
					<view class="name">
						邀请码
					</view>
					<input type="text" value="" name="invitation" maxlength="8" placeholder="请输入邀请码"
						@input="invitationCode" placeholder-style="color:#cccccc; font-size:28rpx;" />
				</view>
				<view class="password">
					<view class="name">
						登录密码
					</view>
					<input type="text" password="true" name="password" value="" @input="onPass" placeholder="请输入登录密码"
						maxlength="11" placeholder-style="color:#cccccc; font-size:28rpx;" />
				</view>
			</view>
			<!-- 协议问题 -->
			<view class="choice">
				<view class="whole">
					<view class="top" v-if="flag" @click="onFlag">
						<icon type="success" color="#069D4D" size="17"></icon>
					</view>
					<view v-else style="width: 34rpx;height: 34rpx;border-radius: 50%;border: #ccc solid 1rpx;"
						@click="onFlag"></view>
				</view>
				<view class="agree">
					我已阅读并同意<text @click="goToAgreement">《会员注册协议》</text>
				</view>
			</view>

			<!-- 按钮 -->
			<view class="button">
				<button class="agree-register" @click="formSubmit()">
					同意协议并注册
				</button>
				<button class="go-to-login" @click="goToLogin">
					去登录
				</button>
				<!-- <view class="go-to-login" @click="goToLogin">
					去登录
				</view> -->
			</view>
		</form>
	</view>
</template>

<script>
	import {
		appRegister,
		getVerfityCode
	} from "../../../api/login.js"
	export default {
		data() {
			return {
				// 头部导航
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '用户注册',
          color: '#1A1A1A',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#fff"],
					statusBarFontColor: '#1A1A1A',
				},
				phone: "", //手机号
				disabled: false, //按钮
				isPhone: false, //手机号正则
				password: "",
				code:"",
				invitation: "",
				time: 60, //倒计时
				verification: "获取验证码",
				List: [{
					id: '1',
					price: 100.00,
					name: "商品"
				}],
				active: null,
				flag: false,
				isGetPhone: false
			}
		},
		methods: {
			getPhone(e) {
				const that = this;
				wx.checkSession({
				  success () {
				    if(e.detail.errMsg=="getPhoneNumber:ok"){
				    	that.$http.post('/account/app/register', {mobile: that.phone}).then((res) => {
							if(res.code == 200) {
								that.phone = res.data.mobile
							}
						})	
				    }
				  },
				  fail () {
				    // session_key 已经失效，需要重新执行登录流程
					that.$mUtil.toast('微信登录已过期', 2000);
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					},2500)
				  }
				})
				
			},
			//跳转协议
			goToAgreement() {
				uni.navigateTo({
					url: "./agreement"
				})
			},
			//跳转到登录页
			goToLogin() {
				uni.redirectTo({
					url: "./login"
				})
				// let getOenId = uni.getStorageSync('openId')
				// console.log(getOenId)
			},
			//倒计时
			countDown() {
				var that = this
				if (that.time <= 0) {
					that.disabled = false;
					that.verification = "重新获取";
					that.isPhone = true;
					that.time = 60
					clearInterval(that.clear);
				} else {
					that.disabled = true;
					--that.time;
					that.verification = this.time + "s";
				}
			},

			//获取验证码
			judgeRegister() {
				if (this.isPhone){
					this.$http.get("/account/verify-mobile/" + this.phone, ).then(res => {
						if (res && res.code == 200) {
							if (res.data == true) {
								this.$mUtil.toast("该手机号已被注册")
							} else if (res.data == false) {
								let res = this.$http.post(getVerfityCode, this.phone).then(res => {
									if (res && res.code == 200) {
										this.disabled = false;
										this.isPhone = false;
										this.verification = this.time + 's';
										this.clear = setInterval(this.countDown, 1000);
										this.$mUtil.toast("发送成功")
									} else {
										this.$mUtil.toast(res.msg)
									}
								})
							}
						}
					})
				}
			},
			obtainCode() {
				if (this.isPhone) {
					this.disabled = false;
					this.isPhone = false;
					this.verification = this.time + 's';
					this.clear = setInterval(this.countDown, 1000);
				}
			},
			beforeDestroy() {
				clearInterval(this.clear)
			},
			//邀请码
			invitationCode(e) {
				let invitationCode = e.detail.value
				this.invitation = invitationCode
			},
			// 手机号
			onPhone(e) {
				let onPhone = e.detail.value
				this.phone = onPhone
				if (onPhone.match(this.$mConfig.telRegex)) {
					if(this.verification=='获取验证码'||this.verification=='重新获取'){
						this.isPhone = true
					}
				} else {
					this.isPhone = false
				}
			},
			onPass(e) {
				let onPass = e.detail.value
				this.password = onPass
			},
			//同意并注册
			formSubmit(e) {
				
				if (!this.phone) {
					this.$mUtil.toast('请输入手机号')
					return false
				}
				if (!(this.phone.match(this.$mConfig.telRegex))) {
					this.$mUtil.toast('请输入正确手机号')
					return false
				}
				if (!this.code) {
					this.$mUtil.toast("请输入验证码")
					return false
				}
				if (!this.password) {
					this.$mUtil.toast("请输入登录密码")
					return false
				}
				if (!this.flag) {
					this.$mUtil.toast('请先同意协议')
					return false
				}
				
				let param = {
					mobile: this.phone,
					captcha: this.code,
					invitation_code: this.invitation,
					password: this.password
				}
				this.$http.post(appRegister, param)
					.then(res => {
						if (res.code == 200) {
							this.$mUtil.toast("注册成功")
							setTimeout(() => {
								uni.redirectTo({
									url: "./login"
								})
							}, 1000)
						}
					})

			},

			// 协议
			onFlag() {
				this.flag = !this.flag
			},
			radioChange(index) {
				if (this.active == index) {
					this.active == null;
				} else {
					this.active = index
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.button {
		margin: 70rpx 50rpx;

		.agree-register {
			color: #FFFFFF;
			font-weight: 400;
			font-size: 32rpx;
			// padding: 22rpx 0rpx;
			width: 550rpx;
			text-align: center;
			background-color: #FA6138;
			border-radius: 20rpx;
			margin-left: 50rpx;
		}

		.go-to-login {
			font-weight: 400;
			color: #FA6138;
			font-size: 32rpx;
			// padding: 22rpx 0;
			width: 550rpx;
			text-align: center;
			margin-top: 24rpx;
			border: 1rpx solid #3775F6;
			border-radius: 20rpx;
			margin-left: 50rpx;
			box-sizing: border-box;
		}
	}

	.agree {
		font-size: 28rpx;
		color: #999999;
		font-weight: Regular;
		margin-left: 10rpx;

		text {
			font-weight: 400;
			color: #FA6138;
		}
	}

	.choice {

		margin: 0 50rpx;
		display: flex;

		.whole {
			display: flex;

			.top {
				display: flex;
			}
		}
	}

	.password {
		display: flex;
		align-items: center;
		padding: 40rpx 0 40rpx 0;
		border-bottom: 1rpx solid #E6E6E6;

		.name {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			margin-right: 40rpx;
		}
	}

	.invitation {
		display: flex;
		align-items: center;
		padding: 40rpx 0 40rpx 0;
		border-bottom: 1rpx solid #E6E6E6;

		.name {
			font-size: 28rpx;
			font-weight: Medium;
			color: #333333;
			margin-right: 40rpx;
		}
	}

	.verification {
		display: flex;
		flex-wrap: nowrap;
		padding: 40rpx 0 34rpx 0;
		align-items: center;
		border-bottom: 1rpx solid #E6E6E6;

		.name {
			font-size: 28rpx;
			color: #333333;
			line-height: 28rpx;
			font-weight: 500;
			margin-right: 40rpx;
		}

		.adjustment {
			flex: 1;
		}

		.obtain {
			// padding: 14rpx 30rpx;
			padding: 0 30rpx;
			color: #999;
			background-color: #FFFFFF;

			font-size: 28rpx;
			font-weight: Regular;
			border: 1rpx solid #B3B3B3;
			border-radius: 36rpx;
		}

		.active {
			background-color: #FA6138;
			color: #FFFFFF;
      border: none;
		}
	}

	.register {
		.item {
			margin: 80rpx 50rpx 40rpx 50rpx;

			.top {
				font-size: 38rpx;
				font-weight: Bold;
				color: #333333;
				line-height: 28rpx;
			}

			.phone {
				display: flex;
				align-items: center;
				padding: 40rpx 0 34rpx 0;
				border-bottom: 1rpx solid #E6E6E6;

				.name {
					margin-right: 40rpx;
				}
			}
		}

	}
</style>