# 礼物打赏功能说明文档 ## 功能概述 在直播间页面添加了礼物打赏功能,用户可以在观看直播时给主播赠送各种礼物。 ## 功能特点 ### 1. 礼物按钮位置 - 礼物按钮位于直播间底部聊天输入框的右侧 - 在发送按钮的左边,方便用户快速访问 - 使用礼物图标(🎁),颜色为橙色(#FF9800),醒目易识别 ### 2. 礼物种类(8种) | 礼物名称 | 价格 | 等级 | 图标 | |---------|------|------|------| | 玫瑰 | 10金币 | ⭐ | 🌹 | | 爱心 | 20金币 | ⭐ | ❤️ | | 蛋糕 | 50金币 | ⭐⭐ | 🎂 | | 星星 | 100金币 | ⭐⭐ | ⭐ | | 钻石 | 200金币 | ⭐⭐⭐ | 💎 | | 皇冠 | 500金币 | ⭐⭐⭐⭐ | 👑 | | 跑车 | 1000金币 | ⭐⭐⭐⭐⭐ | 🚗 | | 火箭 | 2000金币 | ⭐⭐⭐⭐⭐ | 🚀 | ### 3. 礼物选择弹窗 #### 弹窗布局 - 底部弹出式设计(BottomSheetDialog) - 标题栏显示"选择礼物"、用户金币余额和充值按钮 - 礼物列表采用4列网格布局(GridLayoutManager) - 每个礼物显示图标、名称和价格 #### 交互功能 - **礼物选择**:点击礼物卡片进行选择,选中后显示蓝色边框 - **数量调整**:通过 +/- 按钮调整赠送数量(1-99) - **余额显示**:实时显示用户当前金币余额 - **充值按钮**:点击充值按钮打开充值对话框 - **选中信息**:底部显示选中礼物的图标、名称和价格 - **赠送按钮**:点击赠送按钮完成礼物赠送 ### 4. 充值功能 #### 充值入口 - 在礼物选择弹窗的标题栏右侧 - 显示为带边框的"充值"按钮,带有加号图标 - 颜色为橙色(#FF9800),与金币主题一致 #### 充值对话框 - 居中弹出式设计(MaterialAlertDialog) - 显示当前金币余额 - 提供6种充值选项(2列网格布局): - 100金币 - ¥10(首充优惠) - 300金币 - ¥30 - 500金币 - ¥50(热门) - 1000金币 - ¥100 - 3000金币 - ¥300(最划算) - 5000金币 - ¥500 #### 充值流程 1. 用户点击充值按钮 2. 显示充值对话框 3. 用户选择充值金额(选中后显示橙色边框) 4. 点击"确认充值"按钮 5. 调用支付接口(待集成支付SDK) 6. 支付成功后更新金币余额 7. 显示充值成功提示 8. 关闭充值对话框 ### 5. 赠送流程 1. 用户点击礼物按钮 2. 检查登录状态(未登录则提示登录) 3. 显示礼物选择弹窗 4. 用户选择礼物和数量 5. 点击赠送按钮 6. 检查金币余额是否足够 7. 赠送成功后: - 扣除相应金币 - 更新余额显示 - 在聊天区显示赠送消息 - 显示成功提示 - 关闭弹窗 ### 5. 聊天区显示 赠送礼物后,在聊天区会显示类似以下的消息: ``` 我 送出了 1 个 玫瑰 我 送出了 5 个 钻石 ``` 礼物消息使用特殊标识(isGiftMessage),可以在后续添加特殊样式或动画效果。 ## 文件结构 ### 新增文件 #### Java类 - `Gift.java` - 礼物数据模型 - `GiftAdapter.java` - 礼物列表适配器 - `RechargeOption.java` - 充值选项数据模型 - `RechargeAdapter.java` - 充值选项适配器 #### 布局文件 - `bottom_sheet_gift.xml` - 礼物选择弹窗布局 - `item_gift.xml` - 礼物列表项布局 - `dialog_recharge.xml` - 充值对话框布局 - `item_recharge_option.xml` - 充值选项列表项布局 #### 图标资源 - `ic_gift_24.xml` - 礼物按钮图标 - `ic_coin_24.xml` - 金币图标 - `ic_add_24.xml` - 增加数量图标 - `ic_remove_24.xml` - 减少数量图标 - `ic_add_circle_24.xml` - 充值按钮图标 - `ic_gift_rose.xml` - 玫瑰礼物图标 - `ic_gift_heart.xml` - 爱心礼物图标 - `ic_gift_cake.xml` - 蛋糕礼物图标 - `ic_gift_star.xml` - 星星礼物图标 - `ic_gift_diamond.xml` - 钻石礼物图标 - `ic_gift_crown.xml` - 皇冠礼物图标 - `ic_gift_car.xml` - 跑车礼物图标 - `ic_gift_rocket.xml` - 火箭礼物图标 #### 背景资源 - `bg_gift_selected.xml` - 礼物选中状态背景 - `bg_recharge_selected.xml` - 充值选项选中状态背景 - `bg_discount_label.xml` - 优惠标签背景 ### 修改文件 - `RoomDetailActivity.java` - 添加礼物功能逻辑 - `activity_room_detail_new.xml` - 添加礼物按钮 - `ChatMessage.java` - 添加礼物消息标识 ## 后端接口对接 ### 1. 获取礼物列表 ``` GET /api/gifts ``` **返回数据格式:** ```json { "code": 200, "message": "success", "data": [ { "id": "1", "name": "玫瑰", "price": 10, "iconUrl": "https://example.com/gifts/rose.png", "description": "浪漫的玫瑰", "level": 1 } ] } ``` ### 2. 获取用户金币余额 ``` GET /api/user/balance ``` **返回数据格式:** ```json { "code": 200, "message": "success", "data": { "coinBalance": 1000 } } ``` ### 3. 赠送礼物 ``` POST /api/gifts/send ``` **请求参数:** ```json { "roomId": "room123", "streamerId": "user456", "giftId": "1", "count": 5 } ``` **返回数据格式:** ```json { "code": 200, "message": "赠送成功", "data": { "success": true, "newBalance": 950, "message": "赠送成功!" } } ``` ### 4. 获取充值选项列表 ``` GET /api/recharge/options ``` **返回数据格式:** ```json { "code": 200, "message": "success", "data": [ { "id": "1", "coinAmount": 100, "price": 10.0, "discountLabel": "首充优惠" }, { "id": "2", "coinAmount": 300, "price": 30.0, "discountLabel": null } ] } ``` ### 5. 创建充值订单 ``` POST /api/recharge/create ``` **请求参数:** ```json { "optionId": "1", "coinAmount": 100, "price": 10.0 } ``` **返回数据格式:** ```json { "code": 200, "message": "订单创建成功", "data": { "orderId": "order123456", "paymentUrl": "https://pay.example.com/order123456", "qrCode": "https://example.com/qr/order123456.png" } } ``` ### 6. 查询充值订单状态 ``` GET /api/recharge/status/{orderId} ``` **返回数据格式:** ```json { "code": 200, "message": "success", "data": { "orderId": "order123456", "status": "paid", "coinAmount": 100, "newBalance": 1100 } } ``` ## 使用说明 ### 测试步骤 1. 运行应用并进入任意直播间 2. 点击底部聊天输入框右侧的礼物图标(🎁) 3. 在弹出的礼物选择窗口中: - 查看顶部显示的金币余额(默认1000金币) - 点击"充值"按钮测试充值功能 - 在充值对话框中选择充值金额 - 点击"确认充值"按钮(模拟充值成功) - 查看余额是否增加 4. 选择礼物进行赠送: - 点击任意礼物进行选择 - 使用 +/- 按钮调整赠送数量 - 点击"赠送"按钮完成赠送 5. 观察聊天区显示的赠送消息 6. 再次打开礼物窗口,查看余额是否已扣除 ### 注意事项 1. **登录检查**:赠送礼物需要登录,未登录用户会看到登录提示 2. **余额检查**:金币不足时会提示"金币余额不足,请充值" 3. **数量限制**:单次赠送数量限制为1-99个 4. **礼物选择**:必须选择礼物才能赠送,否则会提示"请选择礼物" 5. **充值选择**:必须选择充值金额才能充值,否则会提示"请选择充值金额" 6. **支付集成**:当前为模拟充值,实际使用需要集成支付SDK ## 后续优化建议 ### 1. 礼物动画 - 添加礼物赠送的动画效果(如礼物飞入屏幕) - 使用Lottie动画库实现更炫酷的效果 - 不同等级的礼物使用不同的动画效果 ### 2. 礼物特效 - 高价值礼物(如火箭、跑车)添加全屏特效 - 连续赠送相同礼物时显示连击效果 - 添加音效和震动反馈 ### 3. 礼物排行榜 - 显示直播间礼物贡献榜 - 显示主播收到的礼物总价值 - 显示用户赠送礼物的历史记录 ### 4. 礼物墙 - 在直播间右侧显示最近的礼物赠送记录 - 滚动显示礼物消息 - 点击可查看赠送者信息 ### 5. 充值功能 - 添加金币充值入口 - 集成支付SDK(微信支付、支付宝等) - 显示充值优惠活动 ### 6. 礼物分类 - 按价格分类(普通、高级、豪华) - 按主题分类(浪漫、节日、特殊) - 添加限时礼物和活动礼物 ### 7. 社交功能 - 赠送礼物时可以添加留言 - 支持@主播或其他用户 - 礼物赠送记录可分享到社交平台 ## 技术实现细节 ### 1. 数据模型 ```java public class Gift { private String id; // 礼物ID private String name; // 礼物名称 private int price; // 价格(金币) private int iconResId; // 本地图标资源ID private String iconUrl; // 服务器图标URL private String description; // 礼物描述 private int level; // 礼物等级(1-5星) } ``` ### 2. 适配器实现 - 使用RecyclerView + GridLayoutManager实现网格布局 - 支持礼物选中状态切换 - 使用接口回调通知选中事件 ### 3. 弹窗管理 - 使用BottomSheetDialog实现底部弹窗 - 在Activity销毁时自动释放弹窗资源 - 支持点击外部区域关闭弹窗 ### 4. 状态管理 - 使用局部变量管理礼物数量 - 实时更新金币余额显示 - 礼物选择状态通过Adapter管理 ## 常见问题 ### Q1: 礼物图标不显示? **A:** 检查drawable资源文件是否正确创建,确保文件名和引用一致。 ### Q2: 点击礼物按钮没有反应? **A:** 检查是否已登录,未登录用户会看到登录提示。 ### Q3: 赠送后金币没有扣除? **A:** 当前使用模拟数据,金币余额存储在内存中,重启应用会重置。对接后端接口后会从服务器获取真实余额。 ### Q4: 如何添加新的礼物? **A:** 1. 在drawable目录创建新的礼物图标XML文件 2. 在`setupGifts()`方法中添加新的Gift对象 3. 指定礼物名称、价格、图标资源ID和等级 ### Q5: 如何修改礼物价格? **A:** 在`setupGifts()`方法中修改对应Gift对象的price参数。 ## 更新日志 ### v1.0.0 (2024-12-24) - ✅ 实现礼物选择弹窗 - ✅ 添加8种不同价格的礼物 - ✅ 实现礼物数量调整功能 - ✅ 实现金币余额检查 - ✅ 在聊天区显示赠送消息 - ✅ 添加登录状态检查 - ✅ 创建礼物相关图标资源 ## 联系方式 如有问题或建议,请联系开发团队。 --- **文档版本**: v1.0.0 **最后更新**: 2024年12月24日