uniapp 自定义类微信支付键盘 （微信小程序)

效果图 更新于 25/1/10

未输入

输入金额后

代码:

	<view class="ImitationsWXKeyboards">
			<view class="ImitationsWXKeyboardsPdding flex jsb">
				<view class="appreciatePrice">
					<view class="appreciatePriceTitle">
						赞赏金额
					</view>
					<view class="appreciatePriceInput flex ac">
						￥<input v-model="otherPrice" type="text" disabled class="appreciatePriceInputs" />
					</view>
					<view class="minAppreciatePrice">
						最低赞赏￥{{min_rewardPirce}}
					</view>
				</view>
				<view class="">
					<view class="keyboard flex ac  jc">
						<view class="keyboardLeft">
							<!-- 19数字 -->
							<view class="flex flexwrap">
								<view class="keyboardLeftNumber flex jc ac" v-for="(item,index) in keyboard"
									:key="index" @click="otherPriceinp(item)">
									{{item}}
								</view>
							</view>
							<!-- 0和点的按键 -->
							<view class="keyboardLeftZooDrop flex jsb ac">
								<view class="keyboardLeftZoo  flex jc ac" @click="otherPriceinp(0)">
									0
								</view>
								<view class="keyboardLeftDrop  flex jc ac" @click="otherPriceinp('.')">
									.
								</view>
							</view>
						</view>
						<!-- 右边确定和删除 -->
						<view class="keyboardRight">
							<view class="keyboardRightDel  flex jc ac"  @click="otherPriceinp('x')">
								X
							</view>
							<view class="keyboardRightConfirm  flex jc ac" v-if="isCanPlay" @click.stop="confirmPay">
								确定
							</view>
							<view class="keyboardRightConfirm keyboardRightConfirmNo flex jc ac" v-else>
								确定
							</view>
						</view>
					</view>
					<view class="liness">

					</view>
				</view>

			</view>
		</view>

css

	.ImitationsWXKeyboards {
		.ImitationsWXKeyboardsPdding {
			height: 55vh;
			box-sizing: border-box;
			padding: 0;
			flex-direction: column;
			padding: 30rpx;
			box-sizing: border-box;

			.appreciatePrice {
				padding: 30rpx;
				box-sizing: border-box;

				.appreciatePriceTitle {
					font-size: 24rpx;
				}

				.appreciatePriceInput {
					padding: 30rpx 0rpx;
					box-sizing: border-box;
					border-bottom: 1rpx solid #f5f5f5;
					font-size: 50rpx;
					font-weight: bold;

					.appreciatePriceInputs {
						margin-left: 10rpx;
					}
				}

				.minAppreciatePrice {
					color: #999;
					margin-top: 20rpx;
					font-size: 24rpx;
				}
			}



			.keyboard {
				padding: 20rpx;
				box-sizing: border-box;
				background: #f5f5f5;
				border-radius: 8rpx;

				.keyboardLeft {
					width: 480rpx;
					height: 380rpx;

					//宽度不一样每个块的高度也不一样，如需请自行计算
					.keyboardLeftNumber {
						width: 146.66rpx;
						height: 80rpx;
						background: #fff;
						font-size: 30rpx;
						font-weight: bold;
						border-radius: 8rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;

					}

					.keyboardLeftNumber:nth-child(3n+3) {
						margin-right: 0 !important;
					}

					.keyboardLeftZooDrop {
						.keyboardLeftZoo {
							width: 313.33rpx;
							background: #fff;
							font-size: 30rpx;
							font-weight: bold;
							border-radius: 8rpx;
							height: 80rpx;
						}

						.keyboardLeftDrop {
							width: 146.66rpx;
							background: #fff;
							font-size: 30rpx;
							font-weight: bold;
							border-radius: 8rpx;
							height: 80rpx;
						}
					}

				}

				.keyboardRight {
					width: 150rpx;
					height: 380rpx;
					margin-left: 20rpx;

					.keyboardRightDel {
						width: 146.66rpx;
						background: #fff;
						font-size: 30rpx;
						font-weight: bold;
						border-radius: 8rpx;
						height: 80rpx;
					}

					.keyboardRightConfirm {
						width: 146.66rpx;
						background: #fff;
						font-size: 30rpx;
						font-weight: bold;
						border-radius: 8rpx;
						height: 272rpx;
						background: #4ac163;
						margin-top: 20rpx;
						color: #fff;
					}

					.keyboardRightConfirmNo {
						opacity: 0.1;
					}
				}
			}

		}
	}

一些公共样式

	.flex {
		display: flex;
	}

	.jc {
		justify-content: center;
	}

	.ac {
		align-items: center;
	}
	
	.jsb {
		justify-content: space-between;
	}
	
	.flexwrap {
		flex-wrap: wrap;
	}
	

	
	
	.je {
		justify-content: flex-end;
	}
	
	.jsa {
		justify-content: space-around;
	}

js

keyboard: [1, 2, 3, 4, 5, 6, 7, 8, 9],
min_rewardPirce:0.01,
isCanPlay:false,
otherPrice:''



methods部分
			//其他金额输入
			otherPriceinp(i) {
				if(i == "x" && this.otherPrice == ''){
					return
				}
				if (i == "x" && this.otherPrice != '') {
					this.otherPrice = this.otherPrice.substring(0, this.otherPrice.length - 1)
					this.funIsCanPay()
					return
				}
				if (i == "." && this.otherPrice.includes('.')) {
					return
				}
				if (i == "." && this.otherPrice == '') {
					this.$publicfun.showToast('请输入金额')
					return
				}
				let ii = i + '';
				this.otherPrice += ii;
				this.funIsCanPay()// 每次输入都判断是否可以支付
			},
			//判断是否可以支付
			funIsCanPay() {
				if ((this.otherPrice * 1) >= (this.min_rewardPirce * 1)) {
					console.log(this.otherPrice, this.min_rewardPirce, '大于最低金额');
					this.isCanPlay = true;
				} else {
					this.isCanPlay = false;
				}
			},
			//确认支付
			confirmPay() {
				// console.log((this.otherPrice * 1));
				// return
				if ((this.otherPrice * 1) == 0) {
					uni.showToast({
						title:'请输入正确的金额',
						icon:"none"
					})
					return
				}
				if (!this.isCanPlay) {
					uni.showToast({
						title:'打赏金额最少为' + this.min_rewardPirce,
						icon:"none"
					})
					return
				}
				//确认支付接口
				this.fun_reward((this.otherPrice * 1))
			},