uni-app插件账户后台余额超过100元依然无法提现,提现按钮不可用?

发布于 1周前 作者 yibo5220 来自 Uni-App

uni-app插件账户后台余额超过100元依然无法提现,提现按钮不可用?
图片

2 回复

请先勾选要提现的账单月份,然后点击提现


针对您提到的uni-app插件账户后台余额超过100元时提现按钮依然不可用的问题,这通常涉及前端逻辑与后端数据校验的综合排查。以下是一个简化的示例代码,展示如何在uni-app中实现这一功能,确保当余额超过100元时提现按钮可用。请注意,实际项目中可能还需要考虑更多安全、性能等方面的优化。

前端(uni-app)代码示例

假设我们有一个页面withdraw.vue,其中包含显示余额和提现按钮的逻辑。

<template>
  <view>
    <text>账户余额: {{ balance }} 元</text>
    <button :disabled="!canWithdraw" @click="withdraw">提现</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      balance: 0, // 账户余额,从后端获取
      canWithdraw: false, // 是否可以提现
    };
  },
  methods: {
    async fetchBalance() {
      try {
        const response = await uni.request({
          url: 'https://your-backend-api/getBalance', // 后端获取余额接口
          method: 'GET',
        });
        this.balance = response.data.balance;
        this.checkWithdrawStatus();
      } catch (error) {
        console.error('获取余额失败', error);
      }
    },
    checkWithdrawStatus() {
      this.canWithdraw = this.balance > 100;
    },
    async withdraw() {
      if (this.canWithdraw) {
        try {
          await uni.request({
            url: 'https://your-backend-api/withdraw', // 后端提现接口
            method: 'POST',
          });
          uni.showToast({
            title: '提现成功',
            icon: 'success',
          });
        } catch (error) {
          console.error('提现失败', error);
        }
      } else {
        uni.showToast({
          title: '余额不足,无法提现',
          icon: 'none',
        });
      }
    },
  },
  onLoad() {
    this.fetchBalance();
  },
};
</script>

后端API示例(假设使用Node.js + Express)

后端API需要正确返回用户的余额,并处理提现请求。

const express = require('express');
const app = express();

// 模拟用户数据
const userBalance = 150; // 假设用户余额为150元

app.get('/getBalance', (req, res) => {
  res.json({ balance: userBalance });
});

app.post('/withdraw', (req, res) => {
  // 实际项目中应包含更多校验逻辑,如用户验证、余额检查等
  if (userBalance > 100) {
    // 执行提现操作,更新用户余额(此处省略数据库操作)
    userBalance -= 100; // 假设提现100元
    res.status(200).send('提现成功');
  } else {
    res.status(400).send('余额不足,无法提现');
  }
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

以上代码展示了前端如何根据后端返回的余额数据动态调整提现按钮的状态,以及后端如何响应提现请求。请确保在实际项目中根据具体需求调整API路径、数据格式及安全措施。

回到顶部