|
|
|
@ -24,18 +24,9 @@ |
|
|
|
</layout-header> |
|
|
|
<div class="go-login"> |
|
|
|
<div class="go-login-carousel"> |
|
|
|
<n-carousel |
|
|
|
autoplay |
|
|
|
dot-type="line" |
|
|
|
:interval="Number(carouselInterval)" |
|
|
|
> |
|
|
|
<img |
|
|
|
v-for="(item, i) in carouselImgList" |
|
|
|
:key="i" |
|
|
|
class="go-login-carousel-img" |
|
|
|
:src="getImageUrl(item, 'login')" |
|
|
|
alt="image" |
|
|
|
/> |
|
|
|
<n-carousel autoplay dot-type="line" :interval="Number(carouselInterval)"> |
|
|
|
<img v-for="(item, i) in carouselImgList" :key="i" class="go-login-carousel-img" |
|
|
|
:src="getImageUrl(item, 'login')" alt="image" /> |
|
|
|
</n-carousel> |
|
|
|
</div> |
|
|
|
<div class="login-account"> |
|
|
|
@ -43,24 +34,11 @@ |
|
|
|
<n-collapse-transition :appear="true" :show="show"> |
|
|
|
<n-card class="login-account-card" :title="$t('login.desc')"> |
|
|
|
<div class="login-account-top"> |
|
|
|
<img |
|
|
|
class="login-account-top-logo" |
|
|
|
src="~@/assets/images/login/input.png" |
|
|
|
alt="展示图片" |
|
|
|
/> |
|
|
|
<img class="login-account-top-logo" src="~@/assets/images/login/input.png" alt="展示图片" /> |
|
|
|
</div> |
|
|
|
<n-form |
|
|
|
ref="formRef" |
|
|
|
label-placement="left" |
|
|
|
size="large" |
|
|
|
:model="formInline" |
|
|
|
:rules="rules" |
|
|
|
> |
|
|
|
<n-form-item path="tenantId" v-if="tenantEnable ==='true'"> |
|
|
|
<n-input |
|
|
|
v-model:value="formInline.tenantName" |
|
|
|
:placeholder="$t('global.form_tenant')" |
|
|
|
> |
|
|
|
<n-form ref="formRef" label-placement="left" size="large" :model="formInline" :rules="rules"> |
|
|
|
<n-form-item path="tenantId" v-if="tenantEnable === 'true'"> |
|
|
|
<n-input v-model:value="formInline.tenantName" :placeholder="$t('global.form_tenant')"> |
|
|
|
<template #prefix> |
|
|
|
<n-icon size="18"> |
|
|
|
<TvOutlineIcon></TvOutlineIcon> |
|
|
|
@ -69,10 +47,7 @@ |
|
|
|
</n-input> |
|
|
|
</n-form-item> |
|
|
|
<n-form-item path="username"> |
|
|
|
<n-input |
|
|
|
v-model:value="formInline.username" |
|
|
|
:placeholder="$t('global.form_account')" |
|
|
|
> |
|
|
|
<n-input v-model:value="formInline.username" :placeholder="$t('global.form_account')"> |
|
|
|
<template #prefix> |
|
|
|
<n-icon size="18"> |
|
|
|
<PersonOutlineIcon></PersonOutlineIcon> |
|
|
|
@ -81,12 +56,8 @@ |
|
|
|
</n-input> |
|
|
|
</n-form-item> |
|
|
|
<n-form-item path="password"> |
|
|
|
<n-input |
|
|
|
v-model:value="formInline.password" |
|
|
|
type="password" |
|
|
|
show-password-on="click" |
|
|
|
:placeholder="$t('global.form_password')" |
|
|
|
> |
|
|
|
<n-input v-model:value="formInline.password" type="password" show-password-on="click" |
|
|
|
:placeholder="$t('global.form_password')"> |
|
|
|
<template #prefix> |
|
|
|
<n-icon size="18"> |
|
|
|
<LockClosedOutlineIcon></LockClosedOutlineIcon> |
|
|
|
@ -94,6 +65,24 @@ |
|
|
|
</template> |
|
|
|
</n-input> |
|
|
|
</n-form-item> |
|
|
|
<n-form-item prop="code"> |
|
|
|
<div class="flex w-[100%]"> |
|
|
|
<n-input v-model="formInline.code" placeholder="请输入验证码" |
|
|
|
style="width: 76%;margin-right: 10px;height: 42px;" :prefix-icon="iconLock" |
|
|
|
@keyup.enter="getCode()" > |
|
|
|
<template #prefix> |
|
|
|
<n-icon size="18"> |
|
|
|
<LockClosedOutlineIcon></LockClosedOutlineIcon> |
|
|
|
</n-icon> |
|
|
|
</template> |
|
|
|
</n-input> |
|
|
|
<div class="login-code flex-1"> |
|
|
|
<img :src="codeUrl" @click="getCode" class="login-code-img" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</n-form-item> |
|
|
|
|
|
|
|
<n-form-item> |
|
|
|
<div class="flex justify-between"> |
|
|
|
<div class="flex-initial"> |
|
|
|
@ -104,22 +93,11 @@ |
|
|
|
</div> |
|
|
|
</n-form-item> |
|
|
|
<n-form-item> |
|
|
|
<n-button |
|
|
|
type="primary" |
|
|
|
@click="getCode" |
|
|
|
size="large" |
|
|
|
:loading="loading" |
|
|
|
block |
|
|
|
>{{ $t('login.form_button') }}</n-button |
|
|
|
> |
|
|
|
<n-button type="primary" @click="getCode" size="large" :loading="loading" block>{{ |
|
|
|
$t('login.form_button') }}</n-button> |
|
|
|
</n-form-item> |
|
|
|
<Verify |
|
|
|
ref="verify" |
|
|
|
mode="pop" |
|
|
|
:captchaType="captchaType" |
|
|
|
:imgSize="{ width: '400px', height: '200px' }" |
|
|
|
@success="handleSubmit" |
|
|
|
/> |
|
|
|
<Verify ref="verify" mode="pop" :captchaType="captchaType" :imgSize="{ width: '400px', height: '200px' }" |
|
|
|
@success="handleSubmit" /> |
|
|
|
</n-form> |
|
|
|
</n-card> |
|
|
|
</n-collapse-transition> |
|
|
|
@ -147,7 +125,7 @@ import { PageEnum } from '@/enums/pageEnum' |
|
|
|
import { StorageEnum } from '@/enums/storageEnum' |
|
|
|
import { icon } from '@/plugins' |
|
|
|
import { routerTurnByName } from '@/utils' |
|
|
|
import {getTenantIdByNameApi, getUserProfileApi, loginApi} from '@/api/path' |
|
|
|
import { getTenantIdByNameApi, getUserProfileApi, loginApi, getCodeImg } from '@/api/path' |
|
|
|
import { Verify } from '@/components/Verifition' |
|
|
|
|
|
|
|
interface FormState { |
|
|
|
@ -171,7 +149,10 @@ const formInline = reactive({ |
|
|
|
tenantName: '闻荫源码', |
|
|
|
username: 'admin', |
|
|
|
password: 'admin123', |
|
|
|
code:'', |
|
|
|
uuid:'' |
|
|
|
}) |
|
|
|
const codeUrl = ref(""); |
|
|
|
|
|
|
|
const rules = { |
|
|
|
username: { |
|
|
|
@ -227,15 +208,22 @@ const verify = ref() |
|
|
|
const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字 |
|
|
|
const captchaEnable = import.meta.env.VITE_APP_CAPTCHA_ENABLE |
|
|
|
// 获取验证码 |
|
|
|
const getCode = async () => { |
|
|
|
// 情况一，未开启：则直接登录 |
|
|
|
if (captchaEnable === 'false') { |
|
|
|
await handleSubmit({}) |
|
|
|
} else { |
|
|
|
// 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录 |
|
|
|
// 弹出验证码 |
|
|
|
verify.value.show() |
|
|
|
} |
|
|
|
// const getCode = async () => { |
|
|
|
// // 情况一，未开启：则直接登录 |
|
|
|
// if (captchaEnable === 'false') { |
|
|
|
// await handleSubmit({}) |
|
|
|
// } else { |
|
|
|
// // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录 |
|
|
|
// // 弹出验证码 |
|
|
|
// verify.value.show() |
|
|
|
// } |
|
|
|
// } |
|
|
|
|
|
|
|
function getCode() { |
|
|
|
getCodeImg().then(res => { |
|
|
|
codeUrl.value = "data:image/gif;base64," + res.img; |
|
|
|
formInline.uuid = res.uuid; |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
// 多租户 |
|
|
|
@ -253,6 +241,7 @@ const getTenantId = async () => { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 登录 |
|
|
|
const handleSubmit = async (params: any) => { |
|
|
|
formRef.value.validate(async (errors: any) => { |
|
|
|
@ -268,7 +257,7 @@ const handleSubmit = async (params: any) => { |
|
|
|
password, |
|
|
|
captchaVerification: params.captchaVerification |
|
|
|
}) |
|
|
|
if(loginRes && loginRes.data) { |
|
|
|
if (loginRes && loginRes.data) { |
|
|
|
// ① Token 信息（先存储下，保证可以加载个人信息） |
|
|
|
const tokenValue = loginRes.data.accessToken |
|
|
|
const tokenName = 'Authorization' |
|
|
|
@ -309,7 +298,7 @@ onMounted(() => { |
|
|
|
setTimeout(() => { |
|
|
|
showBg.value = true |
|
|
|
}, 100) |
|
|
|
|
|
|
|
getCode() |
|
|
|
shuffleHandle() |
|
|
|
}) |
|
|
|
</script> |
|
|
|
@ -325,10 +314,12 @@ $carousel-image-height: 60vh; |
|
|
|
* { |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
@include go(login-box) { |
|
|
|
height: $go-login-height; |
|
|
|
overflow: hidden; |
|
|
|
@include background-image('background-image'); |
|
|
|
|
|
|
|
&-header { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
@ -336,6 +327,7 @@ $carousel-image-height: 60vh; |
|
|
|
padding: 0 40px; |
|
|
|
height: $--header-height; |
|
|
|
} |
|
|
|
|
|
|
|
&-divider { |
|
|
|
margin: 0; |
|
|
|
padding-top: 0; |
|
|
|
@ -349,20 +341,24 @@ $carousel-image-height: 60vh; |
|
|
|
margin-top: -$--header-height; |
|
|
|
height: $go-login-height; |
|
|
|
width: 100vw; |
|
|
|
|
|
|
|
&-carousel { |
|
|
|
width: $carousel-width; |
|
|
|
margin-top: 100px; |
|
|
|
min-width: 500px; |
|
|
|
|
|
|
|
&-img { |
|
|
|
display: block; |
|
|
|
margin: 0 auto; |
|
|
|
height: $carousel-image-height; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.login-account { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
margin: 0 160px; |
|
|
|
|
|
|
|
&-container { |
|
|
|
width: $width; |
|
|
|
} |
|
|
|
@ -398,15 +394,18 @@ $carousel-image-height: 60vh; |
|
|
|
width: 100vw; |
|
|
|
height: 100vh; |
|
|
|
background: url('@/assets/images/login/login-bg.png') no-repeat 0 -120px; |
|
|
|
|
|
|
|
.bg-slot { |
|
|
|
width: $carousel-width; |
|
|
|
} |
|
|
|
|
|
|
|
.bg-img-box { |
|
|
|
position: relative; |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
width: 770px; |
|
|
|
margin-right: -20px; |
|
|
|
|
|
|
|
&-li { |
|
|
|
img { |
|
|
|
margin-right: 20px; |
|
|
|
@ -419,12 +418,15 @@ $carousel-image-height: 60vh; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@media only screen and (max-width: 1200px) { |
|
|
|
|
|
|
|
.bg-img-box, |
|
|
|
.bg-slot, |
|
|
|
.go-login-carousel { |
|
|
|
display: none !important; |
|
|
|
} |
|
|
|
|
|
|
|
.go-login-box-footer { |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
zhangli
1 year ago