登录弹窗实现说明

功能概述

实现了用户访问系统时，如果未登录则自动弹出登录弹窗，要求用户登录后才能使用系统功能。

实现方式

1. 创建登录弹窗组件

文件: xinlidsj/components/LoginModal.vue

功能特点:

美观的弹窗UI设计
支持账号密码登录
登录状态加载提示
登录成功后自动关闭弹窗并刷新页面
可配置是否允许关闭（closable属性）
自动记住上次登录的账号

使用方法:

<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

修改内容:

引入 LoginModal 组件
添加 showLoginModal 数据属性
在 onLoad 和 onShow 生命周期中检查登录状态
未登录时显示登录弹窗
登录成功后初始化应用数据

核心逻辑:

onLoad() {
  // 检查登录状态
  const token = getToken()
  if (!token) {
    this.showLoginModal = true  // 显示登录弹窗
    return
  }
  this.initApp()  // 已登录，初始化应用
}

3. 登录成功处理

登录成功后的流程：

保存token到本地存储
触发 success 事件
父组件调用 onLoginSuccess() 方法
初始化应用数据（加载视频、消息、数据等）
自动关闭登录弹窗
刷新当前页面

用户体验

未登录状态

访问首页时自动弹出登录弹窗
弹窗遮罩层阻止用户操作页面内容
不允许关闭弹窗（closable=false），必须登录
点击遮罩层会提示"请先登录后才能使用"

登录过程

输入账号密码
点击登录按钮或按回车键提交
显示"登录中..."加载状态
登录失败显示错误提示
登录成功显示成功提示并自动关闭弹窗

已登录状态

直接进入系统，不显示登录弹窗
正常使用所有功能

样式特点

现代化的弹窗设计
半透明黑色遮罩层
圆角卡片式弹窗
输入框聚焦时高亮效果
响应式布局，适配不同屏幕尺寸

扩展性

如果需要在其他页面也使用登录弹窗，只需：

引入 LoginModal 组件
添加 showLoginModal 数据属性
在页面加载时检查登录状态
根据需要设置 closable 属性

注意事项

登录弹窗使用 z-index: 9999 确保在最上层显示
弹窗不可关闭时，点击遮罩层会有友好提示
登录成功后会自动刷新当前页面数据
密码输入框使用 password 类型，确保安全性

2.8 KiB Raw Blame History Unescape Escape