uniapp-提现功能(demo)

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

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

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

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

<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  
      });  
  })  
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/403820.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

力扣面试经典150 —— 1-5题

力扣面试经典150题在 VScode 中安装 LeetCode 插件即可使用 VScode 刷题&#xff0c;安装 Debug LeetCode 插件可以免费 debug本文使用 python 语言解题&#xff0c;文中 “数组” 通常指 python 列表&#xff1b;文中 “指针” 通常指 python 列表索引 文章目录 1. [简单] 合并…

TongWEB(东方通),部署WEB前后端项目步骤

我的系统: 银河麒麟桌面系统V10(SP1)(兆芯) 环境需要搭建好,什么redis,数据库等 1.准备项目前端war包 (我后端项目本就是war部署,jar转war自行百度一下吧) 进入前端打包好的dist文件夹,创建一个文件夹 WEB-INF ,再在 WEB-INF 里创建一个 web.xml 文件,文件内容: <web-…

谁说常量字符串不可修改

哈喽&#xff0c;我是子牙&#xff0c;一个很卷的硬核男人 深入研究计算机底层、Windows内核、Linux内核、Hotspot源码……聚焦做那些大家想学没地方学的课程。为了保证课程质量及教学效果&#xff0c;一年磨一剑&#xff0c;三年先后做了这些课程&#xff1a;手写JVM、手写OS、…

接口性能优化的小技巧

目录 1.索引 1.1 没加索引 1.2 索引没生效 1.3 选错索引 2. sql优化 3. 远程调用 3.1 并行调用 3.2 数据异构 4. 重复调用 4.1 循环查数据库 4.2 死循环 4.3 无限递归 5. 异步处理 5.1 线程池 5.2 mq 6. 避免大事务 7. 锁粒度 7.1 synchronized 7.2 redis分…

git 使用总结

文章目录 git merge 和 git rebasegit mergegit rebase总结 git merge 和 git rebase git merge git merge 最终效果说明&#xff1a; 假设有一个仓库情况如下&#xff0c;现需要进行 merge&#xff1a; merge 操作流程&#xff1a; merge 的回退操作&#xff1a; git reba…

ubuntu常见配置

ubuntu各个版本的安装过程大差小不差&#xff0c;可以参考&#xff0c;ubuntu20.04 其它版本换一下镜像版本即可 安装之后需要配置基本的环境&#xff0c;我的话大概就以下内容&#xff0c;后续可能有所删改 sudo apt-get update sudo apt-get install gcc sudo apt-get inst…

常见的芯片行业ERP:SAP Business One ERP系统

在现代企业管理中&#xff0c;企业资源规划(ERP)系统已成为不可或缺的工具。特别是在高度复杂和竞争激烈的芯片行业中&#xff0c;一款高效、全面的ERP系统更是助力企业实现精细管理、提升竞争力的关键。SAP Business One ERP系统便是其中一款备受推崇的选择。 SAP Business On…

2023 龙蜥操作系统大会演讲实录:《兼容龙蜥的云原生大模型数据计算系统——πDataCS》

本文主要分三部分内容&#xff1a;第一部分介绍拓数派公司&#xff0c;第二部分介绍 πDataCS 产品&#xff0c;最后介绍 πDataCS 与龙蜥在生态上的合作。 杭州拓数派科技发展有限公司&#xff08;简称“拓数派”&#xff0c;英文名称“OpenPie”&#xff09;是国内基础数据计…

alist修改密码(docker版)

rootarmbian:~# docker exec -it [docker名称] ./alist admin set abcd123456 INFO[2024-02-20 11:06:29] reading config file: data/config.json INFO[2024-02-20 11:06:29] load config from env with prefix: ALIST_ INFO[2024-02-20 11:06:29] init logrus..…

bilibili尚硅谷周阳老师JUC并发编程与源码分析课程笔记第十一章——Synchronized与锁升级

文章目录 先从阿里及其它大厂面试题说起本章路线总纲阿里手册对锁使用的强制要求Synchronized锁优化的背景Synchronized锁的升级过程Synchronized锁的升级标志 Synchronized的性能变化Java5以前&#xff0c;只有Synchronized&#xff0c;这个是操作系统级别的重量级锁为什么每一…

C# .Net 发布后,把dll全部放在一个文件夹中,让软件目录更整洁

