Skip to content

liyeyun
liyeyun
Commit a38eded9 authored by shilei's avatar shilei
Browse files
Options

fix: 登录框失焦验证

parent cb29f87e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 90 additions and 32 deletions
src/components/common/CommonFooter.vue
View file @ a38eded9
<template>
<div class="footer mt-10 bg-[#1A1A1A] pb-4 pt-3">
<div class="mx-auto w-[1200px] flex justify-between items-center">
<div class="mx-auto flex w-[1200px] items-center justify-between">
<div>
<div class="flex justify-between">
<div class="flex flex-col justify-between">
<div class="flex pt-3 text-sm text-white items-center mb-2">
<div class="mb-2 flex items-center pt-3 text-sm text-white">
<div style="margin-top: -5px" class="flex">
<img src="@/assets/images/nav-logo.png" class="w-[123px] h-[33px]" alt="" />
<img src="@/assets/images/nav-logo.png" class="h-[33px] w-[123px]" alt="" />
</div>
<div class="mx-[20px]">
<div class="h-[22px] border-l border-solid border-[#666666]"></div>
......@@ -27,16 +27,20 @@
<p>邮箱：service@liyeyun.com</p>
</div>
</div>
</div>
<div class="flex items-center font-yahei text-xs text-[#F1F3F4] mt-3 ">
<p class=" mr-5">
<div class="mt-3 flex items-center font-yahei text-xs text-[#F1F3F4]">
<p class="mr-5">
Copyright © 2023 北京华夏幸福数字科技有限公司 丨
<a href="https://beian.miit.gov.cn" target="_blank">京ICP备2022004539号-5</a>
</p>
<div class="flex items-center">
<img src="@/assets/images/gongan.png" class="w-5 h-5 mr-1" alt="">
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010602200880" target="_blank">京公网安备11010602200880号</a>
<img src="@/assets/images/gongan.png" class="mr-1 h-5 w-5" alt="" />
<a
href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010602200880"
target="_blank"
>
京公网安备11010602200880号
</a>
</div>
</div>
</div>
......
src/components/common/CommonHeader.vue
View file @ a38eded9
......@@ -4,7 +4,7 @@
<!-- <div>logo</div> -->
<div class="flex flex-1 justify-start">
<div v-if="route.name === 'home'" class="mr-7 flex w-[224px] items-center">
<img class="w-[123px] h-[33px]" src="@/assets/images/nav-logo.png" alt="" />
<img class="h-[33px] w-[123px]" src="@/assets/images/nav-logo.png" alt="" />
<div
class="city-space ml-4 flex items-center"
@mouseenter="changeCityStatus(1)"
......@@ -14,7 +14,7 @@
<img
class="hover-icon h-3 w-3"
src="@/assets/images/icon-triangle_white.png"
:style="{transform: showCityView ? 'rotate(180deg)': 'rotate(0deg)'}"
:style="{ transform: showCityView ? 'rotate(180deg)' : 'rotate(0deg)' }"
alt=""
/>
</div>
......@@ -49,7 +49,10 @@
</template>
</ElMenu>
</div>
<div class="flex items-center pr-[56px] text-base text-[#333333]" :style="{color: route.name === 'home'? 'white': '#333' }">
<div
class="flex items-center pr-[56px] text-base text-[#333333]"
:style="{ color: route.name === 'home' ? 'white' : '#333' }"
>
<div>
<div v-if="userInfo" class="flex items-center">
<ElDropdown
......@@ -58,11 +61,25 @@
popper-class="user-menu"
:disabled="route.name === 'home'"
:teleported="false"
@visible-change="(e: boolean) => { !(route.name === 'home' )&& (showUserCenter = e)}"
@visible-change="
(e: boolean) => {
!(route.name === 'home') && (showUserCenter = e);
}
"
>
<div class="flex w-[167px] items-center pl-2" @click="()=>{route.name === 'home' && toUserCenter()}">
<div
class="flex w-[167px] items-center pl-2"
@click="
() => {
route.name === 'home' && toUserCenter();
}
"
>
<img src="@/assets/images/icon-avatar.png" class="mr-3 h-[26px] w-[26px]" />
<span class="mr-2 cursor-pointer text-base text-[#333333]" :class="route.name !== 'home'?'text-[#333333]':'text-white'">
<span
class="mr-2 cursor-pointer text-base text-[#333333]"
:class="route.name !== 'home' ? 'text-[#333333]' : 'text-white'"
>
{{ userInfo.phone }}
</span>
<img
......@@ -95,8 +112,15 @@
<span @click="handleLogin('register')">注册</span>
</div>
</div>
<div class="ml-4 flex items-center text-base font-medium text-[#C0322B]" :style="{color: route.name === 'home'? 'white': '#C0322B' }">
<img v-if="route.name === 'home'" class="mr-2 h-4 w-4" src="@/assets/images/icon-phone_white.png" />
<div
class="ml-4 flex items-center text-base font-medium text-[#C0322B]"
:style="{ color: route.name === 'home' ? 'white' : '#C0322B' }"
>
<img
v-if="route.name === 'home'"
class="mr-2 h-4 w-4"
src="@/assets/images/icon-phone_white.png"
/>
<img v-else class="mr-2 h-4 w-4" src="@/assets/images/icon-phone_call.png" />
<span>400-833-0813</span>
</div>
......@@ -112,7 +136,7 @@
<div
v-for="cities in cityList"
:key="cities.label"
class="text-[#1a1a1a] mr-[41px] shrink-0 text-base"
class="mr-[41px] shrink-0 text-base text-[#1a1a1a]"
>
<span class="font-medium">{{ cities.label }}</span>
<p
......@@ -357,7 +381,7 @@ const handleMenuChange = (menu: HeaderMenuItem) => {
left: calc(600px - 50vw);
right: 0;
top: 60px;
background: rgba(255,255,255,0.9);
background: rgba(255, 255, 255, 0.9);
z-index: 99;
width: 100vw;
.city-item:hover {
......
src/components/login/LoginView.vue
View file @ a38eded9
......@@ -19,7 +19,7 @@
class="phone-input"
type="number"
placeholder="请输入手机号"
@blur="verify('phone')"
@blur="handleBlur('phone')"
></ElInput>
</div>
<div class="form-item flex justify-between">
......@@ -63,7 +63,7 @@
class="phone-input"
type="number"
placeholder="请输入手机号"
@blur="verify('phone')"
@blur="handleBlur('phone')"
/>
</div>
<div ref="passWord" class="form-item flex">
......@@ -72,7 +72,7 @@
type="password"
show-password
placeholder="请输入密码"
@blur="verify('password')"
@blur="handleBlur('password')"
></ElInput>
</div>
</div>
......@@ -106,7 +106,7 @@
class="phone-input"
type="number"
placeholder="请输入手机号"
@blur="verify('phone')"
@blur="handleBlur('phone')"
></ElInput>
</div>
<div class="form-item flex justify-between">
......@@ -127,7 +127,7 @@
type="password"
show-password
placeholder="请输入密码（最少6位）"
@blur="verify('password')"
@blur="handleBlur('password')"
></ElInput>
</div>
</div>
......@@ -157,7 +157,7 @@
class="phone-input"
type="number"
placeholder="请输入手机号"
@blur="verify('phone')"
@blur="handleBlur('phone')"
></ElInput>
</div>
<div class="form-item flex justify-between">
......@@ -178,7 +178,7 @@
type="password"
show-password
placeholder="请输入密码（最少6位）"
@blur="verify('password')"
@blur="handleBlur('password')"
></ElInput>
</div>
</div>
......@@ -223,11 +223,18 @@ const { close: closeModal } = useLoginModal();
const { proxy } = getCurrentInstance() as any;
const changeModalType = (type: string) => {
console.log('xxfdf')
phoneNum.value = null;
verifyCode.value = null;
password.value = null;
errorMsg.value = null;
modalType.value = type;
errorMsg.value = null;
// setTimeout(() => {
// console.log('az')
proxy.$refs.phoneInput.style.borderColor = 'rgba(0, 0, 0, 0.15)';
if(proxy.$refs.passWord) proxy.$refs.passWord.style.borderColor = 'rgba(0, 0, 0, 0.15)';
// },400)
};
const props = withDefaults(
......@@ -273,28 +280,37 @@ const verify = (type: string = 'all') => {
const regex = /^1[3-9]\d{9}$/;
if (type === 'phone' || type === 'all') {
if (!regex.test(phoneNum.value?.toString() || '')) {
proxy.$refs.phoneInput.style.borderColor = '#c0322b';
if (proxy.$refs.phoneInput) {
proxy.$refs.phoneInput.style.borderColor = '#c0322b';
}
errorMsg.value = '请输入有效的手机号码';
return false;
if (type === 'all') {
return false;
} else {
return true
}
} else {
if (errorMsg.value === '请输入有效的手机号码') {
errorMsg.value = null;
}
proxy.$refs.phoneInput.style.borderColor = 'rgba(0, 0, 0, 0.15)';
if (proxy.$refs.phoneInput) {
proxy.$refs.phoneInput.style.borderColor = 'rgba(0, 0, 0, 0.15)';
}
}
}
// const
if (type === 'password' || type === 'all') {
if (modalType.value !== 'loginByPhone') {
if (!/^.{6,20}$/.test(password.value?.toString() || '')) {
proxy.$refs.passWord.style.borderColor = '#c0322b';
if(proxy.$refs.passWord) proxy.$refs.passWord.style.borderColor = '#c0322b';
errorMsg.value = '请输入6-20位有效密码';
return false;
if (type === 'all') { return false };
} else {
if (errorMsg.value === '请输入6-20位有效密码') {
errorMsg.value = null;
}
proxy.$refs.passWord.style.borderColor = 'rgba(0, 0, 0, 0.15)';
if(proxy.$refs.passWord) proxy.$refs.passWord.style.borderColor = 'rgba(0, 0, 0, 0.15)'
}
}
}
......@@ -432,6 +448,20 @@ const register = async () => {
const close = () => {
closeModal();
};
/**
* 失焦事件
*/
const handleBlur = (type: string) => {
const _modalType = modalType.value;
console.log('333',_modalType)
setTimeout(() => {
console.log(444)
if (_modalType === modalType.value) {
verify(type)
}
}, 320)
}
</script>
<style lang="scss" scoped>
.login-panel {
......
src/views/home/HomeView.vue
View file @ a38eded9
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment