124 lines
3.1 KiB
Vue
124 lines
3.1 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="phoneNumber">
|
|
<n-input v-model:value="loginModel.phoneNumber" placeholder="手机号码" :maxlength="20" />
|
|
</n-form-item>
|
|
<n-form-item path="code">
|
|
<div class="flex flex-1 gap-4">
|
|
<n-input-otp
|
|
block
|
|
v-model:value="loginModel.code"
|
|
:allow-input="onlyAllowNumber"
|
|
style="gap: 0; flex: 2"
|
|
/>
|
|
<n-button style="flex: 1" @click="getPhoneCodeFun">获取验证码</n-button>
|
|
</div>
|
|
</n-form-item>
|
|
<n-form-item>
|
|
<n-button :loading="loading" style="width: 100%" type="primary" @click="phoneLoginFun"
|
|
>登录
|
|
</n-button>
|
|
</n-form-item>
|
|
<n-form-item>
|
|
<div class="flex-center flex-1 gap-4">
|
|
<n-button class="flex-1" @click="router.push('/auth/login')"> 返回 </n-button>
|
|
</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'
|
|
import { useRouter } from 'vue-router'
|
|
|
|
const router = useRouter()
|
|
const accountStore = useAccountStore()
|
|
const formRef = useTemplateRef<FormInst>('formRef')
|
|
const loginModel = reactive({
|
|
phoneNumber: '',
|
|
code: []
|
|
})
|
|
const loading = ref(false)
|
|
|
|
const onlyAllowNumber = (value: string) => !value || /^\d+$/.test(value)
|
|
const rules: FormRules = {
|
|
phoneNumber: [
|
|
{
|
|
key: 'phoneNumber',
|
|
required: true,
|
|
trigger: ['blur'],
|
|
validator: (rule: FormItemRule, value: string) => {
|
|
if (!/^1[3-9]\d{9}$/.test(value)) {
|
|
return new Error('请输入手机号码')
|
|
}
|
|
return true
|
|
}
|
|
}
|
|
],
|
|
code: [
|
|
{
|
|
key: 'code',
|
|
required: true,
|
|
trigger: ['blur'],
|
|
validator: (_, value: string[] | null) => {
|
|
if (value === null) {
|
|
return new Error('请输入验证码')
|
|
}
|
|
if (value.filter(Boolean).length !== 6) {
|
|
return new Error('请输入验证码')
|
|
}
|
|
return true
|
|
}
|
|
}
|
|
]
|
|
}
|
|
|
|
const getPhoneCodeFun = () => {
|
|
formRef.value?.validate(
|
|
(errors) => {
|
|
if (!errors) {
|
|
console.log('获取验证码成功')
|
|
// TODO 获取验证码方法
|
|
}
|
|
},
|
|
(rule) => {
|
|
if (rule.key === 'phoneNumber') {
|
|
return true
|
|
}
|
|
return false
|
|
}
|
|
)
|
|
}
|
|
const phoneLoginFun = () => {
|
|
formRef.value?.validate((errors) => {
|
|
if (!errors) {
|
|
loading.value = true
|
|
console.log('登录成功')
|
|
// TODO 登录方法
|
|
accountStore.token = '123456'
|
|
setTimeout(() => {
|
|
loading.value = false
|
|
}, 1000)
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style>
|