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.mzph.cn/news/699987.shtml

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

相关文章

IDEA生成Java Doc帮助文档

使用场景 使用IDEA&#xff08;本次使用2020.3版&#xff09;将自己写的常用的工具类打成jar包&#xff0c;安装到maven本地仓库&#xff0c;最后生成对应的doc参考文档。 操作流程 方法一 选中项目 右键 show in Explor&#xff0c;如下图&#xff1a; 选中地址栏 cmd 输入…

无公网IP情况下如何远程查看本地群晖NAS存储的文件资源

文章目录 前言本教程解决的问题是&#xff1a;按照本教程方法操作后&#xff0c;达到的效果是前排提醒&#xff1a; 1. 搭建群晖虚拟机1.1 下载黑群晖文件vmvare虚拟机安装包1.2 安装VMware虚拟机&#xff1a;1.3 解压黑群晖虚拟机文件1.4 虚拟机初始化1.5 没有搜索到黑群晖的解…

Java的编程之旅27——继承

1.继承的简介 继承是面向对象编程中的一个重要概念&#xff0c;指的是一个类可以继承另一个类的属性和方法。被继承的类称为父类或基类&#xff0c;继承这个父类的类称为子类或派生类。 通过继承&#xff0c;子类可以继承父类的属性和方法&#xff0c;使得子类具有相似的行为…

掌握BeautifulSoup4:爬虫解析器的基础与实战【第91篇—BeautifulSoup4】

掌握BeautifulSoup4&#xff1a;爬虫解析器的基础与实战 网络上的信息浩如烟海&#xff0c;而爬虫技术正是帮助我们从中获取有用信息的重要工具。在爬虫过程中&#xff0c;解析HTML页面是一个关键步骤&#xff0c;而BeautifulSoup4正是一款功能强大的解析器&#xff0c;能够轻…

2024年度中国5G随身WiFi品牌排行榜

【中国品牌网中国3C质量评测中心权威榜单联合发布】 第一名&#xff1a;格行 优势&#xff1a;作为随身WiFi行业的佼佼者&#xff0c;格行凭借其15年的物联网行业经验&#xff0c;在技术研发、产品创新及客户服务上均享有盛誉。其5G随身WiFi产品网络稳定&#xff0c;客户满意度…

行为树入门:ROS2 BehaviorTree.CPP Groot2安装与简单使用(有例程)

ROS2安装与学习及其topic学习 BehaviorTree.CPP编译与安装 和 Groot2安装 注意&#xff1a;《ROS2行为树&#xff08;C行为树&#xff09;BehaviorTree.CPP完全图形化开发&#xff0c;完美支持ROS2话题通信》这个例程实现的前提需要建一个sentry_interfaces::msg::RobotHP的m…

Spring Boot 笔记 029 用户模块

1.1 用户信息需要在多个链接使用&#xff0c;所以需要用pinia持久化 1.1.1 定义store import {defineStore} from pinia import {ref} from vue const useUserInfoStore defineStore(userInfo,()>{//定义状态相关的内容const info ref({})const setInfo (newInfo)>{i…

“IT行业职业发展的黄金之路:哪些证书能为你增光添彩?“

文章目录 每日一句正能量前言1、浙大计算机程序设计能力考试证书&#xff08;PAT&#xff09;2、全国计算机等级考试证书(NCRE)3、计算机技术与软件专业资格考试证书&#xff08;软考&#xff09;4、通信专业技术人员职业水平证书5、全国计算机应用水平考试证书&#xff08;NIT…

MySQL学习Day19——索引的数据结构

一、为什么使用索引: 索引是存储引擎用于快速找到数据记录的一种数据结构&#xff0c;就好比一本教课书的目录部分&#xff0c;通过目录中找到对应文章的页码&#xff0c;便可快速定位到需要的文章。MySQL中也是一样的道理&#xff0c;进行数据査找时&#xff0c;首先查看查询…

【深蓝学院】移动机器人运动规划--第6章 模型预测控制(MPC)与运动规划--笔记

