fix : 修复loading加载

This commit is contained in:
2024-03-05 21:58:53 +08:00
parent bfbc77847a
commit 25bcededa0

View File

@@ -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;