146 lines
4.5 KiB
Markdown
146 lines
4.5 KiB
Markdown
|
# 轮播图对接完成总结
|
|||
|
|
|
|||
|
|
完成时间：2026-01-27
|
|||
|
|
|
|||
|
|
## 修改内容
|
|||
|
|
|
|||
|
|
### 1. 后台管理系统 - API路径修复
|
|||
|
|
|
|||
|
|
**文件**: `peidu/admin/src/views/content/banner.vue`
|
|||
|
|
|
|||
|
|
修复了API调用路径，添加了正确的 `/api` 前缀：
|
|||
|
|
|
|||
|
|
- ✅ 获取轮播图列表：`/banner/admin/list` → `/api/banner/admin/list`
|
|||
|
|
- ✅ 创建轮播图：`/banner` → `/api/banner`
|
|||
|
|
- ✅ 更新轮播图：`/banner/{id}` → `/api/banner/{id}`
|
|||
|
|
- ✅ 删除轮播图：`/banner/{id}` → `/api/banner/{id}`
|
|||
|
|
- ✅ 更新状态：`/banner/{id}/status` → `/api/banner/{id}/status`
|
|||
|
|
|
|||
|
|
**文件**: `peidu/admin/src/api/content.js`
|
|||
|
|
|
|||
|
|
同步更新了API定义文件中的轮播图接口路径。
|
|||
|
|
|
|||
|
|
### 2. 小程序前端 - 动态加载轮播图
|
|||
|
|
|
|||
|
|
**文件**: `peidu/uniapp/src/pages/index/components/UserHome.vue`
|
|||
|
|
|
|||
|
|
#### 修改点：
|
|||
|
|
|
|||
|
|
1. **添加轮播图API调用**
|
|||
|
|
- 在 `loadHomeData()` 方法中添加了 `api.bannerApi.getList()` 调用
|
|||
|
|
- 从后端动态加载轮播图数据，替换原来的静态数据
|
|||
|
|
|
|||
|
|
2. **数据映射**
|
|||
|
|
```javascript
|
|||
|
|
this.bannerList = banners.map(banner => ({
|
|||
|
|
id: banner.id,
|
|||
|
|
image: banner.imageUrl,
|
|||
|
|
title: banner.title,
|
|||
|
|
linkType: banner.linkType,
|
|||
|
|
linkUrl: banner.linkUrl
|
|||
|
|
}))
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
3. **添加点击事件处理**
|
|||
|
|
- 为轮播图添加了 `@click="handleBannerClick(banner)"` 事件
|
|||
|
|
- 实现了 `handleBannerClick()` 方法，支持：
|
|||
|
|
- 无链接（linkType: 'none'）
|
|||
|
|
- 内部页面跳转（linkType: 'page'）
|
|||
|
|
- 外部链接（linkType: 'url'，通过webview打开）
|
|||
|
|
|
|||
|
|
## 对接完成情况
|
|||
|
|
|
|||
|
|
### ✅ 后端API
|
|||
|
|
- GET `/api/banner/list` - 前端获取启用的轮播图
|
|||
|
|
- GET `/api/banner/admin/list` - 管理端获取所有轮播图
|
|||
|
|
- POST `/api/banner` - 创建轮播图
|
|||
|
|
- PUT `/api/banner/{id}` - 更新轮播图
|
|||
|
|
- DELETE `/api/banner/{id}` - 删除轮播图
|
|||
|
|
- PUT `/api/banner/{id}/status` - 更新轮播图状态
|
|||
|
|
|
|||
|
|
### ✅ 后台管理系统
|
|||
|
|
- 轮播图列表展示
|
|||
|
|
- 新增轮播图（支持图片上传和URL输入）
|
|||
|
|
- 编辑轮播图
|
|||
|
|
- 删除轮播图
|
|||
|
|
- 启用/禁用轮播图
|
|||
|
|
- 支持设置链接类型（无链接/内部页面/外部链接）
|
|||
|
|
|
|||
|
|
### ✅ 小程序前端
|
|||
|
|
- 首页动态加载轮播图
|
|||
|
|
- 自动轮播展示
|
|||
|
|
- 点击跳转功能
|
|||
|
|
- 降级处理（API失败时使用默认图片）
|
|||
|
|
|
|||
|
|
## 功能特性
|
|||
|
|
|
|||
|
|
### 后台管理功能
|
|||
|
|
1. **图片上传**：支持直接上传图片到服务器
|
|||
|
|
2. **URL输入**：支持直接输入图片URL
|
|||
|
|
3. **链接配置**：
|
|||
|
|
- 无链接：仅展示
|
|||
|
|
- 内部页面：跳转到小程序内部页面
|
|||
|
|
- 外部链接：通过webview打开外部网页
|
|||
|
|
4. **排序管理**：支持设置轮播图显示顺序
|
|||
|
|
5. **状态控制**：启用/禁用轮播图
|
|||
|
|
|
|||
|
|
### 小程序功能
|
|||
|
|
1. **动态加载**：从后端API获取轮播图数据
|
|||
|
|
2. **自动轮播**：3秒间隔自动切换
|
|||
|
|
3. **指示器**：显示当前轮播位置
|
|||
|
|
4. **点击跳转**：根据配置的链接类型进行跳转
|
|||
|
|
5. **容错处理**：API失败时使用默认图片
|
|||
|
|
|
|||
|
|
## 数据流程
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
后台管理系统
|
|||
|
|
↓ (管理员上传/配置轮播图)
|
|||
|
|
后端数据库 (banner表)
|
|||
|
|
↓ (API: /api/banner/list)
|
|||
|
|
小程序前端
|
|||
|
|
↓ (用户查看和点击)
|
|||
|
|
跳转到目标页面
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 测试建议
|
|||
|
|
|
|||
|
|
### 后台管理系统测试
|
|||
|
|
1. ✅ 创建轮播图（上传图片）
|
|||
|
|
2. ✅ 创建轮播图（输入URL）
|
|||
|
|
3. ✅ 编辑轮播图信息
|
|||
|
|
4. ✅ 启用/禁用轮播图
|
|||
|
|
5. ✅ 删除轮播图
|
|||
|
|
6. ✅ 设置不同的链接类型
|
|||
|
|
|
|||
|
|
### 小程序测试
|
|||
|
|
1. ✅ 首页轮播图正常显示
|
|||
|
|
2. ✅ 轮播图自动切换
|
|||
|
|
3. ✅ 点击无链接轮播图（无反应）
|
|||
|
|
4. ✅ 点击内部页面链接（正常跳转）
|
|||
|
|
5. ✅ 点击外部链接（webview打开）
|
|||
|
|
6. ✅ 后端API失败时显示默认图片
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. **图片尺寸建议**：建议使用 750x400 像素的图片，保证在不同设备上显示效果一致
|
|||
|
|
2. **图片大小限制**：后台上传限制为10MB
|
|||
|
|
3. **链接格式**：
|
|||
|
|
- 内部页面：使用相对路径，如 `/pages/service/list`
|
|||
|
|
- 外部链接：使用完整URL，如 `https://example.com`
|
|||
|
|
4. **状态控制**：只有启用状态的轮播图才会在小程序中显示
|
|||
|
|
5. **排序规则**：sortOrder值越小，显示顺序越靠前
|
|||
|
|
|
|||
|
|
## 后续优化建议
|
|||
|
|
|
|||
|
|
1. **时间控制**：添加轮播图的开始时间和结束时间，支持定时上下架
|
|||
|
|
2. **点击统计**：记录轮播图的点击次数，用于效果分析
|
|||
|
|
3. **多端适配**：支持为不同端（小程序/H5/APP）配置不同的轮播图
|
|||
|
|
4. **图片压缩**：自动压缩上传的图片，优化加载速度
|
|||
|
|
5. **预览功能**：在后台管理系统中添加轮播图预览功能
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
**对接状态**: ✅ 完成
|
|||
|
|
**测试状态**: ⏳ 待测试
|