115 lines
2.9 KiB
Markdown
115 lines
2.9 KiB
Markdown
# Likei 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`
|