uniapp: 自定义金额输入键盘组件

摘要：         接了一个项目，说是做一个线下通过扫描二维码进行收款的操作。这就需要写一个收款的...

        接了一个项目，说是做一个线下通过扫描二维码进行收款的操作。这就需要写一个收款的金额键盘布局，市面上常见的有微信支付，支付宝支付，仿照微信的样式做了一个金额输入键盘布局。但是也有区别。总不能完全仿照，要不然也太没有特色了点。感觉这是第一次做这个东西，很有成就感，就想着把他分享出来。   

完整代码示例如下：

<template>
<view>
<cu-custom :isBack="true">
<block slot="backText">返回</block>
<block slot="content">
{{data.title}}
</block>
</cu-custom>
<view>
<image :src="data.shop.mentouzhao" mode="widthFix"></image>
<text>{{data.shop.dianpumingchen}}</text>
</view>
<view v-if="false">
<input type="digit" placeholder-class="placeholder-input" placeholder="￥ 输入付款金额">
</view>
<view>
<view>
<view data-element="input">
<text v-if="amount" data-element="input" >{{amount}}</text>
<view :class="{'input-focus': focus}"></view>
<text v-if="!amount" data-element="input">￥ 请输入金额</text>
</view>
<text>元</text>
</view>
</view>
<view :class="{show: focus}"> 
<view :class="item.class" v-for="(item,index) in keys" :key="index" @click="handleCatchTap(item)">
<image v-if="item.value === 'c'" src="@/static/DurkBlue/shop/backspace.png" mode="widthFix" />
<text v-else>{{item.value}}</text>
</view>
</view>
</view>
</template>
<script>
import core from '@/core.js';
export default{
data(){
return{
focus: !0,
keys:[{ value: "1" },{ value: "2" },{value:"3" },{value:"c",class:"item-delete" }, 
{value:"4"},{value:"5" },{value:"6" },{value:"7"},{value:"8" },{value:"9" },
{value: "0", class:"item-zero" },{value:"."},{value:"付款",class: "item-btn"},
],
amount:'',
data:{
title:'收款码',
shop:{}
},
postdata:{
sid:0,//店铺id
}
}
},
onLoad(options){
// if(typeof(options.sid)=='undefined' || !options.sid) return core.toast('无效的店铺ID','back');
// this.postdata.sid = parseInt(options.sid);
this.postdata.sid = 1;
this.initData();
},
methods:{
handleCatchTap(item) {
let self = this;
let content = self.amount;
switch (item.value) {
case "付款":
let s =5;
break;
case "c":
// 退格清除
content = content.substr(0, content.length - 1);
break;
case ".":
if(content.length < 11 && content.indexOf(".") === -1) {
//如果字符串里有小数点了， 则不能继续输入小数点， 且控制最多可输入10个字符串
if(content.length < 1) {
//如果小数点是第一个输入， 那么在字符串前面补上一个0， 让其变成0.
content = "0.";
} else {
//如果不是第一个输入小数点， 那么直接在字符串里加上小数点 
content += "."
}
}
break;
default:
let index = content.indexOf(".");
let zeroIndex = content.indexOf("0");
//小数点在字符串中的位置
if (index === -1 || content.length - index !==3){
//这里控制小数点只保留两位
if(content.length < 11) {
//控制最多可输入10个字符串
content += item.value;
}
}
//如果第一位数是0时处理
if(zeroIndex === 0 && index === -1) {
content = "0." + item.value;
}
}
self.amount = content;
},
handlePageClick(e){
let self = this;
self.focus = e.target.dataset.element === "input";
},
initData(){
let that = this;
core.post('shop/collectioncode',(res)=>{
if(typeof(res.message)!='undefined' && typeof(res.type)!='undefined') return core.report(res);
that.data = res;
},{data:this.postdata});
}
},
}
</script>
<style scoped>
@import url('@/durkblue/css/shop/collectioncode.css');
</style>