TraceabilityAPP/pages/Login/resgier.vue

<template>


	<view class="box">
		<view class="" style="height: var(--status-bar-height);">

		</view>
		<view class="" style="margin-left: 20rpx;float: left;" @click="back">
			<u-icon name="arrow-left" color="white" size="20"></u-icon>
		</view>
		<Myindex style="float: right;"></Myindex>
		<view class="content">

			<view class="tit" style="margin-bottom: 10rpx;">
				您好！
			</view>
			<view class="tit">
				欢迎进入吟龙土壤墒情监测溯系统!
			</view>
			<view class="input-card" style="color: #7A7A7A;">
				<view class="login-type" style="color: black;font-weight: bold;">
					注册
					<view class="line" />
				</view>
				<view class="" style="margin: 30rpx 0;">
					<view class="" style="display: flex;margin-bottom: 10rpx;">
						<up-image :src="u('sj')" width="30rpx" height="44rpx"
							style="margin-right: 20rpx;"></up-image>手机号
					</view>
					<u-input placeholder="请输入账号"
						customStyle="background:#F5F5F5;height:80rpx;padding-left:40rpx;border:none" shape='circle'
						border="surround" v-model="formData.mobile"></u-input>
				</view>
				<view class="" style="display: flex;margin-top: 30rpx;margin-bottom: 10rpx;">
					<up-image :src="u('yzm')" width="30rpx" height="44rpx" style="margin-right: 20rpx;"></up-image>验证码
				</view>
				<view class="" style="position: relative;">
					<u-input type="number" shape='circle'
						customStyle="background:#F5F5F5;height:80rpx;padding-left:40rpx;border:none;margin-bottom:15rpx"
						placeholder="请输入验证码" border="surround" v-model="formData.verify_code"></u-input>


					<view class="get-code" :style="{color: countDown?'#ADADAD':''}" @click="getCode"><text
							class="lineY"></text>
						验证码 <text v-if='countDown'>{{countDown}}s</text> </view>
				</view>

				<view class="" style="margin: 30rpx 0;">
					<view class="" style="display: flex;margin-top: 30rpx;margin-bottom: 10rpx;">
						<up-image :src="u('mm')" width="30rpx" height="44rpx" style="margin-right: 20rpx;"></up-image>密码
					</view>
					<u-input :password="!pwdShow" shape='circle'
						customStyle="background:#F5F5F5;height:80rpx;;padding-left:40rpx;border:none"
						placeholder="请输入密码" border="surround" v-model="formData.password">

					</u-input>
				</view>
				<!-- <view class="">
					<u-input :password="!pwdShow1" shape='circle'
						customStyle="background:#F5F5F5;height:80rpx;;padding-left:40rpx;border:none"
						placeholder="请确认密码" border="surround" v-model="formData.password_confirm">
						<template #suffix>
							<u-icon :name="pwdShow1?'eye-off':'eye-fill'" size="25"
								@click="pwdShow1=!pwdShow1"></u-icon>
						</template>
					</u-input>


				</view> -->

				<view class="sub-btn">
					<u-button @click="submitFn" type="primary"
						customStyle="border:none;height:90rpx;border-radius: 100rpx;" color="#34D190"
						text="注册"></u-button>
				</view>

			</view>

		</view>

	</view>
</template>

<script setup>
	import Myindex from '@/components/return/index.vue';
	import {
		logregister,
		registerCode
	} from '@/api/api.js';
	import {
		reactive,
		ref
	} from 'vue';
	const pwdShow = ref(false)
	const pwdShow1 = ref(false)
	const formData = reactive({
		mobile: "19130550023",
		verify_code: "",
		password: "",
		password_confirm: "",


	})

	const countDown = ref(0)
	const u = (name) => {
		return `/static/main/login/${name}.png`
	}
	//倒计时
	const startCountDown = () => {
		countDown.value = 60
		const timer = setInterval(() => {
			countDown.value -= 1; // 更新倒计时秒数

			if (countDown.value <= 0) {
				clearInterval(timer); // 倒计时结束，清除定时器

			}
		}, 1000);
	};


	const getCode = () => {

		if (countDown.value) return

		if (!formData.mobile) return uni.$u.toast('账号不能为空');

		let data = {
			mobile: formData.mobile,
			scene: 'YZMDL'
		}
		registerCode(data).then((res) => {

			if (res.code == 1) {
				uni.$u.toast('验证码已发送');
				// 通知验证码组件内部开始倒计时
				startCountDown()
			}
		})
	}

	const submitFn = () => {
		var pattern = /^(?=.*[a-zA-Z])(?=.*\d).+$/;

		if (!formData.mobile) return uni.$u.toast('账号不能为空');
		if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(formData.mobile)) return uni.$u.toast(
			'请输入正确的手机号码'
		);
		if (!formData.password)
			return uni.$u.toast('密码不能为空')
		if (formData.password.length < 6)
			return uni.$u.toast('密码长度至少在6-25位之间')
		if (!pattern.test(formData.password)) return uni.$u.toast('密码要包含数字与英文')
		formData.password_confirm = formData.password
		logregister(formData).then((res) => {

			if (res.code == 1) {
				uni.navigateBack({
					delta: 1
				})
				uni.$u.toast('注册成功');
			} else {
				if (res.data && res.data.has_register == 1) {
					uni.redirectTo({
						url: '/pages/Login/login'
					})
				}
			}
		})


	}
	const back = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100vw;
		height: 100vh;
		background-color: $theme-main-color;
		position: relative;
	}

	.content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		// border-radius: 100rpx;
		width: 700rpx;

		.tit {
			color: white;
			font-size: 45rpx;
			margin-bottom: 30rpx;
		}

		.input-card {
			width: 700rpx;
			background-color: #fff;
			height: auto;
			padding: 40rpx;
			border-radius: 30rpx;

			.login-type {
				display: flex;

				// margin-right: 50rpx;
				flex-direction: column;
				align-items: center;
				// justify-content: flex-start;
				margin: 0 auto;
				text-align: center;

				.line {
					border-top: 3px solid #34D190;
					margin-top: 10rpx;
					width: 60rpx;
				}
			}

			.yanzm {
				display: flex;
				justify-content: space-between;

				.u-input {

					margin-right: 60rpx;
				}


			}

			.code {
				width: 120rpx;
				height: 80rpx;
				background-color: #34D190;
				line-height: 80rpx;
				text-align: center;
				border-radius: 20rpx 20rpx;
				font-size: 20rpx;
				padding: 0rpx 20rpx;
				color: #fff;

			}

			.sub-btn {
				margin-top: 30rpx;
			}

			.resgiter {
				font-size: 20rpx;
				margin-top: 40rpx;

			}

		}
	}

	.get-code {
		color: $theme-main-color;
		font-size: 28rpx;
		position: absolute;
		right: 30rpx;
		top: 20rpx;

		.lineY {
			width: 1px;
			height: 20rpx;
			background-color: $theme-main-color;
			display: inline-block;
			margin-right: 10rpx;
		}
	}
</style>