xinjiangMiniProgram/pages/subPage/authentication/authentication.vue

<template>
	<view class="content ">
		<view  class="stepTop">
			<view class="steps flex-b">
				<view class="proress" :style="{width: proressWith}"></view>
				<view class="step">
					<view class="num active" >01<view class="text">房屋信息1</view></view>
				</view>
				<view class="step">
					<view class="num"  :class="{active: currentStep}">02<view class="text">个人资料</view></view>
				</view>
				<view class="step">
					<view class="num"  :class="{active: currentStep==2}">03<view class="text">认证成功</view></view>
				</view>
			</view>
		</view>
		
		<view class="line"></view>
		
		<view class="padding" >
			<view class="step1" v-if="currentStep==0">
				<view class="h1">请选择您的房屋地址</view>
				<view class="lab">房屋信息</view>
				<view class="row flex-b">
					<view class="lable">详细地址</view>
					<view class="flex" @click="$goPage('/pages/subPage/authentication/comp/select1')">
						<view class="adrs" v-if="counterStore.chooseHouse.houseId">{{ houseStr }}</view>
						<view class="adrs" v-else>请选择</view>
						<u-icon name="arrow-right" color="#CCCCCC"></u-icon>
					</view>
				</view>
				
				<view class="ownership" @click="chooseImages">
					<view class="photo">
						<image :src="counterStore.chooseHouse.roomCertificateImg" mode="widthFix" v-if="counterStore.chooseHouse.roomCertificateImg"></image>
						<image src="@/static/images/phoneH.png" mode="widthFix" v-else></image>
					</view>
					<view class="txt">房屋所有权证照片</view>
				</view>
				
				<view class="btnBox">
					<oneBtn text="下一步" :disabled="!counterStore.chooseHouse.houseId" @oneBtnClick="nextStep(1)"></oneBtn>
				</view>
			</view>
			
			<view class="step2"  v-if="currentStep==1">
				<view class="btnBox">
					<oneBtn text="点击开始实名认证"  @oneBtnClick="nextStep(2)"></oneBtn>
				</view>
			</view>
			
			<view class="step3"  v-if="currentStep==2">
				<view class="okIcon">
					<image src="@/static/images/okIcon.png" mode=""></image>
				</view>
				<view class="oktext">认证成功</view>
				<view class="btnBox">
					<oneBtn text="返回首页"  @oneBtnClick="nextStep(3)"></oneBtn>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script setup>
	import { uploadImgApi } from '@/utils/utils.js'
	import { startEid } from '@/mp_ecard_sdk/main';
	
	import { getFacetoken, getFaceResult, houseRoomBind } from '@/config/api.js'
	
	import {userStore} from '@/store/index.js';
	const counterStore = userStore();
	
	import { ref, computed } from 'vue'
	const currentStep = ref(0)
	
	const proressWith = computed(() => { 
		if(currentStep.value==1) return '290rpx'
		if(currentStep.value==2) return '100%'
		return 0
	})
	
	const houseStr = computed(() => {
		let item = counterStore.chooseHouse
		if(!item.houseId) return ''
		let str = item.communityName +' - '+ item.houseTypeName +' - '+ item.roomNum
		return str
	})
	
	function nextStep(num) {
		// 第一步如果没有选择房子是不能走第二步的
		if(num==0&&!counterStore.chooseHouse.houseId) return
		if(num==1) currentStep.value = num
		if(num==2) {
			getpersonfaceFn()
		}
		if(num==3) {
			counterStore.chooseHouse = {
				"roomNum": "",
				  "houseType": '',
				  "houseTypeName": '',
				  "communityId": '',
				  "communityName": '',
				  "userName": 0,
				  "idNo": "",
				  "houseId": '',
			}
			uni.switchTab({
				url: '/pages/tabbar/index/index'
			})
		}
	}
	async function getpersonfaceFn() {
		// {MerchantId: '0NSJ2407181630565100'}
		// let obj = {
			
		// }
		const {data: res} = await getFacetoken()
		console.log('获取到token了,很好')
		console.log(res)
		console.log(res.eidToken)
		goSDK(res.eidToken)
	}
	async function GetDetectInfoEnhancedFn(EidToken) {
		// userId: counterStore.loginInfo.userId, InfoType: 1
		const {data: res} = await getFaceResult({token: EidToken,  })
		console.log('返回的结果信息')
		console.log(res)
		
		counterStore.upDateHouse('idNo', res.idCard)
		counterStore.upDateHouse('userName', res.name)
		counterStore.upDateUseInfo('idCard', res.idCard)
		counterStore.upDateUseInfo('name', res.name)
		houseRoomBindFn()
		
	}
	
	// 绑定房子
	async function houseRoomBindFn() {
		const {data: res} = await houseRoomBind(counterStore.chooseHouse)
		console.log(res)
		currentStep.value = 2
		uni.hideLoading()
	}
	 // 示例方法
	 function goSDK(token) {
			        startEid({
			            data: {
			                token,
			            },
			            verifyDoneCallback(res) {  
			                const { token, verifyDone } = res;
			                console.log('收到核身完成的res:', res);
			                console.log('核身的token是:', token); 
							uni.showLoading({
								title: '正在加载，请稍后……'
							})
							GetDetectInfoEnhancedFn(token)
			                console.log('是否完成核身:', verifyDone);          
			            },
			        });
			    }
				
				//选择图片
			function chooseImages() {
					uni.chooseImage({
						count: 1, //允许选择的数量
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], //从相册选择
						success: async (res) => {
							uni.showLoading({
								title: '图片上传中...'
							});
							console.log(res)
							console.log('图片信息')
							const imgLink =	await uploadImgApi(res.tempFilePaths[0], 'roomCertificateImg')
							console.log(imgLink)
							counterStore.upDateHouse('roomCertificateImg', imgLink)
						}
					})
				}
