# 听书轮播图功能实现说明

## 📋 功能概述

已实现小程序前端听书页面的轮播图功能，轮播图数据从数据库获取，可在后台管理系统中进行自定义设置。

## ✅ 已实现功能

### 1. 数据库支持
- ✅ 创建了 `audio_banner` 轮播图分组
- ✅ 添加了3条示例轮播图数据
- ✅ 支持 `targetType` 和 `targetId` 字段，可跳转到听书详情页

### 2. 后端接口
- ✅ 已有 `/api/banner/list?code=audio_banner` 接口
- ✅ 接口返回指定分组下所有启用的轮播图
- ✅ 支持按 `sort` 字段排序

### 3. 小程序前端
- ✅ 听书页面 (`books/pages/listen/listen.vue`) 已改为从数据库获取轮播图
- ✅ 使用 `getBannersByCode('audio_banner')` 获取轮播图数据
- ✅ 实现了点击跳转逻辑：
  - `targetType='audiobook'` 时跳转到听书详情页
  - `targetType='book'` 时跳转到书籍详情页
  - `targetType='url'` 时跳转到外部链接（H5支持）
- ✅ 添加了图片加载失败处理

### 4. 后台管理系统
- ✅ 后台管理系统已支持管理听书轮播图分组
- ✅ 在"轮播图管理"页面，点击"听书"标签可筛选 `audio_*` 前缀的分组
- ✅ 可以创建、编辑、删除轮播图
- ✅ 可以设置轮播图的跳转类型和目标ID

## 🚀 使用步骤

### 1. 执行数据库SQL

执行 `book/src/main/resources/db/banners_schema.sql` 文件，创建轮播图分组和示例数据：

```sql
-- 创建听书轮播分组
INSERT IGNORE INTO banner_groups (id, name, code, status, sort, created_at, updated_at) 
VALUES (2, '听书轮播', 'audio_banner', 1, 1, NOW(), NOW());
```

### 2. 后台管理系统配置

1. 登录后台管理系统：`http://localhost:8002/pages/login.html`
2. 进入"轮播图管理"页面
3. 点击"听书"标签，筛选听书相关的轮播图分组
4. 选择"听书轮播 (audio_banner)" 分组
5. 添加、编辑或删除轮播图：
   - **标题**：轮播图标题
   - **图片URL**：轮播图图片地址
   - **跳转类型**：选择 `audiobook`（有声书）
   - **目标ID**：输入听书的ID（从听书管理页面获取）
   - **排序**：数字越小越靠前
   - **状态**：启用/停用

### 3. 小程序测试

1. 启动后端服务（端口8001）
2. 启动小程序
3. 进入听书页面，查看轮播图是否正常显示
4. 点击轮播图，测试跳转功能

## 📝 数据结构

### 轮播图分组表 (banner_groups)
```sql
- id: 主键ID
- name: 分组名称（如：听书轮播）
- code: 分组编码（如：audio_banner）
- status: 状态（1-启用，0-停用）
- sort: 排序值
```

### 轮播图表 (banners)
```sql
- id: 主键ID
- group_id: 分组ID
- title: 标题
- image: 图片URL
- link: 外链URL（可选）
- target_type: 跳转类型（book/audiobook/url）
- target_id: 目标ID（书籍ID或听书ID）
- sort: 排序值
- status: 状态（1-启用，0-停用）
```

## 🔧 配置说明

### 分组编码规范
- 首页轮播：`home_banner`
- 听书轮播：`audio_banner`（必须以 `audio_` 开头，以便后台管理系统筛选）
- 电子书轮播：建议使用 `ebook_*` 前缀

### 跳转类型说明
- `audiobook`：跳转到听书详情页，需要设置 `targetId` 为听书ID
- `book`：跳转到书籍详情页，需要设置 `targetId` 为书籍ID
- `url`：跳转到外部链接，需要设置 `link` 字段

## 🐛 常见问题

### 1. 轮播图不显示
- 检查后端服务是否启动
- 检查数据库中是否有 `audio_banner` 分组
- 检查分组状态是否为"启用"
- 检查轮播图状态是否为"启用"
- 查看小程序控制台是否有错误信息

### 2. 点击轮播图无反应
- 检查 `targetType` 和 `targetId` 是否设置正确
- 检查听书ID是否存在
- 查看小程序控制台是否有错误信息

### 3. 后台管理系统无法看到听书轮播分组
- 检查数据库中是否有 `audio_banner` 分组
- 检查分组编码是否以 `audio_` 开头
- 点击"听书"标签进行筛选
- 刷新页面

## 📌 注意事项

1. **分组编码**：听书轮播分组编码必须为 `audio_banner`，小程序前端使用此编码获取数据
2. **排序**：轮播图按 `sort` 字段升序排序，数字越小越靠前
3. **状态**：只有状态为"启用"的轮播图才会显示
4. **图片URL**：建议使用完整的图片URL，支持网络图片和本地图片
5. **目标ID**：设置 `targetType='audiobook'` 时，必须设置 `targetId` 为有效的听书ID

## 🎯 后续扩展

1. **轮播图详情**：可以在轮播图中添加更多信息，如主播、描述等
2. **轮播图样式**：可以自定义轮播图的显示样式
3. **轮播图动画**：可以添加轮播图的切换动画效果
4. **轮播图统计**：可以添加轮播图的点击统计功能

## 📞 技术支持

如有问题，请检查：
1. 后端服务日志
2. 小程序控制台错误信息
3. 数据库中的数据是否正确
4. 网络请求是否正常