ElectronClient/tax-guidance/pages/login/login.vue

<template>
	<div class="page-container tn-gradient-bg__cool-5">
		<cheader></cheader>
		<div class="login-body">
			<div class="login-card">
				<view class="login-head-row">
					<view class="login-bar"></view>
					<view class="login-titles">
						<text class="login-title">账号登录</text>
						<text class="login-sub">紫云智能导税 PAD</text>
					</view>
				</view>

				<view class="login-field">
					<text class="login-label">用户名</text>
					<view class="login-input-wrap">
						<uni-icons type="contact" size="18" color="#64748b"></uni-icons>
						<input
							v-model="username"
							class="login-input"
							placeholder="请输入用户名"
							confirm-type="next"
						/>
					</view>
				</view>

				<view class="login-field">
					<text class="login-label">密码</text>
					<view class="login-input-wrap">
						<uni-icons type="locked-filled" size="18" color="#64748b"></uni-icons>
						<input
							v-model="password"
							class="login-input"
							password
							placeholder="请输入密码"
							confirm-type="done"
							@confirm="loginAction"
						/>
					</view>
				</view>

				<button class="login-btn" @click="loginAction()">登 录</button>
				<text class="login-version">版本 {{ appVersion }}</text>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import cheader from '@/components/header.vue'
	import { userLogin } from '@/api/index.js'
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { getAppVersion } from '@/utils/appVersion.js'

	const appVersion = getAppVersion()
	const LOGIN_USERNAME_KEY = 'login_username'
	const LOGIN_PASSWORD_KEY = 'login_password'

	const username = ref('')
	const password = ref('')

	onLoad(() => {
		const savedUsername = uni.getStorageSync(LOGIN_USERNAME_KEY)
		const savedPassword = uni.getStorageSync(LOGIN_PASSWORD_KEY)
		if (savedUsername) {
			username.value = savedUsername
		}
		if (savedPassword) {
			password.value = savedPassword
		}
	})

	const loginAction = async () => {
		const loginParams = {
			username: username.value,
			password: password.value,
			tenantId: null
		}

		try {
			const res = await userLogin(loginParams)
			console.log(res)
			// profile 请求会立即读取 token，这里使用同步存储避免异步写入导致 401
			uni.setStorageSync('token', res.access_token)
			if (res.refresh_token) {
				uni.setStorageSync('refresh_token', res.refresh_token)
			}
			uni.setStorageSync('userInfo', JSON.stringify(res.userInfo))
			uni.setStorageSync(LOGIN_USERNAME_KEY, username.value)
			uni.setStorageSync(LOGIN_PASSWORD_KEY, password.value)
			// 登录成功后重置路由栈，避免返回到登录页
			uni.reLaunch({
				url: '/pages/index/index',
			})
		} catch (error) {
		}
	}
</script>

<style lang="scss">
	.login-body {
		display: flex;
		align-items: center;
		justify-content: center;
		height: calc(90 * var(--pad-vh));
	}

	.login-card {
		width: 420px;
		max-width: calc(86 * var(--pad-vw));
		padding: 32px 36px 24px;
		background: #fff;
		border-radius: 16px;
		box-shadow: 0 18px 48px rgba(30, 58, 138, 0.16);
		display: flex;
		flex-direction: column;
	}

	.login-head-row {
		display: flex;
		align-items: flex-start;
		gap: 12px;
		margin-bottom: 28px;
	}

	.login-bar {
		width: 4px;
		height: 36px;
		margin-top: 4px;
		border-radius: 2px;
		background: #1d4ed8;
		flex-shrink: 0;
	}

	.login-titles {
		display: flex;
		flex-direction: column;
	}

	.login-title {
		font-size: 28px;
		font-weight: 700;
		color: #1e3a8a;
		line-height: 1.2;
	}

	.login-sub {
		margin-top: 4px;
		font-size: 13px;
		color: #64748b;
		letter-spacing: 0.4px;
	}

	.login-field {
		margin-bottom: 16px;
	}

	.login-label {
		display: block;
		margin-bottom: 8px;
		font-size: 13px;
		font-weight: 600;
		color: #475569;
	}

	.login-input-wrap {
		height: 44px;
		padding: 0 2px;
		border: none;
		border-bottom: 1px solid #d7e2ee;
		border-radius: 0;
		background: transparent;
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.login-input {
		flex: 1;
		height: 44px;
		font-size: 15px;
		color: #1e293b;
	}

	.login-btn {
		margin-top: 8px;
		width: 100%;
		height: 44px;
		border: none;
		border-radius: 22px;
		background: #2563eb;
		color: #fff;
		font-size: 16px;
		font-weight: 700;
		letter-spacing: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);
		box-sizing: border-box;
	}

	.login-version {
		margin-top: 16px;
		text-align: center;
		font-size: 12px;
		color: #94a3b8;
	}
</style>