jiliangxiaochengxu/components/personRegistered/recognition.vue

<!-- @format -->

<template>
  <view style="padding: 20rpx">
    <view style="color: #3c9cff" class="informationTitle"
      >人脸识别/实名认证</view
    >
    <view class="pass" v-if="formdData.isPass">
      <u-icon name="checkbox-mark" color="#19be6b" size="90"></u-icon>
      <text class="passText">认证成功</text>
    </view>
    <view style="padding: 100rpx">
      <u-button v-if="!formdData.isPass" type="primary" @click="handleFinish"
        >开始认证</u-button
      >
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      url: this.$baseUrl,
    };
  },
  props: {
    formdData: {
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
    //完成认证
    async handleFinish() {
      this.$emit(
        "update:formdData",
        Object.assign({
          ...this.formdData,
          isPass: true,
        })
      );
    },
    handleAuthentication() {
      var that = this;
      wx.checkIsSupportFacialRecognition({
        checkAliveType: 2,
        success: function (res) {
          if (
            res.errCode === 0 ||
            res.errMsg === "checkIsSupportFacialRecognition:ok"
          ) {
            //调用人脸识别
            that.startface(
              that.formdData.personCardOrcResult.name,
              that.formdData.personCardOrcResult.idNum
            ); //身份证名称，身份证号码
            return;
          }
          uni.showToast({
            title: "微信版本过低，暂时无法使用此功能，请升级微信最新版本",
            icon: "none",
            duration: 4000,
          });
        },
        fail: function (res) {
          console.log(res);
          uni.showToast({
            title: "微信版本过低，暂时无法使用此功能，请升级微信最新版本",
            icon: "none",
            duration: 4000,
          });
        },
      });
    },
    startface(name, idcard) {
      var that = this;
      wx.startFacialRecognitionVerify({
        name: name, //身份证名称
        idCardNumber: idcard, //身份证号码
        success: (res) => {
          this.$emit(
            "update:formdData",
            Object.assign({
              ...this.formdData,
              isPass: true,
            })
          );
        },
        checkAliveType: 2, //屏幕闪烁(人脸核验的交互方式，默认0,读数字)
        fail: (err) => {
          uni.showToast({
            title: "请本人持手机，确保光线充足，面部正对手机，且无遮挡",
            icon: "none",
            duration: 4000,
          });
        },
      });
    },
  },
};
</script>

<style lang="scss">
.pass {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.informationTitle {
  margin-bottom: 30rpx;
  font-size: 30;
}
.passText {
  margin-top: 30rpx;
  font-size: 34rpx;
  color: #909399;
}
</style>