快速开始

项目说明

这是一个Vue3移动端H5项目的演示，包含两个主要页面：

申请加入团队页面 - 模拟用户申请成为主播的流程
主播中心页面 - 显示主播的收入、任务等信息

启动步骤

安装依赖
```
npm install
```
启动开发服务器
```
npm run dev
```
访问应用
- 在浏览器中打开显示的本地地址（通常是 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                     # 根组件

2.3 KiB Raw Blame History Unescape Escape