报告厅模块优化oss
This commit is contained in:
zlwu committed
1 parent
4a2761cb0d
commit
bc70052bf8
4 files changed
+189
-37
No files matched your search
@@ -0,0 +1,134 @@
|
||||
# 报告厅预约页面异步图片加载功能实现
|
||||
|
||||
## 变更概述
|
||||
- **变更时间**: 2025-01-27
|
||||
- **变更类型**: 功能优化
|
||||
- **变更范围**: 报告厅预约管理页面
|
||||
- **变更文件**: `web/src/views/hq/bgtgl/hallReservation/index.vue`
|
||||
|
||||
## 问题修复 (2025-01-27 更新)
|
||||
- **修复时间**: 2025-01-27
|
||||
- **修复问题**: 异步图片加载状态显示问题
|
||||
- **问题描述**:
|
||||
1. 图片加载过程中显示"暂无图片"而不是加载状态
|
||||
2. 图片加载完成后loading效果没有正确移除
|
||||
3. 用户体验不佳，状态反馈不准确
|
||||
|
||||
## 变更内容
|
||||
|
||||
### 1. 异步图片加载功能实现
|
||||
参考 `ImageUpload` 组件的实现，为报告厅预约页面添加了异步blob URL加载模式：
|
||||
|
||||
#### 新增功能
|
||||
- **异步图片加载**: 使用blob URL方式加载图片，支持认证请求
|
||||
- **图片缓存机制**: 避免重复加载相同图片
|
||||
- **内存管理**: 组件卸载时自动清理blob URL，防止内存泄漏
|
||||
- **加载状态显示**: 图片加载过程中显示加载动画
|
||||
- **错误处理**: 完善的图片加载错误处理机制
|
||||
|
||||
### 2. 加载状态优化 (2025-01-27 修复)
|
||||
#### 修复内容
|
||||
- **加载状态管理**: 为每个报告厅添加独立的加载状态标记
|
||||
- **状态显示优化**:
|
||||
- 加载中：显示对应数量的旋转loading图标占位符
|
||||
- 有图片：使用ImagePreview组件显示实际图片
|
||||
- 无图片：显示"暂无图片"提示
|
||||
- **异步处理改进**: 使用Promise.then()替代await，避免阻塞UI
|
||||
- **用户体验提升**: 准确的状态反馈，避免状态混乱
|
||||
- **组件复用**: 集成ImagePreview组件，提供更好的图片预览功能
|
||||
|
||||
#### 核心改进
|
||||
```typescript
|
||||
// 加载状态管理
|
||||
(hall as any).imageLoading = true; // 设置加载状态
|
||||
(hall as any).imageUrls = []; // 清空图片列表
|
||||
|
||||
// 新增：占位符管理
|
||||
const imageCount = getImageCount(hall.hallImage);
|
||||
(hall as any).imagePlaceholders = Array(imageCount).fill(null).map((_, index) => `placeholder_${index}`);
|
||||
|
||||
// 异步加载完成后更新状态
|
||||
getHallImagesAsync(hall.hallImage).then(imageUrls => {
|
||||
(hall as any).imageUrls = imageUrls;
|
||||
(hall as any).imageLoading = false; // 清除加载状态
|
||||
});
|
||||
```
|
||||
|
||||
#### 核心函数
|
||||
```typescript
|
||||
// 通过认证请求获取图片数据并转换为blob URL
|
||||
const getImageBlobUrl = async (imageUrl: string): Promise<string>
|
||||
|
||||
// 通过ossid获取图片URL
|
||||
const getImageUrlByOssId = async (ossId: string): Promise<string>
|
||||
|
||||
// 处理报告厅图片 - 异步blob URL加载模式
|
||||
const getHallImagesAsync = async (imageUrl: string): Promise<string[]>
|
||||
|
||||
// 获取图片数量
|
||||
const getImageCount = (imageUrl: string): number
|
||||
|
||||
// 获取报告厅图片占位符数组
|
||||
const getHallImagePlaceholders = (hall: HallInfoVO): string[]
|
||||
```
|
||||
|
||||
### 3. 模板优化
|
||||
- **下拉框图片显示**: 报告厅选择下拉框中显示异步加载的图片
|
||||
- **加载状态指示**: 图片加载时显示对应数量的旋转加载图标占位符
|
||||
- **错误处理**: 图片加载失败时的友好提示
|
||||
- **状态管理**: 三种状态的准确显示（加载中、有图片、无图片）
|
||||
- **组件集成**: 使用ImagePreview组件提供更好的图片预览功能
|
||||
|
||||
### 4. 样式优化
|
||||
- **加载动画**: 添加了CSS旋转动画效果
|
||||
- **图片容器**: 优化了图片容器的布局和样式
|
||||
- **响应式设计**: 保持原有的响应式布局特性
|
||||
- **加载占位符**: 新增加载状态的占位符样式
|
||||
- **组件样式**: 为ImagePreview组件在下拉框中的显示优化样式
|
||||
|
||||
## 技术实现细节
|
||||
|
||||
### 1. 图片加载流程
|
||||
1. 设置初始加载状态 (imageLoading = true)
|
||||
2. 解析图片数量，创建对应数量的占位符 (imagePlaceholders)
|
||||
3. 检查图片URL缓存
|
||||
4. 通过request工具发起认证请求
|
||||
5. 验证响应数据格式
|
||||
6. 创建blob URL并缓存
|
||||
7. 更新图片列表并清除加载状态 (imageLoading = false)
|
||||
8. 更新UI显示（占位符替换为实际图片）
|
||||
|
||||
### 2. 内存管理
|
||||
- 使用Map结构缓存blob URL
|
||||
- 组件卸载时自动清理所有blob URL
|
||||
- 避免内存泄漏问题
|
||||
|
||||
### 3. 错误处理
|
||||
- 网络请求超时处理
|
||||
- 图片格式验证
|
||||
- 加载失败降级处理
|
||||
- 加载状态重置处理
|
||||
|
||||
## 变更影响
|
||||
- **性能提升**: 异步加载减少页面阻塞
|
||||
- **用户体验**: 更好的加载状态反馈，准确的状态显示
|
||||
- **安全性**: 支持认证的图片请求
|
||||
- **兼容性**: 保持与现有功能的兼容
|
||||
- **状态管理**: 完善的加载状态管理机制
|
||||
|
||||
## 测试建议
|
||||
1. 测试不同网络环境下的图片加载
|
||||
2. 验证图片缓存机制是否正常工作
|
||||
3. 检查内存泄漏问题
|
||||
4. 测试图片加载失败的处理
|
||||
5. **验证加载状态显示**: 确保加载中、有图片、无图片三种状态正确显示
|
||||
6. **测试异步加载**: 验证图片异步加载过程中状态切换是否正常
|
||||
|
||||
## 相关文件
|
||||
- `web/src/components/ImageUpload/index.vue` - 参考实现
|
||||
- `web/src/components/ImagePreview/index.vue` - 图片预览组件
|
||||
- `web/src/api/system/oss/index.ts` - OSS API接口
|
||||
- `web/src/utils/request.ts` - 请求工具
|
||||
|
||||
## 备注
|
||||
本次变更参考了ImageUpload组件的成熟实现，确保了代码质量和功能稳定性。
|
||||
Reference in new issue
Block a user