gree_leran/pages/user/login.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>