# 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

## 开发运行

```bash
# 安装依赖
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`