wangluohuoyun-huozhuapp/pages/mine/driverCertification.vue

<template>
	<view class="content">
		<view class="content1 content-other">
			<view class="flex flex-space-between">
				<view>姓名</view>
				<u--input placeholder="请输入内容" inputAlign='right' border="none" v-model="dataDetails.driverName">
				</u--input>
			</view>
			<view class="flex flex-space-between">
				<view>联系电话</view>
				<u--input placeholder="请输入联系电话" inputAlign='right' border="none" v-model="dataDetails.driverPhone">
				</u--input>
			</view>
			<view class="flex s-row" v-for="(item,index) in dataDetails.driverCarInfoList" :key='index'>
				<view class="flex flex-space-between width100">
					<view class="left">
						车牌号-{{index+1}}
					</view>
					<view class="right flex">
						<input class="car-uumber" v-model='item.carNumber' @click.stop="handleShowKeyboard(index)"
							:disabled="true" placeholder="输入7位车牌号" name="input"></input>
						<!-- <u-input v-model="item1.carNo" placeholder="输入7位车牌号" /> -->
						<view class="flex">
							<view @click="addCarNumber(dataDetails.driverCarInfoList)" style="margin-right: 20rpx;">
								<image class='row4-img'
									src="https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/jia%402x.png">
								</image>
							</view>
							<view @click="delCarNumber(dataDetails.driverCarInfoList,index)">
								<image class='row4-img'
									src="https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/jian%402x.png">
								</image>
							</view>
						</view>
					</view>
				</view>
				<view class="width100">
					<view class="">人车合影-{{index+1}}</view>
					<u-button type="primary" @click="uploadImg(0,item)">上传人车合影</u-button>
					<image class="preview" :src="item.addressUrl" mode="aspectFit"
						style="width:710rpx:height:710rpx;margin: 20rpx;">
						<!-- 		<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" @on-progress="onProgress"></upload> -->
				</view>
			</view>
		</view>
		<u-divider text="分割线"></u-divider>
		<view class="content2 content-other">
			<u-button type="primary" @click="uploadImg(1)">上传身份证人像</u-button>
			<!-- <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> -->
			<!-- <navigator class="buttons" url="./camera/idcard/idcard?dotype=face"><button type="primary">打开身份证人像面采集相机</button></navigator> -->
			<!-- <view>拍摄结果预览图，见下方</view> -->
			<image class="preview" :src="dataDetails.cardAddressUrl" mode="aspectFit"
				style="width:710rpx:height:710rpx;margin: 20rpx;">
			</image>
			<view class="flex flex-space-between">
				<view>身份证号</view>
				<u--input placeholder="请输入身份证号" inputAlign='right' border="none" v-model="dataDetails.numberCard">
				</u--input>
			</view>
			<u-button type="primary" @click="uploadImg(2)">上传身份证国徽页</u-button>
			<image class="preview" :src="dataDetails.cardBackAddressUrl" mode="aspectFit"
				style="width:710rpx:height:710rpx;margin: 20rpx;">
			</image>
			<view class="flex flex-space-between">
				<view>身份证截止日期</view>
				<view class="" @click="selectValidityPeriod">
					{{dataDetails.cardValidityDate?dataDetails.cardValidityDate:'选择身份证截止日期'}}</view>

			</view>
			<u-picker :show="isShowcardValidity" ref="uPicker" :columns="validityPeriod"
				@confirm="confirmValidityPeriod" @change="changeHandler">
			</u-picker>
		</view>
		<u-divider text="分割线"></u-divider>
		<view class="content3 flex s-row" v-for="(item,index) in dataDetails.bankList" :key='index'>
			<view class="flex flex-space-between width100">
				<view class="left">
					银行卡-{{index+1}}
				</view>
				<view class="right flex">
					<view class="flex">
						<view @click="addBankNumber(dataDetails.bankList)" style="margin-right: 20rpx;">
							<image class='row4-img'
								src="https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/jia%402x.png">
							</image>
						</view>
						<view @click="delBankNumber(dataDetails.bankList,index)">
							<image class='row4-img'
								src="https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/jian%402x.png">
							</image>
						</view>
					</view>
				</view>
			</view>
			<!-- 	<view class="width100">
				<view class="">上传银行卡号面</view>
				<upload class="upload" ref="upload" :action="action" :max-size="maxSize" :max-count="1"
					:size-type="['compressed']" @on-success="getImgUrl" @on-remove="onRemove" delIconSize='30'
					delBgColor='rgba(0,0,0,0.4)' delIcon="trash" @on-uploaded="isAdd = true"
					:before-upload="filterFileType" :options="uploadOptions3" :custom="uploadCustom3"></upload>
			</view> -->
			<u-button type="primary" @click="uploadImg(3)">上传银行卡号页</u-button>
			<view class="flex flex-space-between width100">
				<view>银行卡卡号</view>
				<view class="flex">
					<u--input placeholder="输入银行卡号码" inputAlign='right' border="none" v-model="dataDetails.name">
					</u--input>
					<u--image src="../../static/images/xiangji-2.png" width="40px" height="40px" @click='photograph'>
					</u--image>
				</view>
			</view>
			<view class="flex flex-space-between width100">
				<view>开户行</view>
				<view class="flex">
					<u--input placeholder="输入开户行" inputAlign='right' border="none" v-model="dataDetails.name">
					</u--input>
				</view>
			</view>
			<view class="flex flex-space-between width100">
				<view>开户支行</view>
				<view class="flex">
					<u--input placeholder="选择开户支行" inputAlign='right' border="none" v-model="dataDetails.name">
					</u--input>
					<view>手动输入</view>
				</view>
			</view>
			<view class="flex flex-space-between width100">
				<view>收款人</view>
				<view class="flex">
					<u--input placeholder="输入收款人姓名" inputAlign='right' border="none" v-model="dataDetails.name">
					</u--input>
				</view>
			</view>
		</view>
		<view class="content4">
			<u-button type="primary" @click="next()">
				下一步
			</u-button>
		</view>
		<master-keyboard ref="keyboard" keyboardtype="car" :show="keyShow" :randomNumber="true" :newCar="false"
			:defaultValue="carNumber" @keyboardClick="handleClick"></master-keyboard>
		<u-toast ref="uToast"></u-toast>
		<u-action-sheet :actions="$helper.imgTypeList" :title="$helper.imgType" :show="isShowimgType"
			@select="imgTypeSelect" :closeOnClickOverlay="true" :closeOnClickAction="true" @close="isShowimgType=false">
		</u-action-sheet>
	</view>
