shangbangbang/uniapp/pages/login/login.vue

<template>
	<view class="container">
		<view class="login-header">
			<text class="app-title">商帮帮</text>
			<!-- <text class="app-subtitle">虚拟商品交易平台</text> -->
		</view>

		<view class="login-form">
			<view class="form-item">
				<uni-icons type="phone" size="20" color="rgba(255,255,255,0.8)"></uni-icons>
				<input class="form-input" 
					   v-model="loginForm.phone" 
					   type="number" 
					   placeholder="请输入手机号" 
					   maxlength="11" />
			</view>
			
			<view class="form-item">
				<uni-icons type="locked" size="20" color="rgba(255,255,255,0.8)"></uni-icons>
				<input class="form-input" 
					   v-model="loginForm.password" 
					   type="password" 
					   placeholder="请输入密码" />
			</view>

			<button class="login-btn" @click="handleLogin" :disabled="loginLoading">
				{{ loginLoading ? '登录中...' : '登录' }}
			</button>

			<view class="action-links">
				<text class="link-text" @click="goToRegister">立即注册</text>
				<!-- <text class="link-text" @click="forgotPassword">忘记密码</text> -->
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	
	export default {
		data() {
			return {
				loginForm: {
					phone: '',
					password: ''
				},
				loginLoading: false
			}
		},
		onLoad() {
			// 检查是否已登录
			const token = uni.getStorageSync('token')
			if (token) {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}
		},
		methods: {
			// 登录验证
			validateForm() {
				if (!this.loginForm.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return false
				}
				
				if (!/^1[3-9]\d{9}$/.test(this.loginForm.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					})
					return false
				}
				
				if (!this.loginForm.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return false
				}
				
				if (this.loginForm.password.length < 6) {
					uni.showToast({
						title: '密码长度不能少于6位',
						icon: 'none'
					})
					return false
				}
				
				return true
			},
			
			// 处理登录
			async handleLogin() {
				if (!this.validateForm()) {
					return
				}
				
				this.loginLoading = true
				
				try {
					const res = await request.post('/back/auth/login', this.loginForm)
					
					if (res.success) {
						const { token, user } = res.data
						
						// 保存token和用户信息到本地存储
						uni.setStorageSync('token', token)
						uni.setStorageSync('userInfo', user)
						
						uni.showToast({
							title: '登录成功',
							icon: 'success'
						})
						
						// 跳转到首页
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}, 1500)
					} else {
						uni.showToast({
							title: res.message || '登录失败',
							icon: 'none'
						})
					}
				} catch (error) {
					// console.error('登录失败：', error)
					// uni.showToast({
					// 	title: '网络错误，请稍后重试',
					// 	icon: 'none'
					// })
				} finally {
					this.loginLoading = false
				}
			},
			
			// 跳转到注册页面
			goToRegister() {
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},
			
			// 忘记密码
			forgotPassword() {
				uni.showModal({
					title: '忘记密码',
					content: '请联系客服重置密码\n客服电话：400-123-4567',
					showCancel: false
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		background: linear-gradient(135deg, #FF4444 0%, #FF6666 100%);
		min-height: 100vh;
		padding: 100rpx 60rpx;
		display: flex;
		flex-direction: column;
	}

	.login-header {
		text-align: center;
		margin-bottom: 120rpx;
		color: #fff;
	}

	.app-title {
		display: block;
		font-size: 64rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.app-subtitle {
		font-size: 28rpx;
		opacity: 0.9;
	}

	.login-form {
		flex: 1;
	}

	.form-item {
		background-color: rgba(255,255,255,0.1);
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		padding: 0 40rpx;
		margin-bottom: 40rpx;
		border: 2rpx solid rgba(255,255,255,0.2);
	}

	.form-item:focus-within {
		background-color: rgba(255,255,255,0.2);
		border-color: rgba(255,255,255,0.5);
	}

	.form-item uni-icons {
		margin-right: 30rpx;
	}

	.form-input {
		flex: 1;
		height: 100rpx;
		font-size: 32rpx;
		color: #fff;
	}

	.form-input::placeholder {
		color: rgba(255,255,255,0.7);
	}

	.login-btn {
		background-color: rgba(255,255,255,0.9);
		color: #FF4444;
		border-radius: 50rpx;
		height: 100rpx;
		font-size: 36rpx;
		font-weight: bold;
		margin: 60rpx 0;
		border: none;
	}

	.login-btn:disabled {
		background-color: rgba(255,255,255,0.5);
		color: rgba(255,68,68,0.5);
	}

	.action-links {
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
	}

	.link-text {
		color: rgba(255,255,255,0.9);
		font-size: 28rpx;
		text-decoration: underline;
	}
</style>