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.
146 lines
3.5 KiB
146 lines
3.5 KiB
<template> |
|
<div class="login-content"> |
|
<div class="login-form"> |
|
<div class="login-title">登录</div> |
|
<div class="form"> |
|
<el-form :model="form" label-width="80"> |
|
<el-form-item label="账号"> |
|
<el-input v-model="form.account" style="height: .2344rem" /> |
|
</el-form-item> |
|
<el-form-item label="密码"> |
|
<el-input v-model="form.password" style="height: .2344rem" /> |
|
</el-form-item> |
|
<el-form-item label="验证码"> |
|
<div class="captcha"> |
|
<el-input |
|
v-model="form.captcha" |
|
style="height: .2344rem" |
|
maxlength="4" |
|
/> |
|
<div class="code" @click="getcodeinfo"> |
|
<img :src="codeUrl" alt="" srcset="" /> |
|
</div> |
|
</div> |
|
</el-form-item> |
|
</el-form> |
|
<div class="submit gradient" @click.enter="submit">登录</div> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
|
import { getCode } from '@/api/user' |
|
import userStore from '@/store/module/user' |
|
import { ElMessage } from 'element-plus' |
|
import { useRouter } from 'vue-router' |
|
|
|
const useUserStore = userStore() |
|
const form = ref({ |
|
account: '', |
|
password: '', |
|
captcha: '', |
|
}) |
|
const codeUrl = ref('') |
|
const getcodeinfo = async () => { |
|
const res: any = await getCode(1629428467008) |
|
codeUrl.value = res.result |
|
console.log(codeUrl.value) |
|
} |
|
getcodeinfo() |
|
const Router = useRouter() |
|
const submit = async () => { |
|
console.log(111, useUserStore) |
|
|
|
let data = { |
|
captcha: form.value.captcha, |
|
checkKey: 1629428467008, |
|
password: form.value.password, |
|
username: form.value.account, |
|
} |
|
const res = await useUserStore.login(data) |
|
console.log(res) |
|
if (res === 0) { |
|
ElMessage('验证码错误') |
|
getcodeinfo() |
|
} else if (res === 1) { |
|
ElMessage('账号或密码错误') |
|
getcodeinfo() |
|
}else{ |
|
Router.push('/') |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.login-content { |
|
width: 100%; |
|
height: 100vh; |
|
background: url('../../assets/images/bg.png') no-repeat; |
|
background-size: cover; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
.login-form { |
|
width: 640px; |
|
height: 820px; |
|
border-radius: 15px; |
|
background-color: #ffffff1a !important; |
|
padding: 70px 60px; |
|
backdrop-filter: blur(10px); |
|
box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2); |
|
.login-title { |
|
font-size: 32px; |
|
font-weight: 700; |
|
} |
|
.form { |
|
margin-top: 35px; |
|
padding: 0 40px; |
|
.captcha { |
|
width: 100%; |
|
height: 100%; |
|
position: relative; |
|
.code { |
|
width: 100%; |
|
height: 100%; |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
width: 105px; |
|
height: 100%; |
|
// background-color: pink; |
|
display: flex; |
|
align-items: center; |
|
img{ |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
} |
|
.submit { |
|
width: 399px; |
|
height: 50px; |
|
text-align: center; |
|
line-height: 50px; |
|
font-size: 20px; |
|
font-weight: 600; |
|
cursor: pointer; |
|
color: #fff; |
|
border-radius: 10px; |
|
margin-top: 35px; |
|
} |
|
} |
|
} |
|
} |
|
:deep(.el-form-item) { |
|
display: flex; |
|
flex-direction: column; |
|
} |
|
:deep(.el-input__wrapper) { |
|
box-shadow: none; |
|
} |
|
:deep(.el-form-item__label) { |
|
justify-content: start; |
|
} |
|
</style>
|
|
|