fnvtk/soul-yongping

Fork 0

Files

乘风 7b2123dfe5 打好基版

2026-02-09 15:09:29 +08:00

6.1 KiB

Raw Blame History

提现按钮状态修复说明

问题描述

现象：

累计佣金：¥8.10
待审核：¥0.00
可提现金额：8.10元
最低提现金额：5元
预期：按钮应显示"申请提现 ¥8.10"（可用状态）
实际：按钮显示"满5元可提现"（灰色禁用状态）

问题原因

availableEarnings 被 formatMoney() 格式化为字符串 "8.10"，在 WXML 模板中进行数值比较时可能出现类型转换问题。

解决方案

修改1：增加数字类型字段

在 referral.js 的 data 中增加 availableEarningsNum 字段：

data: {
  availableEarnings: 0,    // 字符串格式用于显示
  availableEarningsNum: 0, // 数字格式用于判断
  minWithdrawAmount: 10,
  // ...
}

修改2：初始化时同时设置两个字段

在 initData() 方法中：

// 获取原始数字值（用于判断）
const availableEarningsNum = realData?.availableEarnings || 0

console.log('[Referral] 收益数据:')
console.log('[Referral] - totalCommission:', realData?.totalCommission)
console.log('[Referral] - availableEarnings:', availableEarningsNum)
console.log('[Referral] - minWithdrawAmount:', realData?.minWithdrawAmount)
console.log('[Referral] - 按钮应该', availableEarningsNum >= (realData?.minWithdrawAmount || 10) ? '可用' : '禁用')

this.setData({
  // ...
  availableEarnings: formatMoney(availableEarningsNum),      // 字符串，用于显示
  availableEarningsNum: availableEarningsNum,                 // 数字，用于判断
  minWithdrawAmount: realData?.minWithdrawAmount || 10,
  // ...
})

修改3：WXML 使用数字字段判断

<view class="withdraw-btn {{availableEarningsNum < minWithdrawAmount ? 'btn-disabled' : ''}}" bindtap="handleWithdraw">
  {{availableEarningsNum < minWithdrawAmount ? '满' + minWithdrawAmount + '元可提现' : '申请提现 ¥' + availableEarnings}}
</view>

注意：

类名判断使用 availableEarningsNum（数字）
文本显示使用 availableEarnings（字符串，格式化后的）

修改4：提现逻辑也使用数字字段

async handleWithdraw() {
  // 使用数字版本直接进行判断，避免重复转换
  const availableEarnings = this.data.availableEarningsNum || 0
  const minWithdrawAmount = this.data.minWithdrawAmount || 10
  
  console.log('[Withdraw] 提现检查:', {
    availableEarnings,
    minWithdrawAmount,
    shouldEnable: availableEarnings >= minWithdrawAmount
  })
  
  if (availableEarnings <= 0) {
    wx.showToast({ title: '暂无可提现收益', icon: 'none' })
    return
  }
  
  if (availableEarnings < minWithdrawAmount) {
    wx.showToast({ 
      title: `满${minWithdrawAmount}元可提现`, 
      icon: 'none' 
    })
    return
  }
  // ...
}

测试步骤

1. 清理小程序缓存（重要）

在微信开发者工具中：

清除缓存数据：
- 点击顶部菜单 工具 → 清除缓存 → 清除全部缓存数据
重新编译：
- 点击 编译 按钮
- 或使用快捷键 Ctrl + B (Windows) / Cmd + B (Mac)
如果还不行，尝试完全重启：
- 关闭微信开发者工具
- 重新打开项目
- 再次编译

2. 查看调试日志

打开控制台（Console），查找以下日志：

[Referral] 收益数据:
[Referral] - totalCommission: 8.1
[Referral] - availableEarnings: 8.1
[Referral] - minWithdrawAmount: 5
[Referral] - 按钮应该 可用

如果看到"按钮应该可用"，说明逻辑判断正确。

3. 点击提现按钮

如果按钮仍然是灰色，点击它，查看是否有日志输出：

[Withdraw] 提现检查: {
  availableEarnings: 8.1,
  minWithdrawAmount: 5,
  shouldEnable: true
}

4. 检查数据值

在小程序调试器的 AppData 标签页中查找 referral 页面的数据：

{
  "availableEarnings": "8.10",       // 字符串
  "availableEarningsNum": 8.1,       // 数字
  "minWithdrawAmount": 5
}

确认 availableEarningsNum 是数字类型，不是字符串。

预期结果

修复后，当 availableEarningsNum (8.1) >= minWithdrawAmount (5) 时：

✅ 按钮显示：申请提现 ¥8.10
✅ 按钮样式：渐变青色背景（可点击）
✅ 点击后弹出提现确认对话框

常见问题

Q1: 修改后按钮还是灰色？

A: 清除小程序缓存并重新编译：

工具 → 清除缓存 → 清除全部缓存数据
然后点击 编译 按钮

Q2: 控制台没有看到调试日志？

确保控制台的日志级别包含 log
检查是否过滤了某些日志
尝试刷新页面（下拉刷新或重新进入）

Q3: `availableEarningsNum` 是 undefined？

A: 检查后端 API 返回的数据格式，确保 realData.availableEarnings 有值：

console.log('API返回:', realData)

Q4: 数据正确但按钮还是不可点击？

A: 检查 WXSS 中是否有其他样式覆盖：

.withdraw-btn.btn-disabled {
  pointer-events: none; /* 可能导致无法点击 */
}

验证清单

后端API返回正确的 availableEarnings 数值
initData() 中正确设置 availableEarningsNum
WXML 使用 availableEarningsNum 进行条件判断
清除小程序缓存并重新编译
控制台显示正确的调试日志
按钮显示正确文本和样式
点击按钮可以正常提现

技术总结

核心问题：字符串类型的数字在某些场景下的比较可能不符合预期。

解决思路：

保存两份数据：字符串用于显示，数字用于判断
在数据初始化时就区分好类型
在需要比较的地方使用数字类型
添加详细的调试日志便于排查问题

最佳实践：

✅ 数值计算和比较始终使用 Number 类型
✅ 格式化显示使用 String 类型
✅ 在 setData 时明确类型转换
✅ 避免在模板中进行复杂的类型转换

6.1 KiB Raw Blame History Unescape Escape