Mini_Program/pages/login/login.vue

<template>
	<view class="login-container">
		<!-- 应用Logo和名称 -->
		<view class="app-header">
			<view class="app-logo">
				<view class="logo-square">
					<view class="book-icon">
						<view class="book-left"></view>
						<view class="book-right"></view>
						<view class="book-line"></view>
					</view>
				</view>
			</view>
			<text class="app-title">云阅读</text>
		</view>
		
		<!-- 输入表单 -->
		<view class="form-container">
			<view class="input-group">
				<input 
					class="input-field" 
					type="text" 
					placeholder="请输入用户名"
					v-model="username"
					maxlength="20"
				/>
				<view class="input-line"></view>
			</view>
			
			<view class="input-group">
				<input 
					class="input-field password-input" 
					:type="showPassword ? 'text' : 'password'"
					placeholder="请输入密码"
					v-model="password"
					maxlength="20"
				/>
				<text 
					class="toggle-password-btn" 
					@click="togglePassword"
				>
					{{ showPassword ? '隐藏' : '显示' }}
				</text>
				<view class="input-line"></view>
			</view>
			
			<button 
				class="login-btn" 
				@click="handleLogin"
				:disabled="!canLogin"
			>
				{{ isLoading ? '登录中...' : '登录' }}
			</button>
			
			<!-- 注册按钮 -->
			<view class="register-link" @click="goToRegister">
				<text class="register-text">还没有账号？立即注册</text>
			</view>
		</view>
		
		<!-- 第三方登录 -->
		<view class="third-party-login">
			<view class="third-party-icon" @click="loginWithWeChat">
				<view class="wechat-icon">
					<view class="wechat-bubble1"></view>
					<view class="wechat-bubble2"></view>
				</view>
			</view>
			<view class="third-party-icon" @click="loginWithQQ">
				<text class="qq-icon">Q</text>
			</view>
			<view class="third-party-icon" @click="loginWithWeibo">
				<text class="weibo-icon">W</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { login } from '../../utils/api.js'
	
	export default {
		data() {
			return {
				username: '',
				password: '',
				showPassword: false,
				isLoading: false
			}
		},
		onLoad(options) {
			// 如果从注册页面传递了用户名，自动填充
			if (options.username) {
				this.username = decodeURIComponent(options.username)
				uni.showToast({
					title: '注册成功，请输入密码登录',
					icon: 'success',
					duration: 2000
				})
			}
		},
		computed: {
			canLogin() {
				return this.username.trim().length > 0 && this.password.length > 0 && !this.isLoading
			}
		},
		methods: {
			togglePassword() {
				this.showPassword = !this.showPassword
			},
			handleLogin() {
				if (!this.canLogin) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					})
					return
				}
				
				// 显示加载中
				this.isLoading = true
				uni.showLoading({
					title: '登录中...',
					mask: true
				})
				
				// 调用后端登录接口
				login(this.username.trim(), this.password)
					.then((res) => {
						uni.hideLoading()
						this.isLoading = false
						
						if (res.code === 200 && res.data) {
							// 登录成功，保存用户信息
							try {
								const userInfo = res.data.user || {}
								uni.setStorageSync('userInfo', {
									id: userInfo.id,
									username: userInfo.username,
									nickname: userInfo.nickname,
									avatar: userInfo.avatar,
									gender: userInfo.gender,
									birthday: userInfo.birthday,
									bio: userInfo.bio,
									phone: userInfo.phone,
									email: userInfo.email,
									isVip: userInfo.isVip,
									token: res.data.token,
									loginTime: new Date().getTime()
								})
								uni.setStorageSync('isLogin', true)
							} catch (e) {
								console.error('保存用户信息失败', e)
							}
							
							uni.showToast({
								title: '登录成功',
								icon: 'success'
							})
							
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}, 1500)
						} else {
							uni.showToast({
								title: res.message || '登录失败',
								icon: 'none'
							})
						}
					})
					.catch((err) => {
						uni.hideLoading()
						this.isLoading = false
						
						console.error('登录失败:', err)
						uni.showToast({
							title: err.message || '登录失败，请检查网络连接',
							icon: 'none',
							duration: 2000
						})
					})
			},
			loginWithWeChat() {
				uni.showToast({
					title: '微信登录',
					icon: 'none'
				})
			},
			loginWithQQ() {
				uni.showToast({
					title: 'QQ登录',
					icon: 'none'
				})
			},
			loginWithWeibo() {
				uni.showToast({
					title: '微博登录',
					icon: 'none'
				})
			},
			goToRegister() {
				uni.navigateTo({
					url: '/pages/register/register'
				})
			}
		}
	}
