青鸟ai,pc版仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

533 lines
13 KiB

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { Button, Checkbox, Form, FormItem, Input, message } from 'ant-design-vue'
import { useRoute, 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 { 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 route = useRoute()
const inviteCode = route.query.inviteCode
const formRef = ref()
const btnTxt = ref('获取验证码')
const disabled = ref(false)
const time = ref(0)
const checked = ref(false) // 勾选协议
const ruleForm = reactive<LoginForm>({
phone: '',
code: '',
inviteCode: '',
})
if (inviteCode) {
ruleForm.inviteCode = inviteCode as string
}
const loading = ref(false)
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() {
if (checked.value) {
formRef.value
.validate()
.then(() => {
loading.value = true
userStore.login({
user_type: UserTypeEnum.C,
grant_type: GrantTypeEnum.SMS,
invite_code: '',
phone: ruleForm.phone,
phoneCode: ruleForm.code,
type: TypeEnum.PHONE,
inviteCode: ruleForm.inviteCode,
}).then(() => {
message.success('登录成功')
loading.value = false
router.push('/')
}).catch(() => {
loading.value = false
})
})
}
else {
message.warning('请先勾选协议!')
}
}
// 获取验证码
function handleSendCode() {
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 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
}
}
// 勾选协议
function handleCheck() {
checked.value = !checked.value
}
// 查看协议
function handleView(number: number) {
let url
if (number === 1) {
url = 'https://qn-static-resource.oss-cn-shanghai.aliyuncs.com/docs/%E6%9C%8D%E5%8A%A1%E5%8D%8F%E8%AE%AE.docx'
}
else {
url = 'https://qn-static-resource.oss-cn-shanghai.aliyuncs.com/docs/%E9%9A%90%E7%A7%81%E6%94%BF%E7%AD%96.docx'
}
let urls = ''
urls = `http://view.xdocin.com/xdoc?_xdoc=${url}`
window.open(
urls,
'',
`width=${
window.screen.availWidth - 10
},height=${
window.screen.availHeight - 70
}, top = 0, left = 0, status=no`,
)
}
</script>
<template>
<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">
LARGE LANGUAGE MODEL BLUEBIRD - 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="请输入手机号码" @keyup.enter="handleLogin">
<template #prefix>
<img
class="icon"
:src="Yh"
/>
</template>
</Input>
</FormItem>
<FormItem
name="code"
>
<Input v-model:value="ruleForm.code" :bordered="false" class="custom-input" placeholder="请输入验证码" @keyup.enter="handleLogin">
<template #prefix>
<img
class="icon"
:src="Yzm"
/>
</template>
<template #suffix>
<Button
type="link"
:disabled="disabled"
@click="handleSendCode"
>
<span class="time">{{ btnTxt }}</span>
</Button>
</template>
</Input>
</FormItem>
<FormItem>
<Button
class="login-button"
:loading="loading"
@click="handleLogin"
>
</Button>
</FormItem>
</Form>
<div class="check" @click="handleCheck">
<Checkbox v-model:checked="checked" />
<span style="padding-left: 3px;">
勾选即代表您同意并接受<span class="blue" @click.stop="handleView(1)">服务协议</span><span class="blue" @click.stop="handleView(2)">隐私政策</span>
</span>
</div>
<div class="versions">
v1.0.0
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
@media all and (min-width: 992px) {
.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: 50px;
font-weight: 300;
color: #ffffff;
letter-spacing: 4px;
}
.zh {
font-size: 26px;
padding-top: 20px;
font-weight: 400;
color: #ffffff;
letter-spacing: 5px;
}
.en {
font-size: 13px;
font-weight: 400;
color: #77a4ff;
line-height: 22px;
padding-top: 10px;
}
}
}
.right {
width: 50%;
height: 100%;
border-radius: 4px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
letter-spacing: 0.2em;
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px);
position: absolute;
top: 0;
right: 2%;
.login-Form {
width: 77%;
margin: 0 auto;
.icon {
width: 15px;
height: 15px;
}
.time {
font-size: 12px;
color: #48a1fe;
}
:deep(.ant-form-item-explain-error) {
font-size: 12px;
padding-left: 27px;
}
.custom-input {
border: none;
border-radius: 0;
background-color: transparent;
color: #333;
border-bottom: 1px solid #c8cbd6;
.ant-form-item-explain-error {
color: blue;
}
}
.login-title {
margin-top: 50px;
margin-bottom: 30px;
color: #505458;
font-size: 19px;
font-weight: 500;
color: #141515;
}
.login-button {
margin-top: 10px;
width: 100%;
height: 40px;
background: #0075eb;
border-radius: 4px;
color: white;
}
}
.versions {
width: 100%;
text-align: center;
font-size: 13px;
font-weight: 400;
color: #6e7382;
padding-top: 10px;
letter-spacing: 2px;
}
.check {
width: 100%;
text-align: center;
font-size: 12px;
font-weight: 400;
color: #6e7382;
text-align: center;
cursor: pointer;
.blue {
color: #5aa8fd;
}
}
}
}
}
}
@media all and (max-width: 992px) {
.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: 90%;
min-height: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
position: relative;
.left {
display: none;
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: 50px;
font-weight: 300;
color: #ffffff;
letter-spacing: 4px;
}
.zh {
font-size: 26px;
padding-top: 20px;
font-weight: 400;
color: #ffffff;
letter-spacing: 5px;
}
.en {
font-size: 13px;
font-weight: 400;
color: #77a4ff;
line-height: 22px;
padding-top: 10px;
}
}
}
.right {
width: 100%;
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: 70%;
margin: 0 auto;
.icon {
width: 15px;
height: 15px;
}
.time {
font-size: 12px;
color: #48a1fe;
}
:deep(.ant-form-item-explain-error) {
font-size: 12px;
padding-left: 27px;
}
.custom-input {
border: none;
border-radius: 0;
background-color: transparent;
color: #333;
border-bottom: 1px solid #c8cbd6;
.ant-form-item-explain-error {
color: blue;
}
}
.login-title {
margin-top: 50px;
margin-bottom: 30px;
color: #505458;
font-size: 19px;
font-weight: 500;
color: #141515;
}
.login-button {
margin-top: 10px;
width: 100%;
height: 40px;
background: #0075eb;
border-radius: 4px;
color: white;
}
.versions {
width: 100%;
text-align: center;
font-size: 13px;
font-weight: 400;
color: #6e7382;
padding-top: 20px;
letter-spacing: 2px;
}
}
}
}
}
}
</style>