FE_preschoolEdu_miniProgram/team/personAuth/personAuth.vue

<template>
	<view class="page">
		<view class="block">
			<view class="title">上传身份证正面照片</view>
			<image class="credential" :src="theFrontOfIDCard" mode="widthFix" @click="uploadFront"></image>
		</view>
		
		<view class="block">
			<view class="title">上传身份证反面照片</view>
			<image class="credential" :src="reverseOfIDCard" mode="widthFix" @click="uploadBack"></image>
		</view>
		
		<view class="block">
			<view class="form-list">
				<view class="line with-arrow">
					<view class="name">姓名</view>
					<input type="text" placeholder="请输入名称" v-model="form.userName" />
					<uni-icons type="right" size="18" color="#ababab"></uni-icons>
				</view>
				<view class="line with-arrow">
					<view class="name">手机号</view>
					<input type="text" placeholder="请输入手机号" v-model="form.phone" />
					<uni-icons type="right" size="18" color="#ababab"></uni-icons>
				</view>
				<view class="line">
					<view class="name">证件类型</view>
					<view class="val">身份证</view>
				</view>
				<view class="line with-arrow">
					<view class="name">证件号</view>
					<input type="text" placeholder="请输入证件号" v-model="form.idCardNo" />
					<uni-icons type="right" size="18" color="#ababab"></uni-icons>
				</view>
			</view>
		</view>
		
		<view class="btn-wrap">
			<view class="btn" @click="submit">认证信息</view>
		</view>
	</view>
</template>

<script>
	import { realNameAuthentication, faceAuthentication } from '@/apis/modules/user.js'
	import OSS from '@/libs/Oss/upload'
	export default {
		data() {
			return {
				form: {
					userName: '',
					idCardNo: '',
					phone: '',
				},
				theFrontOfIDCard: 'https://occupationlab.com/images/preschoolEdu/credentials1.png',
				reverseOfIDCard: 'https://occupationlab.com/images/preschoolEdu/credentials2.png',
				frontData: {},
				backData: {}
			}
		},
		onShow() {
			// this.getInfo()
		},
		methods: {
			// 获取个人信息
			getInfo() {
				const { partnerId, teamId } = uni.getStorageSync('team')
				my({
					partnerId,
					teamId
				}).then(({ my }) => {
					this.info = my.info
				}).catch(e => {})
			},
			// 上传正面
			uploadFront() {
				const that = this
				uni.chooseImage({
					success: (res) => {
						const file = res.tempFilePaths[0];
						OSS(file, async (name) => {
							that.theFrontOfIDCard = name
							const { data } = await faceAuthentication({
								imgFile: name,
								side: 'face'
							})
							if (data) {
								that.frontData = data
								that.form.userName = data.name
								that.form.idCardNo = data.num
							}
						})
					}
				});
			},
			// 上传反面
			uploadBack() {
				const that = this
				uni.chooseImage({
					success: (res) => {
						const file = res.tempFilePaths[0];
						OSS(file, async (name) => {
							that.reverseOfIDCard = name
							const { data } = await faceAuthentication({
								imgFile: name,
								side: 'back'
							})
							that.backData = data
						})
					}
				});
			},
			submit() {
				const { form } = this
				if (!form.userName) return this.$util.errMsg('请输入姓名！')
				if (!form.idCardNo) return this.$util.errMsg('请输入证件号！')
				const { frontData } = this
				const { backData } = this
				realNameAuthentication({
					address: frontData.address,
					birthday: frontData.birth,
					endDate: backData.end_date,
					frontOfIdCard: this.theFrontOfIDCard,
					idCardNo: frontData.num,
					issue: backData.issue,
					nationality: frontData.nationality,
					realName: frontData.name,
					reverseOfIdCard: this.reverseOfIDCard,
					sex: frontData.sex,
					startDate: backData.start_date,
				}).then(res => {
					this.$util.sucMsg('认证成功！')
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/person/person'
						})
					}, 1500)
				}).catch(e => {})
			},
		}
	}
</script>

<style scoped lang="scss">
.page {
	padding-bottom: 170rpx;
	-webkit-overflow-scrolling: touch;
}
.avatar {
	width: 80rpx;
	height: 80rpx;
	border: 0;
	border-radius: 50%;
}
.block {
	padding: 24rpx;
}
.title {
	margin-bottom: 20rpx;
	font-size: 28rpx;
}
.credential {
	width: 100%;
}
.form-list {
	.name {
		// min-width: 250rpx;
	}
}
</style>