TraceabilityAPP/pages/Login/login.vue

<template>


	<view class="box">
		<view class="content">
			<view class="tit">
				欢迎进入吟龙土壤墒情监测溯系统!
			</view>
			<view class="input-card">
				<view class="login-type" v-for="(item,i) in arr1.list" :key="i" @click="aclick(i)">
					{{item.name}}
					<view class="line" v-if="i==num" />
				</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.account"></u-input>
				</view>

				<view class="yanzm" v-if="num==0">
					<u-input type="password" shape='circle'
						customStyle="background:#F5F5F5;height:80rpx;padding-left:40rpx;border:none;width:120rpx;"
						placeholder="请输入验证码" border="surround" v-model="formData.code"></u-input>

					<view @tap="getCode" class="code" v-if="!isshow">{{tips}}</view>
					<view class="code" v-else>{{countDown}}s</view>

				</view>
				<view class="" v-if="num==1">
					<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="resgiter">
					用户注册
				</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 {
		login,

		xinregister
	} from '@/api/file.js';
	import {
		useStore
	} from 'vuex'
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';

	const store = useStore()

	const num = ref(0)
	const isshow = ref(false)
	const tips = ref('获取验证码')
	const countDown = ref(60); // 倒计时秒数
	const formData = reactive({
		account: "",
		password: "",
		code: '',
		scene: "",
		terminal: ''

	})
	const arr1 = reactive({
		list: [{
				name: '验证码登录',
				id: 1
			},
			{
				name: '账号登录',
				id: 2
			},
		]
	})

	//判断安卓 ios
	const checkUserAgent = () => {
		uni.getSystemInfo({
			success: function(res) {
				const platform = res.platform.toLowerCase();
				if (platform === 'android') {
					formData.terminal = 6
				} else if (platform === 'ios') {
					formData.terminal = 5
				} else {
					formData.terminal = 6
					console.log('当前设备不是 Android 也不是 iOS');
				}
			}
		});

	};
	//倒计时
	const startCountDown = () => {
		const timer = setInterval(() => {
			countDown.value -= 1; // 更新倒计时秒数
			isshow.value = true
			if (countDown.value === 0) {
				clearInterval(timer); // 倒计时结束，清除定时器
				isshow.value = false
				countDown.value = 60

			}
		}, 1000);
	};

	const getCode = () => {
		let data = {
			phone: formData.account,
			scene: 101
		}
		xinregister(data).then((res) => {
			console.log(res)
			if (res.code == 1) {
				uni.$u.toast('验证码已发送');
				// 通知验证码组件内部开始倒计时
				startCountDown()
			}
		})
	}


	const submitFn = () => {


		if (!formData.account) return uni.$u.toast('账号不能为空');
		if (!formData.password && formData.scene == 1) return uni.$u.toast('密码不能为空');
		if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(formData.account)) return uni.$u.toast(
			'请输入正确的手机号码'
		);
		// console.log(formData)
		if (!formData.code && formData.scene == 2) return uni.$u.toast('验证码不能为空');
		login(formData).then((res) => {

			if (res.code == 1) {

				store.commit('saveUserInfo', res.data)
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/index/massif'
					})
					uni.$u.toast('登录成功');
				}, 500)

			}

		})


	}

	const codeChange = (text) => {
		tips.value = text

	}
	const aclick = (i) => {
		num.value = i
		if (i == 1) {
			formData.scene = 1
			formData.password = ''
		} else {
			formData.code = ''
			formData.scene = 2
		}
	}

	onMounted(() => {
		checkUserAgent()


		formData.scene = 2

	})
</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;
				display: inline-block;
				margin-right: 50rpx;
				flex-direction: column;
				// align-items: center;
				justify-content: flex-start;

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

			}

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

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

			}

		}
	}
</style>