修改司机认证

pageD/identity/driverIdentity.vue

@@ -1,27 +1,16 @@
 <template>
 	<view class="center">
-
 		<view>
-			<view style="margin: 0 auto;height: 240px;" v-if="id1 != ''" @click="idUp">
-				<image v-bind:src="id1" 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>
-			</view>
-			<view style="margin: 0 auto;height: 240px;" v-if="id2 != ''" @click="idLow">
-				<image v-bind:src="id2" 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>
-			</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>
+			<!-- 个人身份证反面 -->
+			<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 class="information">
 			<view class="c-row b-b">
@@ -39,15 +28,15 @@
 			<view class="c-row b-b">
 				<text class="tit">手机号</text>
 				<view class="con-list">
-					<input placeholder="请填写手机号" maxlength = "11" @input='phoneinput' name="input" v-model="DriverViewInfo.driverPhone"></input>
+					<input placeholder="请填写手机号" maxlength="11" @input='phoneinput' name="input"
+						v-model="DriverViewInfo.driverPhone"></input>
 				</view>
 			</view>
 			<view style='padding:10px;' class="c-row b-b">
-				<button :class='!sendDisabled?"active getcode":"getcode"' @click='getcode'
-					>{{sendText}}</button>
-					<view class="con-list">
-						<input v-model='verifyCode' maxlength = "6"  placeholder="请输入验证码" type="text">
-					</view>
+				<button :class='!sendDisabled?"active getcode":"getcode"' @click='getcode'>{{sendText}}</button>
+				<view class="con-list">
+					<input v-model='verifyCode' maxlength="6" placeholder="请输入验证码" type="text">
+				</view>
 			</view>
 			<view class="c-row ">
 				<text class="tit">常驻城市</text>
@@ -62,12 +51,31 @@
 </template>
 
 <script>
+	import upload from '@/components/upload.vue';
 	import {
 		mapState
 	} from 'vuex';
 	export default {
+		components: {
+			upload
+		},
 		data() {
 			return {
+				action: this.$uploadUrl,
+				maxSize: 5 * 1024 * 1024, //限制文件大小 2M
+				btnLoading: false, //防止重复点击
+				isAdd: true,
+				imgUrls: [],
+				uploadCustom1: true,
+				uploadCustom2: true,
+				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"
+				},
 				goods: {},
 				ModelIndex: '高栏',
 				Model: '',
@@ -91,18 +99,17 @@
 				carLongType: ['13', '9.6', '8.2', '8.7', '11.7', '12.5', '13.7', '15', '16', '17.5'],
 				driverCarInfoList: {},
 				driverPayeeInfoList: {},
-				DriverViewInfo: {
-				},
+				DriverViewInfo: {},
 				verifyCode: "",
 				codestatus: false,
 				customerPhone: '',
 				addressUrl: [],
-				personImgs:{},
-				certificatesTwo:true,
-				certificates:true,
-				verification:true,
-				region:"请选择常驻城市",
-				show:false,
+				personImgs: {},
+				certificatesTwo: true,
+				certificates: true,
+				verification: true,
+				region: "请选择常驻城市",
+				show: false,
 				params: {
 					province: true,
 					city: true,
@@ -113,6 +120,91 @@
 			...mapState(['hasLogin', 'userInfo'])
 		},
 		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;
+				}
+			},
+			onError(error) {
+				alert(error)
+				console.log('------------error-----------')
+				console.log(error)
+			},
+			onProgress(e) {
+				console.log(e)
+			},
+			onRemove(index) {
+				this.imgUrls.splice(index, 1);
+			},
+			//身份证正面
+			getImgUrl1(res) {
+				console.log(res)
+				console.log('------------res-----------')
+				let that = this;
+				that.id[0] = res
+				that.id1 = res
+				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
+					})
+				})
+			},
+			//身份证反面
+			getImgUrl2(res) {
+				console.log(res)
+				console.log('------------res-----------')
+				let that = this;
+				that.id[1] = res
+				that.id2 = res
+				that.certificatesTwo = false
+				that.personImgs.personImg = that.id[1]
+				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
+					})
+				})
+			},
 			phoneinput(e) {
 				if (e.detail.value.length == 11) {
 					this.codestatus = true
@@ -144,7 +236,7 @@
 					this.$api.msg('姓名输入错误')
 					return
 				}
-			
+
 				if (!this.DriverViewInfo.numberCard) {
 					this.$api.msg('身份证号不能为空')
 					return
@@ -161,11 +253,11 @@
 					this.$api.msg('手机号输入错误')
 					return
 				}
-				if(!this.verifyCode){
+				if (!this.verifyCode) {
 					this.$api.msg('验证码不能为空')
 					return
 				}
-				if(this.verifyCode.length != 6){
+				if (this.verifyCode.length != 6) {
 					this.$api.msg('验证码输入错误')
 					return
 				}
@@ -188,7 +280,7 @@
 								url: `/pageD/identity/driverIdentityTwo?DriverViewInfo=` + model,
 							})
 						} else {
-							uni.showToast({		
+							uni.showToast({
 								title: res.data.message,
 								icon: 'none',
 								duration: 2000
@@ -255,82 +347,6 @@
 				this.carLongIndex = e.detail.value
 				this.carLong = this.carLongType[this.carLongIndex];
 			},
-			idUp() {
-				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.id[0] = strToObj.url
-								that.id1 = strToObj.url
-								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
-									})
-								})
-							}
-						})
-					}
-				})	
-			},
-			idLow() {
-				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.id[1] = strToObj.url
-								that.id2 = strToObj.url
-								that.certificatesTwo = false
-								that.personImgs.personImg = that.id[1]
-								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
-									})
-								})
-							}
-						})
-					}
-				})
-			},
 			commit() {
 				this.DriverViewInfo.addressUrl = this.addressUrl.toString()
 				this.DriverViewInfo.driverCarInfoList = [this.driverCarInfoList]
@@ -391,6 +407,7 @@
 		padding-right: 20rpx;
 		font-size: 12px;
 	}
+
 	.getcode {
 		font-size: 14px;
 		color: #AFB3BF;
@@ -530,14 +547,20 @@
 		background-color: #22C572;
 		color: white;
 	}
-	.words{
+
+	.words {
 		font-size: 18px;
 		font-weight: 600;
 		color: #617E8B;
-		}
-		.floats{
-			position: relative;
-			top: -150px;
-			text-align: center;
-		}
+	}
+
+	.floats {
+		position: relative;
+		top: -150px;
+		text-align: center;
+	}
+
+	.upload {
+		margin: 20rpx 0;
+	}
 </style>