hg_zlxc_h5/pages/application/registrationPhone.vue

<template>
	<view class="main">
		<view class="redTps">
			请填写报名学员的手机号，该手机号作为学员唯一报名手机号，一经确定，不可更改。
		</view>
		<view class="content">
			<view class="logo">
				<image src="../../static/images/logo.png" mode=""></image>
			</view>
			<view class="form">
				<view class="form_item">
					<input type="number" value="" v-model="params.phone" placeholder="请输入手机号"/>
				</view>
				<view class="form_item">
					<view class="inputBox">
						<input type="number" value="" v-model="params.code" placeholder="请输入验证码"/>
					</view>
					<view class="verificationCode" @click="goSms">{{codeText}}</view>
				</view>
			</view>
			
			<view class="btn" @click="gologin">确定</view>
			
			<view class="radioWrap">
				<view>
					<u-checkbox-group :wrap='true'>
						<u-checkbox v-model="isCheck" shape="circle" label-size="24rpx">
							我已阅读并同意 <text
								@click.stop="$goPage('/pages/application/privacyAgreement/privacyAgreement?type=2')">《用户协议》</text>
							和 <text
								@click.stop="$goPage('/pages/application/privacyAgreement/privacyAgreement?type=1')">《隐私协议》</text>
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import indexApi from '@/api/index.js'
	export  default {
		data() {
			return {
				isCheck: false,
				codeText: '获取验证码',
				params: {},
				showBtnOn: false
			}
		},
		methods: {
			//发送短信
			async goSms() {
				const {
					params
				} = this
				const reg = /^(0|86|17951)?(1[0-9])[0-9]{9}$/;
				console.log('666')
				// const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!params.phone) return this.$u.toast('请输入手机号');
				if (!reg.test(params.phone)) return this.$u.toast('手机号格式有误');
				if (this.showBtnOn) return
				const [message, data] = await indexApi.getLoginRegistCode({
					codeType: 1,
					phone: params.phone,
				})
				console.log(data)
				if (data.code != 0) return this.$u.toast(data.message);
				// this.data = data
				// 获取验证码
				var time = 60;
				var timer = setInterval(() => {
					time--;
					this.codeText = time + "秒重发"
					this.showBtnOn = true;
					if (time == 0) {
						clearInterval(timer);
						this.codeText = "获取验证码";
						this.showBtnOn = false;
					}
				}, 1000);
			},
			// 验证码登录
			async gologin() {
				const {
					params
				} = this
				const reg = /^(0|86|17951)?(1[0-9])[0-9]{9}$/;
				if (!params.phone) return uni.$u.toast('请输入手机号');
				if (!reg.test(params.phone)) return uni.$u.toast('手机号格式有误');
				if (!params.code) return uni.$u.toast('请输入验证码');
				if (!this.isCheck) return uni.$u.toast('请勾选用户协议');
				const [err, data] = await indexApi.loginSMS({
					personnelType: 1,
					username: params.phone,
					code: params.code,
					loginType: 1,
				})
				if (data.code != 0) return uni.$u.toast(data.message);
				
				uni.setStorageSync('Authorization', data.data.token);
				uni.setStorageSync('studentId', data.data.studentId);
				await this.getOwnerAccountBase()
				this.$goPage('/pages/application/fillRegistInfo')
			
			},
			//获取用户信息
			async getOwnerAccountBase() {
				const [err, data] = await indexApi.getOwnerAccountBase();
				if (data.code != 0) return uni.$u.toast(data.message);
				uni.setStorageSync('userInfo', data.data);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background: #fff;
		height: 100vh;
	}
	.redTps {
		width: 100%;
		background: #FCEAEA;
		font-size: 28rpx;
		color: #E63633;
		padding: 24rpx 32rpx;
	}
	.radioWrap {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	
		/deep/.radio-btn {
			margin-right: -9rpx !important;
		}
	
		radio {
			zoom: .8;
		}
	
		view:nth-child(2) {
			font-size: 24rpx;
			color: #bfbfbf;
		}
	
		text {
			color: #218DFF;
		}
	}
	
	.content {
		width: 100%;
		padding: 16% 32rpx 0 32rpx;
	  .logo {
		  width: 100rpx;
		  height: 100rpx;
		  margin: 0 auto;
	  }
	
	  .form {
		  padding: 100rpx 0 40rpx 0;
	    .form_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 112rpx;
			font-size: 32rpx;
			line-height: 112rpx;
			border-bottom: 1rpx solid #E8E9EC;
	      input {
			display: block;
			width: 100%;
			height: 100%;
			font-size: 32rpx;
			color: #333;
	      }
		  .verificationCode {
			  font-size: 28rpx;
			  color: #1989FA;
			  position: relative;
			  padding: 0 0 0 24rpx;
			  &::before {
				  content: '';
				  position: absolute;
				  left: 0;
				  top: 50%;
				  transform: translateY(-50%);
				  width: 2rpx;
				  height: 40rpx;
				  background-color: #E8E9EC;
			  }
		  }
	    }
	  }
	
	  .btn {
			height: 96rpx;
			background: linear-gradient(180deg, #3593FB 0%, #53D3E5 100%);
			border-radius: 50rpx;
			font-size: 36rpx;
			color: #fff;
			text-align: center;
			line-height: 96rpx;
			margin-bottom: 40rpx;
	  }
	
	}
</style>