13
0
forked from github/dataease

Merge pull request from dataease/pr@dev-v2_dzz_mobile

fix(移动端): 登录页面优化
This commit is contained in:
dataeaseShu 2024-02-29 11:49:42 +08:00 committed by GitHub
commit afdbb6eebd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 88 additions and 22 deletions
core/core-frontend/src
assets/img
views/mobile/login

Binary file not shown.

After

(image error) Size: 273 KiB

Binary file not shown.

After

(image error) Size: 2.4 KiB

View File

@ -1,6 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'
import VanCellGroup from 'vant/es/cell-group' import VanCellGroup from 'vant/es/cell-group'
import mobileDeTop from '@/assets/img/mobile-de-top.png'
import { showToast } from 'vant' import { showToast } from 'vant'
import { loginApi, queryDekey } from '@/api/login' import { loginApi, queryDekey } from '@/api/login'
import { useAppStoreWithOut } from '@/store/modules/app' import { useAppStoreWithOut } from '@/store/modules/app'
@ -12,6 +13,7 @@ import VanForm from 'vant/es/form'
import VanField from 'vant/es/field' import VanField from 'vant/es/field'
import VanButton from 'vant/es/button' import VanButton from 'vant/es/button'
import 'vant/es/button/style' import 'vant/es/button/style'
import 'vant/es/toast/style'
import 'vant/es/field/style' import 'vant/es/field/style'
import 'vant/es/form/style' import 'vant/es/form/style'
import 'vant/es/cell-group/style' import 'vant/es/cell-group/style'
@ -46,7 +48,10 @@ const validatePwd = value => {
const onSubmit = async () => { const onSubmit = async () => {
if (!checkUsername(username.value) || !validatePwd(password.value)) { if (!checkUsername(username.value) || !validatePwd(password.value)) {
showToast('用户名或密码错误') showToast({
duration: 2000,
message: '用户名、密码不对'
})
return return
} }
const name = username.value.trim() const name = username.value.trim()
@ -68,33 +73,51 @@ const onSubmit = async () => {
duringLogin.value = false duringLogin.value = false
}) })
} }
const passwordError = ref('')
const usernameError = ref('')
const passwordEndValidate = ({ status, message }) => {
passwordError.value = status === 'passed' ? '' : message
}
const usernameEndValidate = ({ status, message }) => {
usernameError.value = status === 'passed' ? '' : message
}
</script> </script>
<template> <template>
<div class="de-mobile-login" v-loading="duringLogin"> <div class="de-mobile-login" v-loading="duringLogin">
<div class="mobile-login-content"> <div class="mobile-login-content">
<img width="120" height="31" :src="mobileDeTop" alt="" />
<div class="mobile-login-welcome">用户登录</div> <div class="mobile-login-welcome">用户登录</div>
<van-form @submit="onSubmit"> <van-form @submit="onSubmit">
<van-cell-group inset> <van-cell-group inset>
<van-field <van-field
v-model="username" v-model="username"
name="用户名" name="用户名"
label="用户名" :style="{ borderColor: !!usernameError ? '#F54A45' : '#bbbfc4' }"
placeholder="用户名" placeholder="请输入用户名"
@end-validate="usernameEndValidate"
:rules="[{ required: true, message: '请填写用户名' }]" :rules="[{ required: true, message: '请填写用户名' }]"
/> />
<div v-if="!!usernameError" class="van-ed-error">
{{ usernameError }}
</div>
<van-field <van-field
v-model="password" v-model="password"
type="password" type="password"
:style="{ borderColor: !!passwordError ? '#F54A45' : '#bbbfc4' }"
name="密码" name="密码"
label="密码" placeholder="请输入密码"
placeholder="密码"
:rules="[{ required: true, message: '请填写密码' }]" :rules="[{ required: true, message: '请填写密码' }]"
@end-validate="passwordEndValidate"
/> />
</van-cell-group> <div v-if="!!passwordError" class="van-ed-error">
<div style="margin: 16px"> {{ passwordError }}
<van-button round block type="primary" native-type="submit"> 提交 </van-button>
</div> </div>
</van-cell-group>
<van-button block type="primary" native-type="submit"> 登录 </van-button>
</van-form> </van-form>
</div> </div>
</div> </div>
@ -104,28 +127,71 @@ const onSubmit = async () => {
.de-mobile-login { .de-mobile-login {
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
display: flex; position: relative;
align-items: center; background-size: contain;
justify-content: center; background-repeat: no-repeat;
background-image: url(../../../assets/logo-bg.jpg); background-image: url(../../../assets/img/bg-mobile.png);
.mobile-login-content { .mobile-login-content {
background-color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, #ffffff 58.86%);
margin-top: 20px; position: absolute;
position: relative; bottom: 0;
opacity: 0.95; left: 0;
border-radius: 10px; border-top-right-radius: 20px;
border-top-left-radius: 20px;
overflow: hidden; overflow: hidden;
width: 100%;
height: 70%;
padding: 24px 16px;
--van-cell-group-inset-padding: 0;
--van-cell-group-inset-radius: 0;
--van-cell-group-background: transparent;
--van-cell-background: transparent;
--van-cell-vertical-padding: 12px;
--van-button-default-height: 48px;
--van-field-placeholder-text-color: #8f959e;
:deep(.van-field) { .van-ed-error {
padding-left: 0 !important; font-size: 14px;
font-weight: 400;
line-height: 20px;
margin-top: -12px;
color: #f54a45;
}
.van-field {
border: 1px solid #bbbfc4;
border-radius: 4px;
margin: 16px 0;
}
.van-cell:after {
display: none;
} }
.mobile-login-welcome { .mobile-login-welcome {
padding-left: 15px; font-size: 22px;
font-size: x-large;
font-weight: 500; font-weight: 500;
letter-spacing: 2px; line-height: 30px;
margin-top: 10px;
}
.van-button--normal {
font-size: 17px;
font-weight: 400;
line-height: 24px;
}
.van-field__control {
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
.van-cell {
.van-field__error-message {
display: none;
}
} }
} }
} }