# 快速开始

## 项目说明
这是一个Vue3移动端H5项目的演示，包含两个主要页面：
1. **申请加入团队页面** - 模拟用户申请成为主播的流程
2. **主播中心页面** - 显示主播的收入、任务等信息

## 启动步骤

1. **安装依赖**
   ```bash
   npm install
   ```

2. **启动开发服务器**
   ```bash
   npm run dev
   ```

3. **访问应用**
   - 在浏览器中打开显示的本地地址（通常是 http://localhost:5173）
   - 建议用浏览器的移动端模拟器查看效果

## 页面预览

### 首页
- 包含三个导航按钮
- 点击可以跳转到对应的功能页面

### 申请页面 (/apply)
- 包含申请表单
- 输入代理商ID
- 点击帮助按钮查看提示

### 主播中心 (/host-center)
- 查看用户信息
- 查看收入统计
- 查看任务进度
- 操作按钮（交换、转账、提现）
- Date按钮跳转到历史薪资
- Exchange按钮跳转到兑换金币

### 主播设置 (/host-setting)
- 查看代理商信息
- 管理银行卡信息
- KYC认证管理

### 历史薪资 (/history-salary)
- 按月份查看薪资
- 详细的收入分解
- 月度统计信息

### 兑换金币 (/exchange-gold-coins)
- 金币选择和转账
- 收款人管理
- 点击收款人跳转搜索

### 搜索收款人 (/search-payee)
- 实时搜索用户
- 按ID或名称搜索

## 技术亮点

✅ **Vue 3** - 使用最新的Composition API语法  
✅ **响应式设计** - 适配移动端和桌面端  
✅ **组件化** - MobileHeader作为公共组件复用  
✅ **路由管理** - 使用Vue Router进行页面跳转  
✅ **简洁样式** - 原生CSS，无复杂依赖  
✅ **易于理解** - 代码结构清晰，适合Vue3初学者  

## 文件结构
```
src/
├── components/MobileHeader.vue  # 公共头部组件
├── views/
│   ├── HomeView.vue            # 首页
│   ├── ApplyView.vue           # 申请页面  
│   ├── HostCenterView.vue      # 主播中心
│   ├── HostSettingView.vue     # 主播设置
│   ├── HistorySalaryView.vue   # 历史薪资
│   ├── ExchangeGoldCoinsView.vue # 兑换金币
│   └── SearchPayeeView.vue     # 搜索收款人
├── router/index.js             # 路由配置
└── App.vue                     # 根组件
```