|
|
|
@ -1,23 +1,57 @@
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
|
import { ref } from 'vue' |
|
|
|
|
import { Button, Input } from 'ant-design-vue' |
|
|
|
|
import { reactive, ref } from 'vue' |
|
|
|
|
|
|
|
|
|
import { Button, Form, FormItem, Input, message } from 'ant-design-vue' |
|
|
|
|
import { useRouter } from 'vue-router' |
|
|
|
|
import type { Rule } from 'ant-design-vue/es/form' |
|
|
|
|
|
|
|
|
|
import type { LoginForm } from './index.d' |
|
|
|
|
import { sendCode } from '@/api/base/login' |
|
|
|
|
import { useUserStore } from '@/store/moules/userStore/index' |
|
|
|
|
import { useMessage } from '@/hooks/useMessage' |
|
|
|
|
import { GrantTypeEnum, TypeEnum, UserTypeEnum } from '@/enums/commonEnum' |
|
|
|
|
import Logo from '@/assets/images/login/loginlogo.png' |
|
|
|
|
import Loginleft from '@/assets/images/login/loginleft.png' |
|
|
|
|
import Yh from '@/assets/images/login/yh.png' |
|
|
|
|
import Yzm from '@/assets/images/login/yzm.png' |
|
|
|
|
|
|
|
|
|
const router = useRouter() |
|
|
|
|
const userStore = useUserStore() |
|
|
|
|
const { createMessage } = useMessage() |
|
|
|
|
const phoneCode = ref('') |
|
|
|
|
const formRef = ref() |
|
|
|
|
const btnTxt = ref('获取验证码') |
|
|
|
|
const disabled = ref(false) |
|
|
|
|
const time = ref(0) |
|
|
|
|
|
|
|
|
|
const ruleForm = reactive<LoginForm>({ |
|
|
|
|
phone: '', |
|
|
|
|
code: '', |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
async function validatePhone(_rule: Rule, value: string) { |
|
|
|
|
if (!value || !(/^1\d{10}$/.test(value))) |
|
|
|
|
// eslint-disable-next-line prefer-promise-reject-errors |
|
|
|
|
return Promise.reject('请输入正确的手机号码') |
|
|
|
|
else |
|
|
|
|
return Promise.resolve() |
|
|
|
|
} |
|
|
|
|
const rules: Record<string, Rule[]> = { |
|
|
|
|
phone: [ |
|
|
|
|
{ validator: validatePhone, trigger: 'blur' }, |
|
|
|
|
], |
|
|
|
|
code: [{ required: true, message: '请输入验证码', trigger: 'blur' }], |
|
|
|
|
} |
|
|
|
|
// 登录 |
|
|
|
|
function handleLogin() { |
|
|
|
|
formRef.value |
|
|
|
|
.validate() |
|
|
|
|
.then(() => { |
|
|
|
|
userStore.login({ |
|
|
|
|
user_type: UserTypeEnum.C, |
|
|
|
|
grant_type: GrantTypeEnum.SMS, |
|
|
|
|
invite_code: '', |
|
|
|
|
phone: '13864541890', |
|
|
|
|
phoneCode: phoneCode.value, |
|
|
|
|
phone: ruleForm.phone, |
|
|
|
|
phoneCode: ruleForm.code, |
|
|
|
|
type: TypeEnum.PHONE, |
|
|
|
|
}).then(() => { |
|
|
|
|
createMessage.success('登录成功') |
|
|
|
@ -25,33 +59,278 @@ function handleLogin() {
|
|
|
|
|
}).catch(() => { |
|
|
|
|
createMessage.error('登录失败') |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 获取验证码 |
|
|
|
|
function handleSendCode() { |
|
|
|
|
sendCode('13864541890') |
|
|
|
|
if (!ruleForm.phone) { |
|
|
|
|
// 号码校验不通过 |
|
|
|
|
|
|
|
|
|
message.error('请输入手机号') |
|
|
|
|
// 正则判断 从1开始,第二位是35789中的任意一位,以9数字结尾 |
|
|
|
|
} |
|
|
|
|
else if (!/1[35789]\d{9}/.test(ruleForm.phone)) { |
|
|
|
|
// 失去焦点后自动触发校验手机号规则 |
|
|
|
|
} |
|
|
|
|
else { |
|
|
|
|
sendCode(ruleForm.phone).then((res) => { |
|
|
|
|
if (res.code === 200) |
|
|
|
|
message.success('发送成功') |
|
|
|
|
}) |
|
|
|
|
time.value = 60 |
|
|
|
|
disabled.value = true |
|
|
|
|
// 调用倒计时方法 |
|
|
|
|
timer() |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function handleLogout() { |
|
|
|
|
userStore.logout() |
|
|
|
|
// 禁止页面缩放 |
|
|
|
|
function handleWheel(event: { preventDefault: () => void }) { |
|
|
|
|
event.preventDefault() |
|
|
|
|
} |
|
|
|
|
// 倒计时 |
|
|
|
|
function timer() { |
|
|
|
|
if (time.value > 0) { |
|
|
|
|
time.value-- |
|
|
|
|
btnTxt.value = `${time.value}s后重新获取验证码` |
|
|
|
|
setTimeout(timer, 1000) |
|
|
|
|
} |
|
|
|
|
else { |
|
|
|
|
time.value = 0 |
|
|
|
|
btnTxt.value = '获取验证码' |
|
|
|
|
disabled.value = false |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
|
<div> |
|
|
|
|
我是登录页 |
|
|
|
|
<Input v-model:value="phoneCode" placeholder="请输入验证码" /> |
|
|
|
|
<Button type="primary" @click="handleSendCode"> |
|
|
|
|
发送验证码 |
|
|
|
|
</Button> |
|
|
|
|
|
|
|
|
|
<Button type="primary" @click="handleLogin"> |
|
|
|
|
登录 |
|
|
|
|
</Button> |
|
|
|
|
|
|
|
|
|
<Button type="primary" @click="handleLogout"> |
|
|
|
|
退出 |
|
|
|
|
<div class="login-container" @wheel="handleWheel"> |
|
|
|
|
<div class="logo"> |
|
|
|
|
<img |
|
|
|
|
:src="Logo" |
|
|
|
|
class="logoimg" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
<div class="logoncontent"> |
|
|
|
|
<div class="left"> |
|
|
|
|
<img |
|
|
|
|
:src="Loginleft" |
|
|
|
|
style="width: 100%; height: 100%" |
|
|
|
|
/> |
|
|
|
|
<div class="info"> |
|
|
|
|
<div class="welcome"> |
|
|
|
|
欢迎使用 |
|
|
|
|
</div> |
|
|
|
|
<div class="zh"> |
|
|
|
|
青鸟AI助手-同聪 |
|
|
|
|
</div> |
|
|
|
|
<div class="en"> |
|
|
|
|
Bluebird AI Assistant - Tong Cong |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="right"> |
|
|
|
|
<Form |
|
|
|
|
ref="formRef" |
|
|
|
|
class="login-Form" |
|
|
|
|
:model="ruleForm" |
|
|
|
|
:rules="rules" |
|
|
|
|
:label-col="{ span: 20 }" |
|
|
|
|
:wrapper-col="{ span: 22 }" |
|
|
|
|
autocomplete="off" |
|
|
|
|
> |
|
|
|
|
<div class="login_title"> |
|
|
|
|
登录/注册 |
|
|
|
|
</div> |
|
|
|
|
<FormItem |
|
|
|
|
name="phone" |
|
|
|
|
> |
|
|
|
|
<Input v-model:value="ruleForm.phone" :bordered="false" class="custom-input" placeholder="请输入手机号码"> |
|
|
|
|
<template #prefix> |
|
|
|
|
<img |
|
|
|
|
class="icon" |
|
|
|
|
:src="Yh" |
|
|
|
|
style="width: 20px;" |
|
|
|
|
/> |
|
|
|
|
</template> |
|
|
|
|
</Input> |
|
|
|
|
</FormItem> |
|
|
|
|
<FormItem |
|
|
|
|
name="code" |
|
|
|
|
> |
|
|
|
|
<Input v-model:value="ruleForm.code" :bordered="false" class="custom-input" placeholder="请输入验证码"> |
|
|
|
|
<template #prefix> |
|
|
|
|
<img |
|
|
|
|
class="icon" |
|
|
|
|
:src="Yzm" |
|
|
|
|
style="width: 20px;" |
|
|
|
|
/> |
|
|
|
|
</template> |
|
|
|
|
<template #suffix> |
|
|
|
|
<Button |
|
|
|
|
type="link" |
|
|
|
|
:disabled="disabled" |
|
|
|
|
@click="handleSendCode" |
|
|
|
|
> |
|
|
|
|
<span class="time">{{ btnTxt }}</span> |
|
|
|
|
</Button> |
|
|
|
|
</template> |
|
|
|
|
</Input> |
|
|
|
|
</FormItem> |
|
|
|
|
<FormItem> |
|
|
|
|
<div |
|
|
|
|
class="login-button" |
|
|
|
|
@click="handleLogin" |
|
|
|
|
@key.enter="handleLogin" |
|
|
|
|
> |
|
|
|
|
登 录 |
|
|
|
|
</div> |
|
|
|
|
<div class="versions"> |
|
|
|
|
v1.0.0 |
|
|
|
|
</div> |
|
|
|
|
</FormItem> |
|
|
|
|
</Form> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<style scoped></style> |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.login-container { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
background-image: url('@/assets/images/login/loginbg.png'); |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
background-position: center center; |
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
|
|
.logo { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 2%; |
|
|
|
|
left: 2%; |
|
|
|
|
.logoimg { |
|
|
|
|
width: 200px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.logoncontent { |
|
|
|
|
width: 60%; |
|
|
|
|
height: 50%; |
|
|
|
|
position: absolute; |
|
|
|
|
top: 50%; |
|
|
|
|
left: 50%; |
|
|
|
|
transform: translate(-50%, -50%); |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
position: relative; |
|
|
|
|
.left { |
|
|
|
|
width: 50%; |
|
|
|
|
height: 100%; |
|
|
|
|
margin-right: 20px; |
|
|
|
|
position: absolute; |
|
|
|
|
top: 0; |
|
|
|
|
left: 0; |
|
|
|
|
position: relative; |
|
|
|
|
.info { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 20%; |
|
|
|
|
left: 10%; |
|
|
|
|
.welcome { |
|
|
|
|
font-size: 55px; |
|
|
|
|
font-family: PingFang-SC, PingFang-SC; |
|
|
|
|
font-weight: 300; |
|
|
|
|
color: #ffffff; |
|
|
|
|
|
|
|
|
|
letter-spacing: 4px; |
|
|
|
|
} |
|
|
|
|
.zh { |
|
|
|
|
font-size: 30px; |
|
|
|
|
padding-top: 20px; |
|
|
|
|
font-family: PingFang-SC, PingFang-SC; |
|
|
|
|
font-weight: 400; |
|
|
|
|
color: #ffffff; |
|
|
|
|
letter-spacing: 5px; |
|
|
|
|
} |
|
|
|
|
.en { |
|
|
|
|
font-size: 16px; |
|
|
|
|
font-family: PingFang-SC, PingFang-SC; |
|
|
|
|
font-weight: 400; |
|
|
|
|
color: #77a4ff; |
|
|
|
|
line-height: 22px; |
|
|
|
|
padding-top: 10px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.right { |
|
|
|
|
width: 50%; |
|
|
|
|
height: 100%; |
|
|
|
|
border-radius: 4px; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
letter-spacing: 0.2em; |
|
|
|
|
backdrop-filter: blur(50px); |
|
|
|
|
position: absolute; |
|
|
|
|
top: 0; |
|
|
|
|
right: 2%; |
|
|
|
|
.login-Form { |
|
|
|
|
width: 75%; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
.time { |
|
|
|
|
font-size: 12px; |
|
|
|
|
color: #48a1fe; |
|
|
|
|
} |
|
|
|
|
.custom-input { |
|
|
|
|
border: none; |
|
|
|
|
border-radius: 0; |
|
|
|
|
background-color: transparent; |
|
|
|
|
color: #333; |
|
|
|
|
border-bottom: 1px solid #c8cbd6; |
|
|
|
|
&::placeholder { |
|
|
|
|
font-size: 12px; |
|
|
|
|
color: #6e7382; |
|
|
|
|
letter-spacing: 3px; |
|
|
|
|
} |
|
|
|
|
&:focus { |
|
|
|
|
box-shadow: none; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.login_title { |
|
|
|
|
margin-bottom: 30px; |
|
|
|
|
color: #505458; |
|
|
|
|
font-size: 19px; |
|
|
|
|
font-family: |
|
|
|
|
PingFangSC, |
|
|
|
|
PingFang SC; |
|
|
|
|
font-weight: 500; |
|
|
|
|
color: #141515; |
|
|
|
|
} |
|
|
|
|
.login-button { |
|
|
|
|
margin-top: 10px; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 40px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
background: #0075eb; |
|
|
|
|
border-radius: 4px; |
|
|
|
|
color: white; |
|
|
|
|
text-align: center; |
|
|
|
|
line-height: 40px; |
|
|
|
|
} |
|
|
|
|
.versions { |
|
|
|
|
width: 100%; |
|
|
|
|
text-align: center; |
|
|
|
|
font-size: 13px; |
|
|
|
|
font-family: |
|
|
|
|
PingFangSC, |
|
|
|
|
PingFang SC; |
|
|
|
|
font-weight: 400; |
|
|
|
|
color: #6e7382; |
|
|
|
|
padding-top: 20px; |
|
|
|
|
letter-spacing: 2px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|