86 lines
2.3 KiB
Markdown
86 lines
2.3 KiB
Markdown
# 快速开始
|
||
|
||
## 项目说明
|
||
这是一个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 # 根组件
|
||
```
|