file.vue

<template>
	<view class="page-content">
		<Settle :index="2">
			<view class="tip-text">
				<image class="tip-image" mode="widthFix" :src="anquanImage"></image>
				<text>身份证照片、电工证照片、行驶证/驾驶证照片及车辆照片仅用于申请入驻。</text>
			</view>
			<view class="info-view">
				<view v-for="(fileItem, index) in formShowList" class="title-view" :key="index">
					<view class="title-left-view">
						<image v-if="fileItem.required" class="title-image" :src="mixingImage"></image>
						<text>{{ fileItem.label }}</text>
					</view>
					<view class="info-tip-text">{{ fileItem.tips }}</view>
					<view class="image-view">
						<image
							class="info-image"
							mode="aspectFill"
							v-for="(src, key) in fileItem.placeholderImages"
							:src="fileItem.imgs.length > key ? fileItem.imgs[key] : src"
							:key="key"
							@click="handleClick(fileItem, index, key)"
						></image>
					</view>
					<view class="card-info-view" v-if="index == 0 
					&& ((fileInfo.id_card_name || fileInfo.id_card_number || fileInfo.id_card_expire) || frontErrorMsg || backErrorMsg)">
						<view class="card-list-view" v-for="(value, cardkey) in cardTitle" :key="cardkey">
							<view class="card-list-item">
								<text>{{ value }}</text>
								<text class="card-item-text">{{ fileInfo[cardkey] }}</text>
							</view>
							<view class="line-view"></view>
							<view class="card-item-error" v-if="((cardkey == 'id_card_name' || cardkey == 'id_card_number') && frontErrorMsg)">{{ frontErrorMsg }}</view>
							<view class="card-item-error" v-if="(cardkey == 'id_card_expire' && backErrorMsg)">{{ backErrorMsg }}</view>
						</view>
					</view>
					<view v-if="index == 0" class="bottom-tip-view">
						<image class="bottom-tip-image" mode="widthFix" :src="tishiImage"></image>
						<text>所上传的身份证信息必须与银行卡开户绑定身份证信息一致，否则将导致订单报酬无法交付</text>
					</view>
				</view>
			</view>

			<template v-slot:bottom>
				<view class="btn-wrap flex-xc">
					<u-button class="btn-submit" @click="$u.debounce(submitFileInfo, 500)" :custom-style="buttonStyle"
						type="primary" shape="circle" :hover-class="submitStatus ? '' : 'none'">
						{{ !submitBtnStatus ? '下一步' : '我已确认信息，下一步' }}
					</u-button>
				</view>
			</template>

			<!-- <view class="base-list">
				<template v-for="(fileItem, index) in formShowList">
					<view class="item item-select flex flex-yc" :key="index" @click="toUploadImg(fileItem, index)">
						<view class="label txt">{{ fileItem.label }}</view>
						<p class="flex1 u-text-right txt" v-show="fileInfo[fileItem.filedName] !== ''">
							{{ imgObj[fileItem.filedName] && imgObj[fileItem.filedName].length + '张' }}
						</p>
						<u-icon name="arrow-right" color="#999" size="28"></u-icon>
					</view>
					<view class="tips" :key="index + 't'">{{ fileItem.tips }}</view>
					<view class="tips id-identity-box" :key="index + 'identity'" v-if="fileItem.filedName === 'id_card_front'">
						<view class="txt">请核实识别结果</view>
						<view class="txt">
							身份证姓名：{{ fileInfo.id_card_name }}
							<span class="red" v-show="!fileInfo.id_card_name && fileInfo.id_card_front">识别失败，请重新上传</span>
						</view>
						<view class="txt">
							身份证号码：{{ fileInfo.id_card_number }}
							<span class="red" v-show="!fileInfo.id_card_name && fileInfo.id_card_front">识别失败，请重新上传</span>
						</view>
					</view>
				</template>
			</view> -->
			<!-- 		<view class="seat"></view>
		<view class="btn-wrap fixed flex flex-xc">
			<button class="btn-submit" :disabled="!submitBtnStatus" @click="$u.debounce(submitFileInfo, 500)">
				{{
	                            !submitBtnStatus ? "完成必填项，可提交资料" : "提交"
	                        }}
			</button>
		</view> -->
		</Settle>
	</view>
