Skip to content

梁建民 / scm_app

Go to a project
Commit 38342fb6 by liangjianmin
Options

refactor(login): simplify email input handling and update domain tag display 

- Remove email suggestions dropdown and replace it with a domain tag for improved user experience
- Update email input logic to show domain tag when user input does not contain '@'
- Implement click handler on domain tag to auto-complete email with predefined domain
- Adjust styles for the new domain tag and its animation effects for better visual feedback
parent 0b94abd3
Inline Side-by-side
Showing with 39 additions and 136 deletions
assets/css/mine/login.scss
......@@ -186,89 +186,37 @@ page {
}
}
// 邮箱建议下拉列表样式
.email-suggestions {
position: absolute;
top: calc(100% + 8rpx);
left: 0;
right: 0;
background: #ffffff;
border-radius: 12rpx;
box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.15), 0 4rpx 16rpx rgba(59, 130, 246, 0.1);
border: 1rpx solid rgba(59, 130, 246, 0.15);
z-index: 1000;
max-height: 240rpx;
overflow: hidden;
animation: slideDown 0.25s ease;
backdrop-filter: blur(8rpx);
@keyframes slideDown {
.domain-tag {
flex-shrink: 0;
margin-left: 12rpx;
padding: 10rpx 20rpx;
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
border: 1rpx solid rgba(59, 130, 246, 0.25);
border-radius: 8rpx;
animation: tagFadeIn 0.25s ease;
@keyframes tagFadeIn {
from {
opacity: 0;
transform: translateY(-12rpx);
transform: scale(0.9);
}
to {
opacity: 1;
transform: translateY(0);
transform: scale(1);
}
}
.suggestion-item {
padding: 24rpx 28rpx;
font-size: 28rpx;
color: #475569;
border-bottom: 1rpx solid #f1f5f9;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
display: flex;
align-items: center;
&::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0;
background: linear-gradient(90deg, rgba(59, 130, 246, 0.08), transparent);
transition: width 0.25s ease;
}
&::after {
content: '→';
position: absolute;
right: 28rpx;
font-size: 28rpx;
color: #3b82f6;
opacity: 0;
transform: translateX(-8rpx);
transition: all 0.25s ease;
}
&:last-child {
border-bottom: none;
}
&:hover,
&:active {
background: linear-gradient(90deg, rgba(59, 130, 246, 0.05), transparent);
color: #3b82f6;
padding-left: 36rpx;
&::before {
width: 6rpx;
}
&::after {
opacity: 1;
transform: translateX(0);
}
}
.domain-text {
font-size: 24rpx;
color: #2563eb;
font-weight: 500;
white-space: nowrap;
}
&:active {
background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), transparent);
}
&:active {
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
border-color: rgba(59, 130, 246, 0.4);
transform: scale(0.95);
}
}
......
pages/mine/login.vue
......@@ -3,36 +3,28 @@
<text class="logo"></text>
<text class="title">供应链审批系统</text>
<view class="form-box column rowCenter verCenter">
<view class="input-box row verCenter" style="position: relative;">
<view class="input-box row verCenter">
<text class="iconfont icon-riqi"></text>
<input
type="text"
class="uni-input"
placeholder="请输入登录账号"
v-model="name"
placeholder-style="color: #6E767A;"
placeholder-style="color: #6E767A;"
adjust-position
@input="onEmailInput"
@focus="onEmailFocus"
@blur="onEmailBlur"
/>
<!-- 邮箱自动补全下拉列表 -->
<view
v-if="showEmailSuggestions && emailSuggestions.length > 0"
class="email-suggestions"
v-if="showDomainTag"
class="domain-tag"
@click="applyDomain"
>
<view
v-for="(suggestion, index) in emailSuggestions"
:key="index"
class="suggestion-item"
@click="selectEmailSuggestion(suggestion)"
>
{{ suggestion }}
</view>
<text class="domain-text">@ichunt.com</text>
</view>
</view>
<view class="input-box row verCenter">
<text class="iconfont icon-a-riqi1"></text>
<input :password="!showPassword" class="uni-input" placeholder="请输入登录密码" v-model="passwd" placeholder-style="color: #6E767A;" />
<input :password="!showPassword" class="uni-input" placeholder="请输入登录密码" v-model="passwd" placeholder-style="color: #6E767A;" adjust-position />
<text class="iconfont password-toggle" :class="showPassword ? 'icon-yanjing' : 'icon-biyanjing'" @click="togglePassword"></text>
</view>
<button class="btn row rowCenter verCenter" :class="{ loading: isLoading, success: loginSuccess }" :disabled="isLoading" @click="submit()">
......@@ -64,10 +56,8 @@
showPassword: false,
isLoading: false,
loginSuccess: false,
currentYear: new Date().getFullYear(), // 动态获取当前年份
showEmailSuggestions: false,
emailSuggestions: [],
emailDomains: ['@ichunt.com'] // 可以添加更多域名
currentYear: new Date().getFullYear(),
showDomainTag: false
};
},
onLoad() {
......@@ -87,59 +77,24 @@
onShow() { },
methods: {
/**
* 邮箱输入处理
* 邮箱输入处理，控制域名标签的显示
* @param {Object} e - 输入事件对象
* @return {void}
*/
onEmailInput(e) {
var value = e.detail.value;
this.name = value;
// 检查是否包含@符号
if (value.includes('@')) {
this.showEmailSuggestions = false;
return;
}
// 如果输入了内容且不包含@，显示建议
if (value.trim()) {
this.emailSuggestions = this.emailDomains.map(domain => value + domain);
this.showEmailSuggestions = true;
} else {
this.showEmailSuggestions = false;
}
},
/**
* 邮箱输入框获得焦点
* @return {void}
*/
onEmailFocus() {
// 如果有输入内容且不包含@，显示建议
if (this.name.trim() && !this.name.includes('@')) {
this.emailSuggestions = this.emailDomains.map(domain => this.name + domain);
this.showEmailSuggestions = true;
}
},
/**
* 邮箱输入框失去焦点（延迟隐藏以允许点击选择）
* @return {void}
*/
onEmailBlur() {
setTimeout(() => {
this.showEmailSuggestions = false;
}, 200);
// 有内容且还没包含@时，显示域名快捷标签
this.showDomainTag = value.trim() && !value.includes('@');
},
/**
* 选择邮箱建议
* @param {string} suggestion - 选中的邮箱建议
* 点击域名标签，自动补全邮箱后缀
* @return {void}
*/
selectEmailSuggestion(suggestion) {
this.name = suggestion;
this.showEmailSuggestions = false;
applyDomain() {
this.name = `${this.name.trim()}@ichunt.com`;
this.showDomainTag = false;
},
/**
......
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 sign in to comment