uview 自定义数字支付键盘功能

心已赠人 2021-07-25 22:53 1517阅读 0赞

作为一个电商的项目，支付功能是必备的，自定义数字支付键盘也是对应的。  
如果是用微信或者支付宝支付，则在支付时，会自动弹出数字键盘。

现在来看看微信和支付宝的支付数字键盘的样式吧……  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
好久没有用支付宝给人转账或者发红包了，支付宝的页面竟然有了这么多选项，真好……

如果要自己做支付页面，则就需要自定义支付数字键盘了，此处用uview中的键盘组件来实现。  
效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
[uview keyboard官网链接：https://www.uviewui.com/components/keyboard.html][uview keyboard_https_www.uviewui.com_components_keyboard.html]

## keyboard组件(支持数字/身份证/车牌号三种) ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]

<template>
    	<view>
    		<u-keyboard ref="uKeyboard" mode="car" v-model="show"></u-keyboard>
    		<u-button @click="show = true">打开</u-button>
    	</view>
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { 
    				show: false
    			}
    		}
    	}
    </script>

## keyboard的基本使用 ##

#### 键盘的类型——mode ####

通过`mode`参数定义键盘的类型，  
`mode = number` (默认值)为数字键盘，此时顶部工具条中间的提示文字为"数字键盘"  
`mode = car`为汽车键盘，此时顶部工具条中间的提示文字为"车牌号键盘"  
`mode = card`为身份证键盘，此时顶部工具条中间的提示文字为"身份证键盘"

#### 控制键盘顶部的工具条——tooltip/tips/show-tips/cancelBtn/confrimBtn ####

通过`tooltip`参数配置是否显示显示顶部的工具条，默认为true  
通过`tips`参数修改工具条中间的提示文字  
通过`show-tips`可以控制是否显示工具条中间的文字  
通过`cancelBtn`参数配置是否显示工具条左边的"取消"按钮  
通过`confirmBtn`参数配置是否显示工具条右边的"完成"按钮

#### 是否显示键盘的点(".")按键——dot-enabled ####

该按键通过`dot-enabled`(默认为true)参数配置，只在`"mode = number"`时生效，因为车牌号和身份证键盘，用不到"."这个按键

#### 是否打乱按键的顺序——random ####

如果配置`random`参数为`true`的话，每次打开键盘，按键的顺序都是随机的，该功能默认是关闭的

#### 键盘的弹出与收起——v-model ####

v-model绑定一个值为布尔值的变量控制键盘的弹出与收起  
**注意**：如果一进入页面就要打开键盘，需要在`onReady`生命周期函数中触发键盘的弹出和关闭，如果放在onLoad生命周期函数中，此时键盘组件还没有创建完成，如果要使用可以用this.$nextTick来处理。

<template>
    	<u-keyboard mode="number" v-model="show"></u-keyboard>
    </template>
    
    <script>
    	export default { 
    		onReady() { 
    			// 如果想一进入页面就打开键盘，请在此生命周期调用
    			this.show = true;
    		},
    		onLoad() { 
    			// 不应在此调用，因为此时u-keyboard组件尚未创建完成
    			// this.show = true;
    		}
    	}
    </script>

#### 如何监听键盘按键被点击？ ####

输入值是通过组件的`change`事件实现的，组件内部每个按键被点击的时候，组件就会发出一个`change`事件，回调参数为点击的按键的值。  
通过`backspace`事件监听键盘退格键的点击，通过修改父组件的值实现退格的效果，见下方示例:  
**注意**：点击退格键(也即删除键)不会触发`change`事件

键盘输入值的重点：

1.  change触发时，可以通过`this.value+=val`的方式进行拼接展示
2.  退格键删除时，也就是`backspage`时,通过字符串的截取方式去掉最后一位。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]

<template>
    	<u-keyboard mode="number" @change="valChange" @backspace="backspace" v-model="show"></u-keyboard>
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { 
    				value: '',
    				show: false
    			}
    		},
    		methods: { 
    			// 按键被点击(点击退格键不会触发此事件)
    			valChange(val) { 
    				// 将每次按键的值拼接到value变量中，注意+=写法
    				this.value += val;
    				console.log(this.value);
    			},
    			// 退格键被点击
    			backspace() { 
    				// 删除value的最后一个字符
    				if(this.value.length) this.value = this.value.substr(0, this.value.length - 1);
    				console.log(this.value);
    			}
    		}
    	}
    </script>

