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 = inputValueconsole.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.withdrawMoneythis.withdrawMoney = ''uni.showToast({  title: '申请提现成功',  icon: 'success',  duration: 1000  });  })  .catch(error => {  // 失败 this.withdrawMoney = ''uni.showToast({  title: '申请提现失败',  icon: 'none',  duration: 2000  });  })  
}

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux--自定义shell

shell shell就是操作系统提供给用户与操作系统进行交互的命令行界面。它可以理解为一个用户与操作系统之间的接口&#xff0c;用户可以通过输入命令来执行各种操作&#xff0c;如文件管理、进程控制、软件安装等。Shell还可以通过脚本编程实现自动化任务。 常见的Unix系统中使…

BERT学习笔记

论文&#xff1a;《BERT: Pre-training of Deep Bidirectional Transformers for Language Understanding》&#xff0c;2019 代码&#xff1a;[tensorflow]&#xff0c;[pytorch] 来源&#xff1a;李沐精度BERT 0、摘要 与之前模型的区别&#xff1a; GPT考虑的是一个单向…

RabbitMQ 部署方式选择

部署模式 RabbitMQ支持多种部署模式&#xff0c;可以根据应用的需求和规模选择适合的模式。以下是一些常见的RabbitMQ部署模式&#xff1a; 单节点模式&#xff1a; 最简单的部署方式&#xff0c;所有的RabbitMQ组件&#xff08;消息存储、交换机、队列等&#xff09;都运行在…

【Java程序设计】【C00278】基于Springboot的数码论坛管理系统(有论文)

基于Springboot的数码论坛管理系统&#xff08;有论文&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于Springboot的数码论坛系统 本系统分为系统功能模块、管理员功能模块以及用户功能模块。 系统功能模块&#xff1a;在系统首页可以查看首页、…

Linux Android USB gadget(从设备驱动)

Linux Android USB gadget 一:Linux usb gadget 与 Android Composite Gadget二:原生方式和Android方式如何配置函数调用逻辑内核配置原生驱动android驱动三:mass_storage配置虚拟化U盘四:遍历usb设备五:adb usb判断usb设备为adb获取adb配置信息adb设备序列号发送与接收《Linux…

maven的聚合和生命周期

什么是maven的聚合呢?就是父类直接将子类项目一起统一打包安装统一maven的生命周期 1.maven的生命周期 2.在父亲类pom文件指定需要打包的项目 实例代码: <!--maven的聚合 通过modules指定需要打包的maven项目--> <modules><module>../ithema-jopo</m…

【Java】RestClient的使用

RestClient的使用 先导入Maven坐标&#xff0c;要和elasticsearch和kibana的版本保持一致 <dependency><groupId>org.elasticsearch.client</groupId><artifactId>elasticsearch-rest-high-level-client</artifactId><version>7.12.1<…

神经网络系列---计算图基本原理

文章目录 计算图符号微分符号微分的步骤示例符号微分在计算图中的使用总结 数值微分前向差分法中心差分法数值微分的使用注意事项总结 自动微分1. 基本原理2. 主要类型3. 计算图4. 应用5. 工具和库6. 优点和缺点 计算图1. **计算图的建立**2. **前向传播**3. **反向传播**4. **…

2024最新版Python 3.12.2安装使用指南

2024最新版Python 3.12.2安装使用指南 Installation and Usage Guide to the Latest Version - Python 3.12.2 for Windows in 2024 By JacksonML 0. Python的受欢迎程度 据TechRepublic报道&#xff0c;截至2024年2月16日&#xff0c;全球最流行的编程语言之中&#xff0c…

【Java网络编程06】HTTPS原理

1. HTTPS基本概念 HTTPS&#xff1a;HTTPS也是一个应用层协议&#xff0c;它在HTTP协议的基础上引入了一个加密层——SSL协议&#xff0c;区别就在于HTTP协议是基于明文传输的&#xff08;不安全&#xff09;&#xff0c;使用HTTPS加密就能在一定程度上防止数据在传输过程中被…

如何在Pycharm中导入第三方库(以pyecharts为例子)

打开Pycharm 点击右上角文件->设置->项目->pythonProject&#xff08;Python解释器&#xff09; 点击下图号 下一步&#xff1a;在搜索栏中直接搜索第三方包pyecharts并安装即可 以上便为使用Pycharm安装第三方库的全过程。 温馨小提示&#xff0c;如果大家在Pychar…

基于粒子群优化BP神经网络的三分类代码,基于pso+bp的01编码分类识别,PSOBP三分类

目录 摘要 BP神经网络的原理 BP神经网络的定义 BP神经网络的基本结构 BP神经网络的神经元 BP神经网络的激活函数, BP神经网络的传递函数 粒子群算法的原理及步骤 基于粒子群优化BP神经网络的三分类代码,基于pso+bp的01编码分类识别 matlab代码下载链接:基于粒子群优化BP神经…

Linux-基础命令(黑马学习笔记)

Linux的目录结构 Linux的目录结构 Linux的目录结构是一个树形结构 Windows系统可以拥有多个盘符&#xff0c;如C盘、D盘、E盘 Linux没有盘符这个概念&#xff0c;只有一个根目录 /&#xff0c;所有文件都在它下面 Linux路径的描述方式 ● 在Linux系统中&#xff0c;路径之…

[rust] 11 所有权

文章目录 一 背景二 Stack 和 Heap2.1 Stack2.2 Heap2.3 性能区别2.4 所有权和堆栈 三 所有权原则3.1 变量作用域3.2 String 类型示例 四 变量绑定背后的数据交互4.1 所有权转移4.1.1 基本类型: 拷贝, 不转移所有权4.1.2 分配在 Heap 的类型: 转移所有权 4.2 Clone(深拷贝)4.3 …

普中51单片机学习(定时器和计数器)

定时器和计数器 51单片机有两组定时器/计数器&#xff0c;因为既可以定时&#xff0c;又可以计数&#xff0c;故称之为定时器/计数器。定时器/计数器和单片机的CPU是相互独立的。定时器/计数器工作的过程是自动完成的&#xff0c;不需要CPU的参与。51单片机中的定时器/计数器是…

模型 HBG(品牌增长)

系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_总纲目录。品牌增长法。 1 HBG(品牌增长)模型的应用 1.1 江小白使用HBG模型提高品牌知名度和销售额 选择受众市场&#xff1a;江小白的目标客户是年轻人&#xff0c;他们喜欢简单、时尚的产品。因此&#xff0c;江…

Vue3自定义组件v-model双向绑定

无能吐槽一下&#xff0c;虽然用了很多遍v-model&#xff0c;但是还是不得要领&#xff0c;每次看官网都感觉说的不是很清晰&#xff0c;在写的时候还是要查看文档&#xff0c;可能就是不理解原理&#xff0c;这次特意好好写一篇文章&#xff0c;让自己好好理解一下。 自定义一…

python程序设计基础:字符串与正则表达式

第四章&#xff1a;字符串与正则表达式 4.1字符串 最早的字符串编码是美国标准信息交换码ASCII&#xff0c;仅对10个数字、26个大写英文字母、26个小写英文字母及一些其他符号进行了编码。ASCII码采用1个字节来对字符进行编码&#xff0c;最多只能表示256个符号。 随着信息技…

【k8s核心概念与专业术语】

k8s架构 1、服务的分类 服务分类按如下图根据数据服务支撑&#xff0c;分为无状态和有状态 无状态引用如下所示&#xff0c;如果一个nginx服务&#xff0c;删除后重新部署有可以访问&#xff0c;这个属于无状态&#xff0c;不涉及到数据存储。 有状态服务&#xff0c;如redis&a…

备战蓝桥杯之并查集刷题之删除

题目比较模板&#xff0c;但是也扩展了许多以前不知道的知识点&#xff0c;记录一下比较有启发性的题。 目录 1.并查集之删除操作---创点转移&#xff1a; 2.并查集之删除操作---逆向思考&#xff1a; 1.并查集之删除操作---创点转移&#xff1a; 1和3都是并查集的基础操作&…