</template>

<script>
import Settle from '@/components/settle/index.vue'
import base from '@/components/upload/index';
const app = getApp()
export default {
	mixins:[base],
	components: {
		Settle
	},
	data() {
		return {
			imgList:[],
			frontErrorMsg: '',
			backErrorMsg: '',
			uploadType: '',
			settledInfo: '',
			fileInfo: {
				id: "",
				id_card_name: "",
				id_card_number: "",
				id_card_expire: '',
				id_card_front: "",
				id_card_back: "",
				electrician_certificate: "",
				/** 
				 * 其他证件照片信息，json串储存
				 * driver_license:驾驶证
				 * driving_license:行驶证
				 * vehicle:车辆照
				 **/
				other_photos: {
					driver_license: {
						url: "",
					},
					driving_license: {
						url: "",
					},
					vehicle: {
						url: "",
					},
				},
				id_card_back_check: false,
			},
			imgObj: {
				id_card_front: [],
				id_card_back: [],
				electrician_certificate: [],
				driver_license: [],
				driving_license: [],
				vehicle_front: [],
				vehicle_side: [],
			},
			formShowList: [{
					filedName: "id_card_front",
					required: true,
					maxImgs: 2,
					label: "实名认证",
					tips: "上传二代身份证照片，图片大小不大于3M",
					imgs: [],
					placeholderImages: [process.uniEnv.qn_base_url + 'renxiang.png', process.uniEnv.qn_base_url + 'guohui.png']
				},
				// {
				// 	filedName: "id_card_back",
				// 	required: true,
				// 	label: "身份证国徽面",
				// 	maxImgs: 1,
				// 	tips: "上传二代身份证照片，图片大小不大于3M",
				// 	imgs: [],
				// },
				{
					filedName: "electrician_certificate",
					label: "电工证照",
					required: true,
					maxImgs: 1,
					tips: "上传电工证或特种作业操作证",
					imgs: [],
					placeholderImages: [process.uniEnv.qn_base_url + 'diangong.png']
				},
				{
					filedName: "driver_license",
					label: "驾驶证/行驶证照片",
					imgs: [],
					maxImgs: 999,
					tips: "两证单张照片需包含两页内容，每种证件只上传一张照片",
					placeholderImages: [process.uniEnv.qn_base_url + 'jiashi.png', process.uniEnv.qn_base_url + 'jiashi.png']
				},
				{
					filedName: "vehicle_front",
					label: "车辆照",
					maxImgs: 1,
					tips: "上传车辆照片",
					imgs: [],
					placeholderImages: [process.uniEnv.qn_base_url + 'zhengmian.png',
						process.uniEnv.qn_base_url + 'cemian.png']
				},

			],
			submitSuccess: false,
			saving: false,
		}
	},
	onLoad(e) {
		getApp().trackPage('入驻证件信息上传页')
		this.initSettledInfo()
	},
	updated() {
		// 该方法性能消耗大目前不使用
		// this.updateImgs()
	},
	watch: {
		"fileInfo.id_card_front"() {
			if (this.fileInfo.id_card_front) {
				this.checkIdCard("front");
			} else {
				this.fileInfo.id_card_name = "";
				this.fileInfo.id_card_number = "";
			}
		},
		"fileInfo.id_card_back"() {
			if (this.fileInfo.id_card_back) {
				this.checkIdCard("back");
			} else {
				this.fileInfo.id_card_back_check = true;
			}
		},
	},
	computed: {
		submitBtnStatus() {
			// const baseInfo = this.baseInfo
			const fileInfo = this.fileInfo
			const flag = fileInfo.id_card_front && fileInfo.id_card_back && fileInfo.electrician_certificate
			return flag && !this.saving;
		},
		cardTitle() {
			return {
				'id_card_name': '姓名',
				'id_card_number': '身份证号',
				'id_card_expire': '有效期'
			}
		},
		anquanImage() {
			return process.uniEnv.qn_base_url + 'anquan.png'
		},
		mixingImage() {
			return process.uniEnv.qn_base_url + 'mixing.png'
		},
		tishiImage() {
			return process.uniEnv.qn_base_url + 'tishi.png'
		},
		buttonStyle() {
			return this.submitBtnStatus ? {
				'color': '#FFFFFF',
				'background-color': '#2272FF;',
				'width': '600rpx',
				'height': '104rpx',
				'font-size': '32rpx',
				'font-weight': 'bold'
			} : {
				'color': '#FFFFFF',
				'background-color': '#D1D4D4;',
				'width': '600rpx',
				'height': '104rpx',
				'font-size': '32rpx',
				'font-weight': 'bold'
			}
		},
		settled() {
			return this.vuex_settled && this.vuex_settled.record || null
		},
	},
	components: {

	},
	methods: {
		// 初始化入驻信息
		async initSettledInfo() {
			let self = this
			const callBack = (vm, result) => {
				vm.settledInfo = result.record
				vm.fileInfo.id = result.record.id
			}
			if(self.settled && self.settled.length) {
				callBack(self, self.vuex_settled)
			} else {
				await getApp().getBaseInfo(self, callBack)
				uni.hideLoading()
			}
		},
		
		 // item: formShowList的元素
		 // index、key: 选中的是formShowList的第index里面的第key个图片选择器
		async handleClick(item, index, key) {
			let self = this
			self.imgList = []
			self.uploadType = item.filedName || ''
			// 默认上传证件类型图片
			let attr = {category: self.categories[1]}
			switch (item.filedName) {
				case 'id_card_front':
					// 身份证
					// 上传图片
					// 成功之后更新 fileInfo、  item里的imgs
					attr = {category: self.categories[2]}
					if(key == 0) {
						// 身份证正面照片
						self.uploadType  = "id_card_front"
					} else {
						// 身份证反面照片
						self.uploadType  = "id_card_back"
					}
					break;
				case 'driver_license':
					// 驾驶证/行驶证
					if(key == 0) {
						// 驾驶证照片
						self.uploadType  = "driver_license"
					} else {
						// 行驶证照片
						self.uploadType  = "driving_license"
					}
					break;
				case 'vehicle_front':
					// 车辆照
					if(key == 0) {
						// 车辆正面照片
						self.uploadType  = "vehicle_front"
					} else {
						// 车辆侧面照片
						self.uploadType  = "vehicle_side"
					}
					break;
				default:
					//其他
					// 上传图片
					// 成功之后更新 item里的imgs
					break;
			}
			
			if (self.uploadType === 'id_card_front' || self.uploadType === 'id_card_back') {
				await self.chooseImage("qiniu", {...attr, options: {count: 1}})
			} else {
				self.imgList = await self.chooseImg({count: 1})
			}
			
			if(self.uploadType && self.imgList && self.imgList.length > 0) {
				// 设置图片对象
				self.imgObj[self.uploadType] = self.imgList
				self.formShowList[index].imgs[key] = self.imgList[0].path
				this.updateImgs()
			}
		},
		
		updateImgs() {
			const uploadType = this.uploadType
			const uploadImgs = this.imgObj[uploadType]
			if (uploadImgs && uploadImgs.length < 1) {
				return
			}
			let photoType = uploadType;
			if(uploadType === 'vehicle_front' || uploadType === 'vehicle_side') {
				photoType = 'vehicle'
			}
			if (photoType === 'driver_license' || photoType === 'driving_license' || photoType === 'vehicle') {
				let otherImgs = this.imgObj[uploadType]
				if (photoType === 'vehicle') {
					otherImgs = this.imgObj['vehicle_front'].concat(this.imgObj['vehicle_side'])
				}
				
				let imgs = []
				otherImgs.map(item => {
					const img = item.key || ''
					imgs.push(img)
				})
				
				this.fileInfo['other_photos'][photoType]['url'] = imgs.join(',')
				return
			}
			this.fileInfo[uploadType] = uploadImgs[0].key || '' //(uploadType === 'id_card_front' || uploadType === 'id_card_back') ? uploadImgs[0].src : (uploadImgs[0].key || '')
		},
		toUploadImg(item, index) {
			this.uploadType = item.filedName
			uni.navigateTo({
				url: '/pages/settle/file-upload?uploadType=' + item.filedName
			})
			// this.fileUploadIndex = index;
		},
		gopage(url) {
			uni.navigateTo({
				url,
			});
		},
		async checkIdCard(type) {
			uni.showLoading({
				title: '识别中'
			})
			let request = {
				front: this.$u.api.checkSettleIDCardFront,
				back: this.$u.api.checkSettleIDCardBack,
			};
			let url = {
				front: this.fileInfo.id_card_front,
				back: this.fileInfo.id_card_back,
			};

			const params = {
				["id_card_" + type]: url[type],
				id: this.fileInfo.id || 0,
			}

			const res = await request[type](params);
			if (res.code !== 200) {
				if (type === "front") {
					this.fileInfo.id_card_name = "";
					this.fileInfo.id_card_number = "";
					this.frontErrorMsg = res.message || "识别失败，请重新上传"
				} else {
					this.fileInfo.id_card_back_check = false;
					this.backErrorMsg = res.message || "识别失败，请重新上传"
				}
				return
			}
			uni.hideLoading()
			if (type === "front") {
				this.fileInfo.id_card_name =
					res.data.id_card_name || "";
				this.fileInfo.id_card_number =
					res.data.id_card_number || "";
				this.frontErrorMsg = (!this.fileInfo.id_card_name || !this.fileInfo.id_card_number) ? "识别失败，请重新上传" : ''
			} else {
				this.fileInfo.id_card_expire = res.data.id_card_expire || "";
				this.fileInfo.id_card_back_check = true;
				this.backErrorMsg = !this.fileInfo.id_card_expire ? "识别失败，请重新上传" : ''
			}
		},
		checkFileInfo() {
			let formFlag = true;
			const fileInfo = this.fileInfo;

			let checkFunc = function(item) {
				if(item.filedName === 'id_card') {
					const value = fileInfo['id_card_front'];
				}
				const value = fileInfo[item.filedName];
				const tips = "请上传您的" + item.label;
				if (!value) {
					uni.showToast({
						title: tips,
						icon: 'none'
					})
					return false;
				}
				return true;
			};
			const flagArr = this.formShowList.some((item) => {
				// 返回验证失败的数组
				let flag = true;
				if (item.required) {
					flag = checkFunc(item);
				}
				return !flag;
			});
			formFlag = !flagArr || flagArr.length > 1;
			if (formFlag) {
				if (!fileInfo.id_card_name) {
					uni.showToast({
						title: '身份证识别不通过，请重新上传',
						icon: 'none'
					})
					formFlag = false;
					return formFlag;
				}
				if (!fileInfo.id_card_back_check) {
					uni.showToast({
						title: '身份证国徽面识别不通过，请重新上传',
						icon: 'none'
					})
					formFlag = false;
				}
			}

			return formFlag;
		},
		async submitFileInfo() {
			if (!this.submitBtnStatus) {
				return
			}
			if (!this.checkFileInfo()) {
				return;
			}
			let fileInfo = this.fileInfo;
			fileInfo.other_photos = JSON.stringify(fileInfo.other_photos)
			let submitInfoData = {
				...fileInfo,
				recommender: getApp().globalData.settleRecommend,
			}
			uni.showLoading({
				title: '加载中……'
			})
			const res = await this.$u.api.submitSettleFileInfo(submitInfoData)
			uni.hideLoading()
			if (res.code !== 200) {
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
				return
			}
			uni.showToast({
				title: '资料提交成功',
			})
			let timer = setTimeout(() => {
				clearTimeout(timer)
				uni.navigateTo({
					url: '/pages/settle/prompt'
				})
			}, 2000)

			this.submitSuccess = true;
			//             this.$u.api.post("@u/v1/h5/settled/submit-info", submitInfoData)
			//                 .then((res) => {
			//                     uni.hideLoading()

			//                     if (res.status != 200) {
			//                         return;
			//                     }
			//                     if (res.data) {
			// 						uni.showToast({
			// 							title:'工作人员2个工作日内审核回复',
			// 							icon:'none'
			// 						})
			//                         this.submitSuccess = true;
			//                     }
			//                 })
			//                 .catch(() => {
			//                     //Indicator.close();
			//                 });
		},
	},
}
</script>