### 是否显示遮罩——mask ###

当您使用键盘时，可能会不想显示遮罩，这时可以配置`mask`参数为`false`即可  
`mask-close-able`:是否允许点击遮罩收起键盘

#### 是否开启底部安全区适配——safe-area-inset-bottom ####

部分手机比如苹果手机部分型号底部会有条黑线，如果不进行处理，则弹窗的部分内容会被遮挡，而且点击弹窗底部的按钮时会误触发，因此有个专门针对这个问题的底部安全区，设置为true，则会将弹窗部分抬高。

## 案例代码 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]

<template>
    	<view>
    		<view class="u-padding-40">
    			<u-button type="success" @click="showPop(true)">
    				<u-icon name="red-packet"></u-icon>
    				<text class="u-padding-left-10">发送1.00元红包</text>
    			</u-button>
    		</view>		
    		<u-keyboard 
    			default=""
    			ref="uKeyboard" 
    			mode="number" 
    			:mask="true" 
    			:mask-close-able="false"
    			:dot-enabled="false" 
    			v-model="show"
    			:safe-area-inset-bottom="true"
    			:tooltip="false"
    			@change="onChange"
    			@backspace="onBackspace">
    			<view>
    				<view class="u-text-center u-padding-20 money">
    					<text>1.00</text>
    					<text class="u-font-20 u-padding-left-10">元</text>
    					<view class="u-padding-10 close" data-flag="false" @tap="showPop(false)">
    						<u-icon name="close" color="#333333" size="28"></u-icon>
    					</view>
    				</view>
    				<view class="u-flex u-row-center">
    					<u-message-input 
    						mode="box" 
    						:maxlength="6"
    						:dot-fill="true"
    						v-model="password"
    						:disabled-keyboard="true"
    						@finish="finish"
    					></u-message-input>
    				</view>
    				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
    			</view>
    		</u-keyboard>
    	</view>
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { 
    				show:false,
    				password:''
    			}
    		},
    		onLoad() { 
    			
    		},
    		methods: { 
    			onChange(val){ 
    				if(this.password.length<6){ 
    					this.password += val;
    				}
    				
    				if(this.password.length>=6){ 
    					this.pay();
    				}
    			},
    			onBackspace(e){ 
    				if(this.password.length>0){ 
    					this.password = this.password.substring(0,this.password.length-1);
    				}
    			},
    			pay(){ 
    				uni.showLoading({ 
    					title:'支付中'
    				})
    				
    				setTimeout(()=>{ 
    					uni.hideLoading();
    					this.show = false;
    					uni.showToast({ 
    						icon:'success',
    						title:'支付成功'
    					})
    				},2000);
    			},
    			showPop(flag = true){ 
    				this.password = '';
    				this.show = flag;
    			},
    			finish(){ 
    				console.log(11111)
    			}
    		}
    	}
    </script>
    
    <style lang="scss">
    	.money{ 
    		font-size: 80rpx;
    		color: $u-type-warning;
    		position: relative;
    		
    		.close{ 
    			position: absolute;
    			top: 20rpx;
    			right: 20rpx;
    			line-height: 28rpx;
    			font-size: 28rpx;
    		}
    	}
    	.tips{ 
    		color:$u-tips-color;
    	}
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/fe745247c06c4afeb4ccd9faf02a0db7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/137b5d325c0a4e46b21982df870684f5.png
[uview keyboard_https_www.uviewui.com_components_keyboard.html]: https://www.uviewui.com/components/keyboard.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20210725/c598c2f374ee408bb641ce59d91df00a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20210725/0986b4315bd64d7aa3bf67322db5374c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]: /images/20210725/4f89b9d9062d42108c29daf02c22c18e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]: /images/20210725/c9a2954003a24cd4be92c63fcb2994cc.png