yiliangyiyun-app/pageD/identity/driverIdentityThree.vue

<template>
	<view class="center">
		<view class="picture">

			<view style="margin: 0 auto;height: 240px;" v-if="travels != ''">
				<!-- 	<image v-bind:src="travels" class="picture"></image>
				<view class="floats" v-if="certificates == true">
					<image src="../../static/img/authentication/xiangji@3x.png" style="width: 60px;height: 50px;">
					</image>
					<view class="words">
						上传行驶证
					</view>
				</view> -->
				<upload class="upload" ref="upload" :action="action" :max-size="maxSize" :max-count="1"
					:size-type="['compressed']" @on-success="getImgUrl" @on-error="onError" @on-remove="onRemove"
					@on-uploaded="isAdd = true" :before-upload="filterFileType" :options="uploadOptions"
					:custom="uploadCustom" @on-progress="onProgress"></upload>
			</view>
			<view style="margin: 0 auto;height: 240px;" v-if="drives != ''">
				<!-- <image v-bind:src="drives" class="picture"></image>
				<view class="floats" v-if="certificatesTwo == true">
					<image src="../../static/img/authentication/xiangji@3x.png" style="width: 60px;height: 50px;">
					</image>
					<view class="words">
						上传驾驶证
					</view>
				</view> -->
				<upload class="upload" ref="upload" :action="action" :max-size="maxSize" :max-count="1"
					:size-type="['compressed']" @on-success="getImgUrl1" @on-error="onError" @on-remove="onRemove"
					@on-uploaded="isAdd = true" :before-upload="filterFileType" :options="uploadOptions1"
					:custom="uploadCustom1" @on-progress="onProgress"></upload>
			</view>
			<view style="margin: 0 auto;height: 240px;" v-if="practices != ''" >
				<!-- <image v-bind:src="practices" class="picture"></image>
				<view class="floats" v-if="certificatesThree == true">
					<image src="../../static/img/authentication/xiangji@3x.png" style="width: 60px;height: 50px;">
					</image>
					<view class="words">
						上传道路运营证
					</view>
				</view> -->
				<upload class="upload" ref="upload" :action="action" :max-size="maxSize" :max-count="1"
					:size-type="['compressed']" @on-success="getImgUrl2" @on-error="onError" @on-remove="onRemove"
					@on-uploaded="isAdd = true" :before-upload="filterFileType" :options="uploadOptions2"
					:custom="uploadCustom2" @on-progress="onProgress"></upload>
			</view>
			<view style="margin: 0 auto;height: 240px;" v-if="operates != ''" class="fujian" >
				<!-- <image v-bind:src="operates" class="picture"></image>
				<view class="floats" v-if="certificatesFour == true">
					<image src="../../static/img/authentication/xiangji@3x.png" style="width: 60px;height: 50px;">
					</image>
					<view class="words">
						上传从业资格证
					</view>
				</view> -->
				<upload class="upload" ref="upload" :action="action" :max-size="maxSize" :max-count="1"
					:size-type="['compressed']" @on-success="getImgUrl3" @on-error="onError" @on-remove="onRemove"
					@on-uploaded="isAdd = true" :before-upload="filterFileType" :options="uploadOptions3"
					:custom="uploadCustom3" @on-progress="onProgress"></upload>
			</view>
			<button class="btns btn" @click="commit">提交</button>

		</view>

	</view>
</template>

