mgrading/src/views/signup/SignUpAccount.vue

<template>
	<div class="signUpAccount">
		<!-- <m-header /> -->
		<m-step />

		<div class="title">基本信息</div>
		<!-- <van-form ref="form" :show-error="false" validate-first @submit="onSubmit" @failed="onFailed"> -->
		<van-field v-model="form.phone" type="tel" :maxlength="11" required name="phone" label="手机号" placeholder="请输入手机号" />
		<van-field type="number" v-model="form.code" :maxlength="6" required clearable name="code" label="验证码" placeholder="请输入验证码">
			<template #button>
				<span class="codeText" v-show="countDownStatus" @click="onGetCode">获取验证码</span>
				<span class="code-text" v-show="!countDownStatus">
					<van-count-down ref="countdown" style="color: #c4c4c4" :auto-start="false" :time="countDownTime" @finish="onCountDownFinished" format="ss秒" />
				</span>
			</template>
		</van-field>

		<div class="agreeProtocol">
			<van-checkbox v-model="agreeStatus"></van-checkbox>
			<i style="font-style: normal; color: #999" @click="agreeStatus = !agreeStatus">已阅读并同意</i> <span @click="onToProtocol">《酷乐秀用户注册服务协议》</span>
		</div>
		<van-button type="primary" :disabled="!agreeStatus" @click="onSubmit" round block>下一步</van-button>
		<!-- </van-form> -->
	</div>
</template>
<script>
	import MStep from '@/components/MStep'
	// import { browser } from '@/common/common'
	import {
		patternPhone
	} from '@/utils/validateRules'
	import setLoading from '@/utils/loading'
	import {
		sendSms,
		smsLogin,
		queryUserByPhone
	} from './SignUpApi'
	export default {
		name: 'signUpAccount',
		components: {
			MStep
		},
		data() {
			localStorage.removeItem("Authorization")
			let accountInfo = localStorage.getItem('accountInfo')
			localStorage.removeItem('accountInfo')
			const query = this.$route.query
			return {
				examId: query.examId,
				organId: query.organId,
				patternPhone: patternPhone,
				agreeStatus: false,
				form: accountInfo ? JSON.parse(accountInfo) : {
					phone: null,
					code: null,
				},
				countDownStatus: true, // 到计时状态
				countDownTime: 1000 * 120 // 倒计时时间
			}
		},
		mounted() {
			// 插入token
			// let params = this.$route.query
			// if(params.Authorization) {
			//     localStorage.setItem('Authorization', decodeURI(params.Authorization))
			//     localStorage.setItem('userInfo', decodeURI(params.Authorization))
			// }
		},
		methods: {
			async onGetCode() { // 获取验证码
				setLoading(true)
				if (!this.checkPhone(this.form.phone)) {
					return
				}
				try {
					const resultSend = await sendSms({
						mobile: this.form.phone
					})
					const result = resultSend.data
					if (result.code === 200) {
						this.countDownStatus = false
						this.$refs.countdown.start() // 倒计时开始
						setLoading(false)
					} else {
						this.$toast(result.msg)
					}
				} catch (error) {
					//
					setLoading(false)
				}
			},
			onCountDownFinished() { // 倒计时结束
				this.countDownStatus = true
				this.$refs.countdown.reset()
			},
			async onCheckPhone() { // 检查手机号是否存在
				setLoading(true)
				try {
					let form = this.form
					let params = {
						mobile: form.phone,
						clientId: "student"
					}
					const code = await queryUserByPhone(params)
					const result = code.data
					if (result.code === 200) {
						// 1 为已注册，0为未注册
						this.onLogin(result.data)
					} else {
						this.$toast(result.msg)
					}
				} catch (error) {
					setLoading(false)
				}
			},
			async onLogin(status) { // 登录
				const form = this.form
				let params = {
					clientId: 'student',
					clientSecret: 'student',
					phone: form.phone,
					smsCode: form.code,
					organId: this.organId
				}
				if (status === 0) { // 不为空是为注册
					params.registerFlag = 'true'
				}
				const login = await smsLogin(params)
				const result = login.data
				if (result.code === 200) {
					let auth = result.data.authentication
					localStorage.setItem('Authorization', auth.token_type + ' ' + auth.access_token)
					this.$router.push({
						path: "/signUpBaseInfo",
						query: {
							organId: this.organId
						}
					})
				} else {
					this.$toast(result.msg)
				}
			},
			onSubmit() {
				const form = this.form
				if (!this.checkPhone(form.phone)) { // 手机号验证
					return
				}
				if (!form.code) {
					this.$toast('请输入验证码')
					return
				}
				if(!this.agreeStatus) {
					this.$toast('请先阅读并同意酷乐秀用户注册服务协议')
					return
				}
				// 验证码
				this.onCheckPhone()
			},
			onToProtocol() { // 跳转协议
				localStorage.setItem('accountInfo', JSON.stringify(this.form))
				this.$router.push({
					path: '/smallProtocol'
				})
			},
			checkPhone(phoneNumber) {
				let result = true
				if (!(this.patternPhone.test(phoneNumber))) {
					this.$toast('手机号输入有误')
					result = false
				}
				return result
			}
		},
		destroyed() {
			this.$toast.clear()
		}
	}
</script>
<style lang="less" scoped>
@import url("../../assets/commonLess/variable");
	.signUpAccount {
		height: 100vh;
		overflow-y: auto;
		overflow-x: hidden;
		background-color: @--main-bg-color;

		.title {
			font-size: .16rem;
			color: @--font-second-color;
			padding: .12rem .16rem;
		}

		/deep/.van-cell {
			padding: .13rem .16rem;
		}

		/deep/.van-field__label {
			font-size: .17rem;
			color: @--font-main-color;
			width: 1.15rem;
		}

		/deep/.van-field__body {
			font-size: .16rem
		}

		/deep/.van-count-down {
			font-size: .16rem;
			// color: ;
		}

		.codeText {
			font-size: .16rem;
			color: @--main-color;
		}

		.agreeProtocol {
			font-size: .14rem;
			display: flex;
			align-items: center;
			color: @--font-main-color;
			padding: .15rem .15rem .05rem;

			.van-checkbox {
				padding-right: .08rem;
			}

			/deep/.van-checkbox__icon .van-icon {
				// border-color: #14928A;
				background: #F4F4F4;
			}

			/deep/.van-checkbox__icon--checked .van-icon {
				color: #FFFFFF;
				background-color: @--main-color;
				border-color: @--main-color;
			}

			span {
				color: @--main-color;
			}
		}
		.van-button--primary {
			margin: .16rem 0 .18rem;
			background-color: @--main-color;
			border: 1px solid @--main-color;
			color: #FFFFFF;
			font-size: .18rem;
			height: .5rem;
			line-height: .52rem;
			width: 90%;
			margin-left: 5%;
		}
		.stepBtn {
			margin-top: .15rem;
		}
	}
</style>