im-backed/im-uniapp/pages/login/login.vue

<template>
	<view>
	</view>
</template>

<script>
import UNI_APP from '@/.env.js';

// 【全局唯一锁】整个APP只执行一次，无论多少个页面实例
let GLOBAL_AUTO_LOGIN_LOCK = false;

export default {
	data() {
		return {
			isShowPwd: false,
			userNameFocused: false,
			passwordFocused: false,
			dataForm: {
				terminal: 1,
				userName: '',
				password: ''
			}
		}
	},
	methods: {
		autoLogin() {
			// ========================
			// 全局锁：这辈子只跑一次
			// ========================
			if (GLOBAL_AUTO_LOGIN_LOCK) return;
			GLOBAL_AUTO_LOGIN_LOCK = true;

			console.log("【自动登录】只执行唯一一次");

			// 读取缓存
			const loginInfo = uni.getStorageSync("loginInfo");
			// const userName = uni.getStorageSync("userName") || "";
			// const password = uni.getStorageSync("password") || "";

			// 已登录 → 跳转
			if (loginInfo) {
				uni.navigateTo({
				      url: "/pages/chat/chat-box?chatIdx=0"
				    })
				return;
			}

			// 无账号密码 → 不登录
			// if (!userName || !password) {
			// 	console.log("无缓存账号密码，不自动登录");
			// 	return;
			// }

			// 正常发一次请求
			// this.dataForm.userName = userName;
			// this.dataForm.password = password;

			this.$http({
				url: '/login',
				data: this.dataForm,
				method: 'POST'
			}).then(loginInfo => {
				uni.setStorageSync("isAgree", this.isAgree);
				uni.setStorageSync("loginInfo", loginInfo);
				
				getApp().$vm.init()
				console.log("loginInfo", loginInfo);
				this.$http({
					url: "/friend/add?friendId=" + loginInfo.customerServiceId,
					method: "POST"
				}).then((data) => {
					let friend = {
						id: loginInfo.user.id,
						nickName: loginInfo.user.nickName,
						headImage: loginInfo.user.headImageThumb,
						online: loginInfo.user.online,
						delete: false
					}
					this.friendStore.addFriend(friend);
					uni.navigateTo({
						url: "/pages/chat/chat-box?chatIdx=0"
					})
				})
				getApp().$vm.unloadStore();
			}).catch(err => {
				console.log("自动登录失败", err);
			});
			// uni.navigateTo({ url: "/pages/chat/chat-box?chatIdx=0"  });
			
			
			
		},

		onSwitchShowPwd() {
			this.isShowPwd = !this.isShowPwd;
		}
	},

	onLoad() {
		
		// 延迟执行，彻底避开双加载
		setTimeout(() => {
			this.autoLogin();
			
			
		}, 50);
	},

	onShow() {
		// 空，防止重复触发
	}
}
</script>

<style lang="scss" scoped>
.login {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;

	// 主要内容区域
	.content {
		position: relative;
		display: flex;
		flex-direction: column;
		margin-top: 120rpx;
		// #ifdef APP-PLUS
		margin-top: calc(120rpx + var(--status-bar-height));
		// #endif
		padding: 0 60rpx;
	}

	// 头部区域
	.header {
		text-align: center;
		padding: 80rpx 0;

		.title {
			color: $im-color-primary;
			font-size: 48rpx;
			font-weight: 700;
			margin-bottom: 20rpx;
			letter-spacing: 2rpx;
		}

		.subtitle {
			color: $im-text-color-light;
			font-size: 28rpx;
			opacity: 0.8;
		}
	}

	// 表单容器
	.form-container {
		display: flex;
		flex-direction: column;
	}

	// 表单样式
	.form {
		margin-bottom: 20rpx;

		.form-item {
			position: relative;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			height: 100rpx;
			margin: 24rpx 0;
			border-radius: 25rpx;
			background: rgba(255, 255, 255, 0.9);
			border: 2rpx solid transparent;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
			transition: all 0.3s ease;

			&.focused {
				border-color: $im-color-primary;
				box-shadow: 0 8rpx 32rpx rgba($im-color-primary, 0.15);
				transform: translateY(-2rpx);
			}

			.icon-wrapper {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 60rpx;
				height: 60rpx;
				margin-right: 30rpx;
				border-radius: 50%;
				background: $im-bg-active;
				transition: all 0.3s ease;

				.icon {
					font-size: 32rpx;
					color: $im-color-primary;
					font-weight: bold;
				}
			}

			&.focused .icon-wrapper {
				transform: scale(1.1);
			}

			.input {
				flex: 1;
				font-size: 32rpx;
				color: #333;
				background: transparent;
				border: none;
				outline: none;

				&::placeholder {
					color: $im-text-color-light;
					font-size: 30rpx;
				}
			}

			.icon-suffix {
				font-size: 36rpx;
				padding: 10rpx;
			}
		}
	}

	// 登录按钮
	.submit-btn {
		height: 100rpx;
		border-radius: 50rpx;
		border: none;
		transition: all 0.3s ease;
		overflow: hidden;
		position: relative;
		width: 100%;

		&:active {
			transform: translateY(2rpx);

			&::before {
				left: 100%;
			}
		}

		.btn-content {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			color: white;
			font-size: $im-font-size-large;
			font-weight: 600;

			.btn-text {
				margin-right: 10rpx;
			}
		}

		&:active .btn-icon {
			transform: translateX(4rpx);
		}
	}

	// 底部导航
	.nav-tool-bar {
		padding: 40rpx 0 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.nav-register {
			.register-link {
				display: flex;
				align-items: center;
				text-decoration: none;

				.register-text {
					color: $im-text-color-light;
					font-size: $im-font-size-small;
					margin-right: 8rpx;
				}

				.register-highlight {
					color: $im-color-primary;
					font-size: $im-font-size-small;
					font-weight: 600;
				}
			}
		}
	}
}
</style>