uniapp 自定义弹窗与指纹识别

uniapp 指纹识别加自定义弹窗
参考自uniapp 插件--指纹模块，感谢！！！
  1 <template>
  2     <view class="box">
  3         <button type="primary" @tap="fingerprint()" :disabled="disabled">按下开始识别指纹</button>
  4         <view class="mask" v-show="popup" @tap="cancelbox()">
  5             <view class="content">
  6                 <image :src="zhiwenimg" mode="" class="imagestyle"></image>
  7                 <text class="text">{{zhiwentext}}</text>
  8             </view>
  9         </view>
 10     </view>
 11 </template>
 12 
 13 <script>
 14     export default {
 15         data() {
 16             return {
 17                 result: "",
 18                 disabled: false,
 19                 popup: false,
 20                 zhiwentext: '指纹识别',
 21                 zhiwenimg: require('@/static/images/zhiwen.png')
 22             }
 23         },
 24         onLoad() {
 25             // #ifdef APP-PLUS
 26             if (!plus.fingerprint.isSupport()) {
 27                 this.result = '此设备不支持指纹识别';
 28                 this.disabled = true;
 29             } else if (!plus.fingerprint.isKeyguardSecure()) {
 30                 this.result = '此设备未设置密码锁屏，无法使用指纹识别';
 31                 this.disabled = true;
 32             } else if (!plus.fingerprint.isEnrolledFingerprints()) {
 33                 this.result = '此设备未录入指纹，请到设置中开启';
 34                 this.disabled = true;
 35             } else {
 36                 this.result = '此设备支持指纹识别';
 37                 this.disabled = false;
 38             }
 39             // #endif
 40             // #ifdef MP-WEIXIN
 41             this.disabled = false;
 42             this.result = '请在微信真机中使用，模拟器不支持';
 43             // #endif
 44             // #ifndef APP-PLUS || MP-WEIXIN
 45             this.result = '此平台不支持指纹识别';
 46             // #endif
 47         },
 48         methods: {
 49             // 取消识别
 50             cancelbox: function() {
 51                 this.popup = false;
 52                 plus.fingerprint.cancel();
 53             },
 54 
 55             fingerprint: function() {
 56                 this.popup = true;
 57                 var that = this;
 58                 that.zhiwentext= '指纹识别';
 59                 that.zhiwenimg= require('@/static/images/zhiwen.png');
 60                 // #ifdef APP-PLUS
 61                 plus.fingerprint.authenticate(function(result) {
 62                     console.log(result)
 63                     that.zhiwenimg = require('@/static/images/zhiwen_success.png')
 64                     that.zhiwentext = '指纹识别成功';
 65                     setTimeout(function() {
 66                         that.popup = false
 67                     }, 1500);
 68                 }, function(e) {
 69                     switch (e.code) {
 70                         case e.AUTHENTICATE_MISMATCH:
 71                             plus.nativeUI.toast('指纹匹配失败，请重新输入');
 72                             break;
 73                         case e.AUTHENTICATE_OVERLIMIT:
 74                             plus.nativeUI.closeWaiting(); //兼容Android平台关闭等待框
 75                             plus.nativeUI.alert('指纹识别失败次数超出限制，请使用其它方式进行认证');
 76                             break;
 77                         case e.CANCEL:
 78                             plus.nativeUI.toast('已取消识别');
 79                             break;
 80                         default:
 81                             plus.nativeUI.closeWaiting(); //兼容Android平台关闭等待框
 82                             plus.nativeUI.alert('指纹识别失败，请重试');
 83                             break;
 84                     }
 85                 });
 86                 // // Android平台手动弹出等待提示框 
 87                 // if ('Android' == plus.os.name) {
 88                 //     plus.nativeUI.showWaiting('指纹识别中...').onclose = function() {
 89                 //         plus.fingerprint.cancel();
 90                 //     }
 91                 // }
 92                 // #endif
 93 
 94                 // #ifdef MP-WEIXIN
 95                 wx.startSoterAuthentication({
 96                     requestAuthModes: ['fingerPrint'],
 97                     challenge: '123456',
 98                     authContent: '请用指纹解锁',
 99                     success(res) {
100                         uni.showToast({
101                             title: '识别成功',
102                             mask: false,
103                             duration: 1500
104                         });
105                     }
106                 })
107                 // #endif
108             },
109         }
110     }
111 </script>
112 
113 <style>
114     .imagestyle {
115          100rpx;
116         height: 100rpx;
117     }
118 
119     page {
120         background: transparent;
121     }
122 
123     .box {
124         word-break: break-all;
125     }
126 
127     .mask {
128         position: fixed;
129         left: 0;
130         top: 0;
131         right: 0;
132         bottom: 0;
133         /* #ifndef APP-NVUE */
134         display: flex;
135         /* #endif */
136         justify-content: center;
137         align-items: center;
138         background-color: rgba(0, 0, 0, 0.4);
139     }
140 
141     .content {
142          300rpx;
143         height: 300rpx;
144         border-radius: 40rpx;
145         padding: 60rpx 30rpx;
146         box-sizing: border-box;
147         background-color: #FFFFFF;
148         text-align: center;
149     }
150 
151     .text {
152         /* #ifndef APP-NVUE */
153         display: block;
154         /* #endif */
155         text-align: center;
156         color: #333333;
157         line-height: 60rpx;
158     }
159 </style>