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 class="input-group">
					<input type="password" v-model="password" placeholder="请输入密码" class="input-field" />
				</view>
				<view class="form-actions">
					<text class="forgot-password" @click="navigateToForgetPassword">忘记密码？</text>
				</view>
				<button type="primary" class="login-btn" @click="handlePhoneLogin">登录</button>
				<view class="register-link">
					还没有账号？<text class="link" @click="navigateToRegister">立即注册</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
	} from "@/api/services/connect.js";
	import storage from "@/utils/storage.js";
	import Foundation from "@/utils/Foundation.js";

	// 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 loading = ref(false)
	const logingFlag = ref(false)
	const isLogin = ref(0)

	// 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/privacy/terms'
		});
	}

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

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

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

	// 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(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);

				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((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);
						// 用户手动授权头像昵称
						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: 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%;
	}

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

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