</template>

<script>
	import keyboard from "@/components/master-keyboard/master-keyboard.vue";
	import upload from '@/components/upload.vue';
	import uploadImage from '@/components/ossutil/uploadFile.js';
	var _this;
	export default {
		components: {
			keyboard,
			upload
		},
		data() {
			return {
				index:'',
				validityPeriod: [],
				isShowcardValidity: false,
				uploadType: '',
				isShowimgType: false,
				// uploadOptions1: {
				// 	"text": "上传身份证头像页",
				// 	"bgc": "https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/identityup%282%29.png"
				// },
				// uploadOptions2: {
				// 	"text": "上传身份证国徽页",
				// 	"bgc": "https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/identitylow%282%29.png"
				// },
				// uploadOptions3: {
				// 	"text": "上传银行卡正面",
				// 	"bgc": "https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/bankup%282%29.png"
				// },
				carInfo: '',
				dataDetails: {
					commonId: '',
					driverName: '',
					driverPhone: '',
					cardAddressUrl: '',
					cardBackAddressUrl: '',
					cardValidityDate: '',
					driverType: '',
					driverLicenseHomePage: '',
					driverLicenseBackPage: '',
					driverLicenseValidityDate: '',
					drivingLicenseHomePage: '',
					drivingLicenseBackPage: '',
					drivingLicenseValidityDate: '',
					trailerLicenseHomePage: '',
					trailerLicenseBackPage: '',
					trailerLicenseValidityDate: '',
					qualificationCertificate: '',
					qualificationCertificateValidityDate: '',
					operationCertificate: '',
					operationCertificateValidityDate: '',
					trailerOperationCertificate: '',
					trailerOperationCertificateValidityDate: '',
					numberCard: '',
					numberCard: '',
					numberCard: '',
					numberCard: '',
					numberCard: '',
					numberCard: '',
					numberCard: '',
					numberCard: '',
					numberCard: '',
					numberCard: '',
					numberCard: '',
					numberCard: '',
					numberCard: '',
					driverCarInfoList: [{
						carNumber: '',
						addressUrl: ''
					}],
					driverPayeeInfoList: [{
						payeeAddressUrl: '',
						bankCard: '',
						bankDeposit: '',
						bankDepositBranch: '',
						payeeName: ''
					}],
				},
				keyShow: false,
				carNumber: '',
				action: this.$helper.ossUploadUrl,
				maxSize: 50 * 1024 * 1024, //限制文件大小 50M
				isAdd: true,
				imagesrc: ''
			};
		},
		onLoad() {
			_this = this;
			this.makeValidityPeriod()
		},
		methods: {
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values,
					index,
					picker = this.$refs.uPicker
				} = e

				// if (columnIndex === 0) {
				// 	
				// 	if (e.index != 0) {
				// 		picker.setColumnValues(1, this.validityPeriod[1].shift())
				// 	}

				// } else if (columnIndex === 1) {
				// 	if (e.index != 0) {
				// 		picker.setColumnValues(2, this.validityPeriod[2].shift())
				// 	}
				// }
			},
			// 回调参数为包含columnIndex、value、values
			confirmValidityPeriod(e) {
				// 
				console.log('confirm', e)
				if (e.value[0] == '长期') {
					this.dataDetails.cardValidityDate = e.value[0]
				} else {
					this.dataDetails.cardValidityDate = e.value[0] + '-' + e.value[1] + '-' + e.value[2]
				}

				this.isShowcardValidity = false
			},
			makeValidityPeriod() {
				//获取当前年
				let nowDate = new Date();
				let year = nowDate.getFullYear()
				let _list1 = ['长期']
				// let _list2 = ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
				let _list2 = ['长期', "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"]
				let _list3 = ['长期', "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14",
					"15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30",
					"31"
				]
				let _ValidityPeriod = []
				for (let i = 0; i < 30; i++) {
					_list1.push(year + i)
				}
				this.validityPeriod.push(_list1, _list2, _list3)

			},
			selectValidityPeriod() {
				this.isShowcardValidity = true
			},
			//设置图片
			setImage(e) {
				// 
				console.log(e);
				//显示在页面
				//this.imagesrc = e.path;
				if (e.dotype == 'idphoto') {
					_this.zjzClipper(e.path);
				} else if (e.dotype == 'watermark') {
					_this.watermark(e.path);
				} else {
					_this.savePhoto(e.path);
				}
			},
			//保存图片到相册，方便核查
			savePhoto(path) {
				// 
				this.imagesrc = path;
				uploadImage('image',path, 'appData/',
					result => {
						// 上传成功
						console.log('图片地址', result)
					}
				)
				//保存到相册
				// uni.saveImageToPhotosAlbum({
				// 	filePath: path,
				// 	success: () => {
				// 		uni.showToast({
				// 			title: '已保存至相册',
				// 			duration: 2000
				// 		});
				// 	}
				// });
			},
			uploadImg(type, val) {
				// 
				this.uploadType = type
				this.isShowimgType = true
				this.carInfo = val
			},
			photograph() {
				console.log('拍照')
				let that = this;
				uni.chooseImage({
					count: 1,
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						uploadImage('image',res.tempFilePaths[0], 'appData/',
							result => {
								// 上传成功
								console.log('图片地址', result)
							}
						)
					}
				});

			},
			imgTypeSelect(val) {
				// 
				console.log(val)
				console.log(this.uploadType)
				if (val.name == '相册') {
					uni.chooseImage({
						count: 1,
						sourceType: this.$helper.chooseImage.sourceType,
						success: function(res) {
							console.log(JSON.stringify(res.tempFilePaths));
							uploadImage('image',res.tempFilePaths[0], 'appData/',
								result => {

									// 上传成功
									console.log('图片地址', result)
									switch (_this.uploadType) {
										case 0:
											//赋值上传图片图片路径
											for (let i = 0; i < _this.dataDetails.driverCarInfoList
												.length; i++) {
												let _item = _this.dataDetails.driverCarInfoList[i]
												if (_item.carNumber == _this.carInfo.carNumber) {
													_item.addressUrl = result
													}
										}
										
											console.log('人车合影')
											break
										case 1:
											console.log('身份正面')
											break
										case 2:
											console.log('身份反面')
											break
										case 3:
											console.log('银行卡')
											break
										case 4:
									}
								}
							)
						}
					});

				} else {
					switch (this.uploadType) {
						case 0:
							console.log('人车合影')
							break
						case 1:
							uni.$u.route('/pages/mine/camera/idcard/idcard?dotype=face');
							console.log('身份正面')
							break
						case 2:
							console.log('身份反面')
							break
						case 3:
							console.log('银行卡')
							break
						case 4:
					}
				}

			},
			//身份证正面
			getImgUrl1(src) {
				// console.log(src)
				// console.log('------------res-----------')
				// let that = this;
				// that.id[0] = src
				// that.id1 = src
				// that.certificates = false
				// that.personImgs.personImg = that.id[0]
				// that.$api.doRequest('get', '/driverViewInfo/personShibie', that
				// 	.personImgs).then(res => {
				// 	if (res.data.data.recPerson != null) {
				// 		if (res.data.data.recPerson != "") {
				// 			that.$set(that.DriverViewInfo, 'driverName', res
				// 				.data.data.recPerson)
				// 		}
				// 	}
				// 	if (res.data.data.recPersonNo != null) {
				// 		if (res.data.data.recPersonNo != "") {
				// 			that.$set(that.DriverViewInfo, 'numberCard', res
				// 				.data.data.recPersonNo)
				// 		}
				// 	}
				// }).catch(res => {
				// 	uni.showToast({
				// 		title: res.data.message,
				// 		icon: 'none',
				// 		duration: 2000
				// 	})
				// })
			},
			handleClick(e) {
				this.carNumber = e.value
				this.dataDetails.driverCarInfoList[this.index].carNumber = e.value //键盘输入值
			},
			handleShowKeyboard(index) {
				// 
				if (this.dataDetails.driverCarInfoList[index].carNumber == '') {
					this.carNumber = ''
				} else {
					this.carNumber = this.dataDetails.driverCarInfoList[index].carNumber
				}
				if (this.$refs.keyboard.open) {
					this.$refs.keyboard.open(false) //true 键盘显示 false 键盘隐藏
				} else {
					this.$refs.keyboard[0].open(false)
				}
				this.index = index
				if (this.$refs.keyboard.open) {
					this.$refs.keyboard.open(true) //true 键盘显示 false 键盘隐藏
				} else {
					this.$refs.keyboard[0].open(true)
				}
			},
			addCarNumber(val) {
				val.push({
					carNo: ''
				})
			},
			delCarNumber(val, index) {
				if (val.length > 1) {
					val.splice(index, 1)
					this.$forceUpdate()
				} else {
					let params = {
						type: 'error',
						message: "至少保留一个车牌号！",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
					}
					this.$refs.uToast.show({
						...params
					})
				}
			},
			addBankNumber(val) {
				val.push({
					bankNo: ''
				})
			},
			delBankNumber(val, index) {
				if (val.length > 1) {
					val.splice(index, 1)
					this.$forceUpdate()
				} else {
					let params = {
						type: 'error',
						message: "至少保留一张银行卡！",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
					}
					this.$refs.uToast.show({
						...params
					})
				}
			},
			next(val) {
				console.log(111111111111)
				uni.$u.route('/pages/mine/driverCertificationNext', {
					id: 1,
				});
			}

		},
	};
</script>

<style scoped lang="scss">
	.row4-img {
		width: 32rpx;
		height: 32rpx;
	}
</style>