uniapp-提现功能(demo)

news/发布时间2024/5/15 2:12:48

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

首先用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.bcls.cn/GNMu/3087.shtml

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

相关文章

OpenAI Sora视频模型技术原理报告解读

▌01. OpenAI Sora 视频生成模型技术报告总结 •不管是在视频的保真度、长度、稳定性、一致性、分辨率、文字理解等方面。 •技术细节写得比较泛&#xff08;防止别人模仿&#xff09;大概就是用视觉块编码&#xff08;visual patch&#xff09;的方式&#xff0c;把不同格…

第3.5章:StarRocks数据导入——Broker Load

注&#xff1a;本篇文章阐述的是StarRocks-3.2版本的Broker Load导入机制 一、概述 Broker Load导入方式支持从HDFS类的外部存储系统&#xff08;例如&#xff1a;HDFS、阿里OSS、腾讯COS、华为云OBS等&#xff09;&#xff0c;支持Parquet、ORC、CSV、及 JSON 四种文件格式&a…

【.NET Core】C#编程规范

【.NET Core】C#编程规范 文章目录 【.NET Core】C#编程规范一、概述1.1 结构清晰第一1.2 简洁之风1.3 代码风格保持一致性 二、命名约定三、类型参数命名指南3.1 请使用描述性名称命名泛型类型参数&#xff0c;除非单个字面名称完全具有自我说明性且描述性名称不会增加任何作用…

论文阅读——SimpleClick

SimpleClick: Interactive Image Segmentation with Simple Vision Transformers 模型直接在VIT上增加交互是分割 用VIT MAE方法训练的预训练权重 用交互式分割方法微调&#xff0c;微调流程&#xff1a; 1、在当前分割自动模拟点击&#xff0c;没有人为提供的点击 受到RITM启发…

数字化转型导师坚鹏:政府数字化转型之数字化新技术解析与应用

政府数字化转型之数字化新技术解析与应用 课程背景&#xff1a; 数字化背景下&#xff0c;很多政府存在以下问题&#xff1a; 不清楚新技术的发展现状&#xff1f; 不清楚新技术的重要应用&#xff1f; 不清楚新技术的成功案例&#xff1f; 课程特色&#xff1a; 有…

人工智能_PIP3安装使用国内镜像源_安装GIT_普通服务器CPU_安装清华开源人工智能AI大模型ChatGlm-6B_002---人工智能工作笔记0097

接着上一节来看,可以看到,这里 创建软连接以后 [root@localhost Python-3.10.8]# ln -s /usr/local/python3/bin/python3 /usr/bin/python3 [root@localhost Python-3.10.8]# python3 -V Python 3.10.8 [root@localhost Python-3.10.8]# pwd /usr/local/Python-3.10.8 [root@…

1 Nacos数据持久化方式

Nacos 支持两种数据持久化方式&#xff0c;一种是利用内置的数据库&#xff0c;另一种是利用外置的数据源。 1、内置数据库支持 Nacos 默认内置了一些数据存储解决方案&#xff0c;如内嵌的 Derby 数据库。 这种内置方式主要用于轻量级或测试环境。 2、外置数据库支持 对于生…

vue Threejs实现任意画线(鼠标点击画线)

Threejs实现任意画线(鼠标点击画线) 鼠标左键单击添加点鼠标右键回退到上一个点,并继续画按住shift可以画平行于x轴或平行于z轴的线按Esc完成画线

安全名词解析-攻防演练

为方便您的阅读&#xff0c;可点击下方蓝色字体&#xff0c;进行跳转↓↓↓ 01 攻防演练 01 攻防演练 《网络安全法》中明确提出&#xff0c;“定期组织关键信息基础设施的运营者进行网络安全应急演练&#xff0c;提高应对网络安全事件的水平和协同配合能力。”攻防演练目前已经…

深度学习——概念引入

深度学习 深度学习简介深度学习分类根据网络结构划分&#xff1a;循环神经网络卷积神经网络 根据学习方式划分&#xff1a;监督学习无监督学习半监督学习 根据应用领域划分&#xff1a;计算机视觉自然语言处理语音识别生物信息学 深度学习简介 深度学习&#xff08;Deep Learni…

