小程序提现输入金额限制,好久没写小程序了,写的有点捞,凑合看吧,没想到更好得办法,就写了一堆判断然后限制吧,有更好得方法可以交流一哈。。
弹窗用的van-popup
这里注意:
type="digit"
开启带小数键盘,这个在微信开发者工具里没效果,写上在真机上验证
<!-- 提现弹窗 -->
<van-popup
custom-class="withdrawal-wrap"
show="{{ isWithdrawal }}"
round
bind:close="onClose">
<view class="withdrawal_title">
<text>提现金额:</text>
</view>
<view class="withdrawal_popup">
<van-cell-group>
<van-field
value="{{ amount }}"
type="digit"
center
clearable
label="¥"
placeholder="可提现金额{{basicAmountInfo.accountBalance}}元"
border="{{ false }}"
use-button-slot
placeholder-style="color:#AAAAAA;font-size:28rpx;"
bind:input="getInputNum"
>
<view
slot="button"
size="small"
style="color: #AD9282;font-size:22rpx;font-weight: 500;"
catchtap="onAllWithdrawal"
>
全部提现
</view>
</van-field>
</van-cell-group>
</view>
<view class="withdrawal_toast">满{{basicAmountInfo.minWithdrawalAmount}}元可发起提现</view>
<view class="withdrawal_btn">
<view class="cancel_btn" bindtap="onCancel">取消</view>
<view class="confirm_btn" bindtap="onConfirm">确认</view>
</view>
</van-popup>
检验input输入金额值
// input输入中
getInputNum (e) {
let amount = e.detail
let num = null
// 小数点后最多只能输入两位
num = amount.replace(new RegExp('^(\\d+\\.\\d{2}).+'), '$1')
// 小数点开头得话,让前面加个0 eg: 0.xx
const startPoint = /^\./g
if (startPoint.test(num)) {
num = amount.replace(startPoint, '0.')
}
// 若没有小数点,前面输入多个0,去掉0取整
// if(num有值 && 没有小数点 && 不等于'0')
if (num && !num.includes('.') && num !== '0') {
num = +num
}
// 若出现多个小数点,则替换为1个
const morePoint = /\.+(\d*|\.+)\./g
if (morePoint.test(num)) {
num = amount
.replace(/\.{2,}/g, ".")
.replace(".", "$#$")
.replace(/\./g, "")
.replace("$#$", ".")
}
this.setData({
amount: num
})
}
最终输出效果:正常得数字eg: 1、22、333等,以及正常的最多两位小数 eg: 0.12、10.11等
有点不好的是,因为都用的replace都是输完之后会闪一下,体验有点不好,有更好办法的话可以分享给我!!!
调试期间遇到很多问题,工具占一半,有的改完值没效果,可能需要重新编译,有的就完全没效果,但是在手机上是有效果的
微信开发者工具:真不咋滴!!!建议都在真机上测试最终结果!!!