PublishFolderCleaner – Github 测试环境: .Net 8 Program.cs 代码 // https://github.com/dotnet-campus/dotnetcampus.DotNETBuildSDK/tree/master/PublishFolderCleanerusing System.Diagnostics; using System.Text;// 名称, 不用写 .exe var exeName "AbpDemo&…

【数学建模竞赛考点】近五年数维杯数学建模题型及算法模型总结

20204年第九届数维杯数学建模竞赛在5月10号开赛&#xff0c;为了帮助小伙伴们赛前充分准备&#xff0c;并且快速掌握历年的赛题类型&#xff0c;在这里给大家整理出了近五年的数维杯数学建模竞赛题目及考点方向&#xff0c;便于小伙伴们更好的巩固学习。 2019年 A题&#xff…

当项目经理的一定要考PMP嘛?

PMP资格认证并不是强制性要求&#xff0c;但强烈建议考虑获取该资格&#xff01;首先让我们来了解一下PMP是什么&#xff0c;然后再谈谈为什么建议考取PMP资格的理由。 PMP&#xff08;Project Management Professional&#xff09;是项目管理专业人员的资格认证。该认证由全球…

落雪音乐换源失败播放不了音乐——保姆级解决方法

不想看原因可以直接跳转到下面的解决方法 一、换源失败的原因二、解决方法注意&#xff01;2.1电脑版解决方法2.2 手机版解决方法前提&#xff08;必看&#xff01;&#xff09;解决方法 一、换源失败的原因 落雪开发者原话&#xff1a;虽然我们之前做了一些努力&#xff08;如…

《剑指Offer》笔记题解思路技巧优化_Part_7

《剑指Offer》笔记&题解&思路&技巧&优化_Part_7 &#x1f60d;&#x1f60d;&#x1f60d; 相知&#x1f64c;&#x1f64c;&#x1f64c; 相识&#x1f622;&#x1f622;&#x1f622; 开始刷题&#x1f7e2;1. LCR 179. 查找总价格为目标值的两个商品——和…

ocr识别tesseract.js本地复现

来源&#xff1a; https://github.com/naptha/tesseract.js chatgpt今天帮倒忙&#xff0c;一直给一些旧的东西&#xff0c;代码就老报错&#xff0c;最后还是我出面看看log和err调了一下&#xff0c;还的是我啊 复现效果 这个挺好复现的&#xff0c;用的英文模式比中文识别…

Matlab/simulink光伏发电的扰动观察法MPPT仿真(持续更新)

1.光伏发电的电导增量法MPPT仿真 2.光伏发电的恒定电压法MPPT仿真 3.光伏发电的扰动观察法MPPT仿真 4.光伏发电的占空比法MPPT仿真 5.基于神经网络的MPPT光伏发电仿真 6. 基于模糊控制的MPPT光伏发电仿真 7. 基于粒子群算法&#xff08;PSO&#xff09;的500w光伏系统MPPT控…

如何使用Douglas-042为威胁搜索和事件应急响应提速

关于Douglas-042 Douglas-042是一款功能强大的PowerShell脚本&#xff0c;该脚本可以提升数据分类的速度&#xff0c;并辅助广大研究人员迅速从取证数据中筛选和提取出关键数据。 该工具能够搜索和识别Windows生态系统中潜在的安全漏洞&#xff0c;Douglas-042会将注意力放在…

小程序商城 免 费 搭 建之java商城 电子商务Spring Cloud+Spring Boot+二次开发+mybatis+MQ+VR全景+b2b2c

java SpringCloud版本b2b2c鸿鹄云商平台全套解决方案 使用技术&#xff1a; Spring CloudSpring BootMybatis微服务服务监控可视化运营 B2B2C平台&#xff1a; 平台管理端(包含自营) 商家平台端(多商户入驻) PC买家端、手机wap/公众号买家端 微服务&#xff08;30个通用…

ELF文件内容详解——各节内容分析

文章目录 写在前面准备.text节.data节.strtab.symtab.shstrtab.shstrtab之后 写在前面 只看readelf这个工具说实话我感觉还是有点云里雾里&#xff0c;这里就逐字节分析一下ELF文件中text节&#xff08;代码段&#xff09;的内容 本文分析使用的汇编程序ELF文件内容详解这篇文…