pclpy 可视化点云(多窗口可视化、单窗口多点云可视化)

pclpy 可视化点云&#xff08;多窗口可视化、单窗口多点云可视化&#xff09; 一、算法原理二、代码三、结果1.多窗口可视化结果2.单窗口多点云可视化 四、相关数据五、问题与解决方案1.问题2.解决 一、算法原理 原理看一下代码写的很仔细的。。目前在同一个窗口最多建立2个窗…

LNMP搭建discuz论坛

discuz论坛是一种网络论坛软件&#xff0c;也称bbs&#xff0c;它是一种用于在互联网上建立论坛社区的程序系统。只哟中功能强大的论坛软件&#xff0c;可以帮助用户建立一个专业、完善的论坛社区&#xff0c;并且可以实现多种功能&#xff0c;如搭建用户注册、登录、查看主题、…

定制红酒:如何开启定制红酒之旅,享受个性化服务

在追求品质生活的今天&#xff0c;人们越来越注重个性化的服务和产品。云仓酒庄洒派定制红酒&#xff0c;就是为满足消费者的这一需求而生。它提供了一个平台&#xff0c;让消费者可以根据自己的喜好和需求&#xff0c;定制专属的红酒&#xff0c;享受个性化的服务。那么&#…

运维的利器–监控–zabbix–第二步:建设–部署zabbix agent

文章目录 监控客户端部署及添加主机一、在 zabbix-server 安装客户端二、在本机和其他linux主机安装zabbix agent客户端1、安装2、配置3、启动并开机自启4、添加主机创建主机组创建主机等一会或重启zabbix-server查看配置是否成功 三、在其他windows上安装zabbix agent客户端下…

蓝桥杯嵌入式第12届真题(完成) STM32G431

蓝桥杯嵌入式第12届真题(完成) STM32G431 题目 程序 main.c /* USER CODE BEGIN Header */ /********************************************************************************* file : main.c* brief : Main program body**************************…

Android进阶(二十九) 走近 IntentFilter

文章目录 一、什么是IntentFilter &#xff1f;二、IntentFilter 如何过滤隐式意图&#xff1f;2.1 动作测试2.2 类别测试2.3 数据测试 一、什么是IntentFilter &#xff1f; 如果一个 Intent 请求在一片数据上执行一个动作&#xff0c; Android 如何知道哪个应用程序&#xf…

乐优商城(六)ElasticSearch搜索二

1.索引库数据导入 之前我们学习了Elasticsearch的基本应用。今天就学以致用&#xff0c;搭建搜索微服务&#xff0c;实现搜索功能。 1.1.创建搜索服务 创建module&#xff1a; Pom文件&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <…

计算机网络-无线通信网

1.各种移动通信标准 1G&#xff1a;第一代模拟蜂窝&#xff1a;频分双工FDD。2G&#xff1a;第二代数字蜂窝 I.GDM&#xff08;全球移动通信&#xff09;采用TDMA。II.CDMA&#xff08;码分多址通信&#xff09;。2.5G&#xff1a;第2.5代通用分组无线业务GPRS。2.75G&#xf…

【Python】2019年蓝桥杯省赛真题——完全二叉树的权值

蓝桥杯 2019 省 A&B&#xff1a;完全二叉树的权值 题目描述 给定一棵包含 N N N 个节点的完全二叉树&#xff0c;树上每个节点都有一个权值&#xff0c;按从上到下、从左到右的顺序依次是 A 1 , A 2 , ⋯ A N A_1,A_2, \cdots A_N A1​,A2​,⋯AN​&#xff0c;如下图所…

第10讲用户登录SpringSecurity查库实现

用户登录SpringSecurity查库实现 security包下新建MyUserDetailServiceImpl Service public class MyUserDetailServiceImpl implements UserDetailsService {AutowiredSysUserService sysUserService;Overridepublic UserDetails loadUserByUsername(String username) throw…
推荐文章