vue-insagent-app/pages/user/authInfo.vue

<template>
	<view class="page">
		<view class="headers ">
			<view class="header">
				<view class="dis a-c j-start ">
					<u-icon name="arrow-left" size="40" @tap="back"></u-icon>
					<text style="margin: auto;">我的认证</text>
				</view>
			</view>
		</view>

		<view :style="{padding:desc?'12px 15px 74px':'108px 15px 74px'}">
			<view class="reviewResult dis f-c mb-3" v-if="desc">
				<view class="dis a-c">
					<image src="../../static/image/user/error.png" mode=""
						style="width: 28rpx;height: 35rpx;margin-right: 4px;"></image>
					<text style="color: #F44149;font-size: 13px;">尊敬的{{this.userInfo.sysUser.name}}：</text>
				</view>
				<text>{{desc}}</text>
			</view>
			<view class="ImgInfo">
				<view class="title dis a-c ">
					<view class="tag"></view>
					<text>请上传身份证的正反面</text>
				</view>
				<view class="content">
					<view class="avatar dis j-s">
						<view class="infoText dis f-c ">
							<text>头像面</text>
							<text>上传您的证件头像面</text>
						</view>
						<view class="avatar-img">
							<image :src="userfrontImg?userfrontImg:'../../static/image/user/asset2.png'" mode=""
								@click="userfrontChange"></image>
							<image v-if="userfrontImg" src="../../static/image/user/del.png" mode="" class="imgdel"
								@click="imgDel('userfrontImg')">
							</image>
						</view>
					</view>
					<view class="avatar dis j-s mt-2">
						<view class="infoText dis f-c ">
							<text>国徽面</text>
							<text>上传您的证件国徽面</text>
						</view>
						<view class="avatar-img">
							<image :src="userbackImg?userbackImg:'../../static/image/user/asset1.png'" mode=""
								@click="userbackChange"></image>
							<image v-if="userbackImg" src="../../static/image/user/del.png" mode="" class="imgdel"
								@click="imgDel('userbackImg')">
							</image>
						</view>
					</view>
				</view>
			</view>
			<view class="ImgInfo" style="margin-top: 12px;">
				<view class="title dis a-c ">
					<view class="tag"></view>
					<text>请完善您的个人信息</text>
				</view>
				<view class="infoForm">
					<uni-forms :value="authInfo" ref="authForm" validate-trigger="bind" style="padding: 0 10px;"
						err-show-type="toast" label-width="70">
						<uni-forms-item label="姓名: " required name="name">
							<input class="uni-input-input textColor" placeholder="待自动录入" v-model="authInfo.name"
								placeholder-style="font-size:28upx" disabled />
						</uni-forms-item>
						<uni-forms-item label="身份证号: " required name="identifyNumber">
							<input class="uni-input-input textColor" placeholder="待自动录入" v-model="authInfo.identity"
								placeholder-style="font-size:28upx" disabled />
						</uni-forms-item>
						<uni-forms-item label="有效期限: " required>
							<input class="uni-input-input textColor" placeholder="待自动录入" v-if="!authInfo.identityTime"
								v-model="authInfo.identityTime" placeholder-style="font-size:28upx" disabled />
							<text v-else>{{authInfo.identityTime}}</text>
						</uni-forms-item>
						<uni-forms-item label="手机号: " required>
							<input class="uni-input-input textColor" placeholder="请输入手机号" v-model="authInfo.mobile"
								placeholder-style="font-size:28upx" />
						</uni-forms-item>
						<uni-forms-item label="开户行: " required>
							<input class="uni-input-input textColor" placeholder="请输入开户行" v-model="authInfo.accountno"
								placeholder-style="font-size:28upx" />
						</uni-forms-item>
						<uni-forms-item label="开户账号: " required>
							<input class="uni-input-input textColor" placeholder="请输入开户账号" v-model="authInfo.bankName"
								placeholder-style="font-size:28upx" />
						</uni-forms-item>
					</uni-forms>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="btn dis j-c a-c"
				:style="{background:disabled?'linear-gradient(90deg, #499DFF 0%, #0052FF 100%)':'linear-gradient(90deg, rgba(73, 157, 255, 0.4) 0%, rgba(0, 82, 255, 0.4) 100%)',pointerEvents:disabled?'auto':'none'}"
				@click="authSubmit">提交认证</view>
		</view>
		<auth-Modal :authShow="authShow" @btnClick="authShow=false" @maskClick="authShow=false"></auth-Modal>
	</view>
