107 lines
2.8 KiB
Markdown
107 lines
2.8 KiB
Markdown
|
# 登录弹窗实现说明
|
|||
|
|
|
|||
|
|
## 功能概述
|
|||
|
|
实现了用户访问系统时，如果未登录则自动弹出登录弹窗，要求用户登录后才能使用系统功能。
|
|||
|
|
|
|||
|
|
## 实现方式
|
|||
|
|
|
|||
|
|
### 1. 创建登录弹窗组件
|
|||
|
|
**文件**: `xinlidsj/components/LoginModal.vue`
|
|||
|
|
|
|||
|
|
**功能特点**:
|
|||
|
|
- 美观的弹窗UI设计
|
|||
|
|
- 支持账号密码登录
|
|||
|
|
- 登录状态加载提示
|
|||
|
|
- 登录成功后自动关闭弹窗并刷新页面
|
|||
|
|
- 可配置是否允许关闭（`closable`属性）
|
|||
|
|
- 自动记住上次登录的账号
|
|||
|
|
|
|||
|
|
**使用方法**:
|
|||
|
|
```vue
|
|||
|
|
<LoginModal
|
|||
|
|
:show="showLoginModal"
|
|||
|
|
:closable="false"
|
|||
|
|
@success="onLoginSuccess"
|
|||
|
|
@close="showLoginModal = false"
|
|||
|
|
/>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**Props**:
|
|||
|
|
- `show`: Boolean - 是否显示弹窗
|
|||
|
|
- `closable`: Boolean - 是否允许关闭弹窗（默认false，强制登录）
|
|||
|
|
|
|||
|
|
**Events**:
|
|||
|
|
- `success`: 登录成功时触发
|
|||
|
|
- `close`: 关闭弹窗时触发
|
|||
|
|
|
|||
|
|
### 2. 首页集成登录弹窗
|
|||
|
|
**文件**: `xinlidsj/pages/index/index.vue`
|
|||
|
|
|
|||
|
|
**修改内容**:
|
|||
|
|
1. 引入 `LoginModal` 组件
|
|||
|
|
2. 添加 `showLoginModal` 数据属性
|
|||
|
|
3. 在 `onLoad` 和 `onShow` 生命周期中检查登录状态
|
|||
|
|
4. 未登录时显示登录弹窗
|
|||
|
|
5. 登录成功后初始化应用数据
|
|||
|
|
|
|||
|
|
**核心逻辑**:
|
|||
|
|
```javascript
|
|||
|
|
onLoad() {
|
|||
|
|
// 检查登录状态
|
|||
|
|
const token = getToken()
|
|||
|
|
if (!token) {
|
|||
|
|
this.showLoginModal = true // 显示登录弹窗
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.initApp() // 已登录，初始化应用
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 登录成功处理
|
|||
|
|
登录成功后的流程：
|
|||
|
|
1. 保存token到本地存储
|
|||
|
|
2. 触发 `success` 事件
|
|||
|
|
3. 父组件调用 `onLoginSuccess()` 方法
|
|||
|
|
4. 初始化应用数据（加载视频、消息、数据等）
|
|||
|
|
5. 自动关闭登录弹窗
|
|||
|
|
6. 刷新当前页面
|
|||
|
|
|
|||
|
|
## 用户体验
|
|||
|
|
|
|||
|
|
### 未登录状态
|
|||
|
|
- 访问首页时自动弹出登录弹窗
|
|||
|
|
- 弹窗遮罩层阻止用户操作页面内容
|
|||
|
|
- 不允许关闭弹窗（`closable=false`），必须登录
|
|||
|
|
- 点击遮罩层会提示"请先登录后才能使用"
|
|||
|
|
|
|||
|
|
### 登录过程
|
|||
|
|
- 输入账号密码
|
|||
|
|
- 点击登录按钮或按回车键提交
|
|||
|
|
- 显示"登录中..."加载状态
|
|||
|
|
- 登录失败显示错误提示
|
|||
|
|
- 登录成功显示成功提示并自动关闭弹窗
|
|||
|
|
|
|||
|
|
### 已登录状态
|
|||
|
|
- 直接进入系统，不显示登录弹窗
|
|||
|
|
- 正常使用所有功能
|
|||
|
|
|
|||
|
|
## 样式特点
|
|||
|
|
- 现代化的弹窗设计
|
|||
|
|
- 半透明黑色遮罩层
|
|||
|
|
- 圆角卡片式弹窗
|
|||
|
|
- 输入框聚焦时高亮效果
|
|||
|
|
- 响应式布局，适配不同屏幕尺寸
|
|||
|
|
|
|||
|
|
## 扩展性
|
|||
|
|
如果需要在其他页面也使用登录弹窗，只需：
|
|||
|
|
1. 引入 `LoginModal` 组件
|
|||
|
|
2. 添加 `showLoginModal` 数据属性
|
|||
|
|
3. 在页面加载时检查登录状态
|
|||
|
|
4. 根据需要设置 `closable` 属性
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
1. 登录弹窗使用 `z-index: 9999` 确保在最上层显示
|
|||
|
|
2. 弹窗不可关闭时，点击遮罩层会有友好提示
|
|||
|
|
3. 登录成功后会自动刷新当前页面数据
|
|||
|
|
4. 密码输入框使用 `password` 类型，确保安全性
|