147 lines
3.1 KiB
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>
|
|
|
|
|