LandSurveyApplet/pages/login/login.vue

<template>
	<view class="login-page">
		<!-- 顶部关闭按钮 -->
		<view class="close-btn" @click="handleClose">✕</view>

		<!-- 登录标题 -->
		<view class="login-title">
			<view class="title-line">您好，欢迎登录</view>
			<view class="title-line">二轮延包管理系统</view>
		</view>

		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 手机号输入框 -->
			<view class="input-item">
				<view class="input-icon">👤</view>
				<input class="input-field" v-model="loginForm.phone" placeholder="请输入手机号"
					maxlength="11" />
				<view class="clear-btn" v-if="loginForm.phone" @click="clearPhone">✕</view>
			</view>

			<!-- 密码输入框 -->
			<view class="input-item">
				<view class="input-icon">🔒</view>
				<input class="input-field" v-model="loginForm.password" :type="showPassword ? 'text' : 'password'"
					placeholder="请输入密码" maxlength="20" />
				<view class="password-actions">
					<view class="eye-btn" @click="togglePassword">
						{{ showPassword ? '👁' : '👁‍🗨' }}
					</view>
					<view class="clear-btn" v-if="loginForm.password" @click="clearPassword">✕</view>
				</view>
			</view>

			<!-- 功能链接区 -->
			<!-- <view class="link-group">
				<view class="link-item" @click="goVerifyLogin">验证码登录</view>
				<view class="link-item" @click="goForgetPwd">忘记密码</view>
				<view class="link-item" @click="goRegister">快速注册</view>
			</view> -->

			<!-- 登录按钮 -->
			<view class="login-btn" :class="{ 'btn-disabled': !isAgree }" @click="handleLogin">
				登录
			</view>

			<!-- 协议勾选 -->
			<view class="agreement-box">
				<checkbox :checked="isAgree" @click="toggleAgree" color="#409eff" />
				<view class="agreement-text">
					已阅读并同意
					<text class="agreement-link" @click="goUserAgreement">《用户协议》</text>
					与
					<text class="agreement-link" @click="goPrivacyPolicy">《隐私政策》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue'
	import { login,getUserInfo } from '@/api/user';

	// 登录表单数据
	const loginForm = ref({
		phone: '', // 示例手机号，实际为空
		password: ''  // 示例密码，实际为空
	})

	// 密码显示状态
	const showPassword = ref(false)
	// 协议同意状态
	const isAgree = ref(false)

	// 表单校验：手机号+密码+协议 都满足才可点击登录
	const isFormValid = computed(() => {
		return (
			/^1[3-9]\d{9}$/.test(loginForm.value.phone) && // 手机号格式校验
			loginForm.value.password.length >= 6 &&        // 密码长度≥6
			isAgree.value                                  // 同意协议
		)
	})

	// 清空手机号
	const clearPhone = () => {
		loginForm.value.phone = ''
	}

	// 清空密码
	const clearPassword = () => {
		loginForm.value.password = ''
	}

	// 切换密码显示/隐藏
	const togglePassword = () => {
		showPassword.value = !showPassword.value
	}

	// 切换协议勾选
	const toggleAgree = () => {
		isAgree.value = !isAgree.value
	}

	// 示例：关闭登录页
	const handleClose = () => {
		uni.navigateBack({
			delta: 1
		})
	}

	// 登录按钮点击
	const handleLogin = () => {
		if (!isAgree.value) {
			uni.showToast({ title: '请先同意用户协议和隐私政策', icon: 'none' })
			return
		}
		getLogin(loginForm)
	}


	async function getLogin(loginForm:any) {
		try {
			const res = await login({
				username: loginForm.value.phone,
				password: loginForm.value.password
			});
			// 增加空值判断，防止 res 或 res.token 不存在
			if (res && res.token) {
				// 登录成功，存储 Token
				uni.setStorageSync('token', res.token);
				uni.showToast({ title: '登录成功' });
				await getUserInfoList()
				uni.navigateTo({
					url: '/pages/index/index'
				})
			} else {
				uni.showToast({ title: '登录成功但未获取到Token', icon: 'none' });
				console.warn('Token 缺失：', res);
			}
		} catch (err) {
			console.error('登录失败：', err);
			uni.showToast({ title: '登录失败：' + (err.msg || '网络错误'), icon: 'none' });
		}
	}
	
	async function getUserInfoList() {
		try {
			const res = await getUserInfo();
		    uni.setStorageSync('investigator_FBFBM', res.user.fbfbm);
			console.log('获取用户信息：', res); // 打印完整返回值
		
		} catch (err) {
			console.error('获取失败：', err);
		}
	}

	// 功能链接跳转
	const goVerifyLogin = () => {
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}

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

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

	}

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

	const goPrivacyPolicy = () => {
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8fafc;
		height: 100vh;
	}

	.login-page {
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	// 顶部关闭按钮
	.close-btn {
		font-size: 60rpx;
		color: #333;
		font-weight: 300;
		line-height: 1;
		margin-bottom: 80rpx;
	}

	// 登录标题
	.login-title {
		margin-bottom: 80rpx;
	}

	.title-line {
		font-size: 48rpx;
		font-weight: bold;
		color: #333;
		line-height: 1.5;
		margin-bottom: 20rpx;
	}

	// 表单容器
	.form-container {
		flex: 1;
	}

	// 输入框项
	.input-item {
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #e5e7eb;
		padding: 30rpx 0;
		margin-bottom: 20rpx;
	}

	.input-icon {
		font-size: 36rpx;
		color: #999;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.input-field {
		flex: 1;
		font-size: 34rpx;
		color: #333;
		height: 40rpx;
		line-height: 40rpx;

		&::placeholder {
			color: #c9cdd4;
		}
	}

	.clear-btn {
		font-size: 36rpx;
		color: #999;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.password-actions {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.eye-btn {
		font-size: 36rpx;
		color: #999;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	// 功能链接区
	.link-group {
		display: flex;
		justify-content: space-between;
		margin: 40rpx 0 60rpx;
	}

	.link-item {
		font-size: 32rpx;
		color: #666;
	}

	// 登录按钮
	.login-btn {
		width: 100%;
		height: 90rpx;
		background-color: #409eff;
		color: #fff;
		font-size: 36rpx;
		font-weight: 500;
		border-radius: 45rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 40rpx;
		box-shadow: 0 4rpx 12rpx rgba(64, 158, 255, 0.3);
	}

	.btn-disabled {
		background-color: #c0c4cc !important;
		box-shadow: none;
	}

	// 协议勾选区
	.agreement-box {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16rpx;
	}

	.agreement-text {
		font-size: 30rpx;
		color: #666;
		line-height: 1.5;
	}

	.agreement-link {
		color: #409eff;
	}
</style>