</script>

<style lang="scss" scoped>
	image {
		display: block;
		width: 100%;
		height: 100%;
	}
	.content {
		.btnBox {
			margin-top: 60rpx;
		}
		.line {
			width: 100%;
			height: 20rpx;
			background: #EFEFEF;
		}
		.step1 {
			padding: 20rpx 0;
			font-size: 28rpx;
			color: #343434;
			.lab {
				padding: 30rpx 0 10rpx 0;
			}
			.row {
				height: 96rpx;
				border-bottom: 1px solid #EFEFEF;
				.adrs {
					color: $themC;
					margin-right: 6rpx;
				}
			}
			.ownership {
				padding: 30rpx 0 10rpx 0;
				.photo {
					width: 392rpx;
					// height: 252rpx;
					margin: 0 auto;
				}
				.txt {
					font-size: 28rpx;
					color: #999;
					text-align: center;
					margin-top: 20rpx;
				}
			}
		}
		.step3 {
			padding: 40rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.okIcon {
				width: 303rpx;
				height: 164rpx;
			}
			.oktext {
				font-size: 36rpx;
				color: #343434;
				margin-top: 20rpx;
			}
			.btnBox {
				width: 100%;
			}
		}
		.stepTop {
			padding: 20rpx 20rpx 50rpx 20rpx;
		}
		.steps {
			width: 528rpx;
			height: 50rpx;
			background: #EFEFEF;
			border-radius: 25rpx;
			position: relative;
			margin: 20rpx auto 40rpx auto;
			.proress {
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
				width: 290rpx;
				background: linear-gradient(90deg, rgba(222,58,38,0.1) 0%, #DE3A26 100%);
				border-radius: 25rpx;
				
			}
			.step {
				.num {
					width: 44rpx;
					height: 44rpx;
					background: #FFFFFF;
					border-radius: 50%;
					font-size: 24rpx;
					color: #9C9C9C;
					line-height: 44rpx;
					text-align: center;
					position: relative;
					&.active {
						border: 1px solid $themC;
						color: $themC;
						.text {
							color: #333;
						}
					}
					.text {
						position: absolute;
						bottom: -60rpx;
						left: -26rpx;
						font-size: 24rpx;
						white-space: nowrap;
					}
				}
			}
		}
	}
	
	
</style>