uniapp-提现功能(demo)

页面布局

提现页面 有一个输入框 一个提现按钮 一段提现全部的文字

首先用v-model 和data内的数据双向绑定

输入框逻辑分析

输入框的逻辑 为了符合日常输出 所以要对输入框加一些条件限制

  1. 因为是提现 所以对输入的字符做筛选,只允许出现小数点和数字 这里用正则实现的
  2. 小数点后只能输入两位小数, 超过两位的去除掉 因为提现的最小金额是两位数
  3. .前面如果没有数字 就自动补零(首个字符为.的时候)
  4. 只能输入一个小数点
  5. 输入的金额要小于等于余额 如果大于,就把余额赋值给提现的金额

点击全部提现,也是把余额赋值给提现金额

参考代码

javascript 复制代码
<input type="number" step="0.01" min="0" v-model="withdrawMoney" @input="validateInput">
<view class="btn" @click="apply">提现申请</view>

// 对输入的金额做处理
validateInput(e) {
  let inputValue = e.detail.value;
  let integerPart = parseInt(inputValue);  // 整数
  let decimalPart = inputValue - parseInt(inputValue);  // 小数
  // 移除非数字和小数点以外的字符  
  inputValue = inputValue.replace(/[^0-9.]/g, ''); 
  // 小数点只能输入两位小数,并去除多余的  
  if (inputValue.includes('.')) { 
    if (inputValue.indexOf('.') === inputValue.length - 1) {
      decimalPart = '.'
    } else if (inputValue.indexOf('.') === inputValue.length - 2) {  
      if (decimalPart == 0) {
        decimalPart = '.0'
      } else {
        decimalPart = parseFloat(decimalPart);
      }
    } else {
      decimalPart = inputValue.substr(inputValue.indexOf('.') + 1, 2);
      decimalPart = parseFloat(decimalPart / 100)
      console.log(decimalPart)
    } 
  }
  // 整数部分补0,只针对第一位数字为0的情况  
  if (inputValue.length === 1 && inputValue === '0') {  
    inputValue = '';  
    console.log(integerPart)
  }  else if (inputValue[0] === '.') {  
    integerPart = ''
    console.log(integerPart, decimalPart, inputValue)
  } else if (inputValue[0] !== '.') {   
    inputValue = inputValue
    console.log(integerPart, decimalPart, inputValue)
    if (integerPart[0] === '0' && integerPart.length >= 1) {  
      integerPart = integerPart.substr(1);  
      console.log(integerPart)
    }  
  }  
  // // 整数部分补0,只针对没有其他整数的情况  
  if (integerPart === '' && decimalPart === '') {  
    integerPart = '0';  
  } else if (integerPart === '' && decimalPart !== '') {  
    integerPart = 0;  
  }
  // 如果输入的值大于余额,则强制转换为余额值  
  if (parseFloat(inputValue) > this.amount) {  
    inputValue = this.amount;  
  } else {  
    console.log(integerPart, decimalPart)
    inputValue = integerPart + decimalPart; // 重新组合整数部分和小数部分,并更新v-model的值  
  }  

  this.$nextTick(() => {
    console.log(inputValue)
    this.withdrawMoney = inputValue 
  }); 
},

// 全部提现
handleAllWithdraw () {
  this.withdrawMoney = this.amount
},

// 提现
async apply() {
  const data = {
    amount: this.withdrawMoney,
    type: "weixin"
  }
  await takeMoney(data) 
  .then(result => {  
   // 成功
    this.amount = this.amount - this.withdrawMoney
    this.withdrawMoney = ''
      uni.showToast({  
      title: '申请提现成功',  
      icon: 'success',  
      duration: 1000  
      });  
  })  
  .catch(error => {  
      // 失败 
    this.withdrawMoney = ''
      uni.showToast({  
      title: '申请提现失败',  
      icon: 'none',  
      duration: 2000  
      });  
  })  
}

然后调后端给的接口 携带需要的数据 发对应的请求就可以了

相关推荐
2501_915106329 分钟前
iOS 26 APP 性能测试实战攻略:多工具组合辅助方案
android·macos·ios·小程序·uni-app·cocoa·iphone
巨神峰SEO3 小时前
支付宝小程序 SEO 实战:鲜花送达类小程序抢占搜索流量指南
小程序·支付宝小程序排名优化·支付宝小程序seo·支付宝小程序排名·支付宝优化
凉辰4 小时前
微信小程序uni.request 返回值存在精度丢失问题
微信小程序·小程序
李慕婉学姐5 小时前
【开题答辩过程】以《基于微信小程序教学评价平台的设计与实现》为例,不会开题答辩的可以进来看看
微信小程序·小程序
计算机学姐5 小时前
基于微信小程序的垃圾分类管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
weixin_lynhgworld8 小时前
剧本杀小程序系统开发:内容生态与商业模式的双轮驱动
大数据·小程序
计算机徐师兄8 小时前
Java基于SpringBoot的农场管理系统小程序【附源码、文档说明】
java·微信小程序·小程序·农场管理系统小程序·java农场管理系统小程序·java农场管理系统微信小程序·农场管理微信小程序
00后程序员张9 小时前
iOS混淆与IPA文件加固全流程实战 防止苹果应用被反编译的工程级方案
android·ios·小程序·https·uni-app·iphone·webview
草字9 小时前
uniapp 打开横竖屏。usb调试时可以横竖屏切换,但是打包发布后却不行?
java·前端·uni-app
云霄IT9 小时前
新版电脑微信4.1.x.x小程序逆向之——寻找小程序存放位置目录和__APP__.wxapkg
java·微信·小程序