<script>
	import upload from '@/components/upload.vue';
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			upload
		},
		data() {
			return {
				action: this.$uploadUrl,
				maxSize: 50 * 1024 * 1024, //限制文件大小 50M
				btnLoading: false, //防止重复点击
				isAdd: true,
				imgUrls: [],
				uploadCustom: true,
				uploadCustom1: true,
				uploadCustom2: true,
				uploadCustom3: true,
				uploadOptions: {
					"text": "上传行驶证",
					"bgc": "https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/travel.png"
				},
				uploadOptions1: {
					"text": "上传驾驶证",
					"bgc": "https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/drive.png"
				},
				uploadOptions2: {
					"text": "上传道路运营证",
					"bgc": "https://taohaoliang.oss-cn-beijing.aliyuncs.com/admin/0dd1401f54e34affaa11c711d808a0a0.png"
				},
				uploadOptions3: {
					"text": "上传从业资格证",
					"bgc": "https://taohaoliang.oss-cn-beijing.aliyuncs.com/admin/0dd1401f54e34affaa11c711d808a0a0.png"
				},
				travels: "../../static/img/authentication/travel(3).png",
				drives: "../../static/img/authentication/drive(3).png",
				practices: "../../static/img/authentication/business@3x.png",
				operates: "../../static/img/authentication/business@3x.png",
				DriverViewInfo: {},
				addressUrl: [],
				certificates: true,
				certificatesTwo: true,
				certificatesThree: true,
				certificatesFour: true,
				identityAuthenticationInfo: {},
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad(options) {
			this.DriverViewInfo = JSON.parse(options.DriverViewInfo)
		},
		methods: {
			filterFileType(index, lists) {
				if (lists[index].fileType != 'jpg' && lists[index].fileType != 'png' && lists[index].fileType != 'gif') {
					lists.splice(index, 1);
					// 当前文件不支持
					uni.showModal({
						title: '暂不支持当前图片类型',
						showCancel: false
					});
				} else {
					this.isAdd = false;
				}
			},
			getImgUrl(res) {
				console.log(res)
				console.log('------------res1-----------')
				this.travels = res.data.appendixPath
				this.addressUrl[0] = res.data.appendixPath
				this.certificates = false

			},
			getImgUrl1(res) {
				console.log(res)
				console.log('------------res2-----------')
				this.drives = res.data.appendixPath
				this.addressUrl[1] = res.data.appendixPath
				this.certificatesTwo = false
			
			},
			getImgUrl2(res) {
				console.log(res)
				console.log('------------res3-----------')
				this.practices = res.data.appendixPath
				this.addressUrl[2] = res.data.appendixPath
				this.certificatesThree = false
				
			
			},
			getImgUrl3(res) {
				console.log(res)
				console.log('------------res4-----------')
				
				this.operates =res.data.appendixPath
				this.addressUrl[3] =res.data.appendixPath
				this.certificatesFour = false
			
			},
			onError(error) {
				alert(error)
				console.log('------------error-----------')
				console.log(error)
			},
			onProgress(e) {
				console.log(e)
			},
			onRemove(index) {
				this.imgUrls.splice(index, 1);
			},
			commit() {
				if (this.addressUrl[0] == "" || this.addressUrl[0] == null) {
					this.$api.msg('请上传行驶证！')
					return
				}
				if (this.addressUrl[1] == "" || this.addressUrl[1] == null) {
					this.$api.msg('请上传驾驶证！')
					return
				}
				if (this.addressUrl[2] == "" || this.addressUrl[2] == null) {
					this.$api.msg('请上传道路运营证！')
					return
				}
				if (this.addressUrl[3] == "" || this.addressUrl[3] == null) {
					this.$api.msg('请上传从业资格证')
					return
				}
				this.DriverViewInfo.addressUrl = this.addressUrl.toString()
				this.DriverViewInfo.commonId = this.userInfo.id
				this.DriverViewInfo.pcFlag = 0
				// this.DriverViewInfo.compId = "2710b21efc1e4393930c5dc800010dc4"

				var that = this
				that.identityAuthenticationInfo.driverPhone = that.DriverViewInfo.driverPhone
				uni.showModal({
					content: "确认提交司机信息？",
					showCancel: true,
					confirmText: '确定',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title:"正在提交",
								mask:true
							})
							that.$api.doRequest('get', '/driverViewInfo/selectPhone', that
									.identityAuthenticationInfo)
								.then(res => {
									if (res.data.code == '11018') {
										uni.showModal({
											title: '提示',
											content: '该手机号已认证过司机，再次认证将覆盖之前的认证信息，是否确定认证？',
											success: function(res) {
												if (res.confirm) {

													console.log(that
														.identityAuthenticationInfo, "已覆盖")
													that.$api.doRequest('post',
														'/driverViewInfo/api/addInfo', that
														.DriverViewInfo).then(res => {
														if (res.data.code == 200) {
															uni.showToast({
																title: '提交成功',
																icon: 'none',
																duration: 2000
															})
															setTimeout(()=>{uni.navigateBack({
																delta: 3
															})},2000);
														} else if (res.data.code ==
															'ERROR002') {
															uni.showModal({
																title: '提示',
																content: '司机身份证号重复,添加失败',
															});
														} else if (res.data.code ==
															'ERROR003') {
															uni.showModal({
																title: '提示',
																content: '收款人身份证号重复,添加失败',
															});

														}
													})
												}
											}
										});
									} else if (res.data.code == 200) {
										that.$api.doRequest('post', '/driverViewInfo/api/addInfo', that
											.DriverViewInfo).then(res => {
											if (res.data.code == 200) {
												uni.showToast({
													title: '提交成功',
													icon: 'none',
													duration: 2000
												})
												setTimeout(()=>{uni.navigateBack({
													delta: 3
												})},2000);
											} else if (res.data.code == 'ERROR002') {
												uni.showModal({
													title: '提示',
													content: '司机身份证号重复,添加失败',
												});
											} else if (res.data.code == 'ERROR003') {
												uni.showModal({
													title: '提示',
													content: '收款人身份证号重复,添加失败',
												});
											}
										})
									}
									uni.hideLoading()
								}).catch(res => {
									uni.showToast({
										title: res.data.message,
										icon: 'none',
										duration: 2000
									})
									uni.hideLoading()
								})



							// 	that.$api.doRequest('post', '/driverViewInfo/api/addInfo', that.DriverViewInfo)
							// 		.then(res => {
							// 			if (res.data.code == 'ERROR001') {
							// 				uni.showModal({
							// 					title: '提示',
							// 					content: '该手机号已认证过司机，再次认证将覆盖之前的认证信息，是否确定认证？',
							// 					success: function(res) {
							// 						if (res.confirm) {
							// 							that.DriverViewInfo.cover = 1
							// 							that.$api.doRequest('post',
							// 								'/driverViewInfo/api/editInfo',
							// 								that.DriverViewInfo).then(
							// 								res => {}).catch(res => {
							// 								uni.showToast({
							// 									title: '提交成功',
							// 									icon: 'none',
							// 									duration: 2000
							// 								})
							// 								uni.navigateTo({
							// 									url: `/pages/attestation/indexThree`
							// 								})
							// 							})
							// 						} else if (res.cancel) {
							// 							uni.showToast({
							// 								title: '提交失败',
							// 								icon: 'none',
							// 								duration: 2000
							// 							})
							// 						}
							// 					}
							// 				});
							// 			} else if (res.data.code == 'ERROR002') {
							// 				uni.showModal({
							// 					title: '提示',
							// 					content: '司机身份证号重复',
							// 				});
							// 			} else if (res.data.code == 'ERROR003') {
							// 				uni.showModal({
							// 					title: '提示',
							// 					content: '收款人身份证号重复',
							// 				});
							// 			} else if (res.data.code == 200) {
							// 				uni.showToast({
							// 					title: '提交成功',
							// 					icon: 'none',
							// 					duration: 2000
							// 				})
							// 				uni.navigateTo({
							// 					url: `/pages/attestation/indexThree`
							// 				})
							// 			} else if (res.data.code == 200) {
							// 				uni.showToast({
							// 					title: '提交成功',
							// 					icon: 'none',
							// 					duration: 2000
							// 				})
							// 				uni.navigateTo({
							// 					url: `/pages/attestation/indexThree`
							// 				})
							// 			}

							// 		}).catch(res => {
							// 			uni.showToast({
							// 				title: res.data.message,
							// 				icon: 'none',
							// 				duration: 2000
							// 			})
							// 		})
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					},

				})



			},
			// travel() {
			// 	var that = this
			// 	uni.chooseImage({
			// 		success: function(res) {
			// 			uni.uploadFile({
			// 				url: 'https://www.zthymaoyi.com/upload/admin',
			// 				filePath: res.tempFilePaths[0],
			// 				name: 'file',
			// 				success(res) {
			// 					var data = res.data
			// 					var strToObj = JSON.parse(data)
			// 					that.travels = strToObj.url
			// 					that.addressUrl[0] = strToObj.url
			// 					that.certificates = false
			// 				}
			// 			})
			// 		}
			// 	})
			// },
			// drive() {
			// 	var that = this
			// 	uni.chooseImage({
			// 		success: function(res) {
			// 			uni.uploadFile({
			// 				url: 'https://www.zthymaoyi.com/upload/admin',
			// 				filePath: res.tempFilePaths[0],
			// 				name: 'file',
			// 				success(res) {
			// 					var data = res.data
			// 					var strToObj = JSON.parse(data)
			// 					that.drives = strToObj.url
			// 					that.addressUrl[1] = strToObj.url
			// 					that.certificatesTwo = false
			// 				}
			// 			})
			// 		}
			// 	})
			// },
			// practice() {
			// 	var that = this
			// 	uni.chooseImage({
			// 		success: function(res) {
			// 			uni.uploadFile({
			// 				url: 'https://www.zthymaoyi.com/upload/admin',
			// 				filePath: res.tempFilePaths[0],
			// 				name: 'file',
			// 				success(res) {
			// 					var data = res.data
			// 					var strToObj = JSON.parse(data)
			// 					that.practices = strToObj.url
			// 					that.addressUrl[2] = strToObj.url
			// 					that.certificatesThree = false
			// 				}
			// 			})
			// 		}
			// 	})
			// },
			// operate() {
			// 	var that = this
			// 	uni.chooseImage({
			// 		success: function(res) {
			// 			uni.uploadFile({
			// 				url: 'https://www.zthymaoyi.com/upload/admin',
			// 				filePath: res.tempFilePaths[0],
			// 				name: 'file',
			// 				success(res) {
			// 					var data = res.data
			// 					var strToObj = JSON.parse(data)
			// 					that.operates = strToObj.url
			// 					that.addressUrl[3] = strToObj.url
			// 					that.certificatesFour = false
			// 				}
			// 			})
			// 		}
			// 	})
			// },

		}
	}
</script>

<style lang="scss" scoped>
	.center {
		padding: 10px 20px;
		background-color: #F5F6FA;
	}

	.picture {
		width: 100%;
		height: 220px;
		text-align: center;
		margin-top: 10px;
	}



	.btn {
		margin-top: 10px;
		background-color: #FFFFFF;
		border-radius: 25px;
		border: none;
	}

	.btns {
		background-color: #22C572;
		margin-bottom: 30rpx;
		color: white;
	}

	.words {
		font-size: 18px;
		font-weight: 600;
		color: #617E8B;
	}

	.floats {
		position: relative;
		top: -150px;
	}
</style>