nongxiaoyu/pages/login/index.vue

<template>
	<view class="login-container">
		<!-- 暂不登录-->
		<view class="page-header">
			<text class="back-icon" @click="goBack">←</text>
			<text class="page-title">登录</text>
			<text class="placeholder"></text>
		</view>

		<view class="logo-section">
			<image class="logo" src="/static/images/logo.png" mode="aspectFit"></image>
			<text class="app-name">农小禹</text>
			<text class="app-slogan">智慧农业，从此开始</text>
		</view>

		<view class="login-section">
			<!-- #ifndef MP-WEIXIN -->
			<view class="form-container">
				<view class="input-group">
					<input type="text" v-model="phoneNumber" placeholder="请输入手机号" class="input-field" maxlength="11" />
				</view>
				
				<!-- 密码登录 -->
				<view v-if="loginType === 'password'" class="input-group">
					<input type="password" v-model="password" placeholder="请输入密码" class="input-field" />
				</view>
				
				<!-- 验证码登录 -->
				<view v-if="loginType === 'code'" class="input-group verification-group">
					<input type="text" v-model="verificationCode" placeholder="请输入验证码" class="input-field code-input" maxlength="6" />
					<button 
						class="send-code-btn" 
						:disabled="countdown > 0" 
						@click="sendVerificationCode"
					>
						{{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
					</button>
				</view>
				
				<!-- <view class="form-actions">
					<text v-if="loginType === 'password'" class="forgot-password" @click="navigateToForgetPassword">忘记密码？</text>
				</view> -->
				<button  class="login-btn" @click="handleLogin">登录</button>
				
				<!-- 底部操作区 -->
				<view class="bottom-actions">
					<text class="action-link" @click="switchLoginType(loginType === 'password' ? 'code' : 'password')">
						{{ loginType === 'password' ? '验证码登录' : '密码登录' }}
					</text>
					<text class="action-link" @click="navigateToRegister">注册账号</text>
					<text v-if="loginType === 'password'" class="action-link" @click="navigateToForgetPassword">忘记密码</text>
				</view>
			</view>
			<!-- #endif -->

			<!-- #ifdef MP-WEIXIN -->
			<button type="primary" class="wechat-login-btn" bindtap="getUserProfile" @click="getUserProfile()">
				<view class="wechat-icon">微</view>
				<text>一键登录</text>
			</button>
			<!-- #endif -->
		</view>

		<view class="privacy-agreement">
			<checkbox :checked="agreed" @click="toggleAgreement"></checkbox>
			<text class="agreement-text">
				登录即表示您已同意
				<text class="link" @click="navigateToTerms">用户协议</text>
				和
				<text class="link" @click="navigateToPrivacy">隐私政策</text>
			</text>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import {
		mpAutoLogin, phoneLogin, phoneCodeLogin, sendVcode, sendPhoneVcodeNoUnique 
	} from "@/api/services/connect.js";
	import { fetchUserFieldList } from "@/api/services/field.js";
	import storage from "@/utils/storage.js";
	import Foundation from "@/utils/Foundation.js";

	// 获取并设置默认地块信息
	const fetchAndSetDefaultField = async () => {
		try {
			const res = await fetchUserFieldList(1, 10);
			console.log("获取地块列表", res);
			
			if (res.data && res.data.code === 200 && res.data.data && res.data.data.list && res.data.data.list.length > 0) {
				const firstField = res.data.data.list[0];
				
				// 保存默认地块到本地存储
				storage.setPlots(JSON.stringify({
					id: firstField.id,
					code: firstField.code,
					name: firstField.name,
					growCrops: firstField.crop,
					managerName: firstField.manager,
					size: firstField.area,
					farmId: firstField.farmId,
					timestamp: Date.now()
				}));
				
				console.log("已设置默认地块:", firstField.name);
				return true;
			} else {
				console.log("暂无可用地块");
				return false;
			}
		} catch (err) {
			console.error("获取地块列表失败", err);
			return false;
		}
	};

	// Reactive data
	const agreed = ref(false)
	const code = ref("")
	const nickName = ref("")
	const avatarUrl = ref("")
	const gender = ref("")
	const phoneNumber = ref("")
	const password = ref("")
	const verificationCode = ref("")
	const loginType = ref("password") // 'password' 或 'code'
	const countdown = ref(0)
	const loading = ref(false)
	const logingFlag = ref(false)
	const isLogin = ref(0)
	let timer = null

	// Lifecycle hooks - uni-app specific lifecycle
	onMounted(() => {
		// // 检查是否已登录
		// if (isLoggedIn()) {
		// 	redirectToHome();
		// }

		// #ifdef MP-WEIXIN
		//获取code
		uni.login({
			success: (res) => {
				if (res.errMsg === "login:ok") {
					code.value = res.code
				} else {
					uni.showToast({
						title: "系统异常，请联系管理员！"
					})
				}
			},
		});
		// #endif
	})

	// Methods
	const goBack = () => {
		uni.navigateBack();
	}

	const toggleAgreement = () => {
		agreed.value = !agreed.value;
		console.log("agreed", agreed.value);
	}

	const navigateToTerms = () => {
		uni.navigateTo({
			url: '/pages/login/terms'
		});
	}

	const navigateToPrivacy = () => {
		uni.navigateTo({
			url: '/pages/login/privacy'
		})
	}

	const navigateToForgetPassword = () => {
		uni.navigateTo({
			url: '/pages/login/forget-password'
		});
	}

	const navigateToRegister = () => {
		uni.navigateTo({
			url: '/pages/login/register'
		});
	}

	// 切换登录方式
	const switchLoginType = (type) => {
		loginType.value = type;
		// 清空输入
		password.value = "";
		verificationCode.value = "";
	}

	// 发送验证码
	const sendVerificationCode = () => {
		if (!phoneNumber.value) {
			uni.showToast({
				title: "请输入手机号",
				icon: 'none'
			});
			return;
		}

		// 手机号验证
		const result = Foundation.validatePhoneNumber(phoneNumber.value);
		if (!result.valid) {
			uni.showToast({
				title: result.message,
				icon: 'none'
			});
			return;
		}

		// 发送验证码
		uni.showLoading({ title: '发送中...' }); 
		sendPhoneVcodeNoUnique({ terminal: phoneNumber.value,scene:'LOGIN' })
			.then(res => {
				console.log("发送验证码", res);
				if (res.data.code === 200) {
					uni.showToast({
						title: "验证码已发送",
						icon: 'success'
					});
					// 开始倒计时
					countdown.value = 60;
					timer = setInterval(() => {
						countdown.value--;
						if (countdown.value <= 0) {
							clearInterval(timer);
						}
					}, 1000);
				} else {
					uni.showToast({
						title: res.data.msg || "发送失败",
						icon: 'none'
					});
				}
			})
			.catch(err => {
				console.error(err);
				uni.showToast({
					title: "网络异常，请稍后重试",
					icon: 'none'
				});
			})
			.finally(() => {
				uni.hideLoading();
			});
	}

	// 统一登录处理
	const handleLogin = () => {
		if (loginType.value === 'password') {
			handlePhoneLogin();
		} else {
			handleCodeLogin();
		}
	}

	// 验证码登录
	const handleCodeLogin = () => {
		if (!agreed.value) {
			uni.showToast({
				title: "请同意用户协议和隐私政策",
				icon: 'none'
			});
			return;
		}

		if (!phoneNumber.value || !verificationCode.value) {
			uni.showToast({
				title: "请输入手机号和验证码",
				icon: 'none'
			});
			return;
		}

		// 手机号验证
		const result = Foundation.validatePhoneNumber(phoneNumber.value);
		if (!result.valid) {
			uni.showToast({
				title: result.message,
				icon: 'none'
			});
			return;
		}

		loading.value = true;
		uni.showLoading({ title: '登录中...' });
		
		const data = {
			phonenumber: phoneNumber.value,
			vcode: verificationCode.value
		};

		phoneCodeLogin(data).then(async res => {
			console.log("验证码登录", res);
			if (res.data.code === 200) {
				storage.setAccessToken(res.data.data.access_token);
				storage.setUserInfo(res.data.data.userInfo);
				storage.setHasLogin(true);

				await fetchAndSetDefaultField();	

				uni.showToast({
					title: "登录成功!",
					icon: "success",
				});

				setTimeout(() => {
					uni.navigateBack({
						delta: 1,
					});
				}, 1500);
			} else {
				uni.showToast({
					title: res.data.msg || "登录失败，请检查验证码",
					icon: 'none'
				});
			}
		})
		.catch(err => {
			uni.showToast({
				title: "网络异常，请稍后重试",
				icon: 'none'
			});
			console.error(err);
		})
		.finally(() => {
			uni.hideLoading();
			loading.value = false;
		});
	}

	// H5平台手机号密码登录方法
	const handlePhoneLogin = () => {
		if (!agreed.value) {
			uni.showToast({
				title: "请同意用户协议和隐私政策",
				icon: 'none'
			})
			return
		}

		if (!phoneNumber.value || !password.value) {
			uni.showToast({
				title: "请输入手机号和密码",
				icon: 'none'
			})
			return
		}

		// 手机号验证
		const phone = phoneNumber.value; // 获取用户输入的手机号
		const result = Foundation.validatePhoneNumber(phone);

		if (!result.valid) {
			uni.showToast({
				title: result.message,
				icon: 'none'
			});
			return
		}

		loading.value = true;
		uni.showLoading({ title: '登录中...' })
		const data = {
			username: phoneNumber.value,
			password: password.value,
			phoneNumber: phoneNumber.value,
		}
		phoneLogin(data).then(async res => {
			console.log("res登录", res);
			if (res.data.code === 200) {
				// 登录成功
				storage.setAccessToken(res.data.data.access_token);
				storage.setUserInfo(res.data.data.userInfo);
				storage.setHasLogin(true);

				// 获取并设置默认地块信息
				await fetchAndSetDefaultField();

				uni.showToast({
					title: "登录成功!",
					icon: "success",
				});

				// 登录成功后返回或跳转到首页
				setTimeout(() => {
					uni.navigateBack({
						delta: 1,
					});
				}, 1500);
			} else {
				// 登录失败
				uni.showToast({
					title: res.data.msg || "登录失败，请检查账号密码",
					icon: 'none'
				});
			}
		})
		.catch(err => {
			uni.showToast({
				title: "网络异常，请稍后重试",
				icon: 'none'
			});
			console.error(err);
		})
		.finally(() => {
			uni.hideLoading();
			loading.value = false;
		});
	}

	// 微信小程序登录方法
	const getUserProfile = () => {
		if (!agreed.value) {
			uni.showToast({
				title: "请同意用户协议和隐私政策",
				icon: 'none'
			})
			return
		}
		logingFlag.value = true;

		// #ifdef MP-WEIXIN
		if (code.value) {
			// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
			uni.getUserProfile({
				desc: "获取你的昵称、头像、地区及性别", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
				success: (res) => {
					console.log("success", res)
					nickName.value = res.userInfo.nickName;
					avatarUrl.value = res.userInfo.avatarUrl;
					gender.value = res.userInfo.gender;

					let iv = res.iv;
					let encryptedData = res.encryptedData;

					let codeVal = code.value;
					let avatarUrlVal = avatarUrl.value;
					let nickNameVal = nickName.value;
					let genderVal = gender.value;
					isLogin.value = 2
					mpAutoLogin({
						encryptedData,
						iv,
						code: codeVal,
						avatarUrl: avatarUrlVal,
						nickName: nickNameVal,
						gender: genderVal,
					}).then(async (apiRes) => {
						console.log("apiRes", apiRes);
						storage.setAccessToken(apiRes.data.data.token);
						// storage.setRefreshToken(apiRes.data.result.refreshToken);

						uni.showToast({
							title: "登录成功!",
							icon: "none",
						});
						//存储用户信息
						storage.setUserInfo(apiRes.data.data.userInfo);
						storage.setHasLogin(true);
						
						// 获取并设置默认地块信息
						await fetchAndSetDefaultField();
						
						// 用户手动授权头像昵称
						if (apiRes.data.data.isNewUser) {
							// 新用户跳转上传头像昵称界面
							uni.navigateTo({
								url: `/pages/userInfo/index?openId=${apiRes.data.data.userInfo.openId}`
							});
						} else {
							// 老用户直接跳转首页
							// wx.switchTab({
							// 	url: '/pages/user/index'
							// });
							uni.navigateBack({
								delta: 1,
							});
						}
					});

				},
				fail: (res) => {
					console.log("fail", res)
				},
			});

			logingFlag.value = false;
		}
		// #endif
	}
</script>

<style>
	.login-container {
		min-height: 100vh;
		padding: 0 40rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}

	.page-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: calc(15rpx + constant(safe-area-inset-top));
		padding-top: calc(15rpx + env(safe-area-inset-top));
		/* padding: 40rpx 0; */
	}

	.back-icon {
		font-size: 50rpx;
		color: #333;
		width: 60rpx;
	}

	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.placeholder {
		width: 60rpx;
	}

	.logo-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 60rpx;
	}

	.logo {
		width: 150rpx;
		height: 150rpx;
		margin-bottom: 20rpx;
	}

	.app-name {
		font-size: 48rpx;
		font-weight: bold;
		color: #4CAF50;
		margin-bottom: 10rpx;
	}

	.app-slogan {
		font-size: 28rpx;
		color: #666;
	}

	.login-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 0;
		position: relative;
		width: 100%;
	}

	/* H5和APP表单样式 */
	.form-container {
		width: 100%;
		margin-bottom: 30rpx;
	}

	.input-group {
		margin-bottom: 30rpx;
		width: 100%;
	}

	.verification-group {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.code-input {
		flex: 1;
	}

	.send-code-btn {
		width: 200rpx;
		height: 90rpx;
		background-color: #4CAF50;
		color: #fff;
		border-radius: 45rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		padding: 0;
		line-height: 90rpx;
	}

	.send-code-btn[disabled] {
		background-color: #ccc;
		color: #999;
	}

	.send-code-btn::after {
		border: none;
	}

	.input-field {
		width: 100%;
		height: 90rpx;
		border-radius: 45rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: #f5f5f5;
		font-size: 28rpx;
	}

	.form-actions {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 30rpx;
	}

	.forgot-password {
		font-size: 24rpx;
		color: #666;
	}

	.login-btn {
		width: 100%;
		height: 90rpx;
		background-color: #4CAF50;
		color: #fff;
		border-radius: 45rpx;
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		margin-bottom: 30rpx;
	}

	.bottom-actions {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
	}

	.action-link {
		font-size: 26rpx;
		color: #666;
		margin: 0 20rpx;
	}

	.register-link {
		font-size: 24rpx;
		color: #666;
		text-align: center;
		margin-top: 20rpx;
	}

	.login-bg {
		width: 100%;
		max-width: 600rpx;
		margin: 20rpx 0 60rpx;
	}

	.wechat-login-btn {
		width: 80%;
		height: 90rpx;
		background-color: #07C160;
		color: #fff;
		border-radius: 45rpx;
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		margin-bottom: 40rpx;
		padding: 0;
		margin-top: 20rpx;
	}

	.wechat-login-btn::after {
		border: none;
	}

	.wechat-icon {
		width: 40rpx;
		height: 40rpx;
		background-color: rgba(255, 255, 255, 0.2);
		color: #fff;
		border-radius: 20rpx;
		font-size: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10rpx;
	}

	.privacy-agreement {
		display: flex;
		align-items: center;
		justify-content: center;
		/* margin-top: auto; */
		padding: 40rpx 0;
	}

	.agreement-text {
		font-size: 24rpx;
		color: #666;
		margin-left: 10rpx;
	}

	.link {
		color: #4CAF50;
	}

	/* #ifdef H5 */
	/* H5特殊样式调整 */
	@media screen and (min-width: 768px) {
		.form-container {
			max-width: 500rpx;
			margin: 0 auto;
		}
	}
	/* #endif */

	/* #ifdef APP-PLUS || MP-HARMONY */
	/* APP和鸿蒙特殊样式调整 */
	.login-container {
		padding-top: 20rpx;
	}

	.input-field {
		border: 1rpx solid #E0E0E0;
	}

	.login-btn {
		margin-top: 20rpx;
	}
	/* #endif */
</style>