# ? 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%）   │ ★首s个工作室

  │ 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权重最z大化）

```

2026最z新看视频赚钱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描述（Descri-ption）

```

? 2026最z新版「看广告赚钱」H5平台完整源码，支持穿山甲Pangle、腾讯优量汇、AdGo聚合等6大广告联盟激励视频自动轮询降级。

✅ 核心功能：刷短视频赚金币现金｜每日连续签到7天奖励｜答题闯关赚奖励｜邀请好友二级分佣（直推10%间推5%）｜工作室升级获团队奖8%+级差3%｜积分商城兑换｜提现系统

? 技术架构： JWT认证

?️ 后台功能：用户列表+团队树可视化｜题库/视频/商品/订单管理｜6联盟广告位配置+兜底视频上传｜奖励金额自定义｜分销比例可调｜数据统计面板

? 支持环境：手机H5浏览器 / 微信内置浏览器 / PC浏览器 / 已打包APK可直接使用。代码结构清晰注释完善，适合二次开发和快速部署上线。

```

---

## ? 短标题备选（用于不同渠道）

| 渠道 | 标题 |

|------|------|

看广告赚钱H5平台 — Vue3多联盟激励广告+二级分销完整源码` |

【独d家】看广告赚钱H5源码 六联盟聚合激励广告 二级分销团队奖 带后台` |

`手把手教你搭建看广告赚钱平台：从0到1实现多广告联盟聚合+分销系统` |

分享一个完整的看广告赚钱平台源码！6大广告联盟自动切换，二级分销+团队奖励，全栈开发！` |

---

## ? SEO建议

1. **主关键词放在标题前30字内**：搜索引擎更看重开头部分

2. **数字增加可信度**：如"6大联盟""二级""2年更新"

3. **技术栈明确标注**：方便开发者搜索精确匹配

4. **差异化卖点突出**："同级断裂机制""兜底视频降级"是本项目独有的亮点

定制看需求，一般几小时内完成，也不贵。