admin/django-vue3-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 登录验证码自动刷新

Browse Source
This commit is contained in:
H0nGzA1
2023-09-17 19:42:50 +08:00
committed by 李强
parent 496c453615
commit 0772a605bf
2 changed files with 21 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/utils/service.ts
View File

@@ -96,7 +96,7 @@ function createService() {
return dataAxios; return dataAxios;
case 4000: case 4000:
errorCreate(`${dataAxios.msg}: ${response.config.url}`); errorCreate(`${dataAxios.msg}: ${response.config.url}`);
return Promise.reject(dataAxios.msg); return dataAxios;
default: default:
// 不是正确的 code // 不是正确的 code
errorCreate(`${dataAxios.msg}: ${response.config.url}`); errorCreate(`${dataAxios.msg}: ${response.config.url}`);

34
web/src/views/system/login/component/account.vue
View File

@@ -1,41 +1,31 @@
<template> <template>
<el-form size="large" class="login-content-form"> <el-form size="large" class="login-content-form">
<el-form-item class="login-animation1"> <el-form-item class="login-animation1">
<el-input type="text" :placeholder="$t('message.account.accountPlaceholder1')" v-model="ruleForm.username" clearable autocomplete="off"> <el-input type="text" :placeholder="$t('message.account.accountPlaceholder1')" v-model="ruleForm.username"
clearable autocomplete="off">
<template #prefix> <template #prefix>
<el-icon class="el-input__icon"><ele-User /></el-icon> <el-icon class="el-input__icon"><ele-User /></el-icon>
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item class="login-animation2"> <el-form-item class="login-animation2">
<el-input <el-input :type="isShowPassword ? 'text' : 'password'" :placeholder="$t('message.account.accountPlaceholder2')"
:type="isShowPassword ? 'text' : 'password'" v-model="ruleForm.password">
:placeholder="$t('message.account.accountPlaceholder2')"
v-model="ruleForm.password"
>
<template #prefix> <template #prefix>
<el-icon class="el-input__icon"><ele-Unlock /></el-icon> <el-icon class="el-input__icon"><ele-Unlock /></el-icon>
</template> </template>
<template #suffix> <template #suffix>
<i <i class="iconfont el-input__icon login-content-password"
class="iconfont el-input__icon login-content-password"
:class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'" :class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
@click="isShowPassword = !isShowPassword" @click="isShowPassword = !isShowPassword">
>
</i> </i>
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item class="login-animation3" v-if="isShowCaptcha"> <el-form-item class="login-animation3" v-if="isShowCaptcha">
<el-col :span="15"> <el-col :span="15">
<el-input <el-input type="text" maxlength="4" :placeholder="$t('message.account.accountPlaceholder3')"
type="text" v-model="ruleForm.captcha" clearable autocomplete="off">
maxlength="4"
:placeholder="$t('message.account.accountPlaceholder3')"
v-model="ruleForm.captcha"
clearable
autocomplete="off"
>
<template #prefix> <template #prefix>
<el-icon class="el-input__icon"><ele-Position /></el-icon> <el-icon class="el-input__icon"><ele-Position /></el-icon>
</template> </template>
@@ -49,7 +39,8 @@
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item class="login-animation4"> <el-form-item class="login-animation4">
<el-button type="primary" class="login-content-submit" round @click.enter="loginClick" :loading="loading.signIn"> <el-button type="primary" class="login-content-submit" round @click.enter="loginClick"
:loading="loading.signIn">
<span>{{ $t('message.account.accountBtnText') }}</span> <span>{{ $t('message.account.accountBtnText') }}</span>
</el-button> </el-button>
</el-form-item> </el-form-item>
@@ -201,6 +192,7 @@ export default defineComponent({
<style scoped lang="scss"> <style scoped lang="scss">
.login-content-form { .login-content-form {
margin-top: 20px; margin-top: 20px;
@for $i from 1 through 4 { @for $i from 1 through 4 {
.login-animation#{$i} { .login-animation#{$i} {
opacity: 0; opacity: 0;
@@ -210,20 +202,24 @@ export default defineComponent({
animation-delay: calc($i/10) + s; animation-delay: calc($i/10) + s;
} }
} }
.login-content-password { .login-content-password {
display: inline-block; display: inline-block;
width: 20px; width: 20px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: #909399; color: #909399;
} }
} }
.login-content-captcha { .login-content-captcha {
width: 100%; width: 100%;
padding: 0; padding: 0;
font-weight: bold; font-weight: bold;
letter-spacing: 5px; letter-spacing: 5px;
} }
.login-content-submit { .login-content-submit {
width: 100%; width: 100%;
letter-spacing: 2px; letter-spacing: 2px;