BiKing/pages/content/identification/select-type.vue

<template>
	<view>
		<headContent borderBottom>
			<template #left>
				<reverse-back />
			</template>
		</headContent>

		<view class="content">
			<text class="content-title">ID 验证</text>
			<text class="content-lable">检查签发国家</text>
			<view class="item-box">
				<view class="item">
					<text>中国</text>
					<text class="item-icon iconfont">&#xe8b5;</text>
				</view>
			</view>
			<text class="content-lable lable-type">选择ID类型</text>
			<view class="item-box">
				<view class="item">
					<text class="type-icon iconfont">&#xe619;</text>
					<text class="text-name">护照</text>
					<text class="item-icon iconfont">&#xe8b5;</text>
				</view>
				<view class="item">
					<text class="type-icon iconfont">&#xe626;</text>
					<text class="text-name">驾驶证</text>
					<text class="item-icon iconfont">&#xe8b5;</text>
				</view>
				<view class="item" @click.stop=" getIdentity">
					<text class="type-icon iconfont">&#xe616;</text>
					<text class="text-name">身份证</text>
					<text class="item-icon iconfont">&#xe8b5;</text>
				</view>
				<view class="item">
					<text class="type-icon iconfont">&#xe62a;</text>
					<text class="text-name">签证</text>
					<text class="item-icon iconfont">&#xe8b5;</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		Api_identityVerify
	} from "@/api/index.js"
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	// const ocr  = uni.requireNativePlugin('DC-WBOCRService');
	export default {
		data() {
			return {
				dataObj: {}
			};
		},
		mounted() {

		},
		methods: {
			setIdentityVerify(base64) {
				const userId = this.$getStorageSync('userInfo')?.id
				Api_identityVerify({
					name: userId,
					card_id: userId,
					front_pic: base64
				}).then(res => {
					console.log('res = ', res)
					setTimeout(() => {
						uni.showToast({
							title: res || '提交成功'
						})
						setTimeout(() => {
							uni.hideToast()
							uni.reLaunch({
								url: '/pages/content/mine'
							});
						}, 1500)
					}, 210)

				}).catch(err => {

				}).finally(() => {
					setTimeout(() => {

					}, 500)
				})
			},

			getIdentity(e) {
				// 点击拍照
				let _this = this
				let configure = "{'side':'face'}" //face正面、back反面
				uni.chooseImage({
					count: 1, // 默认9  
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有  
					sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有  
					success: res => {

						let tempFilePaths = res.tempFilePaths[0];
						this.base64String(tempFilePaths)
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},

			base64String(path) {
				pathToBase64(path)
					.then(base64 => {
						this.setIdentityVerify(base64)
						console.log(base64)
					})
					.catch(error => {
						console.error(error)
					})

			}



		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		padding: 50rpx $pages-padding;
		display: flex;
		flex-direction: column;

		.content-title {
			font-size: 70rpx;
		}

		.content-lable {
			font-size: 50rpx;
			line-height: 2.2;
		}

		.lable-type {
			margin-top: 100rpx;
		}

		.item-box {
			width: 100%;

			.item {
				width: 100%;
				height: 120rpx;
				padding: 0 $pages-padding;
				background-color: #e3e3e3;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					flex-shrink: 0;
				}

				.type-icon {
					font-size: 50rpx;
					color: #000;
					margin-right: 50rpx;
				}

				.text-name {
					flex: 1;
				}

				.item-icon {
					transform: rotate(180deg);
					font-size: 50rpx;
					color: #000;
				}

				&:nth-child(n + 2) {
					margin-top: 2px;
				}

				&:first-child {
					border-radius: 10rpx 10rpx 0 0;
				}

				&:last-child {
					border-radius: 0 0 10rpx 10rpx;
				}
			}
		}
	}
</style>