docs: 更新优惠券相关文档- 新增优惠券API集成文档

- 新增优惠券卡片对齐修复文档
- 新增优惠券状态显示调试文档
- 新增优惠券组件警告修复文档- 更新用ShopInfo Hook字段迁移文档
- 更新Arguments关键字修复文档

docs/COUPON_CARD_ALIGNMENT_FIX.md

@@ -0,0 +1,178 @@
+# 🎨 优惠券卡片对齐问题修复
+
+## 🚨 问题描述
+
+从截图可以看出，优惠券卡片存在对齐问题：
+- 右侧的优惠券信息和按钮没有垂直居中
+- 整体布局看起来不够协调
+- 视觉效果不够美观
+
+## 🔍 问题分析
+
+### 原始布局问题
+```scss
+.coupon-right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;        // ❌ 垂直布局导致对齐问题
+  justify-content: space-between; // ❌ 两端对齐，中间留空
+  padding: 16px;
+}
+```
+
+**问题**：
+- 使用`flex-direction: column`垂直布局
+- `justify-content: space-between`导致内容分散
+- 信息和按钮没有垂直居中对齐
+
+## ✅ 修复方案
+
+### 新的布局设计
+```scss
+.coupon-right {
+  flex: 1;
+  display: flex;
+  flex-direction: row;           // ✅ 水平布局
+  align-items: center;           // ✅ 垂直居中对齐
+  justify-content: space-between; // ✅ 左右分布
+  padding: 16px;
+}
+```
+
+### 信息区域优化
+```scss
+.coupon-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;        // ✅ 信息垂直排列
+  justify-content: center;       // ✅ 内容居中
+}
+```
+
+### 按钮区域优化
+```scss
+.coupon-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-shrink: 0;               // ✅ 防止按钮被压缩
+}
+```
+
+## 🎯 修复效果
+
+### 修复前的布局
+```
+┌─────────────────────────────────────┐
+│ ¥0   │ 优惠券                      │
+│ 无门槛 │                           │
+│      │                           │
+│      │                    立即使用 │
+└─────────────────────────────────────┘
+```
+**问题**：信息和按钮分散在上下两端
+
+### 修复后的布局
+```
+┌─────────────────────────────────────┐
+│ ¥0   │ 优惠券              立即使用 │
+│ 无门槛 │ 有效期信息                  │
+└─────────────────────────────────────┘
+```
+**效果**：信息和按钮水平对齐，垂直居中
+
+## 📋 具体修改内容
+
+### 1. 主容器布局调整
+- **flex-direction**: `column` → `row`
+- **align-items**: 新增 `center`
+- **justify-content**: 保持 `space-between`
+
+### 2. 信息区域优化
+- **display**: 新增 `flex`
+- **flex-direction**: 新增 `column`
+- **justify-content**: 新增 `center`
+
+### 3. 按钮区域优化
+- **flex-shrink**: 新增 `0`（防止压缩）
+
+## 🎨 视觉效果改进
+
+### 对齐效果
+- ✅ 左侧金额区域：垂直居中
+- ✅ 中间信息区域：垂直居中
+- ✅ 右侧按钮区域：垂直居中
+- ✅ 整体布局：水平对齐
+
+### 空间利用
+- ✅ 信息区域充分利用空间
+- ✅ 按钮区域固定宽度
+- ✅ 整体比例协调
+
+### 响应式适配
+- ✅ 不同内容长度自适应
+- ✅ 按钮始终保持右对齐
+- ✅ 信息区域弹性伸缩
+
+## 🚀 验证步骤
+
+现在你可以：
+
+### 1. 重新编译项目
+```bash
+npm run build:weapp
+```
+
+### 2. 查看修复效果
+- 进入优惠券页面
+- 查看卡片布局是否对齐
+- 确认信息和按钮垂直居中
+
+### 3. 测试不同状态
+- 可用优惠券（显示"立即使用"按钮）
+- 已使用优惠券（显示状态文字）
+- 已过期优惠券（显示状态文字）
+
+## 🎯 预期效果
+
+修复后的优惠券卡片应该：
+- ✅ 左侧金额区域垂直居中
+- ✅ 中间优惠券信息垂直居中
+- ✅ 右侧按钮或状态垂直居中
+- ✅ 整体视觉效果协调美观
+- ✅ 不同内容长度都能正确对齐
+
+## 🔧 技术细节
+
+### Flexbox布局原理
+```scss
+// 主容器：水平布局，垂直居中
+.coupon-right {
+  display: flex;
+  flex-direction: row;    // 水平排列
+  align-items: center;    // 垂直居中
+}
+
+// 信息区域：垂直布局，内容居中
+.coupon-info {
+  display: flex;
+  flex-direction: column; // 垂直排列
+  justify-content: center; // 内容居中
+}
+```
+
+### 空间分配策略
+- **信息区域**: `flex: 1` 占据剩余空间
+- **按钮区域**: `flex-shrink: 0` 固定尺寸
+- **整体布局**: `justify-content: space-between` 两端对齐
+
+## 🎉 总结
+
+**优惠券卡片对齐问题已修复！**
+
+- **修复类型**: CSS布局优化
+- **影响范围**: 所有优惠券卡片
+- **视觉改进**: 垂直居中对齐
+- **兼容性**: 保持所有功能不变
+
+**现在重新编译查看效果，优惠券卡片应该完美对齐了！** 🎨