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

			<button type="primary" class="wechat-login-btn" bindtap="getUserProfile" @click="getUserProfile()">
				<view class="wechat-icon">微</view>
				<text>一键登录</text>
			</button>
		</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
	} 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: ""
			}
		},
		onLoad() {
			// // 检查是否已登录
			// if (isLoggedIn()) {
			// 	this.redirectToHome();
			// }
			//获取code
			uni.login({
				success: (res) => {
					if (res.errMsg === "login:ok") {
						this.code = res.code
					} else {
						uni.showToast({
							title: "系统异常，请联系管理员！"
						})
					}
				},
			});
		},
		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'
				});
			},
			showAgreementWarning() {
				uni.showToast({
					title: '请同意用户协议和隐私政策',
					icon: 'none'
				});
			},
			getUserProfile(e) {
				if (!this.agreed) {
					uni.showToast({
						title: "请同意用户协议和隐私政策",
						icon: 'none'
					})
					return
				}
				this.logingFlag = true;

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

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