You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
300 lines
7.4 KiB
300 lines
7.4 KiB
<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>
|