yiliangyiyun-app/pageD/identity/driverIdentityLook.vue

<template>
	<view class="center">
		<view>
			<view  class="fujians" v-if="idup != ''">
				<view class="c-row ">
					<text class="picturebiaoti">身份证正面</text>			
				</view>
				<image v-bind:src="idup" class="picture"></image>
			</view>
			<view  class="fujians" v-if="idlow != ''">
				<view class="c-row">
					<text class="picturebiaoti">身份证反面</text>			
				</view>
				<image v-bind:src="idlow" class="picture"></image>
			</view>
			<view class="personalcss">	
			<view class="c-row ">
				<text class="tit">姓名</text>
				<view class="con-list">
					{{drivers.driverName}}
				</view>
			</view>
			<view class="c-row ">
				<text class="tit">身份证号</text>
				<view class="con-list">
					{{drivers.numberCard}}
				</view>
			</view>
			<view class="c-row ">
				<text class="tit">手机号</text>
				<view class="con-list">
					{{drivers.driverPhone}}
				</view>
			</view>
			<view class="c-row">
				<text class="tit">常驻城市</text>
				<view class="con-list">
					{{drivers.residentCityProvincial}}
				</view>
			</view>
           </view>
        <!-- 车辆信息 -->
        <view class="information">
        	<view class="c-row">
        		<text class="tit" style="line-height: 36px;">货车信息</text>
        		<view class="con-list">
        			<image v-bind:src="opencar" class="open" opencarboolean @click="opencarclick"></image>
        		</view>
        	</view>
        </view>

		</view>
		<view class="informations" v-if="opencarboolean == true">
			<view v-for="(item , index) in  drivers.driverCarInfoList" :Key="index" >
				<view class="c-row ">
					<text class="tit">车辆 -{{index+1}}</text>
					
				</view>
				<view class="c-row ">
					<text class="tit">车牌号</text>
					<view class="con-list">
						{{item.carNumber}}
					</view>
				</view>
				<view class="c-row ">
					<text class="tit">车型</text>
					<view class="con-list">
						{{item.carModel}}
					</view>
				</view>
				<view class="c-row ">
					<text class="tit">不含车头车长（米）</text>
					<view class="con-list">
						{{item.carLength}}
					</view>
				</view>
				<view class="c-row ">
					<text class="tit">载重（吨）</text>
					<view class="con-list">
						{{item.carLoad}}
					</view>
				</view>
				<view class="c-row ">
					<text class="tit">出厂年份</text>
					<view class="con-list">
						{{item.yearManufacture}}
					</view>
				</view>
			</view>

		</view>
		
		<view class="information">
			<view class="c-row">
				<text class="tit" style="line-height: 36px;">账户信息</text>
				<view class="con-list">
					<image v-bind:src="openuser" class="open" openuserboolean @click="openuserclick"></image>
				</view>
			</view>
		</view>
		
		<view class="informations" v-if="openuserboolean == true">
			<!-- <view class="labels">账户信息</view> -->
			<view v-for="(items , index) in  drivers.driverPayeeInfoList" :Key="index">
				<view class="c-row ">
					<text class="tit">账户 - {{index+1}}</text>	
				</view>
				<view class="c-row ">
					<text class="tit">账户类型</text>
					<view class="con-list">
						{{items.accountType}}
					</view>
				</view>
				<view class="c-row ">
					<text class="tit">银行卡照片</text>
					<view   class="con-list" @click="bankimgs(index)">
						<view v-if="items.bankimg.length==0">未上传</view>
						<image v-for='item in items.bankimg' v-bind:src="item" style="width: 40px; height: 40px;" v-if="items.bankimg.length>0"></image>
					</view>
				</view>
				<view class="c-row ">
					<text class="tit">银行卡号</text>
					<view class="con-list">
						{{items.bankCard}}
					</view>
				</view>
				<view class="c-row ">
					<text class="tit">开户行</text>
					<view class="con-list">
						{{items.bankDeposit}}
					</view>
				</view>
				<view class="c-row ">
					<text class="tit">开户支行</text>
					<view class="con-list">
						{{items.bankDepositBranch}}
					</view>
				</view>
				<view class="c-row ">
					<text class="tit">收款人姓名</text>
					<view class="con-list">
						{{items.payeeName}}
					</view>
				</view>
				<view class="c-row ">
					<text class="tit">收款人身份证号</text>
					<view class="con-list">
						{{items.payeeNumberCard}}
					</view>
				</view>
			</view>
		</view>
		<view class="information">
			<view class="c-row">
				<text class="tit" style="line-height: 36px;">附件信息</text>
				<view class="con-list">
					<image v-bind:src="openfujian" class="open" openfujianboolean @click="openfujianclick"></image>
				</view>
			</view>
		</view>
			
		
		<view  v-if="openfujianboolean == true">

			<view  class="fujians" v-if="travels != ''">
				<view class="c-row ">
					<text class="picturebiaoti">行驶证</text>			
				</view>
				<image v-bind:src="travels" class="picture"></image>
			</view>

			<view class="fujians" v-if="drives != ''">
				<view class="c-row ">
					<text class="picturebiaoti">驾驶证</text>			
				</view>
				<image v-bind:src="drives" class="picture"></image>
			</view>
			<view class="fujians" v-if="practices != ''">
				<view class="c-row ">
					<text class="picturebiaoti">道路运营证</text>			
				</view>
				<image v-bind:src="practices" class="picture"></image>
			</view>
			<view class="fujians" v-if="operates != ''">
				<view class="c-row ">
					<text class="picturebiaoti">从业资格证</text>			
				</view>
				<image v-bind:src="operates" class="picture"></image>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				drivers: {},
				id: [],
				address: [],
				travels: "",
				drives: "",
				practices: "",
				operates: "",
				idup: "",
				idlow: "",
				opencar: "../../static/img/authentication/down2@3x.png",
				openuser: "../../static/img/authentication/down2@3x.png",
				openfujian:"../../static/img/authentication/down2@3x.png",
				opencarboolean:false,
				openuserboolean:false,
				openfujianboolean:false,
				bankimg:[],
			}
		},
		onLoad(option) {
			this.getList(option.id)
		},
		methods: {
			opencarclick() {
				if (this.opencarboolean == false) {
					this.opencarboolean = true;
					this.opencar = "../../static/img/authentication/up2%20(3).png"
				} else if (this.opencarboolean == true) {
					this.opencarboolean = false;
					this.opencar = "../../static/img/authentication/down2@3x.png"
				}
			},
			openuserclick() {
				if (this.openuserboolean == false) {
					this.openuserboolean = true;
					this.openuser = "../../static/img/authentication/up2%20(3).png"
				} else if (this.openuserboolean == true) {
					this.openuserboolean = false;
					this.openuser = "../../static/img/authentication/down2@3x.png"
				}
			},
			openfujianclick(){
				if (this.openfujianboolean == false) {
					this.openfujianboolean = true;
					this.openfujian = "../../static/img/authentication/up2%20(3).png"
				} else if (this.openfujianboolean == true) {
					this.openfujianboolean = false;
					this.openfujian = "../../static/img/authentication/down2@3x.png"
				}
			},
			getList(ids) {
				this.$api.doRequest('get', '/driverViewInfo/getDriver', {
						id: ids
					}, 'application/json;charset=UTF-8').then(res => {
						this.procurementPlanInfos = res.data.data
						
						this.drivers = res.data.data
						if (this.drivers.cardAddressUrl != "") {
							this.id = this.drivers.cardAddressUrl.split(","),
								this.idup = this.id[0]
							this.idlow = this.id[1]
						}
						if (this.drivers.addressUrl != "") {
							this.address = this.drivers.addressUrl.split(","),
								this.travels = this.address[0]
							this.drives = this.address[1]
							this.practices = this.address[2]
							this.operates = this.address[3]
						}
						if(this.drivers.driverPayeeInfoList){
							for (var i = 0; i < this.drivers.driverPayeeInfoList.length; i++) {
								if(this.drivers.driverPayeeInfoList[i].payeeAddressUrl){
									this.$set(this.drivers.driverPayeeInfoList[i],'bankimg',this.drivers.driverPayeeInfoList[i].payeeAddressUrl.split(",")) 
								}else{
									this.drivers.driverPayeeInfoList[i].bankimg=[]
								}
								
							}
						}
						
					})
					.catch(res => {
						if(res.message){
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000
							})
						}
						else{
							uni.showToast({
								title: "系统异常，请联系管理员",
								icon: 'none',
								duration: 2000
							})
						}
					});
			},

		}
	}
