property/user_ui/work/components/car/list.vue

<template>
<view>
	<!-- 第一种样式  人员管理-->
	<block v-if="datainfo.length>0">
		<block v-if="type=='car'">
			<view class="carlist" v-for="(ite,idx) in datainfo" :key="idx">
				<view class="ctop flexc">
					<image :src="cara" class="imgs" v-if="ite.type==1"></image>
					<image :src="carb" class="imgs" v-if="ite.type==2"></image>
					<view class="tit">皖A IC520</view>
					<view class="btn btna">新能源</view>
					<view class="btn btnb">小型车</view>
					<view class="flex1"></view>
					<view class="txt ca" v-if="ite.type==1">小区车辆</view>
					<view class="txt cb" v-if="ite.type==2">外来车辆</view>
				</view>
				<view class="clists">
					<view class="clist"><view class="tit">车库名称</view>地下停车场</view>
					<view class="clist"><view class="tit">进入时间</view>2024-11-27 16:27:48</view>
					<block v-if="topval=='sl'">
						<view class="clist"><view class="tit">驶离时间</view>2024-11-27 16:27:48</view>
						<view class="clist"><view class="tit">停车时长</view>3小时19分钟</view>
					</block>
					<view class="clist"><view class="tit">{{ite.type==1?'门户号 ':'来访门户'}}</view>8#303</view>
					<view class="clist"><view class="tit">手机号码</view>13656788668</view>
				</view>
			</view>
		</block>
		<block v-if="type=='carpark'">
			<view class="carlist" v-for="(ite,idx) in datainfo" :key="idx">
				<view class="ctop flexc">
					<image :src="cara" class="imgs" v-if="ite.type==1"></image>
					<image :src="carb" class="imgs" v-if="ite.type==2"></image>
					<view class="tit">皖A IC520</view>
					<view class="num" :class="ite.heiflag?'coff':''">(本年度2次)</view>
					<view class="flex1"></view>
					<view class="txt ca" v-if="ite.type==1">小区车辆</view>
					<view class="txt cb" v-if="ite.type==2">外来车辆</view>
				</view>
				<view class="clists">
					<view class="clist"><view class="tit">关联房号</view>12#1403</view>
					<view class="clist"><view class="tit">手机号码</view>13656788668</view>
					<view class="clist"><view class="tit">登记时间</view>2024-11-27 17:30:55</view>
					<view class="clist"><view class="tit">违停拍照</view>
						<view class="imgas">
							<image :src="cara" @click="getPreview(idx,cara)"></image>
							<image :src="cara"></image>
							<image :src="cara"></image>
							<image :src="cara"></image>
						</view>
					</view>
				</view>
			</view>
		</block>
		<view class="shax">{{wtdt}}</view>
	</block>
	<!-- 无数据 -->
	<view class="nodata" v-else>
		<image :src="noiconpimg"></image>
		<view>
			暂无数据
		</view>
	</view>
</view>
</template>

<script>
	import config from '@/config'
	export default{
		props:{
			datainfo: {
				type: Array,
				default () {
					return []
				}
			},
			wtdt:{
				type:String,
				default () {
					return ''
				}
			},
			type:{
				type:String,
				default () {
					return 0
				}
			},
			topval:{
				type:String,
				default () {
					return ''
				}
			}
		},
		data(){
			return{
				noiconpimg:require("@/work/static/nodata.png"),
				car:require("@/work/static/car/car.png"),
				cara:require("@/work/static/car/cara.png"),
				carb:require("@/work/static/car/carb.png"),
				baseUrl:config.baseUrl,
				
			}
		},
		mounted() {
			
		},
		methods:{
			getDetail(e){
				this.$emit('getdetail',e)
			},
			getPreview(idx,arr) {
				var newArr=[];
				arr.forEach(ite=>{
					var ds=this.baseUrl+ite
					newArr.push(ds)
				})
				uni.previewImage({
					urls: newArr,
					current:idx,
					success: function(data) {},
					fail: function(err) {}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.flex{display: flex;}
.flexc{display: flex;align-items: center;}
.mb10{margin-bottom: 20rpx;}
.carlist{background: #FFFFFF;border-radius: 20rpx;margin-bottom: 24rpx;
	.ctop{border-bottom: 2rpx solid #E5E5E5;padding:26rpx 24rpx;
		.imgs{width: 40rpx;height: 42rpx;margin-right: 30rpx;}
		.tit{font-size: 32rpx;color: #272727;font-weight: bold;margin-right: 14rpx;}
		.btn{height: 34rpx;border-radius: 18rpx;display: flex;align-items: center;justify-content: center;padding: 0 10rpx;font-size: 22rpx;margin-right: 24rpx;
			&.btna{border: 2rpx solid #06C770;color: #06C770;}
			&.btnb{border: 2rpx solid #3565ED;color: #3565ED;}
		}
		.txt{font-weight: 500;font-size: 26rpx;
			&.ca{color: #3565ED;}
			&.cb{color: #FE5A0E;}	
		}
		.num{font-size: 24rpx;color: #AAAAAA;}
	}
	.clists{padding: 24rpx 24rpx 8rpx;
		.clist{font-weight: 500;margin-bottom: 16rpx;
font-size: 26rpx;color: #272727;display: flex;line-height: 34rpx;
			.tit{font-size: 26rpx;color: #AAAAAA;flex: 0 0 auto;margin-right: 16rpx;min-width: 108rpx;text-align-last: justify;}
			.imgas{display: flex;align-items: center;flex-wrap: wrap;
				image{width: 142rpx;height: 142rpx;margin-right: 30rpx;margin-top: 8rpx;}
			}
			
		}
	}
}
// 无数据
.nodata{display: flex;flex-direction: column;align-items: center;
	image{width: 440rpx;height: 440rpx;}
	view{font-size: 30rpx;color: #666666;font-weight: bold;}
}
</style>