Azizi H5 项目

这是一个基于 Vue 3 + Vite 的移动端 H5 应用，包含申请加入团队和主播中心两个主要页面。

项目结构

src/
├── components/
│   ├── MobileHeader.vue    # 公共头部导航组件
│   └── HelloWorld.vue      # 示例组件
├── views/
│   ├── HomeView.vue        # 首页（带导航按钮）
│   ├── ApplyView.vue       # 申请加入团队页面
│   ├── HostCenterView.vue  # 主播中心页面
│   └── AboutView.vue       # 关于页面
├── router/
│   └── index.js           # 路由配置
├── assets/                # 静态资源
├── App.vue               # 根组件
└── main.js              # 入口文件

页面说明

1. 申请加入团队页面 (/apply)

• 包含申请表单
• 用户可以输入代理商ID
• 有帮助提示功能
• 支持表单验证

2. 主播中心页面 (/host-center)

• 显示用户信息和头像
• 显示收入统计
• 显示今日任务进度
• 包含交换金币、转账、提现等功能按钮
• 点击Date按钮跳转到历史薪资页面
• 点击Exchange按钮跳转到兑换金币页面

3. 主播设置页面 (/host-setting)

• 显示代理商信息
• 银行卡管理
• KYC认证信息
• 支持离开代理商操作

4. 历史薪资页面 (/history-salary)

• 按月份查看薪资记录
• 详细的收入分解（基础薪资、奖金、佣金、扣款）
• 支付状态显示
• 月度统计汇总

5. 兑换金币页面 (/exchange-gold-coins)

• 显示可用余额
• 收款人选择和管理
• 金币选择网格
• 支持多选金币进行转账
• 点击收款人可跳转到搜索页面

6. 搜索收款人页面 (/search-payee)

• 实时搜索功能
• 支持按ID或姓名搜索
• 显示用户标签（Host、Agency、Salary）
• 搜索结果选择和添加

3. 公共组件

MobileHeader.vue

可复用的移动端头部导航组件，支持：

• 自定义标题
• 返回按钮（可选）
• 帮助按钮（可选）
• 自定义事件处理

技术特点

1. Vue 3 Composition API: 使用最新的 Vue 3 语法
2. 响应式设计: 适配手机和桌面端
3. 组件化开发: 公共组件可复用
4. 简洁的样式: 使用原生CSS，无外部UI库依赖
5. 路由管理: 使用 Vue Router 4

开发运行

# 安装依赖
npm install

# 开发模式运行
npm run dev

# 构建生产版本
npm run build

# 预览生产版本
npm run preview

代码特点

• 适合初学者: 代码结构清晰，注释完整
• 无复杂依赖: 只使用必要的Vue生态工具
• 移动端优先: 专为移动端体验设计
• 易于扩展: 组件化架构便于添加新功能

访问路径

• 首页: /
• 申请页面: /apply
• 主播中心: /host-center
• 主播设置: /host-setting
• 历史薪资: /history-salary
• 兑换金币: /exchange-gold-coins
• 搜索收款人: /search-payee
• 关于页面: /about