v3-lab-xcx/pages_supplier/views/transportPerson/transportPersonDetail.vue

<!-- 运输人员-详情-->
<template>
    <view id="register">
		<viwe v-if="isAudit!=1" :class="isAudit==0?'tip':'reject'">{{isAudit==0?'信息正在审核中，请耐心等待...':'您提交的审核被驳回，驳回原因为：'+auditContent}}</viwe>
		<view class="register_li">
			<view class="register_li_min">
				<view></view>
				<view>姓名：</view>
				<input v-model="form.userName" disabled type="text" placeholder="请输入姓名">
			</view>
			<view class="register_li_min">
			    <view></view>
				<view>联系方式：</view>
				<input v-model="form.phone" disabled  type="text" placeholder="请输入联系方式">
			</view>
			<view v-for="(item,index) in form.userCredentialsVos" :key="index">
				<view class="driving_img" @click="lookItem(item)">
					<view>{{item.naturalName}}：</view>
					<img  class="issue_img"  :src="baseUrl+item.naturalUrl">
				</view>
				<view class="register_li_b2">
					<view>有效期</view>
					<picker mode="date" disabled @change="dateChange">
						<input class="picker-text"  disabled type="text" v-model="item.startTime" placeholder="开始时间">
					</picker>
					<view>-</view>
					<picker mode="date"  disabled @change="dateChange">
						<input class="picker-text2"  disabled type="text" v-model="item.endTime" placeholder="结束时间">
					</picker>
				</view>
			</view>
		</view>
		<view class="sub_btn" v-if="isAudit==1" @click="subBnt()">编辑</view>
		<view class="sub_btn" v-if="isAudit==2" @click="subBnt()">重新提交</view>
	</view>
</template>

<script>
    import {transportUserDetail} from '@/api/apiDemo/index.js'
	import { config } from '@/api/request/config.js'
    export default {
        data() {
            return {
				baseUrl:config.base_url,
				form:{
					userName:'',
					phone:'',
				},
				id:'',
				isAudit:1,//是否已经审核（0=未审核,1=已经审核,2=审核未通过
				auditContent:'',//驳回时审核内容
            }
        },
        onLoad(option) {
			this.id=option.id;
        },
        onShow(){


        },

        methods: {
			//获取详情
			async getInfo(){
			    let _this = this;
			    const {data} = await transportUserDetail(this.id)
			    if(data.code==200){
					let res=data.data
					this.isAudit=res.isAudit;
					this.form=res;
					let arr=[];
					 _this.form.userCredentialsVos.forEach(function(item,idnex) {
						if(item.naturalUrl && item.startTime && item.endTime){
						  arr.push(item)
						}
					 })
					 _this.form.userCredentialsVos=arr
					//驳回
					if(res.syntheticalAudit){
						this.auditContent=res.syntheticalAudit.auditContent
					}
			    }
			},
			subBnt(){
				uni.redirectTo({
				    url:'/pages_supplier/transportPerson/transportPersonAdd?status=1&id='+this.id
				});
			},
			lookItem(item){
				//查看图片
				wx.previewImage({
					urls: [config.base_url+item.naturalUrl], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},


        },
		mounted() {
			this.getInfo();
		}
    }
</script>

<style lang="stylus" scoped>
    #register{
        height:auto;
        width:100%;
        display flex
        flex-direction column;
		padding-bottom: 220rpx;
		/* 审核中 */
		.tip{
			width: 750rpx;
			background: rgba(255,144,0,0.2);
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FF9000;
			line-height: 28rpx;
			padding: 36rpx 20rpx;
			box-sizing: border-box;
		}
		/* 驳回 */
		.reject{
			width: 750rpx;
			background: #F3DCDC;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #DC0000;
			line-height: 36rpx;
			padding: 36rpx 20rpx;
			box-sizing: border-box;
		}
        .register_li{
			background #fff;
			border-radius:20rpx;
			margin:20rpx 20rpx 0;
			padding:20rpx 0;
			box-sizing: border-box;
			.register_li_min{
				margin:0 26rpx;
				display flex;
				align-items center;
				border-bottom: 1px solid #F5F5F5;
				view{
					line-height:100rpx;
					font-size:28rpx;
				}
				view:nth-child(1){
					color:red;
					line-height:28rpx;
					margin-right: 12rpx;
				}
				view:nth-child(2){
					width:140rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}

				>input{
					width 500rpx;
					text-align: right;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333;
				}
			}
			/* 驾驶证 */
			.driving_img{
				margin:34rpx 20rpx 0;
				display flex;
				justify-content: space-between;
				border-bottom: 1px solid #F5F5F5;
				padding-bottom: 28rpx;
				box-sizing: border-box;
				view{
					//width:140rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
				.issue_img{
					width: 210rpx;
					height: 210rpx;
					border-radius: 10rpx;
					margin-left:250rpx;
				}
			}
			/* 有效期 */
			.register_li_b2{
				border-bottom: 1px solid #f5f5f5;
				height: 100rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin:0 20rpx 0;
				>view:nth-child(1){
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 100rpx;

				}
				.picker-text{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #CCCCCC;
					line-height: 100rpx;
					width: 188rpx;
					margin-left: 158rpx;
				}
				>view:nth-child(2){
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #CCCCCC;
					line-height: 100rpx;
				}
				.picker-text2{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #CCCCCC;
					line-height: 100rpx;
					width: 188rpx;
					text-align: right;
				}
			}

		}
		/* 按钮 */
		.sub_btn{
			width: 650rpx;
			height: 100rpx;
			background: #0183FA;
			border-radius: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
			margin-left: 50rpx;
			position: fixed;
			bottom:30rpx;
			z-index: 1000;
		}
	}
	/deep/.input-value-border{
		display :none !important;
	}
</style>