TraceabilityAPP/pages/Login/resgier.vue

<template>


	<view class="box">
		<view class="content">
			<view class="tit">
				欢迎进入吟龙土壤墒情监测溯系统!
			</view>
			<view class="input-card">
				<view class="login-type">
					账号注册
					<view class="line" />
				</view>
				<view class="" style="margin: 30rpx 0;">
					<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="margin: 30rpx 0;">
					<u-input type="password" 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 type="password" shape='circle'
						customStyle="background:#F5F5F5;height:80rpx;;padding-left:40rpx;border:none"
						placeholder="请确认密码" border="surround" v-model="formData.password_confirm"></u-input>
				</view>

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

			</view>

		</view>

	</view>
</template>

<script setup>
	import {
		logregister
	} from '@/api/api.js';
	import {
		reactive,
		ref
	} from 'vue';

	const formData = reactive({
		mobile: "",
		password: "",
		password_confirm: "",


	})





	const submitFn = () => {



		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 !== formData.password_confirm) return uni.$u.toast('密码与确认密码不一致');


		logregister(formData).then((res) => {

			if (res.code == 1) {
				uni.$u.toast('注册成功');
				uni.navigateBack({
					delta: 1
				})
			}
		})


	}
</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%);
		width: 700rpx;

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

		.input-card {
			width: 620rpx;
			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;

				.line {
					border-top: 3px solid #34D190;
					margin-left: 30rpx;
					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;

			}

		}
	}
</style>