# 学员端订单页面接口对接说明

## 📋 **任务描述**

根据 `学员端开发计划-后端任务.md` 中的计划，将 `pages/student/orders/index` 页面从 mock 数据改为对接真实接口数据。

## 🔧 **修改内容**

### 1. **学员信息获取优化**
**修改前**：使用硬编码的模拟学员信息
```javascript
// 模拟获取学员信息
const mockStudentInfo = {
    id: this.studentId,
    name: '小明'
}
```

**修改后**：从用户存储中获取真实学员信息
```javascript
// 获取当前登录学员信息
const userInfo = uni.getStorageSync('userInfo')
if (userInfo && userInfo.id) {
    this.studentId = userInfo.id
    this.studentInfo = {
        id: userInfo.id,
        name: userInfo.name || userInfo.nickname || '学员'
    }
} else {
    // 如果没有用户信息，跳转到登录页
    uni.redirectTo({ url: '/pages/student/login/login' })
}
```

### 2. **订单列表接口对接**
**修改前**：使用大量的 mock 数据
```javascript
// 使用模拟数据
const mockResponse = {
    code: 1,
    data: {
        list: [/* 大量模拟数据 */],
        // ...
    }
}
```

**修改后**：调用真实的订单列表接口
```javascript
// 调用真实的订单列表接口
const response = await apiRoute.xy_orderTableList({
    student_id: this.studentId,
    page: this.currentPage,
    limit: 10
})

if (response.code === 1) {
    const newList = this.processOrderData(response.data?.data || [])
    // 处理分页信息
    this.hasMore = response.data?.current_page < response.data?.last_page
    // 计算订单统计
    this.calculateOrderStats()
}
```

### 3. **数据处理方法**
新增 `processOrderData` 方法，将后端数据转换为前端需要的格式：
```javascript
processOrderData(rawData) {
    return rawData.map(item => {
        return {
            id: item.id,
            order_no: item.order_no || item.order_number,
            product_name: item.course_name || item.product_name || '课程订单',
            product_specs: item.course_specs || item.product_specs || '',
            quantity: item.quantity || 1,
            total_amount: item.total_amount || item.amount || '0.00',
            status: this.mapOrderStatus(item.status),
            create_time: item.create_time || item.created_at,
            payment_method: this.mapPaymentMethod(item.payment_method),
            payment_time: item.payment_time || item.paid_at,
            // 其他字段...
        }
    })
}
```

### 4. **状态映射方法**
新增状态映射方法，处理后端和前端状态的差异：
```javascript
// 映射订单状态
mapOrderStatus(status) {
    const statusMap = {
        '0': 'pending_payment',  // 待付款
        '1': 'completed',        // 已完成
        '2': 'cancelled',        // 已取消
        '3': 'refunded',         // 已退款
        'pending': 'pending_payment',
        'paid': 'completed',
        'cancelled': 'cancelled',
        'refunded': 'refunded'
    }
    return statusMap[status] || 'pending_payment'
}

// 映射支付方式
mapPaymentMethod(method) {
    const methodMap = {
        'wxpay': '微信支付',
        'alipay': '支付宝',
        'cash': '现金支付',
        'bank': '银行转账',
        '': ''
    }
    return methodMap[method] || method || ''
}
```

### 5. **订单详情接口对接**
**修改前**：简单的弹窗显示
```javascript
uni.showModal({
    title: '订单详情',
    content: `订单号：${order.order_no}...`,
    showCancel: false
})
```

**修改后**：调用真实接口并跳转详情页
```javascript
async viewOrderDetail(order) {
    try {
        uni.showLoading({ title: '加载中...' })
        
        // 调用订单详情接口
        const res = await apiRoute.xy_orderTableInfo({
            id: order.id
        })
        
        if (res.code === 1) {
            // 跳转到订单详情页面
            uni.navigateTo({
                url: `/pages/student/orders/detail?id=${order.id}`
            })
        } else {
            // 降级处理：显示简单弹窗
        }
    } catch (error) {
        // 错误处理：显示简单弹窗
    }
}
```

### 6. **页面初始化优化**
**修改前**：只从URL参数获取学员ID
```javascript
onLoad(options) {
    this.studentId = parseInt(options.student_id) || 0
    if (this.studentId) {
        this.initPage()
    } else {
        uni.showToast({ title: '参数错误' })
    }
}
```

**修改后**：支持多种方式获取学员ID
```javascript
onLoad(options) {
    // 优先从参数获取学员ID，如果没有则从用户信息获取
    this.studentId = parseInt(options.student_id) || 0
    
    if (!this.studentId) {
        // 从用户信息中获取学员ID
        const userInfo = uni.getStorageSync('userInfo')
        if (userInfo && userInfo.id) {
            this.studentId = userInfo.id
        }
    }
    
    if (this.studentId) {
        this.initPage()
    } else {
        uni.showToast({ title: '请先登录' })
        setTimeout(() => {
            uni.redirectTo({ url: '/pages/student/login/login' })
        }, 1500)
    }
}
```

## 🌐 **使用的API接口**

### 1. **订单列表接口**
- **接口**：`apiRoute.xy_orderTableList()`
- **参数**：
  ```javascript
  {
      student_id: this.studentId,
      page: this.currentPage,
      limit: 10
  }
  ```
- **返回**：订单列表数据和分页信息

### 2. **订单详情接口**
- **接口**：`apiRoute.xy_orderTableInfo()`
- **参数**：
  ```javascript
  {
      id: order.id
  }
  ```
- **返回**：订单详细信息

## 🎯 **技术特点**

### 1. **数据兼容性**
- 支持多种后端数据格式
- 提供字段映射和默认值处理
- 兼容不同的状态值和支付方式

### 2. **错误处理**
- 接口调用失败时的降级处理
- 用户未登录时的跳转处理
- 加载状态的友好提示

### 3. **用户体验**
- 保持原有的UI和交互逻辑
- 添加加载状态提示
- 支持多种获取学员ID的方式

### 4. **代码质量**
- 移除所有mock数据
- 添加详细的错误处理
- 保持代码结构清晰

## 📝 **注意事项**

### 1. **数据格式**
- 后端返回的数据格式可能与前端期望不完全一致
- 通过 `processOrderData` 方法进行数据转换
- 需要根据实际后端接口调整字段映射

### 2. **分页处理**
- 使用 `current_page` 和 `last_page` 判断是否有更多数据
- 支持上拉加载更多功能

### 3. **状态管理**
- 订单状态需要根据后端实际返回值调整映射关系
- 支付方式同样需要映射处理

### 4. **用户认证**
- 页面支持从多个来源获取学员ID
- 未登录用户会被引导到登录页面

## ✅ **测试要点**

1. **数据加载**：验证订单列表能正确加载
2. **分页功能**：测试上拉加载更多
3. **状态筛选**：验证不同状态的订单筛选
4. **订单详情**：测试订单详情查看功能
5. **错误处理**：测试网络异常和接口错误的处理
6. **用户认证**：测试未登录用户的处理

---

**修改完成时间**：2025-07-31  
**状态**：✅ Mock数据已移除，真实接口已对接  
**下一步**：测试接口功能和用户体验