TraceabilityAPP/pages/Login/login.vue

<template>
	<view class="box">

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

		</view>

		<Myindex style="float: right;"></Myindex>

		<view class="" v-show="false">
			<image src="/static/tabs-icon/dk.png"></image>
		</view>


		<view class="content">
			<view class="tit">
				您好！
			</view>
			<view class="tit" style="margin-bottom: 60rpx;">
				欢迎进入吟龙土壤墒情监测溯系统!
			</view>

			<view class="input-card">
				<view class="card-head">
					<view class="triangle top" />
					<view class="triangle bottom" />
					<view class="code-login" @click="changeLoginType(0)" :class="{act:loginType==2}">
						<span>验证码登录</span>
						<view class="line" :style="{transform: 'translateX('+lineX+'rpx)'}" />

					</view>
					<view class="password-login" @click="changeLoginType(350)" :class="{act:loginType==1}">
						密码登录
					</view>
					<!-- <view class="" style="background-color: #35D190;color: white;width: 100%;height: 100rpx;
					text-align: center;line-height: 100rpx;">
						账号登录
					</view> -->
				</view>
				<view class="login-content">
					<view class="code">

						<view class="" v-if="loginType==1" style="margin-bottom: 20rpx;">
							<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.account"></u-input>

							<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="" v-else>

							<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.account"></u-input>

							<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.code"></u-input>


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





						<view class="" style="font-size: 26rpx;">
							<text>还没有账号？点击</text> <text @click="resgiter"
								style="color: #35D190;text-decoration: underline;">注册</text>
						</view>

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


					</view>



				</view>














				<!-- <>old -->

				<!-- 	<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="number" 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 :password="!pwdShow" shape='circle'
						customStyle="background:#F5F5F5;height:80rpx;;padding-left:40rpx;border:none"
						placeholder="请输入密码" border="surround" v-model="formData.password">
						<template #suffix>
							<u-icon :name="pwdShow?'eye-off':'eye-fill'" @click="pwdShow=!pwdShow" size="25"></u-icon>
						</template>
					</u-input>
				</view>
				<view class="resgiter" @click="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 class="agreement">
			<text>登录代表您已经同意</text> <text style="color:#2D94FE ;">服务协议、隐私政策</text>
		</view> -->
	</view>
</template>
<style lang="scss" scoped>
	.box {
		width: 100vw;
		height: 100vh;
		background-image: url('/static/main/login/bg.png');
		background-size: 100% 100%;
		position: relative;
	}

	.content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 750rpx;
		padding: 0 25rpx;
		box-sizing: border-box;
		margin: 0 auto;

		.tit {
			color: white;
			font-size: 44rpx;
			margin-bottom: 18rpx;
			// margin-bottom: 30rpx;
			margin-left: 23rpx;
		}

		.input-card {
			width: 700rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			overflow: hidden;

			.card-head {
				background-color: #fff;
				display: flex;
				position: relative;


				.triangle {
					position: absolute;
					width: 0;
					height: 0;
					border-left: 12rpx solid transparent;
					border-right: 12rpx solid transparent;
					left: 50%;
				}

				.top {
					border-top: 50rpx solid #31BE89;
					top: -1rpx;
					transform: translateX(-50%);
				}

				.bottom {
					border-bottom: 50rpx solid white;
					bottom: -1rpx;
					transform: translateX(-50%);
				}

				.code-login {
					width: 50%;
					height: 50px;
					background-color: #35D190;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx;
					transition: 500ms;
					color: white;

					.line {
						width: 100rpx;
						background-color: #35D190;
						height: 3px;
						border-radius: 100rpx;
						transition: 500ms;

					}
				}

				.password-login {
					width: 50%;
					height: 50px;
					background-color: #35D190;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx;
					transition: 500ms;
					color: white;
				}

				.act {
					background-color: white;
					color: black;
					font-weight: bold;
				}



			}

			.login-content {
				background-color: #fff;
				padding: 10rpx 40rpx;
				transform: translateY(-1rpx);
				color: #7A7A7A;

				.code {

					.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;
						}
					}


				}

				.password {}


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

				// box-sizing: b;
			}

			// .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;

			// }



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

			// }

		}
	}

	.agreement {
		position: absolute;
		bottom: 100rpx;
		margin: 0 auto;
		font-size: 24rpx;
		color: white;
		width: auto;
		left: 50%;
		transform: translateX(-50%);
		width: 700rpx;
		text-align: center;
		white-space: nowrap;
	}
</style>
<script setup>
	import Myindex from '@/components/return/index.vue';
	import {
		login,
		xinregister
	} from '@/api/api.js';

	import {
		useStore
	} from 'vuex'
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';




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

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

	//判断安卓 ios
	const checkUserAgent = () => {

		uni.getSystemInfo({
			success: (res) => {
				const platform = res.platform.toLowerCase();

				if (platform === 'ios') {
					formData.terminal = 5;
				} else if (platform === 'android') {
					formData.terminal = 6;
				} else if (platform === 'windows') {
					formData.terminal = 4;
				} else if (platform === 'mac') {
					formData.terminal = 4;
				}


			}
		})
		// #ifdef H5
		formData.terminal = 3;
		// #endif
		// #ifdef MP-WEIXIN
		formData.terminal = 1;
		// #endif

	};
	//倒计时
	const startCountDown = () => {
		countDown.value = 60
		const timer = setInterval(() => {
			countDown.value -= 1; // 更新倒计时秒数

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

			}
		}, 1000);
	};

	const getCode = () => {

		if (countDown.value) return

		if (!formData.account) return uni.$u.toast('账号不能为空');
		let data = {
			phone: formData.account,
			scene: 101
		}
		xinregister(data).then((res) => {

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

	//注册

	const resgiter = () => {
		uni.navigateTo({
			url: '/pages/Login/resgier'
		})
	}
	//登录
	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) {
				uni.showLoading({
					title: '登陆中'
				})

				store.dispatch('saveUserInfo', res.data)
				setTimeout(() => {
					uni.hideLoading()
					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
		}
	}
	const lineX = ref(0)
	const loginType = ref(2)
	const changeLoginType = (num) => {
		num ? loginType.value = 1 : loginType.value = 2
		formData.scene = loginType.value

		console.log(formData.scene)
		lineX.value = num
	}
	const u = (name) => {
		return `/static/main/login/${name}.png`
	}
	onMounted(() => {
		checkUserAgent()


	})
</script>