vue-insagent-app/pages/user/practitionerInfo.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 class="reviewResult dis f-c"
			:style="{background:desc?'linear-gradient( 90deg, #FFE2E0 0%, #FBF3F3 100%)':'linear-gradient( 90deg, #FFF4E0 0%, #FBF8F3 100%)',borderTop:desc?'1px solid #FF535B':'1px solid #FFB053',borderBottom:desc?'1px solid #FF535B':'1px solid #FFB053'}">
			<view class="dis a-c">
				<image v-if="desc" src="../../static/image/user/error.png" mode="" style="width: 28rpx;height: 35rpx;">
				</image>
				<text v-if="desc" style="color:#F44149;font-size: 13px;">审核不通过：</text>
				<text v-else style="color: #E79E11;font-size: 13px;">尊敬的{{this.userInfo.sysUser.name}}：</text>
			</view>
			<text>{{desc?desc:'为了顺利开展您的车险业务，请您提交以下资料的照片，提交后，我们将在第一时间进行审核请您耐心等待，我们会尽快完成审核并通知您结果。'}}</text>
		</view>
		<view style="padding: 12px 15px 74px;">
			<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="dis f-c a-c">
							<view class="avatar-img">
								<image :src="userfrontImg" mode=""></image>
							</view>
							<text style="font-size: 14px;color: #333;font-weight: bold;">头像面</text>
						</view>
						<view class="dis f-c a-c">
							<view class="avatar-img">
								<image :src="userbackImg" mode=""></image>
							</view>
							<text style="font-size: 14px;color: #333;font-weight: bold;">国徽面</text>
						</view>
					</view>
				</view>
			</view>
			<view class="ImgInfo mt-3">
				<view class="title dis a-c ">
					<view class="tag"></view>
					<text>银行卡信息</text>
					<text>请确保照片清晰，信息完整可见</text>
				</view>
				<view class="content">
					<view class="bankimg dis j-c">
						<view class="dis f-c a-c">
							<view class="avatar-img">
								<image :src="bankImg?bankImg:'../../static/image/user/bank.png'" mode=""
									@click="bankchange"></image>
							</view>
							<text style="font-size: 14px;color: #333;font-weight: bold;">银行卡正面</text>
						</view>
					</view>

				</view>
				<uni-forms :value="bankInfo" ref="bankForm" validate-trigger="bind" err-show-type="toast"
					label-width="70" style="padding: 0 10px;">
					<uni-forms-item label="开户行: " required name="caryear">
						<input class="uni-input-input textColor" placeholder="输入开户行信息" v-model="bankInfo.accountno"
							placeholder-style="font-size:28upx" />
					</uni-forms-item>
					<uni-forms-item label="开户账号: " required>
						<input class="uni-input-input textColor" placeholder="输入开户账号信息" v-model="bankInfo.bankName"
							placeholder-style="font-size:28upx" />
					</uni-forms-item>

				</uni-forms>
			</view>
			<view class="ImgInfo mt-3">
				<view class="title dis a-c ">
					<view class="tag"></view>
					<text>展业资格证</text>
					<text>请确保照片清晰，信息完整可见</text>
				</view>
				<view class="content">
					<view class="bankimg dis j-c">
						<view class="dis f-c a-c">
							<view class="avatar-img">
								<image :src="certificationImg?certificationImg:'../../static/image/user/zigezheng.png'"
									mode="" @click="certificationChange">
								</image>
							</view>
							<text style="font-size: 14px;color: #333;font-weight: bold;">展业资格证</text>
						</view>
					</view>

				</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'}"
				@tap="$u.throttle(authSubmit,3000)">提交申请</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				disabled: false,
				userfrontImg: "",
				userbackImg: "",
				bankImg: "",
				certificationImg: "",
				bankInfo: {
					accountno: "",
					bankName: "",
					esmUserImageVo: [

					],
					userId: "",
				},
				desc: ""
			}
		},
		watch: {
			"bankInfo.accountno": {
				handler(val) {
					this.OnBtnChange();
				},
			},
			"bankInfo.bankName": {
				handler(val) {
					this.OnBtnChange();
				},
			},

		},
		computed: {
			...mapState(['userInfo', 'token']),
		},
		onShow() {

		},
		async onLoad() {
			this.bankInfo.userId = this.userInfo.sysUser.id;
			let res = await this.$http.post('/userAgent/getAuthResult', {
				userId: this.bankInfo.userId,
			});
			if (await res.code == '200') {
				this.desc = res.data.desc;
				this.bankInfo.accountno = res.data.sysUserInfo.accountno;
				this.bankInfo.bankName = res.data.sysUserInfo.bankName;
				this.bankInfo.esmUserImageVo = res.data.esmUserImageVo;
				res.data.esmUserImageVo.map(val => {
					switch (val.type) {
						case 'SFZ_01':
							this.userfrontImg = this.$base.baseUrl + val.path;
							break;
						case 'SFZ_02':
							this.userbackImg = this.$base.baseUrl + val.path;
							break;
						case 'YHK_01':
							this.bankImg = this.$base.baseUrl + val.path;
							break;
						case 'ZGZ_00':
							this.certificationImg = this.$base.baseUrl + val.path;
							break;
					}
					return val;
				})
			}
		},
		methods: {
			async authSubmit() {
				uni.showLoading({
					mask: true,
					title: '正在提交，请稍等片刻'
				});
				let res = await this.$http.post('/userAgent/agentSubmit', this.bankInfo);
				if (res.code == '200') {
					uni.hideLoading();
					uni.navigateTo({
						url: "/pages/user/authResult1"
					})
				} else {
					uni.hideLoading();
					uni.showToast({
						title: res.msg,
						icon: 'none',
					});
				}

			},
			// 改变按钮状态
			OnBtnChange() {
				if (this.bankInfo.accountno && this.bankInfo.bankName) {
					this.disabled = true;
					return;
				}
				this.disabled = false;
			},
			async bankchange() {
				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.bankImg = 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.bankInfo.esmUserImageVo.some(v => v.type == 'YHK_01')) {
									this.bankInfo.esmUserImageVo.map(val => {
										if (val.type == 'YHK_01') {
											val.imageId = data.data.id;
										}
									})
								} else {
									this.bankInfo.esmUserImageVo.push({
										imageId: data.data.id,
										type: "YHK_01",
									})
								}
							}
						}
					})
				}
			},
			async certificationChange() {
				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.certificationImg = 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.bankInfo.esmUserImageVo.some(v => v.type == 'ZGZ_00')) {
									this.bankInfo.esmUserImageVo.map(val => {
										if (val.type == 'ZGZ_00') {
											val.imageId = data.data.id;
										}
									})
								} else {
									this.bankInfo.esmUserImageVo.push({
										imageId: data.data.id,
										type: "ZGZ_00",
									})
								}
							}
						}
					})
				}
			},
			//页面返回按钮
			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%;

		.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, #FFF4E0 0%, #FBF8F3 100%);
		border-radius: 0px 0px 0px 0px;
		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:nth-child(2) {
				font-size: 16px;
				color: #333;
				font-weight: bold;
				margin-left: 6px;
			}

			text:nth-child(3) {
				font-size: 12px;
				color: #999;
				margin-left: 10px;
			}
		}

		.content {
			padding: 0 10px 10px;

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

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

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

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

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

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




	}

	.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 {
			border-radius: 4px;
			padding: 7px;
			color: #FFFFFF;
			font-size: 16px;
		}
	}
</style>