qa-prevention-xgf-app/pages/train_management/face_authentication.nvue

<template>
  <view class="container">
    <view class="fat">
      <text class="fatt">请将人脸置于圆圈内</text>
    </view>
    <view class="livefater">
      <view
        style="
          width: 700upx;
          height: 700upx;
          border-radius: 700upx;
          overflow: hidden;
        "
      >
        <live-pusher
          id="livePusher"
          ref="livePusher"
          class="livePusher"
          url=""
          mode="SD"
          :muted="true"
          :enable-camera="true"
          :auto-focus="true"
          :beauty="1"
          whiteness="2"
          aspect="1:1"
        />
      </view>
      <cover-image src="/static/images/gaiz.png" class="gaiimg"></cover-image>
    </view>

    <view style="margin: 0 100upx">
      <u-button :text="btnTextStr" type="primary" @click="snapshot" />
    </view>
  </view>
</template>

<script>
// import {setMeetingFace, setScanCodeToVerifyFace, setUserFace, setVerifyFace} from "@/api";

export default {
  data() {
    return {
      startPreviewTimer: null, // 开始预览计时器实例
      isFirst: "", // 是否为第一次开启摄像头
      type: "", // 摄像头使用类别
      // showButton: "yes",
      routeQueryparams: {}, // 额外携带的参数
	    btnTextStr: "拍照"
    };
  },
  onReady() {
    this.context = uni.createLivePusherContext("livePusher", this);
    this.startPreviewTimer = setInterval(() => {
      this.startPreview();
    }, 1000);
  },
  onLoad(query) {
    // facial_input 更新人脸    isFirst 1 第一次登录添加人脸
    // scan_face  扫码
    // learning_certification  学习认证
    // meeting_attendance  会议签到
    const typeKey = ["facial_input", "scan_face", "learning_certification"];
    if (!typeKey.includes(query.type)) {
      uni.$u.toast("type参数错误");
      return;
    }
    this.isFirst = query.isFirst || "";
  if (query.type === "facial_input") this.btnTextStr = "人脸认证";
	if (query.type === "scan_face") this.btnTextStr = "签到";
	if (query.type === "learning_certification") this.btnTextStr = "开始考试";
    this.type = query.type;
    // this.showButton = query.showButton || "yes";
    this.routeQueryparams = query ?? {};
  },
  onBackPress(event) {
    if (event.from === "backbutton") {
      if (this.type === "facial_input" ||
        (this.type === "scan_face" && this.isFirst === "1") ||
        this.type === "learning_certification"
      ) {
        uni.$u.toast("请完成人脸验证");
        return true;
      }
    }
    return false;
  },
  methods: {
    snapshot() {
      uni.showLoading({
        title: "加载中",
      }); 
      this.context.snapshot({
        success: (e) => {
          this.getMinImage(e.message.tempImagePath);
        },
      });
    },
    startPreview() {
      this.context.stopPreview();
      this.context.startPreview({
        success: () => {
          this.startPreviewTimer && clearInterval(this.startPreviewTimer);
          // this.showButton === "no" && this.snapshot();
        },
      });
    },
    getMinImage(imgPath) {
      plus.zip.compressImage(
        {
          src: imgPath,
          dst: imgPath,
          overwrite: true,
          quality: 40
        },
        (zipRes) => {
          setTimeout(() => {
            const reader = new plus.io.FileReader();
            reader.onloadend = async (res) => {
              const speech = res.target.result;
			        // 获取 base 64 图片编码的前缀
              const USERAVATARPREFIX = speech.substring(
                0,
                speech.indexOf("base64,") + 7,
              );
			        // 获取 base 64 图片的二进制到文本
              const USERAVATARURL = speech.substring(
                speech.indexOf("base64,") + 7,
              );
              try {
                if (this.type === "facial_input") {
                  uni.$u.toast("人脸认证成功");
                  uni.navigateBack({ delta: 1 });
                } else if (this.type === "scan_face") {
                  // await setScanCodeToVerifyFace({
                  //   USERAVATARPREFIX,
                  //   USERAVATARURL,
                  //   ...this.params,
                  // });
                  uni.$u.toast("认证成功");
                uni.navigateBack({ delta: 2 });
                } else if (this.type === "learning_certification") {
                  // await setVerifyFace({
                  //   USERAVATARPREFIX,
                  //   USERAVATARURL,
                  //   ...this.params,
                  // });
                  // await this.$store.dispatch("setVerification", true);
                  uni.$u.toast("认证成功");
                  // uni.navigateBack();
                  uni.$u.route({
                    url: '/pages/train_management/course_exam',
                    params: { ...this.routeQueryparams }
                  })
                }
              } catch (e) {
				if(e && e.msg){
					uni.$u.toast(e.msg,);
				}
                // this.showButton === "no" && this.snapshot();
              }
            };
            reader.readAsDataURL(
              plus.io.convertLocalFileSystemURL(zipRes.target),
            );
          }, 4000);
        },
      );
    },
  },
};
</script>

<style scoped>
.container {
  background-color: #fff;
}
.livePusher {
  width: 700upx;
  height: 700upx;
}

.livefater {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-bottom: 100upx;
  height: 700upx;
}

.fat {
  margin: 100upx;
}

.fatt {
  text-align: center;
  font-size: 36upx;
  font-weight: 800;
}

.gaiimg {
  width: 700upx;
  height: 700upx;
  margin-top: -700upx;
}
</style>