</script>

<style>
	.center {
		padding: 10px 20px;
		background-color: #F5F6FA;
	}

	.labels {
		font-size: 16px;
		font-weight: 400;
	}

	.c-row {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 20rpx 30rpx;
		position: relative;
	}

	.con-list {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		color: #AFB3BF;
		line-height: 40rpx;
		text-align: right;
		padding-right: 20rpx;
		font-size: 14px;
	}
	.picture {
		width: 100%;
		height: 220px;
		text-align: center;
		margin-top: 10rpx;
	}
	.tit{
		font-size: 14px;
		color: #333333;
	}
	.personalcss{
		background-color: #FFFFFF;
		border-radius: 20px;
		margin-top: 10px;
	}
	.open {
		width: 30rpx;
		height: 20rpx;
		position: absolute;
		right: 20px;
		margin-top: -10rpx;
	}
	
	.information {
		margin-top: 10px;
		width: 100%;
		height: 56px;
		background-color: #FFFFFF;
		border-radius: 16px;
	}
	.informations {
		margin-top: 10px;
		background-color: #FFFFFF;
		border-radius: 20px;
	}
	.fujians{
		margin: 0 auto;
		background-color: #FFFFFF;
		margin-top: 10rpx;
		border-radius: 20px;
		padding: 10px 10px;
	}
	.picturebiaoti{
		font-size: 17px;
		font-weight: 700;
	}
</style>