Browse Source

登录

master
zhangli 1 year ago
parent
commit
f342134f75
  1. 32
      src/views/Login/components/LoginForm.vue

32
src/views/Login/components/LoginForm.vue

@ -16,36 +16,20 @@
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item prop="username"> <el-form-item prop="username">
<el-input v-model="loginData.loginForm.username" :placeholder="t('login.usernamePlaceholder')" <el-input v-model="loginData.loginForm.username" :placeholder="t('login.usernamePlaceholder')"
:prefix-icon="iconAvatar" /> :prefix-icon="iconAvatar" style="height: 42px;" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item prop="password"> <el-form-item prop="password">
<el-input v-model="loginData.loginForm.password" :placeholder="t('login.passwordPlaceholder')" <el-input v-model="loginData.loginForm.password" :placeholder="t('login.passwordPlaceholder')"
:prefix-icon="iconLock" show-password type="password" @keyup.enter="getCode()" /> :prefix-icon="iconLock" show-password type="password" @keyup.enter="getCode()" style="height: 42px;"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<!-- <el-col :span="24" style="padding-right: 10px; padding-left: 10px; margin-top: -20px; margin-bottom: -20px">
<el-form-item prop="code" v-if="captchaEnabled">
<div class="label">
<svg-icon icon-class="icon_safe" class="el-input__icon input-icon" />
<div>验证码</div>
</div>
<div>
<el-input v-model="loginData.loginForm.password" :placeholder="t('login.passwordPlaceholder')"
:prefix-icon="iconLock" show-password type="password" @keyup.enter="getCode()" />
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img" />
</div>
</div>
</el-form-item>
</el-col> -->
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item prop="code"> <el-form-item prop="code">
<div class="flex"> <div class="flex w-[100%]">
<el-input v-model="loginData.loginForm.code" placeholder="请输入验证码" style="width: 320px;" <el-input v-model="loginData.loginForm.code" placeholder="请输入验证码" style="width: 76%;margin-right: 10px;height: 42px;"
:prefix-icon="iconLock" show-password type="password" @keyup.enter="getCode()"/> :prefix-icon="iconLock" @keyup.enter="getCode()" />
<div class="login-code flex-1"> <div class="login-code flex-1">
<img :src="codeUrl" @click="getCode" class="login-code-img" /> <img :src="codeUrl" @click="getCode" class="login-code-img" />
</div> </div>
@ -136,7 +120,8 @@ const loginData = reactive({
password: 'admin123', password: 'admin123',
captchaVerification: '', captchaVerification: '',
rememberMe: false, rememberMe: false,
code:'' code: '',
uuid: ''
} }
}) })
@ -163,7 +148,7 @@ function getCode() {
captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled; captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
if (captchaEnabled.value) { if (captchaEnabled.value) {
codeUrl.value = "data:image/gif;base64," + res.img; codeUrl.value = "data:image/gif;base64," + res.img;
loginForm.value.uuid = res.uuid; loginData.loginForm.uuid = res.uuid;
} }
}); });
} }
@ -197,7 +182,6 @@ const handleLogin = async (params) => {
if (!data) { if (!data) {
return return
} }
loginData.loginForm.captchaVerification = params.captchaVerification
const res = await LoginApi.login(loginData.loginForm) const res = await LoginApi.login(loginData.loginForm)
if (!res) { if (!res) {
return return

Loading…
Cancel
Save