ParkApp/pages/index/car/comps/car-manager-card.vue

<template>
	<view class="">
		<u-popup v-model="detailShow" mode="center" width="670" :closeable="true" border-radius="10">
			<view style="padding: 60rpx 5rpx 40rpx;">
				<u-cell-group >
					<u-cell-item :icon-style="iconStyle"  :border-top="false" :arrow="false"  icon="eye-fill"  title="车牌号码:" :value="detailData.number"></u-cell-item>
					<u-cell-item :key="index" v-for="(item,index) in carTypeList" v-if="item.value==detailData.type"  :value="item.label" :icon-style="iconStyle"  :arrow="false"  icon="car-fill"  title="车辆类型:" ></u-cell-item>
					<u-cell-item :key="index" v-for="(item,index) in carPropertiesList" v-if="item.value==detailData.properties"  :value="item.label" :icon-style="iconStyle"  :arrow="false"  icon="error-circle-fill"  title="车辆性质:" ></u-cell-item>
					<u-cell-item :key="index" v-for="(item,index) in fuelCategoryList"  v-if="item.value==detailData.fuelCategory"  :value="item.label" :icon-style="iconStyle"  :border-bottom="false" :arrow="false"  icon="grid-fill"  title="燃油类别:" ></u-cell-item>
					<u-cell-item  v-if="detailData.auditOpinion" :value-style="valueStyle"  :value="detailData.auditOpinion" :icon-style="iconStyle"  :arrow="false"  icon="question-circle-fill"  title="审核意见:" ></u-cell-item>
				</u-cell-group>
				<view class="detail-img">
					<view @click.stop="$util.preview(detailData.vehicleDrivingLicense1)">
						<text>行驶证【正面】</text>
						<image  :src="detailData.vehicleDrivingLicense1" mode=""></image>
					</view>
					<view @click.stop="$util.preview(detailData.vehicleDrivingLicense2)">
						<text>行驶证【反面】</text>
						<image  :src="detailData.vehicleDrivingLicense2" mode=""></image>
					</view>
				</view>
			</view>
		</u-popup>
		
		<view @click="detailData=item;detailShow=true" class="card" v-for="(item,index) in list" :key="index">
			<view class="top" >
				<text class="number">车牌号：{{item.number}}</text>
				<text style="color: #008f69;" class="margin-top-10" v-if="item.auditStatus==1">已通过</text>
				<text style="color: #ea7500;" class="margin-top-10" v-if="item.auditStatus==0">待审核</text>
				<text style="color: #da0000;" class="margin-top-10" v-if="item.auditStatus==-1">未通过</text>
			</view>
			<view class="center">
				<view class="flex">
					<view @click.stop="$util.preview(item.carImg)" class="flex justify-center align-center">
						<image :src="item.carImg" mode=""></image>
					</view>
					<view class="content">
						<text class="padding-bottom-10">车主姓名：{{item.personName}}</text>
						<view class="padding-bottom-10">
							<text class="">车主电话：{{item.personPhone}}</text>
							<text @click.stop="$util.callPhone(item.personPhone)" class="base-color" style="text-decoration: underline; padding-left: 20rpx;">拨打</text>
						</view>
						<view class="padding-bottom-10" v-if="item1.value==item.type" v-for="(item1,index) in carTypeList" :key="index">
							车辆类型：{{item1.label}}
						</view>
					</view>
				</view>
				
			</view>
			<view class="bottom" v-if="item.auditStatus==0">
				<view @click.stop="pass(item)"  style="font-size: 22rpx;" class="cu-btn  sm round base-bg-color  margin-right-20" >
					审核通过
				</view>
				<view @click.stop="fail(item)" style="font-size: 22rpx;" class="cu-btn  sm round bg-red " >
					审核不通过
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			list:{
				type:Array
			}
		},
		data() {
			return {
				iconStyle:{
					color:'#5064eb'
				},
				valueStyle:{
					color:'#da0000'
				},
				//详情
				detailShow:false,
				detailData:{},
				
				
				//字典
				carTypeList:[],
				carPropertiesList:[],
				fuelCategoryList:[],
			}
		},
		created() {
			this.getDict()
		},
		methods: {
			pass(item){
				this.$emit('pass',item)
			},
			fail(item){
				this.$emit('fail',item)
			},
			getDict(){
				//车辆类型
				this.$api.dict({code:'car_type'}).then(res=>{
					res.data.forEach((item)=>{
						let tmp={
							value:item.dictKey,
							label:item.dictValue
						}
						this.carTypeList.push(tmp)
					})
					this.$u.vuex('vuex_carTypeList',this.carTypeList)
				})
				//车辆性质
				this.$api.dict({code:'car_properties'}).then(res=>{
					res.data.forEach((item)=>{
						let tmp={
							value:item.dictKey,
							label:item.dictValue
						}
						this.carPropertiesList.push(tmp)
					})
					this.$u.vuex('vuex_carPropertiesList',this.carPropertiesList)
				})
				//燃油类别
				this.$api.dict({code:'fuel_category'}).then(res=>{
					res.data.forEach((item)=>{
						let tmp={
							value:item.dictKey,
							label:item.dictValue
						}
						this.fuelCategoryList.push(tmp)
					})
					this.$u.vuex('vuex_fuelCategoryList',this.fuelCategoryList)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.detail-img{
		display: flex;
		justify-content: space-around;
		text-align: center;
		color: #707175;
		
		view{
			display: flex;
			flex-direction: column;
			width: 48%;
			height: 300rpx;
			
			text{
				padding: 10rpx 0;
			}
		}
	}
	
	
	.card{
		background-color: #FFFFFF;
		margin: 20rpx;
		padding: 0 40rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		image{
			width: 120rpx;
			height: 120rpx;
		}
		
		.top{
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0 20rpx 0rpx;
			border-bottom: 1rpx solid #e5e5e5;
			.number{
				font-size: 34rpx;
			}
			
			.audit{
				font-size: 30rpx;
			}
		}
		
		.center{
			padding: 40rpx 0;
			border-bottom: 1rpx solid #e5e5e5;
			display: flex;
			justify-content: space-between;
			.content{
				padding-left: 30rpx;
				display: flex;
				flex-direction: column;
				font-size: 30rpx;
				
				text{
					padding-bottom: 10rpx;
				}
				
			}
			.record{
				display: flex;
				justify-content: center;
				align-items: center;
				color: #545454;
			}
			
		}
		
		.bottom{
			display: flex;
			justify-content: flex-end;
			padding: 20rpx 0;
		}
		
		
	}
</style>