0. Outline 1. Reactive Control&#xff08;反应式控制&#xff09; 控制学中的 “Reactive Control” 通常指的是一种控制策略&#xff0c;它依赖于系统对特定事件或变化的即时反应&#xff0c;而不是按照预定的计划或策略行动。这种控制往往是基于当前的传感器输入来做出决…

Mac 上游玩QQ飞车详细教程,IPA砸壳包资源下载安装

最近经过一番折腾终于在 MAC 上成功安装运行了 QQ 飞车&#xff0c;上图&#xff1a; 最后总结下来安装过程其实蛮简单的&#xff0c;但其中有很多卡点和坑所以浪费了很多的时间&#xff0c;特意整理本篇教程供大家参考 大体思路是这样的&#xff0c;先安装 playCover,该软件可…

PostMan使用自带js库base64编码、sha256摘要、环境变量的使用

目录 1、环境变量的使用2、base64编码、sha256摘要、以及脚本的使用3、脚本代码 在请求调试接口的过程中&#xff0c;因为要使用大量相同的参数&#xff0c;使用变量的方式能很大程度上减轻接口调用的工作量 版本说明&#xff1a;Postman for Windows&#xff0c;Version&#…

【Python笔记-设计模式】桥接模式

一、说明 桥接模式是一种结构型设计模式&#xff0c; 主要用于将抽象部分与它的实现部分分离&#xff0c; 从而能在开发时分别使用&#xff0c;使系统更加灵活&#xff0c;易于扩展。 (一) 解决问题 所有 组合类的数量将以几何级数增长 抽象和实现分离&#xff1a;桥接模式可…

数据结构day4

实现创建单向循环链表、创建结点、判空、输出、头插、按位置插入、尾删、按位置删除 loop_list.c #include "loop_list.h" loop_p create_head() {loop_p L(loop_p)malloc(sizeof(loop_list));if(LNULL){printf("空间申请失败\n");return NULL;}L->le…

websocket了解下

websocket请求长啥样 GET /chat HTTP/1.1 Host: example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ Sec-WebSocket-Version: 13 啥是websocket websocket是http的一种&#xff0c;服务器可以主动向客户端推送信息&#xff0c;…

进程 2月24日学习笔记

1.进程: 程序&#xff1a;存放在外存中的一段数据组成的文件 进程&#xff1a;是一个程序动态执行的过程,包括进程的创建、进程的调度、进程的消亡 2.进程相关命令: 1.top 动态查看当前系统中的所有进程信息&#xff08;根据CPU占用率排序&#xff09; PID:唯一识…

Linux---权限管理(ACL权限、特殊位和隐藏属性)

目录 1.ACT权限 1.1什么是ACT权限 1.2ACT图解 2.操作步骤 2.1添加测试目录、用户、组&#xff0c;并将用户添加到组 2.2修改目录的所有者和所属组 2.3设定权限 2.4为临时用户分配权限 2.4.1添加临时用户 2.4.2为临时用户分配特定权限 2.4.3查看目录权限&#xff0c;注…

NPM私服搭建(verdaccio)

官网地址&#xff1a;https://verdaccio.org/ 概述 Verdaccio 是一个流行的 Node.js 包管理器的代理工具&#xff0c;它允许您在本地或私有网络上轻松地创建和管理 npm 包仓库。通过 Verdaccio&#xff0c;开发团队可以建立自己的 npm 包仓库&#xff0c;以更好地控制和管理其依…

使用redisMQ-spring-boot-starter实现消息队列和延时队列

简介 redisMQ-spring-boot-starter是一个轻量级的、基于Redis实现的消息队列中间件&#xff0c;它有如下优点&#xff1a; 开箱即用&#xff0c;你几乎不用添加额外的配置支持消息队列、延时队列&#xff0c;并提供精细化配置参数提供消息确认机制支持虚拟空间&#xff0c;不…

C++ 学习之Map容器

C++ Map容器概念 C++的Map容器是一种关联容器,它提供了一种将键和值相关联的方式。它以键值对的形式存储数据,并根据键的顺序自动进行排序。 Map中的键是唯一的,而值可以重复。你可以使用键来访问对应的值,就像使用索引访问数组中的元素一样。 Map容器的特点如下: 按照…