<template>
<div class
="login-container">
<CustomForm class
="login-form">
<CustomFormItem label
="账号">
<CustomInput v-model
="form
.employeeId" placeholder
="请输入账号" />
</CustomFormItem>
<CustomFormItem label
="密码">
<CustomInput v-model
="form
.password" type
="password" placeholder
="请输入密码" :show-password
="true"/>
</CustomFormItem>
<CustomFormItem>
<button class
="custom-button" @click
.prevent
="onSubmit" :disabled
="loading">
<span v-if
="!loading">提交</span>
<span v-else class
="loading">登录中
...</span>
</button>
</CustomFormItem>
<CustomFormItem v-if
="errorMessage" class
="error-container">
<div class
="error-message">
{{ errorMessage }}
</div>
</CustomFormItem>
</CustomForm>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import useUserStore from '@/store/modules/user'
import productApi from '@/api/products'
import CustomInput from '@/
components/zhangaipiao/customInput
.vue'
import CustomForm from '@/
components/zhangaipiao/customForm
.vue'
import CustomFormItem from '@/
components/zhangaipiao/customFormItem
.vue'
const userStore
= useUserStore
()
const router
= useRouter
()
const loading
= ref
(false
)
const errorMessage
= ref
(''
)
const form
= reactive
({
employeeId: '',
password: '',
role: '',
employeeName: ''
}
)
// 记录用户是否触碰过输入框，用于控制错误提示是否显示
const touched
= reactive
({
employeeId: false,
password: false
}
)
// 字段验证规则
const rules
= {
employeeId: { required: true, message: '账号不能为空' },
password: { required: true, message: '密码不能为空' }
}
// 字段错误信息
const errors
= reactive
({
employeeId: '',
password: ''
}
)
const validateField
= (field
) => {
const rule
= rules[field]
const value
= form[field]
if
(rule && rule
.required &&
(!value || !value
.trim
())) {
errors[field]
= rule
.message
return false
}
errors[field]
= ''
return true
}
const validateForm
= () => {
// 标记所有字段为已触碰
Object.keys(touched
).forEach(key => {
touched[
key]
= true
}
)
// 验证所有字段
const validResults
= Object.keys(rules
).map
(field
=> validateField
(field
))
return validResults
.every
(result
=> result
)
}
const onSubmit
= async
() => {
if
(!validateForm
()) {
errorMessage
.value
= '请填写账号和密码'
return
}
errorMessage
.value
= ''
loading
.value
= true
try {
const userData
= await loginWithBackend
()
userStore
.login
({
...userData,
employeeId: form
.employeeId
}
)
router
.push
('home'
)
} catch
(error
) {
errorMessage
.value
= error
.message
} finally {
loading
.value
= false
}
}
const loginWithBackend
= async
() => {
try {
const response
= await productApi
.selectLogin
(form
)
if
(response?
.status
=== 200 && response
.data
) {
return response
.data
}
throw new Error
(response?
.message || '登录失败，请检查账号密码'
)
} catch
(error
) {
throw new Error
(error
.message || '网络错误，请稍后再试'
)
}
}
</script>
<style scoped src
="@/assets/styles
.css"></style>
<style scoped>
:deep
(.form-item
) {
margin-bottom: 0
.5rem;
}
.login-container {
display: flex;
min-height: 100vh;
background-color: #e0f7ff; /* 浅蓝色背景 */
}
</style>
哪些代码是多余的
本文介绍了一种使用Node.js遍历指定目录下所有子目录的方法，并收集这些子目录中特定配置文件的路径。
扫一扫
1362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
