# 陪读服务平台 - 小程序/App端

## 技术栈

- uni-app
- Vue 3 + Composition API
- Pinia (状态管理)
- uni-ui (UI组件库)
- uView UI (可选)

## 支持平台

- 微信小程序
- App (iOS/Android)
- H5 (可选)

## 项目结构

```
uniapp/
├── api/                  # API接口
│   └── index.js
├── components/           # 公共组件
│   ├── service-card/     # 服务卡片
│   ├── teacher-card/     # 教师卡片
│   └── order-item/       # 订单项
├── pages/                # 页面
│   ├── index/            # 首页
│   ├── service/          # 服务相关
│   │   ├── list.vue      # 服务列表
│   │   └── detail.vue    # 服务详情
│   ├── teacher/          # 教师相关
│   │   ├── list.vue      # 教师列表
│   │   └── detail.vue    # 教师详情
│   ├── order/            # 订单相关
│   │   ├── create.vue    # 创建订单
│   │   ├── list.vue      # 订单列表
│   │   └── detail.vue    # 订单详情
│   ├── user/             # 用户中心
│   │   ├── index.vue     # 个人中心
│   │   ├── profile.vue   # 个人资料
│   │   ├── student.vue   # 学生管理
│   │   └── coupon.vue    # 优惠券
│   └── teacher-center/   # 教师中心
│       ├── index.vue     # 教师首页
│       ├── orders.vue    # 订单管理
│       ├── schedule.vue  # 时间管理
│       └── earnings.vue  # 收益管理
├── static/               # 静态资源
│   ├── images/
│   └── css/
│       └── common.scss
├── store/                # 状态管理
│   ├── user.js
│   └── app.js
├── utils/                # 工具函数
│   ├── request.js        # 请求封装
│   ├── auth.js           # 认证相关
│   └── util.js           # 通用工具
├── App.vue
├── main.js
├── manifest.json         # 应用配置
├── pages.json            # 页面配置
└── uni.scss              # 全局样式变量
```

## 环境要求

- HBuilderX 3.6+
- 微信开发者工具 (微信小程序)
- Node.js 16+ (使用 CLI 开发)

## 开发方式

### 方式一：HBuilderX

1. 使用 HBuilderX 打开项目
2. 运行 -> 运行到小程序模拟器 -> 微信开发者工具
3. 或运行到手机或模拟器

### 方式二：CLI

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

2. 运行到微信小程序
```bash
npm run dev:mp-weixin
```

3. 运行到 App
```bash
npm run dev:app
```

4. 运行到 H5
```bash
npm run dev:h5
```

## 配置说明

### API 地址配置

编辑 `utils/request.js`:

```javascript
const baseURL = process.env.NODE_ENV === 'development' 
  ? 'http://192.168.1.50:8080/api'
  : 'https://api.peidu.com/api'
```

### 微信小程序配置

1. 在微信公众平台配置服务器域名
2. 配置支付相关参数
3. 配置用户隐私保护指引

编辑 `manifest.json`:

```json
{
  "mp-weixin": {
    "appid": "your_appid",
    "setting": {
      "urlCheck": false
    }
  }
}
```

## 核心功能

### 用户端功能

#### 1. 首页
- 轮播图展示
- 服务分类导航
- 推荐教师
- 热门服务

#### 2. 服务浏览
- 服务列表（支持筛选）
- 服务详情
- 教师信息
- 用户评价

#### 3. 预约下单
- 选择学生
- 选择时间
- 选择优惠券
- 在线支付

#### 4. 订单管理
- 订单列表（待支付、待服务、已完成）
- 订单详情
- 取消订单
- 申请退款
- 订单评价

#### 5. 个人中心
- 个人信息
- 学生管理
- 我的订单
- 我的优惠券
- 学习记录
- 设置

### 教师端功能

#### 1. 教师中心
- 收益概览
- 订单统计
- 待处理订单

#### 2. 订单管理
- 订单列表
- 订单详情
- 扫码核销
- 填写学习记录

#### 3. 时间管理
- 设置可预约时间
- 查看预约情况

#### 4. 收益管理
- 收益明细
- 提现申请
- 提现记录

## 页面路由

主要页面路由配置在 `pages.json`:

```json
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": { "navigationBarTitleText": "首页" }
    },
    {
      "path": "pages/service/list",
      "style": { "navigationBarTitleText": "服务列表" }
    },
    {
      "path": "pages/order/create",
      "style": { "navigationBarTitleText": "确认订单" }
    },
    {
      "path": "pages/user/index",
      "style": { "navigationBarTitleText": "个人中心" }
    }
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/service/list",
        "text": "服务"
      },
      {
        "pagePath": "pages/order/list",
        "text": "订单"
      },
      {
        "pagePath": "pages/user/index",
        "text": "我的"
      }
    ]
  }
}
```

## 开发规范

### 代码规范
- 使用 Composition API
- 组件使用 PascalCase 命名
- 页面使用 kebab-case 命名
- 必要的注释

### 样式规范
- 使用 rpx 单位
- 遵循设计稿尺寸（750rpx）
- 使用全局样式变量

### API 调用规范
- 统一使用 api/index.js 中的方法
- 错误统一处理
- Loading 提示

## 构建发布

### 微信小程序

1. 使用 HBuilderX 或 CLI 构建
```bash
npm run build:mp-weixin
```

2. 使用微信开发者工具打开 `dist/dev/mp-weixin` 或 `dist/build/mp-weixin`

3. 上传代码到微信公众平台

4. 提交审核

### App

1. 配置证书和打包信息

2. 云打包或本地打包
```bash
npm run build:app
```

3. 生成安装包

## 常见问题

### 微信小程序真机预览白屏
检查服务器域名是否配置，API 地址是否正确

### 支付失败
检查支付配置，商户号是否正确

### 图片不显示
检查图片路径，确保使用正确的域名

### 请求超时
检查网络连接，后端服务是否正常

## 性能优化

- 图片懒加载
- 分包加载
- 请求缓存
- 防抖节流

## 测试

### 微信小程序测试
- 真机调试
- 体验版测试
- 不同机型适配

### App 测试
- iOS 真机测试
- Android 真机测试
- 不同系统版本测试

## 联系方式

如有问题，请联系开发团队