gree_leran/pages/user/login.vue

147 lines
3.1 KiB
Vue

<template>
<view class="main">
<view class="login-container">
<view class="">
<up-text :lines="1" text="登录" bold="true" size=" 60rpx" align="cente" ></up-text>
</view>
<view class="log-input">
<up-input
placeholder="请输入账号"
border="surround"
v-model="username"
@change="validateUsername"
:error="usernameError"
:fontSize="15"
error-message="账号不能为空"
:customStyle="style"
></up-input>
</view>
<view class="log-input">
<up-input
placeholder="请输入密码"
border="surround"
type="password"
v-model="password"
@change="validatePassword"
:error="passwordError"
:fontSize="15"
:customStyle="style"
error-message="密码不能为空"
></up-input>
</view>
<view class="log-input">
<up-button
type="primary"
@click="login"
text="登录"
:disabled="isButtonDisabled"
></up-button>
</view>
</view>
</view>
</template>
<script setup>
import { reactive, ref } from 'vue';
// import { loginByCredentials } from "@/comm/api.js";
import { setToken } from "@/utils/Auth.js";
// 输入框数据绑定
const username = ref('');
const password = ref('');
const style=reactive({
height:"70rpx",
margin: "10rpx",
textAlign: "center",
backgroundColor: "#fff",
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)"
})
// 校验错误状态
const usernameError = ref(false);
const passwordError = ref(false);
// 按钮禁用状态
const isButtonDisabled = ref(true);
// 校验账号
function validateUsername() {
usernameError.value = username.value.trim() === '';
checkFormValidity();
}
// 校验密码
function validatePassword() {
passwordError.value = password.value.trim() === '';
checkFormValidity();
}
// 检查表单是否有效
function checkFormValidity() {
isButtonDisabled.value = usernameError.value || passwordError.value || username.value.trim() === '' || password.value.trim() === '';
}
// 登录函数
async function login() {
if (isButtonDisabled.value) return;
// try {
// const resp = await loginByCredentials({
// username: username.value,
// password: password.value,
// });
// uni.showToast({
// icon: "none",
// title: "登录成功"
// });
// setToken(resp.token);
// setTimeout(() => {
// uni.switchTab({
// url: "/pages/user/user"
// });
// }, 800);
// } catch (err) {
// console.log(err, "errorCatch");
// uni.showToast({
// icon: "none",
// title: "登录失败"
// });
// }
}
</script>
<style scoped>
.main {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #efefef;
}
.login-container {
width: 80%;
display: flex;
flex-flow: column;
height: 90vh;
align-items: center;
margin: 0 auto;
padding: 20px;
/* background: #ffffff; */
/* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
/* border-radius: 8px; */
}
.login-container up-input {
margin-bottom: 15px;
}
.login-container up-button {
width: 100%;
}
.log-input{
width: 100%;
margin-top: 40rpx;
margin-bottom: 20rpx;
}
</style>