BiKing/pages/login/safety-verification.vue

<template>
	<view>
		<!-- 头部 -->
		<headContent>
			<template #left>
				<view class="head-revers-back iconfont" @click.stop="reversBackBtn()">&#xe604;</view>
			</template>
			<template #content>
				<view class="haed-title">安全验证</view>
			</template>
		</headContent>
		<view class="page-content">
			<text class="login-title">{{ title }}验证</text>
			<text class="login-content">验证码已发送至{{account}}</text>
			<view class="form-item">
				<view v-if="this.title === '手机号'" class="form-lable" @click.stop="selectAreaCode()">
					<text>+{{ areaCode }}</text><text class="form-lable-icon iconfont">&#xeb6d;</text>
				</view>
				<input class="form-input" v-model="code" placeholder-class="form-input-place" :placeholder="`请输入验证码`" />
				<view class="form-code" @click.stop="getCode()">{{ codeText }}</view>
			</view>
			<view :class="['form-btn' , getInfo() ? '' : 'invalid-form-btn']" style="margin-top: 28rpx;"
				@click.stop="formSubmit">
				下一步
			</view>
		</view>



	</view>
</template>

<script>
	import {
		reverseBack
	} from "@/utils/common.js"
	import {
		Api_getEmailCode,
		Api_getSmsSend
	} from "@/api/index.js"
	export default {
		name: 'safety-verification',
		data() {
			return {
				title: '',
				type: 0,
				account: '',
				code: '',
				areaCode: '',
				codeText: '获取验证码',
				timeInterval: null
			};
		},
		onLoad(opt) {
			this.type = opt?.type;
			this.account = opt?.account;
		},
		watch: {
			account: {
				handler(newAccount) {
					if (newAccount.indexOf('@') >= 0) {
						// 邮箱
						this.title = '邮箱';
					} else {
						// 手机号
						this.title = '手机号';
					}

				}
			}
		},

		computed: {
			getInfo() {
				return () => {
					let status = false
					switch (this.title) {
						case '邮箱':
							status = this.code ? true : false;
							break;
						case '手机号':
							status = this.code && this.areaCode ? true : false;
							break;
					}

					return status
				}
			},

		},
		methods: {
			selectAreaCode() {
				uni.navigateTo({
					url: '/pages/login/area-code'
				})
			},
			setAreaCode(e) {
				if (e) {
					this.areaCode = e.area_code;
				}
			},
			reversBackBtn() {
				reverseBack()
			},
			getCode() {
				if (this.codeText !== '获取验证码') {
					return false
				}
				let Api_ = '',
					obj = {
						user_string: this.account,
						type: 'forget'
					}
				if (this.title === '邮箱') {
					Api_ = Api_getEmailCode;
				}
				if (this.title === '手机号') {
					Api_ = Api_getSmsSend;
					obj.area_code = this.areaCode
				}
				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)
				}
			},
			formSubmit() {
				// 安全验证
				if (this.code) {
					let path = ''
					switch (this.type) {
						case '1':
							path = `/pages/login/reset-pswd?account=${this.account}&code=${this.code}`;
							break

					}
					if (path) {
						uni.navigateTo({
							url: path
						})
					}
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~./common.scss";

	// <view class="form-item">
	// 	<input class="form-input" placeholder-class="form-input-place" placeholder="请输入您的邮箱地址" />
	// 	<view class="form-code">52秒后重新发送</view>
	// </view>
	.login-title {
		font-size: 34rpx !important;
	}

	.login-content {
		padding-bottom: 0 !important;
	}

	.form-lable {
		min-width: 100rpx;
		text-align: center;
		padding: 0 20rpx;
		flex-shrink: 0;
	}

	.form-item {
		width: 100%;
		min-height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid $border-color4;

		.form-input {
			flex: 1;
			font-size: 26rpx;
		}

		.form-input-place {
			font-size: 26rpx;
			font-weight: 800;
		}

		.form-code {
			flex-shrink: 0;
			padding-left: 10rpx;
			font-size: 26rpx;
			color: $Theme-Color;
		}
	}


	.form-btn {
		margin-top: 80rpx !important;
	}
</style>