智慧教务系统

7.1 KiB

Raw Blame History

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

📋 任务描述

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

🔧 修改内容

1. 学员信息获取优化

修改前：使用硬编码的模拟学员信息

// 模拟获取学员信息
const mockStudentInfo = {
    id: this.studentId,
    name: '小明'
}

修改后：从用户存储中获取真实学员信息

// 获取当前登录学员信息
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 数据

// 使用模拟数据
const mockResponse = {
    code: 1,
    data: {
        list: [/* 大量模拟数据 */],
        // ...
    }
}

修改后：调用真实的订单列表接口

// 调用真实的订单列表接口
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 方法，将后端数据转换为前端需要的格式：

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. 状态映射方法

新增状态映射方法，处理后端和前端状态的差异：

// 映射订单状态
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. 订单详情接口对接

修改前：简单的弹窗显示

uni.showModal({
    title: '订单详情',
    content: `订单号：${order.order_no}...`,
    showCancel: false
})

修改后：调用真实接口并跳转详情页

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

onLoad(options) {
    this.studentId = parseInt(options.student_id) || 0
    if (this.studentId) {
        this.initPage()
    } else {
        uni.showToast({ title: '参数错误' })
    }
}

修改后：支持多种方式获取学员ID

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()

参数：

{
    student_id: this.studentId,
    page: this.currentPage,
    limit: 10
}

返回：订单列表数据和分页信息

2. 订单详情接口

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

🎯 技术特点

1. 数据兼容性

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

2. 错误处理

接口调用失败时的降级处理
用户未登录时的跳转处理
加载状态的友好提示

3. 用户体验

保持原有的UI和交互逻辑
添加加载状态提示
支持多种获取学员ID的方式

4. 代码质量

移除所有mock数据
添加详细的错误处理
保持代码结构清晰

📝 注意事项

1. 数据格式

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

2. 分页处理

使用 current_page 和 last_page 判断是否有更多数据
支持上拉加载更多功能

3. 状态管理

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

4. 用户认证

页面支持从多个来源获取学员ID
未登录用户会被引导到登录页面

✅ 测试要点

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

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

7.1 KiB Raw Blame History