本文作者:DurkBlue

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

uniapp: 自定义金额输入键盘组件摘要:         接了一个项目,说是做一个线下通过扫描二维码进行收款的操作。这就需要写一个收款的...

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


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


完整代码示例如下:


<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>


此篇文章由DurkBlue发布,转载请注明来处
文章投稿或转载声明

来源:DurkBlue版权归原作者所有,转载请保留出处。本站文章发布于 07-06
温馨提示:文章内容系作者个人观点,不代表DurkBlue博客对其观点赞同或支持。

赞(1)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论取消回复

快捷回复:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog

评论列表 (暂无评论,362人围观)参与讨论

还没有评论,来说两句吧...