xiaoli/peixue-dev

Fork 0

xiaojiang dedaf98ea2 初始化项目：上传完整代码

2026-02-28 17:26:03 +08:00

6.8 KiB

Raw Blame History

✅✅✅ 核心支付流程 - 第二阶段完成

完成时间: 2026-01-23
状态: ✅ 已完成
风险等级: 极低（只修改一个文件）

🎯 完成内容

1. 支付页面增强 ✅

文件: peidu/uniapp/src/pages/payment/index.vue

新增功能:

✅ 钱包支付选项（显示余额，余额不足时禁用）
✅ 次卡支付选项（显示可用次卡数量）
✅ 套餐支付选项（显示可用套餐数量）
✅ 优惠券选择功能（显示可用优惠券数量）
✅ 次卡选择弹窗（底部弹出，显示剩余时长）
✅ 套餐选择弹窗（底部弹出，显示剩余次数）
✅ 优惠券选择弹窗（底部弹出，显示优惠金额）
✅ 实时计算最终支付金额（扣除优惠券）

📋 技术实现

1. 数据结构

data() {
  return {
    orderId: null,
    orderInfo: { ... },
    selectedMethod: 'wechat',
    walletBalance: 0,              // 钱包余额
    availableTimecards: [],        // 可用次卡列表
    availablePackages: [],         // 可用套餐列表
    availableCoupons: [],          // 可用优惠券列表
    selectedTimecard: null,        // 选中的次卡
    selectedPackage: null,         // 选中的套餐
    selectedCoupon: null,          // 选中的优惠券
    paying: false
  }
}

2. API对接

钱包余额

GET /api/wallet/balance?userId={userId}
返回: { balance: 100.00 }

可用次卡

GET /api/timecard/available?userId={userId}
返回: [{ id, cardName, remainingHours, ... }]

可用套餐

GET /api/package/my?userId={userId}
返回: [{ id, packageName, remainingTimes, status, ... }]

可用优惠券

GET /api/user-coupon/available-for-order?userId={userId}&orderAmount={amount}
返回: [{ id, couponName, discountAmount, minAmount, ... }]

统一支付

POST /api/order/pay
参数: {
  orderId: 123,
  paymentMethod: 'wallet|timecard|package|wechat|alipay',
  amount: 100.00,
  couponId: 1,        // 可选
  timecardId: 2,      // 可选
  packageId: 3        // 可选
}

3. 支付流程

1. 用户选择支付方式
   ├─ 微信支付 → 调用微信支付SDK
   ├─ 支付宝支付 → 调用支付宝SDK
   ├─ 钱包支付 → 检查余额 → 直接扣款
   ├─ 次卡支付 → 选择次卡 → 扣除时长
   └─ 套餐支付 → 选择套餐 → 扣除次数

2. 用户选择优惠券（可选）
   └─ 自动计算优惠后金额

3. 点击"立即支付"
   ├─ 验证支付方式
   ├─ 验证余额/次卡/套餐
   ├─ 构建支付参数
   ├─ 调用支付接口
   └─ 处理支付结果

🎨 UI设计

1. 支付方式列表

每个支付方式显示图标、名称、余额/数量
选中状态：绿色边框 + 绿色背景 + 勾选图标
余额不足：半透明显示 + 禁用点击
次卡/套餐：点击后弹出选择器

2. 优惠券区域

显示可用优惠券数量
选中后显示优惠金额
点击后弹出选择器

3. 弹窗选择器

底部弹出样式
显示标题和关闭按钮
列表显示可选项
选中项显示勾选图标

4. 支付按钮

固定在底部
显示实付金额（扣除优惠后）
支付中状态：禁用 + 灰色背景

✅ 功能验证

1. 钱包支付

显示钱包余额
余额不足时禁用
余额充足时可选择
支付成功后跳转

2. 次卡支付

显示可用次卡数量
点击后弹出选择器
选择次卡后更新UI
支付时传递次卡ID

3. 套餐支付

显示可用套餐数量
点击后弹出选择器
选择套餐后更新UI
支付时传递套餐ID

4. 优惠券

显示可用优惠券数量
点击后弹出选择器
选择优惠券后显示优惠金额
实时计算最终支付金额
支付时传递优惠券ID

5. 支付流程

验证支付方式
验证余额/次卡/套餐
构建支付参数
调用支付接口
处理支付结果
支付成功后跳转

🚀 使用说明

1. 测试钱包支付

1. 确保用户钱包有余额
2. 进入支付页面
3. 选择"钱包支付"
4. 点击"立即支付"
5. 验证支付成功

2. 测试次卡支付

1. 确保用户有可用次卡
2. 进入支付页面
3. 选择"次卡支付"
4. 在弹窗中选择次卡
5. 点击"立即支付"
6. 验证支付成功

3. 测试套餐支付

1. 确保用户有可用套餐
2. 进入支付页面
3. 选择"套餐支付"
4. 在弹窗中选择套餐
5. 点击"立即支付"
6. 验证支付成功

4. 测试优惠券

1. 确保用户有可用优惠券
2. 进入支付页面
3. 点击"优惠券"区域
4. 在弹窗中选择优惠券
5. 验证实付金额已扣除优惠
6. 点击"立即支付"
7. 验证支付成功

📊 后端接口状态

已验证的接口

✅ /api/wallet/balance - 获取钱包余额
✅ /api/timecard/available - 获取可用次卡
✅ /api/package/my - 获取用户套餐
✅ /api/user-coupon/available-for-order - 获取可用优惠券
✅ /api/order/pay - 统一支付接口

后端控制器

✅ WalletController - 钱包管理
✅ TimeCardController - 次卡管理
✅ PackageController - 套餐管理
✅ CouponController - 优惠券管理
✅ UserCouponController - 用户优惠券管理

🎉 完成效果

用户体验

支付方式更灵活 - 5种支付方式可选
优惠更直观 - 实时显示优惠金额
操作更简单 - 弹窗选择，一键支付
信息更清晰 - 余额、次数、优惠一目了然

技术优势

风险极低 - 只修改一个文件
易于维护 - 代码结构清晰
易于测试 - 功能独立，测试简单
易于回滚 - 出问题只需恢复一个文件

📝 注意事项

1. 后端依赖

确保后端所有支付相关接口已部署
确保数据库表结构完整
确保支付逻辑正确实现

2. 前端依赖

需要安装 uni-popup 组件
需要配置 baseUrl
需要正确的 token 认证

3. 测试建议

先测试单个支付方式
再测试优惠券组合
最后测试异常情况

🔄 下一步计划

第三阶段：地址管理

地址列表页面
地址添加/编辑页面
订单关联地址
默认地址设置

第四阶段：支付优化

支付密码验证
支付限额控制
支付记录查询
退款功能

📞 技术支持

如遇问题，请检查：

后端接口是否正常
前端参数是否正确
用户数据是否完整
网络连接是否正常

完成时间: 2026-01-23
开发人员: Kiro AI Assistant
状态: ✅ 已完成并可测试

6.8 KiB Raw Blame History