看广告赚钱H5源码｜多广告联盟SDK接入(穿山甲/腾讯/AdGo/百...

zhang*** · 昨天 10:33

看广告赚钱H5源码｜多广告联盟SDK接入(穿山甲/腾讯/AdGo/百度/抖音/快手) 聚合激励视频+自动轮询降级+兜底视频上传｜二级分销团队奖+每日签到答题积分商城完整系统源码可二开部署

复制代码

# ? V5看广告赚钱H5平台 — 项目功能详解
## ?️ 项目定位
这是一个 **"看广告赚奖励"** 类型的H5移动端平台，采用前后端分离架构，包含用户端（H5网页/APP）、管理后台（PC端）、API服务端三大模块。核心商业模式为：**用户通过看激励视频广告、答题闯关、每日签到等方式赚取金币和现金，金币可在商城兑换实物商品，现金可提现到支付宝。**
---
## 一、用户端功能（`frontend/`）— 共10个页面
### 1️⃣ 首页 (`Home.vue`)
- 全屏展示启动页/引导图
- 作为应用入口页面
### 2️⃣ 短视频刷视频 (`Video.vue`) — 核心功能 ⭐
```
功能要点：
├── 仿抖音全屏竖屏滑动浏览（上滑下一个/下滑上一个）
├── 视频自动播放/暂停切换
├── 侧边栏：点赞 + 分享（复制邀请链接）
├── 视频看完后弹出"观看完成"弹窗 → 引导点击"观看广告领奖励"
├── 点击观看广告后：
│ ├── 调用 adService.showRewardedAd() 多联盟路由
│ ├── 真实SDK广告：穿山甲/腾讯/AdGo 轮询加载
│ ├── 兜底模式：播放管理员上传的MP4视频（全屏沉浸式+倒计时关闭）
│ └── 最终降级：10秒倒计时模拟
├── 广告看完发放奖励：
│ ├── 默认 +15 金币
│ └── 默认 +¥0.15 现金
└── 兜底视频播放器特性：
├── 黑色全屏背景
├── 右上角关闭按钮（前5秒不可关闭）
├── 底部进度条（渐变橙色）
├── 底部信息条："广告 | 更多精彩内容"
└── 视频结束自动关闭并发放奖励
```
### 3️⃣ 答题闯关 (`Answer.vue`)
```
功能要点：
├── 从后端动态加载题库（默认20道题）
├── 每题4个选项（A/B/C/D），单选
├── 选择后立即显示对错（绿色正确/红色错误）
│ ├── ✅ 正确 → 弹出"观看广告领奖励"按钮
│ │ └── 看完广告 → 获得 +10金币 + ¥0.1现金
│ └── ❌ 错误 → "再试一次"按钮（可重答本题）
├── 实时计分显示
├── 答完20题后循环重新开始
└── 同样走 adService 多联盟广告路由
```
### 4️⃣ 任务中心 (`Task.vue`) — 赚钱主入口 ⭐
```
功能要点：
├── 顶部资产卡片：实时显示金币余额 + 现金余额 + [提现]按钮
│
├── ? 每日签到模块：
│ ├── 一键签到按钮（未签到状态）/ "今日已签到"（已完成）
│ ├── 7天连续签到奖励进度条（圆形徽章样式）
│ ├── 奖励梯度（后台可配置）：
│ │ Day1:10金 → Day2:20金 → Day3:30金 → Day4:50金
│ │ Day5:10金 → Day6:10金 → Day7:100金（大额）
│ └── 自动计算连续签到天数
│
├── ✅ 观看激励视频任务：
│ ├── 说明文字："每天最多可做 10 次"
│ ├── 显示奖励预览：+20金币 + ¥0.20
│ ├── 点击"立即参与" → 走完整广告流程
│ └── 同样支持多联盟+兜底视频+最终降级
│
└── ? 邀请好友任务：
├── 说明："邀请好友注册并完成任务"
├── 奖励预览：+50金币 + ¥0.50
└── 点击跳转到邀请页面
```
### 5️⃣ 金币商城 (`Mall.vue`)
```
功能要点：
├── 双列网格商品列表（卡片式布局）
├── 每个商品卡片：
│ ├── 商品图片（无图时显示默认占位图）
│ ├── 商品名称 + 描述（最多2行截断）
│ ├── 价格（X金币） + [立即兑换]按钮
│ └── 余额不足时按钮置灰不可点
├── 点击商品 → 弹出详情弹窗：
│ ├── 大图展示
│ ├── 详细描述
│ ├── 数量选择器（+/- 按钮）
│ ├── 总价自动计算（单价 × 数量）
│ └── [确认兑换]按钮 → 创建订单扣减金币
├── 兑换成功提示
└── 金币不足时的友好提示
```
### 6️⃣ 个人中心 (`Profile.vue`) — 功能最丰富的页面 ⭐
```
┌─────────────────────────────────────────────┐
│ 【用户信息卡】 │
│ 头像(可上传) | 昵称 | ID | 等级(普通用户/工作室) │
│ │
│ 【资产卡片】 │
│ XXX 金币 | ¥XX.XX 现金 | [提现] │
│ │
│ 【功能入口菜单】 │
│ ? 每日任务 → 跳转 Task 页面 │
│ ? 我的团队 → 弹窗查看团队数据 │
│ ? 邀请好友 → 弹窗(邀请码/链接/二维码) │
│ ? 我的订单 → 弹窗订单列表 │
│ ? 收货地址 → 弹窗地址CRUD管理 │
│ ❓ 玩法介绍 → 跳转 Help 页面 │
│ ? 用户协议 → 跳转 Agreement 页面 │
│ ? 退出登录 → 清除Token跳转登录页 │
└─────────────────────────────────────────────┘
子功能详情：
【提现系统】
├── 可选金额：¥3 / ¥5 / ¥10（后台可配置）
├── 校验余额是否足够
├── 提交提现申请（等待审核）
└── 提现成功后余额自动扣减
【团队系统】弹窗
├── 统计面板：团队总人数 / 总金币 / 总现金
├── 一级团队成员列表（头像+昵称+金币+现金+注册时间）
├── 二级团队成员列表
└── 数据实时从后端拉取
【邀请好友】弹窗
├── 邀请码（一键复制）
├── 邀请链接（一键复制）
├── 邀请二维码（QRCode库动态生成200×200）
└── 奖励说明：
├── 一级好友完成任务：+50金币 + ¥0.50
└── 二级好友完成任务：+25金币 + ¥0.25
【收货地址管理】
├── 地址列表（默认地址左侧橙色高亮标识）
├── 添加新地址（姓名/手机/省市县/详细地址/设为默认）
├── 编辑现有地址
├── 删除地址（二次确认弹窗）
└── 设置默认地址
【订单管理】
├── 订单列表（订单号+状态标签+商品名+数量+总价+时间）
├── 状态颜色区分：
│ pending=黄色"待处理" / shipped=蓝色"已发货"
│ completed=绿色"已完成" / cancelled=红色"已取消"
└── 点击查看订单详情弹窗
【编辑资料】
├── 头像上传（本地预览+Base64存储）
├── 昵称修改
├── 手机号绑定
└── 支付宝账号绑定（用于提现）
```
### 7️⃣ 登录注册
- `Login.vue` — 手机号/账号密码登录
- `Register.vue` — 新用户注册（支持邀请码绑定上下级关系）
### 8️⃣ 辅助页面
| 页面 | 文件 | 功能 |
|------|------|------|
| 帮助中心 | `Help.vue` | 平台玩法说明/常见问题FAQ |
| 用户协议 | `Agreement.vue` | 法律协议条款展示 |
---
## 二、多联盟激励广告系统 (`adService.js`) — 核心技术亮点 ⭐
```
showRewardedAd() 被调用
│
┌───────▼───────┐
│ 第1优先级 │ ←── 穿山甲 Pangle
│ (window.pangle)│ 官方H5 Web SDK
│ PC/手机都OK │ AppID + PlacementID
└───────┬───────┘
失败 ↓
┌───────▼───────┐
│ 第2优先级 │ ←── 腾讯优量汇
│ (TencentGDT) │ Android浏览器OK
│ 需HTTPS+iOS限制│ AppID + PlacementID
└───────┬───────┘
失败 ↓
┌───────▼───────┐
│ 第3优先级 │ ←── AdGo 第三方聚合
│ (loadRewardedAd)│ 一次接入多平台
│ 自动Bidding竞价│ 只需 adUnitId
└───────┬───────┘
失败 ↓
┌────────────▼────────────┐
│ 百度/抖音/快手 │ ← 无H5 SDK，跳过
│ (仅原生APP或小游戏可用) │
└────────────┬────────────┘
失败 ↓
┌───────▼───────┐
│ 兜底视频 │ ←── 管理员上传的MP4
│ 全屏播放器 │ 5秒内不可关闭
│ 进度条+倒计时 │ 黑底+橙色调
└───────┬───────┘
无视频 ↓
┌───────▼───────┐
│ 最终降级 │ ←── 10秒倒计时
│ 模拟等待 │ 保底兜底
│ 直接发奖励 │
└───────────────┘
```
---
## 三、分销/佣金系统（`新机制.md`）
```
用户等级体系：
┌──────────────┐ 升级 ┌──────────────┐
│ 普通用户 │ ──────────→ │ 工作室用户 │
│ (normal) │ │ (studio) │
└──────────────┘ └──────────────┘
│
可享受额外团队奖
═══════════════════════════════════════════
所有用户都享有的奖励（二级分销）：
═══════════════════════════════════════════
直推奖 = 任务金币 × 10%（一级下线完成任务的佣金）
间推奖 = 任务金币 × 5% （二级下线完成任务的佣金）
═══════════════════════════════════════════
仅工作室用户享有的额外奖励（团队奖）：
═══════════════════════════════════════════
团队奖基础 = 任务金币 × 8%
【同级断裂机制】举例：
A(studio) → B(studio) → C(normal) → D(normal) → E(normal)
E完成100金币任务时：
┌────────┬────────────┬──────────┬──────────────────┐
│ 用户 │ 身份 │ 奖励类型 │ 金额 │
├────────┼────────────┼──────────┼──────────────────┤
│ E │ 普通用户 │ 任务奖励 │ +100.00 金币 │
│ D │ 普通用户 │ 直推奖 │ +10.00 (100×10%) │
│ C │ 普通用户 │ 间推奖 │ +5.00 (100×5%) │
│ B │ 工作室用户 │ 团队奖 │ +8.00 (100×8%) │ ★首个工作室
│ A │ 工作室用户 │ 级差奖 │ +0.24 (8×3%) │ ★断裂后的级差
└────────┴────────────┴──────────┴──────────────────┘
总计发放：123.24 金币
```
---
## 四、管理后台功能（`admin/`）— 共15个管理页面
| 一级菜单 | 二级菜单 | 文件 | 功能描述 |
|----------|---------|------|---------|
| **? 用户管理** | 用户列表 | `UserList.vue` | 用户列表/搜索/等级标签/团队树弹窗/注册时间格式化 |
| **? 内容管理** | 答题管理 | `QuestionManage.vue` | 题库CRUD（题目/选项/答案） |
| | 短视频管理 | `VideoManage.vue` | 视频库管理（上传/标题/排序） |
| | 商城管理 | `ProductManage.vue` | 商品CRUD（图片/名称/价格/描述） |
| | 订单管理 | `OrderManage.vue` | 订单列表/状态筛选/发货操作 |
| **? 奖励&广告配置** | 激励广告 | `AdConfig.vue` | **6大联盟Tab配置** + 兜底视频上传 |
| | 奖励设置 | `RewardSetting.vue` | 答题/视频/广告三类奖励金额自定义 |
| | 签到设置 | `SignSetting.vue` | 7天每日签到奖励金额逐日配置 |
| | 分销设置 | `DistributionSetting.vue` | 直推/间推/团队奖比例配置 |
| **⚙️ 系统设置** | 基础设置 | `BasicSetting.vue` | 平台名称/Logo/联系方式等 |
| | 协议管理 | `AgreementManage.vue` | 用户协议/隐私政策富文本编辑 |
| | 提现配置 | `WithdrawConfig.vue` | 提现门槛/可选金额/审核开关 |
| **? 数据统计** | 用户数据 | `UserStats.vue` | 注册趋势/活跃用户/等级分布图表 |
| | 收益数据 | `RevenueStats.vue` | 广告收益/提现统计/佣金报表 |
---
## 五、技术特色总结
| 特色 | 详情 |
|------|------|
| **多广告源聚合** | 6家广告联盟统一接口，轮询+自动降级，永不"无广告" |
| **三级降级保障** | 真实SDK广告 → 兜底视频 → 最终模拟，用户体验零中断 |
| **灵活的奖励配置** | 后台可视化调整所有奖励金额，无需改代码 |
| **完善的分销体系** | 二级分销 + 团队奖 + 同级断裂 + 级差机制 |
| **商城闭环生态** | 赚金币 → 商城消费 → 订单履约，形成完整商业循环 |
| **多端适配** | H5手机浏览器 / 微信内置浏览器 / PC浏览器 / 已打包APK |
| **代码质量高** | Vue3 Composition API + 详细中文注释 + 组件化设计 |
## ? 主标题（核心推广用）
### 方案一：功能全覆盖型（推荐）
```
看广告赚钱H5源码｜Vue3全栈开发｜穿山甲腾讯AdGo六联盟聚合激励视频+二级分销团队奖+每日签到答题积分商城完整系统源码可二开部署
```
### 方案二：关键词堆叠型（SEO权重最大化）
```
2026最新看视频赚钱APP源码下载 H5激励广告平台多广告联盟SDK接入(穿山甲/腾讯/AdGo/百度/抖音/快手) 二级分销返佣系统团队奖励 Vue3前端后端 MySQL数据库带管理后台完整可部署
```
### 方案三：简洁吸引型（适合短标题）
```
【完整开源】看广告赚钱H5平台源码｜多联盟激励广告+二级分销+团队奖+签到答题｜Vue3全栈｜带后台管理系统
```
---
## ? 标题拆解与SEO关键词分析
| SEO关键词 | 出现位置 | 搜索热度 | 对应代码依据 |
|-----------|----------|----------|-------------|
| **看广告赚钱** | ✅ 核心词 | ⭐⭐⭐⭐⭐ | 项目名称、Video.vue/Task.vue核心业务 |
| **H5源码/APP源码** | ✅ 核心词 | ⭐⭐⭐⭐⭐ | frontend/ 为H5端，app/有APK |
| **激励视频/激励广告** | ✅ 高频词 | ⭐⭐⭐⭐ | adService.js showRewardedAd() |
| **穿山甲/腾讯/AdGo** | ✅ 长尾词 | ⭐⭐⭐⭐ | AdConfig.vue 6个广告联盟Tab |
| **多广告联盟/聚合** | ✅ 差异化词 | ⭐⭐⭐ | 6大广告源+轮询降级机制 |
| **二级分销/分销系统** | ✅ 高频词 | ⭐⭐⭐⭐⭐ | 新机制.md 直推10%+间推5% |
| **团队奖/工作室** | ✅ 差异化词 | ⭐⭐⭐⭐ | 团队奖8%+级差3%+同级断裂 |
| **** | ✅ 技术词 | ⭐⭐⭐⭐ | package.json 技术栈 |
| **全栈/前后端分离** | ✅ 技术词 | ⭐⭐⭐ |
| **带后台管理** | ✅ 功能词 | ⭐⭐⭐⭐⭐ |
| **签到/答题/任务中心** | ✅ 功能词 | ⭐⭐⭐ | Task.vue 答题+视频+签到+邀请 |
| **积分商城/提现** | ✅ 功能词 | ⭐⭐⭐ | Mall.vue + 提现按钮 |
| **可二开/可部署** | ✅ 商业词 | ⭐⭐⭐⭐ | 完整SQL+配置化设计 |
---
## ?️ 配套SEO描述（Description）
```
? 2026最新版「看广告赚钱」H5平台完整源码，支持穿山甲Pangle、腾讯优量汇、AdGo聚合等6大广告联盟激励视频自动轮询降级。
✅ 核心功能：刷短视频赚金币现金｜每日连续签到7天奖励｜答题闯关赚奖励｜邀请好友二级分佣（直推10%间推5%）｜工作室升级获团队奖8%+级差3%｜积分商城兑换｜提现系统
? 技术架构： JWT认证
?️ 后台功能：用户列表+团队树可视化｜题库/视频/商品/订单管理｜6联盟广告位配置+兜底视频上传｜奖励金额自定义｜分销比例可调｜数据统计面板
? 支持环境：手机H5浏览器 / 微信内置浏览器 / PC浏览器 / 已打包APK可直接使用。代码结构清晰注释完善，适合二次开发和快速部署上线。
```
---
## ? 短标题备选（用于不同渠道）
| 渠道 | 标题 |
|------|------|
看广告赚钱H5平台 — Vue3多联盟激励广告+二级分销完整源码` |
【独家】看广告赚钱H5源码六联盟聚合激励广告二级分销团队奖带后台` |
`手把手教你搭建看广告赚钱平台：从0到1实现多广告联盟聚合+分销系统` |
分享一个完整的看广告赚钱平台源码！6大广告联盟自动切换，二级分销+团队奖励，全栈开发！` |
---
## ? SEO建议
1. **主关键词放在标题前30字内**：搜索引擎更看重开头部分
2. **数字增加可信度**：如"6大联盟""二级""2年更新"
3. **技术栈明确标注**：方便开发者搜索精确匹配
4. **差异化卖点突出**："同级断裂机制""兜底视频降级"是本项目独有的亮点

复制代码

bbw*** · 昨天 10:33

支持！！！

yuj*** · 昨天 10:33

沙发！！

wangy*** · 昨天 10:42

你历害！！

һ*** · 昨天 11:36

不错！！

155121*** · 7 小时前

顶一下！！

180321*** · 7 小时前

非常好！！

		自动登录	找回密码
密码			立即注册