uniapp+vue3+ts--编写微信小程序对接e签宝签署时跳转刷脸效果（人脸识别）中间页代码

news2024/9/30 9:28:05

uniapp+vue3+ts–编写微信小程序对接e签宝签署时跳转刷脸效果（人脸识别）中间页代码

e签宝内嵌H5方式集成签署页的文档说明：https://open.esign.cn/doc/opendoc/case3/ahb0sg

签署时跳转刷脸效果示意图：
在这里插入图片描述

1. 在文件夹新建一个文件，路径为pages/middle/index，并在pages.json中注册。【ps这个路径要跟e签宝后台定义的中间页路径一致】
在这里插入图片描述

2.通过上面文档步骤进行相关代码编写，下面是完整的代码。

<template>
    <view class="middlePageContainer">
        <view class="loading-content">
            <view class="image-content">
                <u-loading mode="flower" :show="true"></u-loading>
            </view>
            <view class="loading-tect-content">
                <text class="loading-text">加载中...</text>
            </view>
        </view>
        <view class="btn-content">
            <text>如未成功跳转，</text>
            <text class="btn-click" @click="goFaceAuth">点击此处</text>
            <text>手动跳转</text>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { onShow, onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
const bizToken = ref('')
const redirectUrl = ref('')
const goFaceDone = ref(false) // 已跳转至公证签做人脸

onLoad((e: any) => {
    bizToken.value = e.bizToken
    redirectUrl.value = decodeURIComponent(e.redirectUrl)
    goFaceAuth()
})
const goFaceAuth = () => {
    uni.navigateToMiniProgram({
        appId: 'wx1cf2708c2de46337', // 公证签小程序APPID
        path: `/pages/face/index?bizToken=${bizToken.value}`, // 刷脸页面地址
        success(res: any) {
            goFaceDone.value = true
        }
    })
}

onShow(() => {
    console.log('---middle onShow')
    // 防止从实名/意愿页进入后直接返回
    if (!goFaceDone.value) return
    // 如果已经跳转过，重置
    goFaceDone.value = false
    // getEnterOptionsSync 方法从基础库 2.9.4 开始支持，低版本需做兼容处理
    const options = uni.getEnterOptionsSync()
    console.log('---options', options)
    // 从公证签小程序返回
    if (
        options.scene === 1038 &&
        options.referrerInfo.extraData &&
        options.referrerInfo.extraData.faceResult
    ) {
        const pages = getCurrentPages() //当前页的数据
        // console.log(pages[pages.length - 2],'5132123312');
        const pre = pages[pages.length - 2] as any //上个页面 （扫脸的页面）
        // 重新加载实名页面
        console.log(pre, 'pre')
        if (pre.data.reloadPage && typeof pre.data.reloadPage === 'function') {
            // pre.$vm.src = redirectUrl + `&timeStamp=${new Date().getTime()}`
            pre.$vm.src = redirectUrl.value + `&timeStamp=${new Date().getTime()}`
            // pre.reloadPage(redirectUrl + `&timeStamp=${new Date().getTime()}`)
            uni.navigateBack({
                delta: 1
            })
        }
    }
})
</script>

<style lang="scss" scoped>
.middlePageContainer {
    width: 100%;
    height: 100%;
    .loading-content {
        padding-top: 10vh;
        text-align: center;
        width: 100%;
    }
    .image {
        width: 172rpx;
        height: 186rpx;
    }
    .loading-tect-content {
        font-size: 28rpx;
        margin-top: 48rpx;
        color: #333;
    }

    .btn-content {
        font-size: 28rpx;
        color: #333;
        margin-top: 24rpx;
        text-align: center;
    }
    .btn-click {
        color: #095fe0;
    }
}
</style>