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">
			<!-- #ifdef H5 -->
			<view class="form-container">
				<view class="input-group">
					<input type="text" v-model="phoneNumber" placeholder="请输入手机号" class="input-field" />
				</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 -->

			<!-- #ifdef APP-PLUS -->
			<view class="form-container">
				<view class="input-group">
					<input type="text" v-model="phoneNumber" placeholder="请输入手机号" class="input-field" />
				</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 -->
		</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>
	import {
		mpAutoLogin, phoneLogin
	} from "@/api/services/connect.js";
	import storage from "@/utils/storage.js";
	export default {
		data() {
			return {
				// 以下是登录页面测试功能 结束
				agreed: false,
				// 是否展示手机号码授权弹窗，默认第一步不展示，要先获取用户基础信息
				phoneAuthPopup: false,
				// 授权信息展示，商城名称
				// projectName: config.name,
				//微信返回信息，用于揭秘信息，获取sessionkey
				code: "",
				//微信昵称
				nickName: "",
				//微信头像
				avatarUrl: "",
				gender: "",
				// H5登录信息
				phoneNumber: "",
				password: "",
				loading: false
			}
		},
		onLoad() {
			// // 检查是否已登录
			// if (isLoggedIn()) {
			// 	this.redirectToHome();
			// }

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

			},
			navigateToTerms() {
				uni.navigateTo({
					url: '/pages/privacy/terms'
				});
			},
			navigateToPrivacy() {
				uni.navigateTo({
					url: '/pages/privacy/index'
				});
			},
			navigateToForgetPassword() {
				uni.navigateTo({
					url: '/pages/login/forget-password'
				});
			},
			navigateToRegister() {
				uni.navigateTo({
					url: '/pages/login/register'
				});
			},
			showAgreementWarning() {
				uni.showToast({
					title: '请同意用户协议和隐私政策',
					icon: 'none'
				});
			},
			// H5平台手机号密码登录方法
			handlePhoneLogin() {
				if (!this.agreed) {
					uni.showToast({
						title: "请同意用户协议和隐私政策",
						icon: 'none'
					})
					return
				}

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

				// 手机号验证
				if (!/^1\d{10}$/.test(this.phoneNumber)) {
					uni.showToast({
						title: "请输入正确的手机号",
						icon: 'none'
					})
					return
				}

				this.loading = true;
				uni.showLoading({ title: '登录中...' })
				const data = {
					username: this.phoneNumber,
					password: this.password,
					phoneNumber:this.phoneNumber,
				}
				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();
						this.loading = false;
					});
			},
			// 微信小程序登录方法
			getUserProfile(e) {
				if (!this.agreed) {
					uni.showToast({
						title: "请同意用户协议和隐私政策",
						icon: 'none'
					})
					return
				}
				this.logingFlag = true;

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

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

							let code = this.code;
							let avatarUrl = this.avatarUrl;
							let nickName = this.nickName;
							let gender = this.gender;
							this.isLogin = 2
							mpAutoLogin({
								encryptedData,
								iv,
								code,
								avatarUrl,
								nickName,
								gender,
							}).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)
						},
					});

					this.logingFlag = false;
				}
				// #endif
			},
			redirectToHome() {
				uni.navigateBack();
			}
		}
	}
</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 */
</style>