usky-web-mobile/src/pages/mine/secure/fingerprint/index.vue

<template>
  <view class="bg-white scroll-height fingerprint-container">
    <view class="content-area">
      <text class="content-area-icon iconfont ucicon-zhiwen"></text>
      <view class="content-area-text">启用指纹登录，让登录更便捷</view>
      <view class="content-area-center">启用后，可通过设备本地的指纹验证方式快速登录。</view>

      <u-button type="primary" :plain="false" text="开启指纹登录" color="#2a98ff" @click="fingerprint()"></u-button>
    </view>
  </view>

  <u-modal :show="modalShow" confirmText="取消" @confirm="modalConfirm">
    <view class="slot-content">
      <text class="content-area-icon iconfont ucicon-zhiwen"></text>
      <view
        style="font-size: 15px; text-align: center"
        :style="{
          color: modalContent === '请验证指纹' || modalContent === '正在验证指纹...' ? '#000' : 'red',
        }"
      >
        {{ modalContent }}
      </view>
    </view>
  </u-modal>
</template>

<script setup>
import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
import { useStores, commonStores } from "@/store/modules/index";

import { loginLogList } from "@/api/mine/secure/loginLog.js";

const useStore = useStores();
const { proxy } = getCurrentInstance();

const modalShow = ref(false);
const modalContent = ref("");

function modalConfirm() {
  // #ifdef APP-PLUS
  modalShow.value = false;
  plus.fingerprint.cancel();
  // #endif
}

function fingerprint() {
  // #ifdef APP-PLUS
  modalShow.value = true;
  modalContent.value = "请验证指纹";
  plus.fingerprint.authenticate(
    function () {
      modalContent.value = "正在验证指纹...";
      setTimeout(() => {
        modalShow.value = false;
      }, 1000);
    },
    function (e) {
      switch (e.code) {
        case e.AUTHENTICATE_MISMATCH:
          modalContent.value = "指纹匹配失败，请重新输入";
          break;
        case e.AUTHENTICATE_OVERLIMIT:
          plus.nativeUI.closeWaiting(); //兼容Android平台关闭等待框
          modalContent.value = "指纹识别失败次数超出限制，请使用其它方式进行认证";
          break;
        case e.CANCEL:
          plus.nativeUI.toast("已取消识别");
          break;
        default:
          plus.nativeUI.closeWaiting(); //兼容Android平台关闭等待框
          modalContent.value = "指纹识别失败，请重试";
          break;
      }
    }
  );
  // #endif

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

onLoad((options) => {});

onReady(() => {});

// 自定义导航事件
onNavigationBarButtonTap((e) => {});
</script>
<style lang="scss" scoped>
.fingerprint-container {
  .content-area {
    padding: 150px 50px 0px;

    &-icon {
      display: flex;
      justify-content: center;
      font-size: 50px;
      margin-bottom: 30px;
      color: #2a98ff;
    }

    &-text {
      display: flex;
      justify-content: center;
      font-weight: 600;
      margin-bottom: 10px;
      color: #000;
      font-size: 16px;
    }

    &-center {
      display: flex;
      justify-content: center;
      margin-bottom: 30px;
      color: #96a6b5;
      font-size: 15px;
    }
  }
}
</style>