</template>
<script>
	import {
		mapState
	} from "vuex"
	import authModal from '@/components/modules/user/authModal.vue'; //实名认证弹窗
	export default {
		components: {
			authModal,
		},
		data() {
			return {
				disabled: true,
				userfrontImg: "",
				userbackImg: "",
				authShow: false,
				authInfo: {
					name: "",
					mobile: "",
					identityTime: "", //有效期
					identity: "", //证件号
					accountno: "", //开户行
					bankName: "", //开户账号
					userId: "",
					esmUserImageVo: [] //img
				},
				desc: "",
			}
		},
		watch: {
			"authInfo.name": {
				handler(val) {
					this.OnBtnChange();
				},
			},
			"authInfo.identityTime": {
				handler(val) {
					this.OnBtnChange();
				},
			},
			"authInfo.identity": {
				handler(val) {
					this.OnBtnChange();
				},
			},
			"authInfo.accountno": {
				handler(val) {
					this.OnBtnChange();
				},
			},
			"authInfo.bankName": {
				handler(val) {
					this.OnBtnChange();
				},
			},
			"authInfo.mobile": {
				handler(val) {
					this.OnBtnChange();
				},
			},
		},
		computed: {
			...mapState(['userInfo', 'token']),
		},
		onShow() {

		},
		async onLoad(params) {
			if (!!params.desc) {
				this.desc = params.desc;
			}
			this.authInfo.userId = this.userInfo.sysUser.id;
			let res = await this.$http.post('/userAgent/getAuthResult', {
				userId: this.authInfo.userId,
			});
			if (res.code == '200') {
				this.desc = res.data.desc;
				this.authInfo.name = res.data.sysUser.name;
				this.authInfo.identity = res.data.sysUser.identity;
				this.authInfo.identityTime = res.data.sysUser.identityTime;
				this.authInfo.mobile = res.data.sysUser.mobile;
				this.authInfo.accountno = res.data.sysUserInfo?.accountno;
				this.authInfo.bankName = res.data.sysUserInfo?.bankName;
				if (res.data.esmUserImageVo) this.authInfo.esmUserImageVo = res.data.esmUserImageVo;
				res.data.esmUserImageVo?.map(val => {
					if (val.type == 'SFZ_01') {
						this.userfrontImg = this.$base.baseUrl + val.path;
					} else {
						this.userbackImg = this.$base.baseUrl + val.path;
					}
					return val;
				})
			}
		},
		methods: {
			async authSubmit() {
				let res = await this.$http.post('/userAgent/agentAuth', this.authInfo);
				if (res.code == '200' && res.data.status) {
					uni.navigateTo({
						url: "/pages/user/authResult?status=" + res.data.status + '&desc=' + res.data.desc
					})
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
					});
				}

			},
			// 改变按钮状态
			OnBtnChange() {
				if (this.authInfo.name && this.authInfo.identity && this.authInfo.identityTime && this.authInfo
					.accountno && this.authInfo.bankName && this.authInfo.mobile) {
					this.disabled = true;
					return;
				}
				this.disabled = false;
			},
			async userfrontChange() {
				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.userfrontImg = chooseImageRes.tempFilePaths[0];
					uni.uploadFile({
						url: this.$base.baseUrl + '/ins/taskImage/uploadFile',
						filePath: chooseImageRes.tempFilePaths[0],
						name: "multipartFile",
						formData: {
							'type': 'image',
						},
						header: {
							Authorization: this.token,
						},
						success: (imgRes) => {
							let data = JSON.parse(imgRes.data);
							if (data.code == '200') {
								console.log(this.authInfo);
								if (this.authInfo.esmUserImageVo.some(v => v.type == 'SFZ_01')) {
									this.authInfo.esmUserImageVo.map(val => {
										if (val.type == 'SFZ_01') {
											val.imageId = data.data.id;
										}
									})
								} else {
									this.authInfo.esmUserImageVo.push({
										imageId: data.data.id,
										type: "SFZ_01",
									})
								}
								uni.uploadFile({
									url: this.$base.baseUrl + '/order/identify/idCard',
									filePath: chooseImageRes.tempFilePaths[0],
									name: "image1",
									header: {
										Authorization: this.token,
									},
									success: (uploadFileRes) => {
										let data = JSON.parse(uploadFileRes.data).data;
										this.authInfo.name = data.customerInfo.name;
										this.authInfo.identity = data.customerInfo
											.identifyNumber;
									}
								});
							}
						}
					})
				}
			},
			async userbackChange() {
				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.userbackImg = chooseImageRes.tempFilePaths[0];
					uni.uploadFile({
						url: this.$base.baseUrl + '/ins/taskImage/uploadFile',
						filePath: chooseImageRes.tempFilePaths[0],
						name: "multipartFile",
						formData: {
							'type': 'image',
						},
						header: {
							Authorization: this.token,
						},
						success: (imgRes) => {
							let data = JSON.parse(imgRes.data);
							if (data.code == '200') {
								if (this.authInfo.esmUserImageVo.some(v => v.type == 'SFZ_02')) {
									this.authInfo.esmUserImageVo.map(val => {
										if (val.type == 'SFZ_02') {
											val.imageId = data.data.id;
										}
									})
								} else {
									this.authInfo.esmUserImageVo.push({
										imageId: data.data.id,
										type: "SFZ_02",
									})
								}
								uni.uploadFile({
									url: this.$base.baseUrl + '/order/identify/idCard',
									filePath: chooseImageRes.tempFilePaths[0],
									name: "image2",
									header: {
										Authorization: this.token,
									},
									success: (uploadFileRes) => {
										let data1 = JSON.parse(uploadFileRes.data).data;
										let identifyValidDate = '';
										if (!!data1.customerInfo
											.identifyValidDate) {
											identifyValidDate = data1
												.customerInfo
												.identifyValidDate
												.substr(0, 4) +
												'-' + data1
												.customerInfo
												.identifyValidDate
												.substr(4, 2) + '-' +
												data1
												.customerInfo
												.identifyValidDate
												.substr(6,
													2)
										}
										let identifyValidEndDate = '';
										if (!!data1.customerInfo
											.identifyValidEndDate) {
											identifyValidEndDate =
												data1.customerInfo
												.identifyValidEndDate
												.substr(0,
													4) + '-' + data1
												.customerInfo
												.identifyValidEndDate
												.substr(4, 2) + '-' +
												data1
												.customerInfo
												.identifyValidEndDate
												.substr(6, 2)
										}
										this.authInfo.identityTime = identifyValidDate + "," +
											identifyValidEndDate;
									}
								});
							}
						}
					})
				}
			},
			imgDel(name) {
				this[name] = "";
			},

			//页面返回按钮
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，如果是1表示返回上一页
					success: function() {}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-forms-item {
		border-bottom: 1px solid #f2f2f2;
	}

	::v-deep .uni-forms-item:last-child {
		border: none;
	}

	::v-deep .uni-forms-item__content {
		display: flex;
		align-items: center;
	}


	page {
		background: #F7F7F7;
	}

	.headers {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999999;
		width: 100%;
		border-bottom: 1px solid #EEEEEE;

		.header {
			width: 100%;
			height: auto;
			padding: 50px 16px 14px;
			background: linear-gradient(180deg, #D1E3FE 0%, #FFFFFF 100%);

			text {
				font-size: 18px;
				font-weight: bold;
				color: #000;
			}
		}

	}

	.reviewResult {
		width: 100%;
		background: linear-gradient(90deg, #FFE2E0 0%, #FBF3F3 100%);
		border-radius: 0px 0px 0px 0px;
		border: 1px solid #FF535B;
		border-radius: 4px;
		padding: 8px 15px;
		margin-top: 96px;



		text:last-child {
			color: #333;
			font-size: 12px;
		}
	}

	.ImgInfo {
		background: #FFFFFF;
		border-radius: 5px;
		border-bottom: 1px solid #EEEEEE;

		.title {
			padding: 10px 0;

			.tag {
				width: 4px;
				height: 16px;
				background: linear-gradient(132deg, #83B4FC 0%, #3D74FE 100%);
				border-radius: 5px;
			}

			text {
				font-size: 16px;
				color: #333;
				font-weight: bold;
				margin-left: 6px;
			}
		}

		.content {
			padding: 0 10px 10px;

			.avatar {
				background: #FBFBFB;
				border-radius: 4px;
				padding: 7px 8px;

				.infoText {
					text:first-child {
						font-size: 14px;
						color: #333;
						font-weight: bold;
					}

					text:last-child {
						font-size: 12px;
						color: #999;
					}
				}

				.avatar-img {
					width: 180px;
					height: 109px;
					position: relative;
					padding: 7px;
					margin-top: 21px;
					background-image: url("/static/image/user/asset3.png");
					background-size: 100% 100%;

					image {
						width: 100%;
						height: 100%;
						border-radius: 4px;
					}

					.imgdel {
						width: 14px;
						height: 14px;
						position: absolute;
						right: 9px;
						bottom: 9px;
						border-radius: 0px;
					}
				}
			}
		}

		.infoForm {
			padding: 0 0 0;
		}


	}

	.footer {
		position: fixed;
		bottom: 0;
		height: 62px;
		background: #FFFFFF;
		box-shadow: 0px -4px 10px 0px rgba(1, 83, 255, 0.05);
		padding: 12px 16px;
		width: 100%;

		.btn {
			background: linear-gradient(90deg, rgba(73, 157, 255, 0.4) 0%, rgba(0, 82, 255, 0.4) 100%);
			background: linear-gradient(90deg, #499DFF 0%, #0052FF 100%);
			border-radius: 4px;
			padding: 7px;
			color: #FFFFFF;
			font-size: 16px;
		}
	}
</style>