jiuyiUniapp/jiuyi/pages/mine/real-name-authentication/index.vue

<script setup>
	/**
	 * 实名认证
	 */
	import {
		ref,
		reactive,
		computed,
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	// 工具库
	import util from '@/common/js/util.js'
	// api
	import api from '@/api/index.js'

	import z from '@/static/mine-idcard-z.png'
	import f from '@/static/mine-idcard-f.png'
	import d from '@/static/mine-d.png'
	import c from '@/static/mine-c.png'

	// #ifdef APP
	const liveModule = uni.requireNativePlugin("Hisign-Face")
	// #endif
	const imageStyles = {
		width: '310rpx',
		height: '212rpx'
	}
	// 
	const store = useStore()
	// 表单
	const form = reactive({
		// 真实姓名
		userRealName: '',
		// 用户id
		userId: '',
		// 设备imei
		// userImei: '',
		// 用户身份证号
		userIdCard: '',
	})
	// 人脸图片
	const faceImage = ref('')
	// 用户信息
	const userinfo = computed(() => {
		let result = store.state.userinfo
		return result
	})
	// 格式化
	const format_idCard = computed(() => {
		let result = userinfo.value.userIdCard || ''
		if (result) result = result.slice(0, 1) + '*'.repeat(userinfo.value.userIdCard.length - 2) + result.slice(-1)
		return result
	})

	// 活体检测
	function startLive() {
		// 调用异步方法
		liveModule.startLive({
				openSound: true,
				signKey: 'HISP1YFG44LQ29W0',
			},
			result => {
				console.log('startLive', result)
				if (result.errorCode == 0) {
					faceImage.value = result.liveImage
				} else if (result.errorCode == 1 && result.errorMessage == '活体检测未通过') {
					util.alert({
						title: '系统提示',
						content: '检测失败请重试',
						showCancel: false
					})
				}
				// this.resultText = result.errorMessage;
			})
	}

	// 实名认证
	function handleSubmit() {
		const data = {
			...form
		}

		// 验证
		if (!data.userRealName) {
			util.alert('真实姓名不能为空')
			return
		}
		if (!data.userIdCard) {
			util.alert('用户身份证号不能为空')
			return
		}
		if (!faceImage.value) {
			util.alert('请先进行人脸识别')
			return
		}
		// 用户id
		data.userId = userinfo.value.userId
		data.image = faceImage.value

		// 信息
		const info = uni.getSystemInfoSync()
		// 
		data.userImei = info.deviceId

		api.mine.certification({
			query: {},
			data,
		}).then(rs => {
			console.log('certification', rs)
			if (rs.code == 200) {
				util.alert('认证成功')
				util.getUserinfo()
				setTimeout(() => {
					uni.navigateBack()
				}, 500)
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}
</script>

<template>
	<!-- 已实名展示实名信息 -->
	<view class="ver" v-if="userinfo.userIdCard">
		<image class="authImg" src="/static/mineAuth.png" mode="aspectFill" />

		<view class="mt30 tac c666 f30">
			<view class="">{{userinfo.userRealName}}</view>
			<view class="mt50">{{format_idCard}}</view>
		</view>
	</view>

	<!-- 未实名展示表单 -->
	<view class="jy-real-name-authentication" v-else>
		<template v-if="0">
			<view class="df aic jcsb">
				<text class="f28 c333">上传身份证照片</text>
				<!-- <image class="wh50" :src="form.card ? c : d"></image> -->
			</view>
			<view class="pt30">
				<uni-file-picker :imageStyles="imageStyles" limit="1">
					<view>
						<image :style="imageStyles" :src="z"></image>
					</view>
				</uni-file-picker>
				<uni-file-picker :imageStyles="imageStyles" limit="1">
					<view>
						<image :style="imageStyles" :src="f"></image>
					</view>
				</uni-file-picker>
			</view>
			<!-- 分割线 -->
			<view class="line"></view>
		</template>

		<view class="df aic jcsb">
			<view class="pd df aic">
				<text class="title">真实姓名</text>
				<view>
					<uni-easyinput :inputBorder="false" type="text" v-model="form.userRealName" placeholder="请输入姓名" />
				</view>
			</view>
			<!-- <image class="wh50" :src="form.userRealName ? c : d"></image> -->
		</view>
		<view class="df aic jcsb">
			<view class="pd df aic">
				<text class="title">身份证号</text>
				<view>
					<uni-easyinput :inputBorder="false" type="text" v-model="form.userIdCard" placeholder="请输入身份证号" />
				</view>
			</view>
			<!-- <image class="wh50" :src="form.userIdCard ? c : d"></image> -->
		</view>
		<view class="df aic jcsb">
			<view class="pd df aic">
				<text class="title">人脸识别</text>
				<view>
					<button class="btn" @click="startLive">
						<text v-if="faceImage">重新识别</text>
						<text v-else>开始识别</text>
					</button>
				</view>
			</view>
			<!-- <image class="wh50" :src="formDataV.rlsb ? c : d"></image> -->
		</view>
		<view>
			<button class="save" @click="handleSubmit">提交</button>
		</view>
	</view>
</template>

<style scoped lang="scss">
	// 认证图片
	.authImg {
		width: 346rpx;
		height: 346rpx;
		margin-top: 140rpx;
	}

	.jy-real-name-authentication {
		padding: 50rpx 64rpx;

		.title {
			width: 112rpx;
			font-size: 28rpx;
			color: #333333;
		}

		.uni-file-picker {
			display: flex;
			justify-content: center;
			margin: 42rpx 0;
		}

		.line {
			margin: 20rpx 0;
			width: 100%;
			height: 1px;
			background: #F3F2F2;
		}

		.pd {
			padding: 20rpx 0;
		}

		.btn {
			font-size: 28rpx;
			text-align: center;
			color: #0476FF;
			width: 314rpx;
			margin-left: 88rpx;
			border-radius: 41rpx;
			opacity: 1;
			box-sizing: border-box;
			border: 2rpx solid #0476FF;
		}

		.save {
			margin-top: 80rpx;
			width: 408rpx;
			background: #0476FF;
			color: #fff;
			border-radius: 41rpx;
			font-size: 28rpx;
			padding: 6rpx 0;
		}
	}
</style>