Vue指纹识别验证 h5plus

 

 

效果图：

//点击事件   开启关闭指纹识别验证

<mu-list>
			<mu-list-item button :ripple="false" @click="fingerprintVerification">
				<mu-list-item-title>
					指纹验证
				</mu-list-item-title>
				<mu-list-item-action>
					<mu-switch v-model="zhiwen" readonly></mu-switch>
				</mu-list-item-action>
			</mu-list-item>
		</mu-list>
//组件
<finger-print v-if="showFinger" :fingertext="fingertext" @cancel="cancel_from"></finger-print>

//组件代码

<template>
	<div class="finger-print">
		<!--弹窗-->
		<div class="white_content">
			<div style="height: 220px;text-align: center;">
				<div style="padding:20px">
					<i class="iconfont" style="font-size: 50px;color: #B9862F;">&#xe72f;</i>
					<p style="font-size: 16px;color: black;">{{fingertext ||'请扫描指纹'}}</p>
					<p style="font-size: 12px;color: black;">验证身份以完成交易</p>
				</div>
			</div>
			<div class="btn">
				<div class="btn-cancel" @click="cancel()">取消</div>
			</div>
		</div>
		<!--覆盖层-->
		<div class="black_overlay"></div>
	</div>
</template>

<script>
	export default {
		name: 'smsCode',
		data() {
			return {
				
			}
		},
		mounted() {
			
		},
		methods: {
			//取消
			cancel(){
				this.$emit('cancel');
			}
		},
		
		props: {
			fingertext: {
				type: String,
				require: true,
			},
		},
		computed: {
			
		},
		watch: {
			
		}
	}
</script>

<style scoped>
	.finger-print {
		
	}
/**
弹窗样式
**/
	.finger-print .white_content {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 80%;
		min-height: 220px;
		border: 1px solid #D6E9F1;
		border-radius: 8px;
		background-color: white;
		z-index: 99999999;
		transform: translate(-50%, -50%);
	}

	.finger-print .btn {
		height: 50px;
		line-height: 50px;
		position: absolute;
		bottom: 0;
		width: 100%;
		border-top: 1px solid #f5f5f5;
	}
	
	.finger-print .btn .btn-cancel {
		color: #B9862F;
		float: left;
		font-size: 14px;
		width: 100%;
		background-color: white;
		border-bottom-left-radius: 8px;
		border-right: 1px solid #f5f5f5;
		text-align: center;
	}
	/**
 * 覆盖层样式
 */
	
	.finger-print .black_overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .6);
		z-index: 99999998;
		opacity: .80;
	}
</style>

//import,components,data

import FingerPrint from '@/components/Fingerprint'
	
		components: {
			'finger-print': FingerPrint
		},
		data() {
			return {
				zhiwen: false,
				showFinger: false,
				fingertext: '请扫描指纹'
			}
		},

 

//开启指纹验证
			fingerprintVerification() {
				let _this = this;
				if(this.zhiwen) {
					this.zhiwen = false;
					return;
				}
				if(!window.plus) return;
				// 检查是否支持指纹识别
				if(plus.fingerprint) {
					if(!plus.fingerprint.isSupport()) {
						plus.nativeUI.alert('此设备不支持指纹识别');
						return;
					}
					if(!plus.fingerprint.isKeyguardSecure()) {
						plus.nativeUI.alert('此设备未设置密码锁屏，无法使用指纹识别');
						return;
					}
					if(!plus.fingerprint.isEnrolledFingerprints()) {
						plus.nativeUI.alert('此设备未录入指纹，请到设置中开启');
						return;
					}

					//开启指纹识别验证()
					this.showFinger = true
					this.fingertext = '请扫描指纹'

					var waiting = null;
					plus.fingerprint.authenticate(function() {
						plus.nativeUI.alert('指纹识别成功');
						_this.zhiwen = true
						_this.showFinger = false;
					}, function(e) {
						switch(e.code) {
							case e.AUTHENTICATE_MISMATCH:
								plus.nativeUI.toast('指纹匹配失败，请重新输入');
								_this.fingertext = '指纹匹配失败，请重试'
								break;
							case e.AUTHENTICATE_OVERLIMIT:
								plus.nativeUI.alert('指纹识别失败次数超出限制，请使用其它方式进行认证');
								_this.showFinger = false;
								break;
							default:
								plus.nativeUI.alert('指纹识别失败(' + e.code + ')，请重试');
								_this.fingertext = '指纹识别失败(' + e.code + ')，请重试'
								break;
						}
					})

				} else {
					plus.nativeUI.alert('当前环境不支持指纹识别API，请更新到最新版本');
				}
			},