fix : 修复loading加载
This commit is contained in:
@@ -15,7 +15,8 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item prop="code" label="验证码">
|
<el-form-item prop="code" label="验证码">
|
||||||
<div class="code">
|
<div class="code">
|
||||||
<el-input v-model="loginForm.code" :prefix-icon="key" @keyup.enter.native="handleLogin(formInstance)"></el-input>
|
<el-input v-model="loginForm.code" :prefix-icon="key"
|
||||||
|
@keyup.enter.native="handleLogin(formInstance)"></el-input>
|
||||||
<img :src="codeImg" alt="" @click="getCode">
|
<img :src="codeImg" alt="" @click="getCode">
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@@ -32,6 +33,7 @@ import { getCodeImg } from '../../api/login';
|
|||||||
import {useAuthStore} from '@/stores/userstore'
|
import {useAuthStore} from '@/stores/userstore'
|
||||||
import {ElLoading} from 'element-plus'
|
import {ElLoading} from 'element-plus'
|
||||||
import {User, Lock, Key} from '@element-plus/icons-vue'
|
import {User, Lock, Key} from '@element-plus/icons-vue'
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const authStore = useAuthStore()
|
const authStore = useAuthStore()
|
||||||
const loginForm = reactive({
|
const loginForm = reactive({
|
||||||
@@ -66,18 +68,19 @@ const handleLogin = (instance) => {
|
|||||||
if (!instance) return
|
if (!instance) return
|
||||||
instance.validate(async (valid, fields) => {
|
instance.validate(async (valid, fields) => {
|
||||||
if (!valid) return
|
if (!valid) return
|
||||||
ElLoading.service({
|
const loading = ElLoading.service({
|
||||||
lock: true,
|
lock: true,
|
||||||
text: '登录中...',
|
text: '登录中...',
|
||||||
background: 'rgba(0, 0, 0, 0.7)',
|
background: 'rgba(0, 0, 0, 0.7)',
|
||||||
})
|
})
|
||||||
// 发送请求
|
// 发送请求
|
||||||
await authStore.userLogin(loginForm).then(res => {
|
await authStore.userLogin(loginForm).then(res => {
|
||||||
if(res) {
|
if (res.code === 1000) {
|
||||||
router.push('/')
|
router.push('/')
|
||||||
} else {
|
} else {
|
||||||
getCode()
|
getCode()
|
||||||
}
|
}
|
||||||
|
loading.close()
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -115,15 +118,18 @@ onBeforeUnmount(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.code {
|
.code {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.el-input {
|
.el-input {
|
||||||
// width: ;
|
// width: ;
|
||||||
flex: 2;
|
flex: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|||||||
Reference in New Issue
Block a user