Commit e97b3ca7 by liangjianmin

feat(login): add email autocomplete suggestions to login form

- Add email suggestions dropdown component with styling for autocomplete functionality
- Implement email input handler to detect user input and generate domain suggestions
- Add focus/blur event handlers to show/hide suggestions dropdown with 200ms delay
- Create suggestion item selection handler to populate email field with selected suggestion
- Add email domains configuration array for extensible domain support
- Style suggestions dropdown with shadow, border, hover effects, and scrollable container
- Hide suggestions when user includes @ symbol in input to avoid duplicate domains
parent dab699a3
Showing with 119 additions and 3 deletions
......@@ -121,6 +121,40 @@ page {
}
}
// 邮箱建议下拉列表样式
.email-suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #ffffff;
border-radius: 12rpx;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
border: 2rpx solid #e2e8f0;
z-index: 1000;
max-height: 300rpx;
overflow-y: auto;
.suggestion-item {
padding: 20rpx 24rpx;
font-size: 30rpx;
color: #1e293b;
border-bottom: 1rpx solid #f1f5f9;
cursor: pointer;
transition: all 0.2s ease;
&:last-child {
border-bottom: none;
}
&:hover,
&:active {
background: #f8fafc;
color: #3b82f6;
}
}
}
.btn {
width: 100%;
height: 96rpx;
......
......@@ -3,9 +3,32 @@
<text class="logo"></text>
<text class="title">供应链审批系统</text>
<view class="form-box column rowCenter verCenter">
<view class="input-box row verCenter">
<view class="input-box row verCenter" style="position: relative;">
<text class="iconfont icon-riqi"></text>
<input type="text" class="uni-input" placeholder="请输入登录账号" v-model="name" placeholder-style="color: #6E767A;" />
<input
type="text"
class="uni-input"
placeholder="请输入登录账号"
v-model="name"
placeholder-style="color: #6E767A;"
@input="onEmailInput"
@focus="onEmailFocus"
@blur="onEmailBlur"
/>
<!-- 邮箱自动补全下拉列表 -->
<view
v-if="showEmailSuggestions && emailSuggestions.length > 0"
class="email-suggestions"
>
<view
v-for="(suggestion, index) in emailSuggestions"
:key="index"
class="suggestion-item"
@click="selectEmailSuggestion(suggestion)"
>
{{ suggestion }}
</view>
</view>
</view>
<view class="input-box row verCenter">
<text class="iconfont icon-a-riqi1"></text>
......@@ -32,7 +55,10 @@
passwd: '',
showPassword: false,
isLoading: false,
currentYear: new Date().getFullYear() // 动态获取当前年份
currentYear: new Date().getFullYear(), // 动态获取当前年份
showEmailSuggestions: false,
emailSuggestions: [],
emailDomains: ['@ichunt.com'] // 可以添加更多域名
};
},
onLoad() {
......@@ -52,6 +78,62 @@
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);
},
/**
* 选择邮箱建议
* @param {string} suggestion - 选中的邮箱建议
* @return {void}
*/
selectEmailSuggestion(suggestion) {
this.name = suggestion;
this.showEmailSuggestions = false;
},
/**
* 切换密码显示/隐藏
* @return {void}
*/
......
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