115 lines
3.3 KiB
Vue
115 lines
3.3 KiB
Vue
<template>
|
||
<div class="flex-col-center">
|
||
<div class="w-full">
|
||
<h2 class="text-3xl/9 mb-3 font-bold lg:text-4xl">欢迎回来 👋🏻</h2>
|
||
<p>
|
||
<span style="color: #71717a">登录账号以进入对战</span>
|
||
</p>
|
||
</div>
|
||
<n-form
|
||
ref="formRef"
|
||
:model="loginModel"
|
||
:rules="rules"
|
||
:show-label="false"
|
||
class="w-full mt-10"
|
||
>
|
||
<n-form-item path="username">
|
||
<n-input v-model:value="loginModel.username" placeholder="请输入账号" :maxlength="20" />
|
||
</n-form-item>
|
||
<n-form-item path="password">
|
||
<n-input
|
||
v-model:value="loginModel.password"
|
||
type="password"
|
||
show-password-on="mousedown"
|
||
placeholder="密码"
|
||
:maxlength="20"
|
||
/>
|
||
</n-form-item>
|
||
<n-form-item>
|
||
<div class="flex flex-1 items-center justify-between">
|
||
<n-checkbox>记住账号</n-checkbox>
|
||
<a href="javascript:void(0)" style="color: #2080f0">忘记密码？</a>
|
||
</div>
|
||
</n-form-item>
|
||
<n-form-item>
|
||
<n-button :loading="loginLoading" style="width: 100%" type="primary" @click="userLoginFun"
|
||
>登录</n-button
|
||
>
|
||
</n-form-item>
|
||
<n-form-item>
|
||
<div class="flex-center flex-1">
|
||
<span>没有账号？</span>
|
||
<router-link to="/auth/register" style="color: #2080f0">注册</router-link>
|
||
</div>
|
||
</n-form-item>
|
||
</n-form>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { reactive, ref, useTemplateRef } from 'vue'
|
||
import type { FormItemRule, FormRules, FormInst } from 'naive-ui'
|
||
import { useAccountStore } from '@/stores'
|
||
|
||
const accountStore = useAccountStore()
|
||
const formRef = useTemplateRef<FormInst>('formRef')
|
||
const loginModel = reactive({
|
||
username: '',
|
||
password: ''
|
||
})
|
||
const loginLoading = ref(false)
|
||
|
||
const rules: FormRules = {
|
||
username: [
|
||
{
|
||
required: true,
|
||
message: '请输入登陆账号',
|
||
trigger: ['blur'],
|
||
validator: (rule: FormItemRule, value: string) => {
|
||
if (value.length < 2) {
|
||
return new Error('账号长度不能小于2位')
|
||
} else if (value.length > 20) {
|
||
return new Error('账号长度不能大于20位')
|
||
} else if (!/^[A-Za-z][A-Za-z0-9]*$/.test(value)) {
|
||
return new Error('账号以字母开头，只能包含字母和数字')
|
||
}
|
||
return true
|
||
}
|
||
}
|
||
],
|
||
password: [
|
||
{
|
||
required: true,
|
||
message: '请输入登陆密码',
|
||
trigger: ['blur'],
|
||
validator: (rule: FormItemRule, value: string) => {
|
||
if (value.length < 6) {
|
||
return new Error('密码长度不能小于6位')
|
||
} else if (value.length > 20) {
|
||
return new Error('密码长度不能大于20位')
|
||
} else if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/.test(value)) {
|
||
return new Error('密码必须包含大小写字母和数字')
|
||
}
|
||
return true
|
||
}
|
||
}
|
||
]
|
||
}
|
||
|
||
const userLoginFun = () => {
|
||
formRef.value?.validate((errors) => {
|
||
if (!errors) {
|
||
loginLoading.value = true
|
||
console.log('登录成功')
|
||
// TODO 登录方法
|
||
accountStore.token = '123456'
|
||
setTimeout(() => {
|
||
loginLoading.value = false
|
||
}, 1000)
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped></style>
|