更新记录

1.0.0（2026-08-21） 下载此版本

直播间

平台兼容性

uni-app(4.41)

c-live 直播间

一个功能完整的直播电商直播间（观众端），基于 uni-app 开发，支持 H5 / App / 小程序多端运行。

功能概览

1. 直播观看

• 全端视频播放：H5 端通过 hls.js 解析 m3u8 流，App / 小程序端原生播放
• 直播状态实时切换：
  • 预告（封面 + 开播倒计时 + 预约直播）
  • 直播中
  • 主播暂时离开
  • 直播已结束（展示观看人数、退出入口）

2. 实时互动

• 弹幕聊天：区分主播 / 观众身份、用户等级，支持新观众入场动画
• 点赞：飘爱心连点特效
• 弹幕字号三档调节（标准 / 中 / 大）
• 基于 WebSocket 的实时通信，断线自动重连

3. 直播带货

• 商品列表：搜索、分页加载
• 弹幕区实时展示「讲解中」商品卡片
• 支持普通商品与秒杀商品
• 积分抵扣自动计算到手价，点击跳转商品详情页

4. 互动营销活动

• 福袋：发送指定评论参与抽奖
• 红包：拆红包动画开奖
• 签到：倒计时后签到
• 集章：活动图文详情展示
• 中奖名单分页查看，支持积分 / 红包多种奖励类型

5. 运营与安全

• 分享与海报生成（长按保存）
• 举报系统：11 类举报原因 + 举报描述
• 观众管控：禁言、踢出房间

6. 体验细节

• H5 软键盘避让
• 页面卸载时统一清理定时器与资源

技术栈

• uni-app（Vue2）
• WebSocket 实时通信
• hls.js（H5 端 HLS 流解析）

目录结构

pages/live/
├── livepull.vue          # 直播间主页面（观众端）
├── livepull.nvue         # App 端版本
├── liveChat.nvue         # 聊天
├── live-pip.vue          # 画中画
└── components/
    ├── liveToolbar.vue   # 顶部主播信息栏
    ├── liveFooter.vue    # 底部工具栏
    ├── f-danmu.vue       # 弹幕
    ├── like-button.vue   # 点赞
    ├── goods-list.vue    # 商品列表
    ├── liveGoodsCard.vue # 商品卡片
    ├── shareMenu.vue     # 分享
    └── Rboy-liansong.vue # 连送特效

仅供参考，具体功能以实际代码为准。