支付键盘、密码键盘（微信键盘、支付宝键盘），支持多端

更新记录

1.0.3（2023-11-22）

调整软键盘样式

1.0.2（2023-11-22）

修复键盘兼容问题

1.0.1（2023-11-22）

支付键盘第一版欢迎各位大佬提出宝贵意见

平台兼容性

Vue2	Vue3
√	×

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 3.6.0 app-vue	×	√	√	√	√	√

钉钉小程序	快手小程序	飞书小程序	京东小程序
√	√	√	√

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	√	√	√	√	√

# 微信支付、支付宝支付页面开源版 [uni-app端]

插件介绍

支付键盘插件，是2023年全新推出的一款高性能、高适配、应用范围广的性能的插件，可学习可商用，让您在自己的系统里面快速搭建。

如果对您有帮助，您可以点右上角 “Star” 收藏一下 ，获取第一时间更新，谢谢！

基础使用示例

<template>
<view class="container">
    <!-- 头部内容 -->
    <view class="page-header">
        <view class="page-header_title">
            <text>付款给个人</text>
        </view>
        <view class="page-header_subtitle">
            <text>杨某（*某）</text>
        </view>
    </view>
    <!-- 身体部分 -->
    <view class="page-content">
        <view class="page-content_title">
            <text>金额</text>
        </view>
        <view class="page-content_input" @click="handleOpenKeyboard">
            <text class="unit">￥</text>
            <text class="price">{{ price }}</text>
        </view>
    </view>
    <!-- 软键盘 -->
    <yz-keyboard ref="yzkeyboard" @change="onPriceChange" @confirm="onPriceConfirm"></yz-keyboard>
