<template>
	<view class="container">
		<view class="form">
			<input class="input" type="text" v-model="username" placeholder="请输入用户名" />
			<input class="input" type="password" v-model="password" placeholder="请输入密码" />
			<button class="submit-btn" @click="handleLogin">登录</button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

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

const handleLogin = () => {
	if (!username.value || !password.value) {
		uni.showToast({
			title: '请输入用户名和密码',
			icon: 'none'
		})
		return
	}
	// TODO: 调用登录接口
	console.log('登录信息:', username.value, password.value)
}
</script>

<style scoped>
.container {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #f5f5f5;
	padding: 40rpx;
}

.form {
	width: 100%;
}

.input {
	height: 90rpx;
	line-height: 90rpx;
	padding: 0 30rpx;
	margin-bottom: 30rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;
	font-size: 28rpx;
}

.submit-btn {
	width: 100%;
	height: 90rpx;
	line-height: 90rpx;
	background-color: #007AFF;
	color: #FFFFFF;
	font-size: 32rpx;
	border-radius: 10rpx;
	margin-top: 20rpx;
}
</style>
