pay-video-applet-uniapp-24-8-22/pages_mine/mine/certifiedIndividual.vue

<template>
	<view class="certified-individual">
		<!--顶部导航栏-->
		<navbar leftClick @leftClick="$utils.navigateBack" title="上传身份证信息" />


		<!--内容区域-->
		<view class="content">
			<view class="title">
				<view class="image">
					<image src="../static/auth/1.svg" style="width: 100%;height: 100%"></image>
				</view>
				请确保二代身份证有效,并且头像文字清晰，四角对齐,无反光，无遮挡。
			</view>
			<view class="center">
				<view class="avatarFace" @click="uploadImage('imageStraight')">
					<image v-if="certifiedIndividual.imageStraight" :src="certifiedIndividual.imageStraight"
						style="width: 100%;height: 100%"></image>
					<image v-else src="../static/auth/4.png" style="width: 100%;height: 100%"></image>
				</view>
				<view class="reverseSide" @click="uploadImage('imageReverseSide')">
					<image v-if="certifiedIndividual.imageReverseSide" :src="certifiedIndividual.imageReverseSide"
						style="width: 100%;height: 100%"></image>
					<image v-else src="../static/auth/5.png" style="width: 100%;height: 100%"></image>
				</view>
			</view>
		</view>

		<!--立即认证按钮-->
		<view @click="nowAuth" class="bottomBtn">
			下一步
		</view>

		<!--人脸识别服务协议-->
		<!-- <view class="agree">
			<uv-checkbox-group v-model="checkboxValue" placement="column" size="35" activeColor="#008000"
				inactiveColor="#999999">
				<uv-checkbox shape='circle' :checked="true" name="apple" :label="labelValue ? labelValue : ''"
					iconSize="35">
				</uv-checkbox>
			</uv-checkbox-group>
			我已阅读并同意签署 <text @click="$refs.popup.open('getPrivacyPolicy')">服务协议与隐私条款</text>
			<text @click="$refs.popup.open('getUserAgreement')">个人信息保护指引</text>
		</view> -->
		
		<view class="config">
			<uv-checkbox-group
				v-model="checkboxValue"
				shape="circle">
				<view class="content">
					<view
					style="display: flex;">
						
						<uv-checkbox
							size="30rpx"
							:name="1"
						></uv-checkbox>
						阅读并同意我们的<text @click="$refs.popup.open('getPrivacyPolicy')">“服务协议与隐私条款”</text>
					</view>
					<view class="">
						以及<text @click="$refs.popup.open('getUserAgreement')">个人信息保护指引</text>
					</view>
				</view>
			</uv-checkbox-group>
		</view>
		
		
		<configPopup ref="popup"></configPopup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		onLoad: function(options) {
			this.type = options.type;
		},
		computed: {
			...mapState(['certifiedIndividual']),
		},
		data() {
			return {
				checkboxValue: [],
				labelValue: '', // 如果labelValue为空，则不会显示任何内容
				type: '',
			};
		},
		methods: {
			uploadImage(key) {
				let self = this
				this.$Oss.ossUploadImage({
					success: url => {
						console.log(url, "url");
						this.certifiedIndividual[key] = url
						self.$forceUpdate()
					}
				})
			},
			nowAuth() {
				
				if(!this.checkboxValue.length){
					return uni.showToast({
						title: '请先同意隐私协议',
						icon:'none'
					})
				}

				if (!this.certifiedIndividual.imageReverseSide) {
					return uni.showToast({
						title: '请上传身份证背面',
						icon: 'none'
					})
				}
				if (!this.certifiedIndividual.imageStraight) {
					return uni.showToast({
						title: '请上传身份证正面',
						icon: 'none'
					})
				}

				// uni.redirectTo({
				//   url: '/pages_mine/mine/authPerson'
				// })

				// 根据type跳转到不同页面(个人认证/企业认证)
				if (this.type == "person") {
					uni.redirectTo({
						url: '/pages_mine/mine/authPerson'
					})
					// this.$utils.navigateTo('/mine/authPerson')
				} else if (this.type == "firm") {
					uni.redirectTo({
						url: '/pages_mine/mine/authFirm'
					})
					// this.$utils.navigateTo('/mine/authFirm')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.certified-individual {
		.content {
			padding: 40rpx;

			.title {
				display: flex;
				font-size: 30rpx;

				.image {
					display: flex;
					align-items: flex-start;
					width: 10vw;
					height: 3vh;
				}
			}

			.center {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: 80rpx;
				margin-top: 20rpx;

				.avatarFace {
					width: 600rpx;
					height: 300rpx;
				}

				.reverseSide {
					width: 600rpx;
					height: 300rpx;
				}
			}
		}

		.bottomBtn {
			// position: fixed;
			// bottom: 15%;
			// left: 25%;
			margin: 0 auto;
			margin-top: 50rpx;
			width: 50%;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			text-align: center;

			//border: 1px solid red;
			background: $uni-linear-gradient-color;
			-webkit-background-clip: text;
			/*将设置的背景颜色限制在文字中*/
			-webkit-text-fill-color: transparent;
			/*给文字设置成透明*/
		}

		// .agree {
		// 	position: fixed;
		// 	bottom: 7%;
		// 	left: 15%;
		// 	display: flex;
		// 	font-size: 26rpx;
		// 	justify-content: center;
		// 	//border: 1px solid red;
		// }
		
		
		.config{
			position: fixed;
			bottom: 20rpx;
			margin: 0 auto;
			font-size: 28rpx;
			text-align: center;
			line-height: 50rpx;
			text{
				color: #3c69f1;
			}
		}
	}
</style>