zhapp/pages/my/realNameAuth.vue

<template>
	<view class="page">
		<view class="authView">
			<!-- 头部识别窗口 -->
			<view class="uploadOCR dis j-s">
				<view class="view dis f-c a-c mr-2">
					<image :src="frontImg?frontImg:'/static/image/my/auth-bg1.png'" mode="" @click="frontChange">
					</image>
					<text>人像面</text>
				</view>
				<view class="view dis f-c a-c ">
					<image :src="backImg?backImg:'/static/image/my/auth-bg2.png'" mode="" @click="backChange"></image>
					<text>国徽面</text>
				</view>
			</view>
			<view class="mt-3 mb-2">
				<u-gap height="5" bgColor="#FAFAFA"></u-gap>
			</view>
			<!-- 表单区域 -->
			<u--form labelPosition="left" :model="ownerInfo" ref="ownerForm" labelWidth="80" errorType="message">
				<u-form-item label="姓名" prop="name" borderBottom>
					<u-input v-model="ownerInfo.name" border="none" clearable placeholder="请输入姓名"
						placeholderStyle="text-align:right;"></u-input>
				</u-form-item>

				<u-form-item label="身份证号" borderBottom>
					<u-input v-model="ownerInfo.identity" border="none" clearable placeholder="请输入证件号"
						placeholderStyle="text-align:right;"></u-input>
				</u-form-item>
				<u-form-item label="手机号" borderBottom>
					<u-input v-model="ownerInfo.mobile" border="none" clearable placeholder="请输入手机号" maxlength="11"
						placeholderStyle="text-align:right;"></u-input>
				</u-form-item>
				<u-form-item label="有效期始" borderBottom @click="identifyValidDateShow = true; ">
					<u--input v-model="ownerInfo.identityTimeStart" disabled disabledColor="#ffffff" clearable
						suffixIcon='calendar' suffixIconStyle="color:#333;font-size:40rpx" placeholder="请选择证件起期  "
						placeholderStyle="text-align:right;" border="none" style="pointer-events: none"></u--input>

				</u-form-item>
				<u-form-item label="有效期止" @click="identifyValidEndDateShow = true; ">
					<u--input v-model="ownerInfo.identityTimeEnd" disabled disabledColor="#ffffff" clearable
						suffixIcon='calendar' suffixIconStyle="color:#333;font-size:40rpx;margin-right:20px"
						placeholder="请选择证件止期  " placeholderStyle="text-align:right;" border="none"
						style="pointer-events: none">
					</u--input>
					<u-checkbox-group v-model="ownerlongTerm" iconPlacement="right" @change="ownerlongTermChange">
						<u-checkbox activeColor="#FDE935" iconColor="#333" labelSize="15px" shape="circle" label="长期有效"
							name="长期有效"></u-checkbox>
					</u-checkbox-group>
				</u-form-item>
			</u--form>
			<view class="btn dis a-c j-c " @click="authEnticate">
				确定
			</view>
		</view>
		<view class="footer mt-2">
			<view class="header dis a-c  j-s mb-4">
				<image class="line" src="/static/image/my/auth-line1.png" mode=""></image>
				<text>实名认证后 将获得以下权限</text>
				<image class="line" src="/static/image/my/auth-line2.png" mode=""></image>
			</view>
			<view class="cell">
				<view class="item dis f-c a-c " v-for="(item,index) in celllsit" :key="index">
					<image :src="item.icon" mode=""></image>
					<text>{{item.text}}</text>
				</view>
			</view>
		</view>
		<!-- 日期组件 -->
		<u-datetime-picker :show="identifyValidDateShow" v-model="identifyValidDatevalue" mode="date"
			:formatter="formatter" @cancel="identifyValidDateShow=false" @close="identifyValidDateShow=false"
			:closeOnClickOverlay="true" @confirm="identifyValidDateconfirm" confirmText="确定"></u-datetime-picker>
		<u-datetime-picker :show="identifyValidEndDateShow" mode="date" v-model="identifyValidEndDatevalue"
			:formatter="formatter" @cancel="identifyValidEndDateShow=false" @confirm="identifyValidEndDateconfirm"
			:closeOnClickOverlay="true" @close="identifyValidEndDateShow=false" confirmText="确定"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import store from '@/store';
	export default {
		data() {
			return {
				identifyValidDateShow: false,
				identifyValidEndDateShow: false,
				identifyValidDatevalue: Number(new Date()), //证件起期
				identifyValidEndDatevalue: Number(new Date()), //证件止期
				ownerInfo: {
					name: "",
					mobile: "",
					identity: "",
					identityTimeStart: "",
					identityTimeEnd: "",

				},
				ownerlongTerm: [], //车主长期
				celllsit: [{
					icon: "/static/image/my/auth-footer1.png",
					text: "车险报价"
				}, {
					icon: "/static/image/my/auth-footer2.png",
					text: "专属客服"
				}, {
					icon: "/static/image/my/auth-footer3.png",
					text: "出单佣金"
				}, {
					icon: "/static/image/my/auth-footer4.png",
					text: "积分权益"
				}],
				ImageListId: [], //图片id
				frontImg: null,
				backImg: null,
			}
		},
		onShow() {

		},
		onLoad() {
			if (this.userInfo.sysUser?.authStatus == 2) {
				this.authenticateInfoQuery();
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			//认证信息查询
			async authenticateInfoQuery() {
				let res = await this.$http.get('/appUser/authInfoGet?id=' + this.userInfo.sysUser.id)
				if (res.code == 200) {
					this.ownerInfo = {
						name: res.data.name,
						mobile: res.data.mobile,
						identity: res.data.identity,
						identityTimeStart: res.data.identityTimeStart,
						identityTimeEnd: res.data.identityTimeEnd,
					}
				} else {
					uni.showToast({
						title: '查询失败',
						icon: "none"
					});
				}
			},
			//起始日期回调时事件
			identifyValidDateconfirm(e) {
				this.ownerInfo.identityTimeStart = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.identifyValidDateShow = false;
			},
			identifyValidEndDateconfirm(e) {
				this.ownerInfo.identityTimeEnd = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.identifyValidEndDateShow = false;
			},
			//日期格式化函数
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			//长期处理
			ownerlongTermChange(e) {
				if (e.length) {
					this.ownerInfo.identityTimeEnd = '9999-12-31';
				} else {
					this.ownerInfo.identityTimeEnd = '';
				}
			},
			//提交认证
			async authEnticate() {
				let res = await this.$http.post('/appUser/authInfoAdd', {
					userId: this.userInfo.sysUser.userId,
					fileList: this.ImageListId,
					...this.ownerInfo
				})
				if (res.code == 200) {
					//调用认证接口
					uni.navigateTo({
						url: '/pages/my/authStatusPage',
					})
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
				}
			},
			//car正面
			async frontChange() {
				let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed']
				});
				let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
				if (!size) {
					this.$refs.uToast.show({
						title: '上传图片大小不能超过 5MB!',
						type: 'error',
					})
					return false
				}
				if (chooseImageRes) {
					this.frontImg = chooseImageRes.tempFilePaths[0];
					uni.uploadFile({
						url: this.$base.baseUrl + '/file/upload',
						filePath: chooseImageRes.tempFilePaths[0],
						name: "file",
						formData: {
							'type': 'image',
						},
						header: {
							Authorization: store.state.token,
							system_code: store.state.system_code ? store.state.system_code : ''
						},
						success: (imgRes) => {
							let data = JSON.parse(imgRes.data);
							if (data.code == '200') {
								if (this.ImageListId.some(v => v.fileType == 'sfz1')) {
									this.ImageListId.map(val => {
										if (val.fileType == 'sfz1') {
											val.fileId = data.data.id;
										}
									})
								} else {
									this.ImageListId.push({
										fileId: data.data.id,
										fileType: "sfz1",
									})
								}
							}

						}
					});
				} else {}
			},
			async backChange() {
				let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed']
				});
				let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
				if (!size) {
					this.$refs.uToast.show({
						title: '上传图片大小不能超过 5MB!',
						type: 'error',
					})
					return false
				}
				if (chooseImageRes) {
					this.backImg = chooseImageRes.tempFilePaths[0];
					uni.uploadFile({
						url: this.$base.baseUrl + '/file/upload',
						filePath: chooseImageRes.tempFilePaths[0],
						name: "file",
						formData: {
							'type': 'image',
						},
						header: {
							Authorization: store.state.token,
							system_code: store.state.system_code ? store.state.system_code : ''
						},
						success: (imgRes) => {
							let data = JSON.parse(imgRes.data);
							if (data.code == '200') {
								if (this.ImageListId.some(v => v.fileType == 'sfz2')) {
									this.ImageListId.map(val => {
										if (val.fileType == 'sfz2') {
											val.fileId = data.data.id;
										}
									})
								} else {
									this.ImageListId.push({
										fileId: data.data.id,
										fileType: "sfz2",
									})
								}
							}

						}
					});
				} else {}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F8F8F8;
		height: 100vh;
	}

	::v-deep {
		.uni-input-input {
			text-align: right !important;
		}

		.u-checkbox__icon-wrap {
			margin-left: 10rpx;
		}
	}

	.authView {
		padding: 30rpx 30rpx 60rpx;
		box-sizing: border-box;
		background: #fff;

		.uploadOCR {
			.view {
				flex: 1;

				image {
					width: 100%;
					height: 207rpx;
				}

				text {
					font-size: 28rpx;
					color: #333;
					margin-top: 10rpx;
				}
			}
		}

		.btn {
			height: 88rpx;
			margin: 60rpx 10rpx 0;
			padding: 20rpx;
			box-sizing: border-box;
			background: #FDE935;
			border-radius: 45rpx 45rpx 45rpx 45rpx;
			font-size: 36rpx;
			color: #1F1F1F;
			font-weight: bold;
		}
	}

	.footer {
		background: #fff;
		padding: 40rpx 54rpx;
		box-sizing: border-box;

		.header {
			.line {
				width: 110rpx;
				height: 18rpx;
			}

			text {
				font-size: 30rpx;
				color: #333;
			}
		}

		.cell {
			display: grid;
			/* 启用网格布局 */
			grid-template-columns: repeat(4, 1fr);
			/* 3 列，每列等宽 */
			grid-template-rows: auto;
			/* 只设置行间距（上下） */
			column-gap: 30rpx;

			/* 列间距设为 0（可选） */
			.item {
				image {
					width: 70rpx;
					height: 70rpx;
					margin-bottom: 14rpx;
				}

				text {
					font-size: 28rpx;
					color: #333;
				}
			}
		}
	}
</style>