</view>
</template>
<script>
import yzkeyboard from '@/components/yz-keyboard/yz-keyboard.vue';
export default {
    components: {
        yzkeyboard
    },
    data() {
        return {
            // 当前金额
            price: ''
        }
    },
    methods: {
        // 打开键盘事件
        handleOpenKeyboard(){
            this.$refs.yzkeyboard.handleOpen()
        },
        /**
         * 金额值变事件
         * @param {String} val 金额
        */
        onPriceChange(newval,oldval) {
            const app = this
            app.price = newval
        },
        /**
         * 键盘付款事件
        */
        onPriceConfirm(val) {
            uni.showToast({
                title: '请执行付款操作',
                icon: 'success',
                mask: true,
                duration: 1500
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.page-header{
    width: 90%;
    height: 90rpx;
    padding: 30rpx 0rpx;
    margin: auto;
    &_title{
        font-size: 32rpx;
        font-weight: 700;
        color: #000;
    }
    &_subtitle{
        font-size: 24rpx;
        color: #555;
        margin-top: 4rpx;
    }
}   
.page-content{
    width: 100%;
    padding: 0rpx 5%;
    box-sizing: border-box;
    display: inline-block;
    height: calc(100vh - 150rpx);
    background-color: #fff;
    border-radius: 36rpx 36rpx 0rpx 0rpx;
    &_title{
        margin-top: 60rpx;
        font-size: 24rpx;
        color: #555;
    }
    &_input{
        display: inline-flex;
        border-bottom: 1rpx solid #f7f7f7;
        font-weight: bold;
        align-items: flex-start;
        text{
            font-size: 56rpx;
        }
        .price{
            font-size: 80rpx;
            margin-top: -10rpx;
        }
        .line{
            width: 2px;
            height: 80rpx;
            margin-left: 2rpx;
        }
        .line-active{    
            margin-top: 10rpx;
            background: #00c250;
            animation:cursorImg 1s infinite steps(1, start);
            @keyframes cursorImg {
                0%, 100% {
                    opacity: 0;
                }
                50% {
                    opacity: 1;
                }
            }
        }
    }
}
</style>

高级使用示例（如效果图）

<template>
    <view class="container">
        <!-- 头部内容 -->
        <view class="page-header">
            <view class="page-header_title">
                <text>付款给个人</text>
            </view>
            <view class="page-header_subtitle">
                <text>杨某（*某）</text>
            </view>
        </view>
        <!-- 身体部分 -->
        <view class="page-content">
            <view class="page-content_title">
                <text>金额</text>
            </view>
            <view class="page-content_input" @click="handleOpenKeyboard">
                <text class="unit">￥</text>
                <text class="line" :class="selectedIndex == -1 ? 'line-active' : ''" @click="handleLineChange(-1)"></text>
                <block v-for="(item,index) in priceArr" :key="index">
                    <text class="price">{{ item }}</text>
                    <text class="line" :class="index == selectedIndex ? 'line-active' : ''" @click="handleLineChange(index)"></text>
                </block>
            </view>
        </view>
        <!-- 软键盘 -->
        <yz-keyboard ref="yzkeyboard" :selected-index="selectedIndex" @change="onPriceChange" @confirm="onPriceConfirm"></yz-keyboard>
    </view>
</template>

<script>
import yzkeyboard from '@/components/yz-keyboard/yz-keyboard.vue';
export default {
    components: {
        yzkeyboard
    },
    data() {
        return {
            // 当前金额
            price: '',
            // 光标所在位置
            selectedIndex: -1
        }
    },
    computed: {
        // 金额数组
        priceArr() {
            const newPriceArr = this.price.split("")
            return newPriceArr
        }
    },
    methods: {
        // 打开键盘事件
        handleOpenKeyboard(){
            this.$refs.yzkeyboard.handleOpen()
        },
        // 切换竖线事件
        handleLineChange(index){
            const app = this
            app.selectedIndex = index
        },
        /**
         * 金额值变事件
         * @param {String} val 金额
        */
        onPriceChange(newval,oldval){
            const app = this
            app.price = newval
            this.selectedIndex = 
            newval.length < oldval.length ? 
                newval.length > this.selectedIndex ? 
                oldval[this.selectedIndex + 1] == '.' || oldval[this.selectedIndex - 1] ? 
                Number(this.selectedIndex) - 1 : Number(this.selectedIndex) : 
                newval.length - 1
            : newval == '0.' && this.selectedIndex == -1 ? Number(this.selectedIndex) + 2 : Number(this.selectedIndex) + 1 
        },
        /**
         * 键盘付款事件
        */
        onPriceConfirm(){
            uni.showToast({
                title: '请执行付款操作',
                icon: 'success',
                mask: true,
                duration: 1500
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.page-header{
    width: 90%;
    height: 90rpx;
    padding: 30rpx 0rpx;
    margin: auto;
    &_title{
        font-size: 32rpx;
        font-weight: 700;
        color: #000;
    }
    &_subtitle{
        font-size: 24rpx;
        color: #555;
        margin-top: 4rpx;
    }
}   
.page-content{
    width: 100%;
    padding: 0rpx 5%;
    box-sizing: border-box;
    display: inline-block;
    height: calc(100vh - 150rpx);
    background-color: #fff;
    border-radius: 36rpx 36rpx 0rpx 0rpx;
    &_title{
        margin-top: 60rpx;
        font-size: 24rpx;
        color: #555;
    }
    &_input{
        display: inline-flex;
        border-bottom: 1rpx solid #f7f7f7;
        font-weight: bold;
        align-items: flex-start;
        text{
            font-size: 56rpx;
        }
        .price{
            font-size: 80rpx;
            margin-top: -10rpx;
        }
        .line{
            width: 2px;
            height: 80rpx;
            margin-left: 2rpx;
        }
        .line-active{    
            margin-top: 10rpx;
            background: #00c250;
            animation:cursorImg 1s infinite steps(1, start);
            @keyframes cursorImg {
                0%, 100% {
                    opacity: 0;
                }
                50% {
                    opacity: 1;
                }
            }
        }
    }
}
</style>

组件参数

 /**
 * 数字键盘组件
 * @property {Number} duration - 弹出动画时长，默认为300
 * @property {Number} type - 键盘类型，默认为1微信、2支付宝
 * @property {Number} maxNumber - 最大数字，默认为1000000
 * @property {Number} selectedIndex - 光标所在位置，默认为-1
 * @property {String} technicalSupport - 技术支持，默认为杨某提供技术支持
 * @property {String} confirmText - 确认按钮文字，默认为付款
 * @property {Object} confirmStyle - 技术支持，默认为{ backgroundColor: '#04be02' } 
 * @event {Function} change - 数字改变触发，参数为数字
 * @event {Function} confirm - 付款时触发，参数为数字
 * @event {Function} hide - 关闭键盘触发，参数为空
 */

欢迎合作

目前本人现有成熟系统加油小程序(支持微信小程序端、h5端、支付宝生活号等)、校园收费小程序，欢迎前来咨询
作者微信：kepa9927
作者电话：17635292914

加油项目演示地址：用户端加油地址

支付键盘、密码键盘（微信键盘、支付宝键盘），支持多端键盘

更新记录

1.0.3（2023-11-22）

1.0.2（2023-11-22）

1.0.1（2023-11-22）

平台兼容性

插件介绍

基础使用示例

高级使用示例（如效果图）

组件参数

欢迎合作

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

支付键盘、密码键盘（微信键盘、支付宝键盘），支持多端 键盘

更新记录

1.0.3（2023-11-22）

1.0.2（2023-11-22）

1.0.1（2023-11-22）

平台兼容性

插件介绍

基础使用示例

高级使用示例（如效果图）

组件参数

欢迎合作

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

Modal title

支付键盘、密码键盘（微信键盘、支付宝键盘），支持多端键盘