</script>

<style scoped>
	.login-container {
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		padding-top: 30px;
		box-sizing: border-box;
		align-items: center;
		padding: 0 60rpx;
		box-sizing: border-box;
		position: relative;
	}
	
	.app-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 180rpx;
		margin-bottom: 80rpx;
		flex-shrink: 0;
	}
	
	.app-logo {
		margin-bottom: 30rpx;
	}
	
	.logo-square {
		width: 140rpx;
		height: 140rpx;
		background-color: #4FC3F7;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.book-icon {
		position: relative;
		width: 90rpx;
		height: 70rpx;
	}
	
	.book-left,
	.book-right {
		position: absolute;
		width: 45rpx;
		height: 70rpx;
		background-color: #FFFFFF;
		border-radius: 3rpx 0 0 3rpx;
	}
	
	.book-right {
		right: 0;
		border-radius: 0 3rpx 3rpx 0;
	}
	
	.book-line {
		position: absolute;
		left: 45rpx;
		top: 8rpx;
		width: 2rpx;
		height: 54rpx;
		background-color: #4FC3F7;
	}
	
	.app-title {
		font-size: 44rpx;
		color: #333333;
		font-weight: 600;
	}
	
	.form-container {
		width: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}
	
	.input-group {
		position: relative;
		margin-bottom: 50rpx;
	}
	
	.input-field {
		width: 100%;
		height: 88rpx;
		font-size: 30rpx;
		padding: 0 20rpx;
		color: #333333;
	}
	
	.password-input {
		padding-right: 80rpx;
	}
	
	.toggle-password-btn {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 26rpx;
		color: #4FC3F7;
		z-index: 10;
		padding: 8rpx 12rpx;
	}
	
	.input-line {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 1rpx;
		background-color: #E0E0E0;
	}
	
	.login-btn {
		width: 100%;
		height: 96rpx;
		background-color: #E0E0E0;
		color: #999999;
		font-size: 34rpx;
		border-radius: 48rpx;
		margin-top: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		flex-shrink: 0;
	}
	
	.login-btn:not([disabled]) {
		background-color: #4FC3F7;
		color: #FFFFFF;
	}
	
	.login-btn[disabled] {
		background-color: #E0E0E0;
		color: #999999;
	}
	
	.register-link {
		margin-top: 40rpx;
		text-align: center;
	}
	
	.register-text {
		font-size: 28rpx;
		color: #4FC3F7;
	}
	
	.third-party-login {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 70rpx;
		position: absolute;
		bottom: 80rpx;
		left: 0;
		right: 0;
		flex-shrink: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.third-party-icon {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		border: 1rpx solid #E0E0E0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
	}
	
	.wechat-icon {
		position: relative;
		width: 56rpx;
		height: 56rpx;
	}
	
	.wechat-bubble1,
	.wechat-bubble2 {
		position: absolute;
		border-radius: 50%;
		background-color: #666666;
	}
	
	.wechat-bubble1 {
		width: 32rpx;
		height: 32rpx;
		left: 0;
		top: 0;
	}
	
	.wechat-bubble2 {
		width: 26rpx;
		height: 26rpx;
		right: 0;
		bottom: 0;
	}
	
	.qq-icon,
	.weibo-icon {
		font-size: 44rpx;
		color: #666666;
		font-weight: bold;
	}
</style>