fix(api): 修复优惠券页面 API 调用错误并优化调试信息

- 更新 API 请求方式，使用正确的 request-legacy 导入
- 在优惠券页面添加详细的调试日志，帮助排查显示问题
- 修复 Tabs 组件的类型错误，确保类型安全- 优化页面渲染逻辑，增加可视化调试信息
- 更新文档，提供详细的调试步骤和常见问题分析

docs/COUPON_DISPLAY_DEBUG.md

@@ -0,0 +1,168 @@
+# 🔍 优惠券显示问题调试
+
+## 问题描述
+
+你反馈优惠券有数据了，但是没有显示出来。这是一个常见的前端数据渲染问题。
+
+## 🚀 已添加的调试功能
+
+我已经在优惠券页面添加了详细的调试信息，帮助我们找出问题所在：
+
+### 1. 数据加载调试
+在 `reload` 函数中添加了详细的日志：
+```typescript
+console.log('优惠券数据加载成功:', {
+  isRefresh,
+  currentPage,
+  statusFilter,
+  responseData: res,
+  newListLength: newList.length,
+  activeTab
+})
+```
+
+### 2. 数据转换调试
+在 `transformCouponData` 函数中添加了输入输出日志：
+```typescript
+console.log('转换优惠券数据:', coupon)
+console.log('转换后的数据:', result)
+```
+
+### 3. 页面渲染调试
+在页面上添加了可视化的调试信息：
+- 显示 `list.length`、`loading` 状态、`activeTab`
+- 显示转换后的数据结构
+
+## 🔍 排查步骤
+
+现在请按以下步骤操作：
+
+### 1. 重新编译和运行
+```bash
+npm run build:weapp
+```
+
+### 2. 打开优惠券页面
+- 进入优惠券管理页面
+- 打开开发者工具的控制台
+
+### 3. 查看调试信息
+在控制台中查看以下信息：
+
+#### A. 数据加载日志
+```
+优惠券数据加载成功: {
+  isRefresh: true,
+  currentPage: 1,
+  statusFilter: { status: 0, isExpire: 0 },
+  responseData: { list: [...], count: 5 },
+  newListLength: 5,
+  activeTab: "0"
+}
+```
+
+#### B. 数据转换日志
+```
+转换优惠券数据: { id: 1, name: "满减券", type: 10, ... }
+转换后的数据: { amount: 10, type: 1, status: 0, ... }
+```
+
+#### C. 页面显示的调试信息
+页面上会显示黄色和蓝色的调试框，显示：
+- `list.length=5, loading=false, activeTab=0`
+- 转换后的数据结构
+
+## 🎯 可能的问题和解决方案
+
+### 问题1：数据加载失败
+**症状**：控制台显示"优惠券数据为空"
+**解决方案**：检查API接口是否正常，网络是否连通
+
+### 问题2：数据转换错误
+**症状**：原始数据有，但转换后数据异常
+**解决方案**：检查数据字段映射是否正确
+
+### 问题3：条件渲染问题
+**症状**：数据正常，但页面显示空状态
+**解决方案**：检查渲染条件逻辑
+
+### 问题4：组件渲染问题
+**症状**：数据传递正常，但CouponCard组件不显示
+**解决方案**：检查CouponCard组件的props和样式
+
+### 问题5：Tab切换问题
+**症状**：某个Tab下有数据，其他Tab下没有
+**解决方案**：检查状态过滤逻辑
+
+## 📋 常见原因分析
+
+### 1. API响应格式问题
+```typescript
+// 期望格式
+{
+  code: 0,
+  data: {
+    list: [...],
+    count: 5
+  }
+}
+
+// 实际格式可能不同
+{
+  code: 0,
+  data: [...] // 直接是数组
+}
+```
+
+### 2. 数据字段不匹配
+```typescript
+// 期望字段
+{
+  type: 10,        // 满减券
+  reducePrice: "10", // 减免金额
+  minPrice: "100"    // 最低消费
+}
+
+// 实际字段可能不同
+{
+  couponType: 10,
+  amount: "10",
+  threshold: "100"
+}
+```
+
+### 3. 状态过滤问题
+```typescript
+// 可用优惠券过滤条件
+{ status: 0, isExpire: 0 }
+
+// 但实际数据可能是
+{ status: "0", isExpire: "0" } // 字符串类型
+```
+
+## 🚀 下一步操作
+
+1. **查看控制台日志**：告诉我你看到了什么调试信息
+2. **截图调试信息**：如果可能，截图页面上的调试框
+3. **检查网络请求**：在开发者工具的Network标签查看API请求和响应
+
+## 🔧 临时解决方案
+
+如果问题复杂，我们可以先用一个简单的测试数据来验证组件是否正常：
+
+```typescript
+// 在页面中添加测试数据
+const testCoupons = [{
+  amount: 10,
+  type: 1,
+  status: 0,
+  minAmount: 100,
+  title: "测试优惠券",
+  startTime: "2024-01-01",
+  endTime: "2024-12-31",
+  showUseBtn: true,
+  theme: "red"
+}]
+```
+
+**现在请重新运行应用，查看控制台的调试信息，然后告诉我你看到了什么！** 🔍