uniapp 自定义弹窗与指纹识别

 uniapp 指纹识别加自定义弹窗

参考自uniapp 插件--指纹模块，感谢！！！

 

<template>
    <view class="box">
        <button type="primary" @tap="fingerprint()" :disabled="disabled">按下开始识别指纹</button>
        <view class="mask" v-show="popup" @tap="cancelbox()">
            <view class="content">
                <image :src="zhiwenimg" mode="" class="imagestyle"></image>
                <text class="text">{{zhiwentext}}</text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                result: "",
                disabled: false,
                popup: false,
                zhiwentext: '指纹识别',
                zhiwenimg: require('@/static/images/zhiwen.png')
            }
        },
        onLoad() {
            // #ifdef APP-PLUS
            if (!plus.fingerprint.isSupport()) {
                this.result = '此设备不支持指纹识别';
                this.disabled = true;
            } else if (!plus.fingerprint.isKeyguardSecure()) {
                this.result = '此设备未设置密码锁屏，无法使用指纹识别';
                this.disabled = true;
            } else if (!plus.fingerprint.isEnrolledFingerprints()) {
                this.result = '此设备未录入指纹，请到设置中开启';
                this.disabled = true;
            } else {
                this.result = '此设备支持指纹识别';
                this.disabled = false;
            }
            // #endif
            // #ifdef MP-WEIXIN
            this.disabled = false;
            this.result = '请在微信真机中使用，模拟器不支持';
            // #endif
            // #ifndef APP-PLUS || MP-WEIXIN
            this.result = '此平台不支持指纹识别';
            // #endif
        },
        methods: {
            // 取消识别
            cancelbox: function() {
                this.popup = false;
                plus.fingerprint.cancel();
            },

            fingerprint: function() {
                this.popup = true;
                var that = this;
                that.zhiwentext= '指纹识别';
                that.zhiwenimg= require('@/static/images/zhiwen.png');
                // #ifdef APP-PLUS
                plus.fingerprint.authenticate(function(result) {
                    console.log(result)
                    that.zhiwenimg = require('@/static/images/zhiwen_success.png')
                    that.zhiwentext = '指纹识别成功';
                    setTimeout(function() {
                        that.popup = false
                    }, 1500);
                }, function(e) {
                    switch (e.code) {
                        case e.AUTHENTICATE_MISMATCH:
                            plus.nativeUI.toast('指纹匹配失败，请重新输入');
                            break;
                        case e.AUTHENTICATE_OVERLIMIT:
                            plus.nativeUI.closeWaiting(); //兼容Android平台关闭等待框
                            plus.nativeUI.alert('指纹识别失败次数超出限制，请使用其它方式进行认证');
                            break;
                        case e.CANCEL:
                            plus.nativeUI.toast('已取消识别');
                            break;
                        default:
                            plus.nativeUI.closeWaiting(); //兼容Android平台关闭等待框
                            plus.nativeUI.alert('指纹识别失败，请重试');
                            break;
                    }
                });
                // // Android平台手动弹出等待提示框 
                // if ('Android' == plus.os.name) {
                //     plus.nativeUI.showWaiting('指纹识别中...').onclose = function() {
                //         plus.fingerprint.cancel();
                //     }
                // }
                // #endif

                // #ifdef MP-WEIXIN
                wx.startSoterAuthentication({
                    requestAuthModes: ['fingerPrint'],
                    challenge: '123456',
                    authContent: '请用指纹解锁',
                    success(res) {
                        uni.showToast({
                            title: '识别成功',
                            mask: false,
                            duration: 1500
                        });
                    }
                })
                // #endif
            },
        }
    }
</script>

<style>
    .imagestyle {
         100rpx;
        height: 100rpx;
    }

    page {
        background: transparent;
    }

    .box {
        word-break: break-all;
    }

    .mask {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.4);
    }

    .content {
         300rpx;
        height: 300rpx;
        border-radius: 40rpx;
        padding: 60rpx 30rpx;
        box-sizing: border-box;
        background-color: #FFFFFF;
        text-align: center;
    }

    .text {
        /* #ifndef APP-NVUE */
        display: block;
        /* #endif */
        text-align: center;
        color: #333333;
        line-height: 60rpx;
    }
</style>