<style lang="scss" scoped>
	.page-content {
		background-color: #F4F5F7;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow-y:auto;
	}

	.base-list {
		.item {
			display: flex;
			margin-bottom: 58rpx;
			padding: 28rpx 30rpx;
			width: 100%;
			height: 100rpx;
			font-size: 32rpx;
			background-color: #fff;

			.label {
				color: #333;
				font-size: 32rpx;
			}

			.txt {
				line-height: 44rpx;
				color: #333;
				font-size: 32rpx;
			}

			.required {
				margin: 0 6rpx;
				color: red;
				font-size: 32rpx;
			}

			.iconfont {
				color: #999;
			}
		}

		.tips {
			margin-top: 20rpx;
			padding: 0 30rpx;
			line-height: 40rpx;
			font-size: 28rpx;
			color: #666;

			&+.id-identity-box {
				margin-top: -38rpx;
				margin-bottom: 40rpx;
			}
		}

		.id-identity-box {
			.txt {
				padding-top: 8rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				color: #666;

				&:first-child {
					margin-top: -58rpx;
					padding-top: 12rpx;
				}

				.red {
					color: red;
				}
			}

			// &.tips{
			//     margin-bottom:0!important;
			// }

		}

		.item+.tips {
			margin-top: -38rpx;
			margin-bottom: 58rpx;
		}

		/*选择内容*/
		.item-select {
			font-size: 30rpx;
			color: #333;
			font-weight: 500;
			justify-content: space-between;
			border-bottom: 1rpx solid #f5f5f5;
		}

		.flex1 {
			flex: 1 !important;

			&.txt {
				white-space: nowrap;
				// max-width: 450rpx;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.item-input {
			overflow: hidden;

			input {
				text-align: right;
				line-height: 44rpx;
				width: 100%;
				font-size: 30rpx;
				color: #333;
				font-weight: 400;
			}

			.input-readonly {
				font-size: 30rpx;
				color: #999;
				font-weight: 400;
			}

			input::-webkit-input-placeholder {
				font-size: 30rpx;
				color: #999;
				font-weight: 400;
			}

			input:-moz-placeholder {
				font-size: 30rpx;
				color: #999;
				font-weight: 400;
			}

			input:-ms-input-placeholder {
				font-size: 30rpx;
				color: #999;
				font-weight: 400;
			}
		}
	}

	.tip-text {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 38rpx 30rpx 30rpx 30rpx;
		height: 140rpx;
		margin-bottom: 20rpx;
		font-size: 24rpx;
		color: #000000;
		display: flex;
		align-items: flex-start;
	}

	.tip-image {
		width: 30rpx;
		height: 32rpx;
		margin-right: 8rpx;
		margin-top: 2rpx;
		flex-shrink: 0;
	}

	.bottom-tip-view {
		color: #999999;
		font-size: 20rpx;
		display: flex;
		align-items: flex-start;
		margin-top: 30rpx;
	}

	.bottom-tip-image {
		width: 22rpx;
		height: 22rpx;
		margin-right: 8rpx;
		margin-top: 4rpx;
		flex-shrink: 0;
	}

	.seat {
		padding-bottom: 144rpx;
	}

	/*提交按钮*/
	.btn-wrap {
		width: 100%;

		.btn-submit {

		}
	}
	.card-info-view {
		margin-top: 30rpx;
		.card-list-view {
			.card-list-item {
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				color: #333333;
				.card-item-text {
					color: #666666;
					width: 60%;
				}
			}
			.line-view {
				background-color: #F4F5F7;
				height: 2rpx;
				width: 100%;
			}
			.card-item-error{
				color: red;
				font-size: 20rpx;
			}
		}
	}

	.info-view {
		// margin-bottom: 188rpx;

		.title-view {
			background-color: #FFFFFF;
			border-radius: 12rpx;
			padding: 38rpx 30rpx 30rpx 30rpx;
			margin-bottom: 20rpx;
			font-size: 32rpx;
			color: #333333;
			.title-left-view {
				font-weight: bold;
			}

			.title-image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 10rpx;
			}
		}

		.info-tip-text {
			font-size: 24rpx;
			color: #666666;
			margin-top: 10rpx;
		}

		.image-view {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;

			.info-image {
				width: 300rpx;
				height: 226rpx;
			}
		}
	}
</style>