BiKing/pages/login/email-verify.vue

<template>
	<view>
		<headContent>
			<template #left>
				<view class="head-revers-back iconfont" @click.stop="reversBackBtn()">&#xe604;</view>
			</template>
		</headContent>

		<view class="page-content">
			<text class="login-title">{{ title }}</text>
			<text class="login-content">验证码已发送至{{account}}</text>

			<view class="code-box">
				<u-code-input v-model="accountCode" :maxlength="6" :focus="true" color="#000000" :fontSize="30" :size="80" :space="30"></u-code-input>
				<view class=" code-hint" @click.stop="resendCode()">{{ CodeText }} </view>
			</view>


		</view>

		<slider-verify ref="sliderVerifyRef" @slideImgSuccess="slideImgSuccess" />
	</view>
</template>

<script>
	import {
		Api_getEmailCode,
		Api_getSmsSend
	} from "@/api/index.js"
	import {
		reverseBack
	} from "@/utils/common.js"


	export default {
		name: 'emailVerify',

		data() {
			return {
				title: '',
				type: '',
				areaCode: '',
				account: '',
				invitationCode: '',
				accountCode: '',
				CodeText: '重新发送',
				timeInterval: null
			};
		},
		onLoad(opt) {
			this.type = opt?.type;
			this.areaCode = opt?.areaCode;
			this.account = opt?.account;
			this.invitationCode = opt?.invitationCode;
			this.title = this.type == 1 ? '邮箱验证' : '手机验证'
			this.getEmailCode()
		},
		watch: {
			accountCode: {
				handler(newCode) {
					if (newCode.length >= 6) {
						uni.navigateTo({
							url: `/pages/login/submit-register?type=${this.type}&account=${this.account}&invitationCode=${this.invitationCode}&accountCode=${this.accountCode}`
						})
					}
				},
				immediate: true
			}
		},
		methods: {
			getEmailCode() {
				if (this.CodeText !== '重新发送') {
					return false
				}
				let Api_ = '',
					obj = {};
				obj.user_string = this.account;
				switch (this.type) {
					case '0':
					case 0:
						// 手机号 - 获取验证码
						Api_ = Api_getSmsSend;
						obj.area_code = this.areaCode;
						break;
					case '1':
					case 1:
						// 邮箱 - 获取验证码
						Api_ = Api_getEmailCode;
						break;
					default:
						break;
				}
				if (Api_) {
					Api_(obj).then(res => {

					}).catch(err => {

					})
					let num = 60
					this.timeInterval = setInterval(() => {
						num--;
						if (num <= 0) {
							clearInterval(this.timeInterval);
							this.CodeText = '重新发送';
							return false
						};
						this.CodeText = `${num}秒后重新发送`;
						123456
					}, 1000)
				}


			},

			reversBackBtn() {
				reverseBack()
			},

			resendCode() {
				this.getEmailCode()
			},
			setPassWord() {

			},
			slideImgSuccess(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~./common.scss";
	::v-deep .u-code-input__item{
		border-radius: 10rpx;
	}
</style>