property/user_ui/mine/pages/car/illegalrecord.vue

<template>
	<view class="irecord">
		<view class="ctop flexc">
			<image :src="carc" class="imgs" v-if="datainfo.carType==1"></image>
			<image :src="card" class="imgs" v-if="datainfo.carType==2"></image>
			<view class="tit">{{datainfo.plateNumber}}</view>
			<view class="flex1"></view>
			<block v-if="datainfo.carType">
				<view class="txt" :class="datainfo.carType==1?'ca':'cb'">{{kaType(datainfo.carType,carType)}}</view>
			</block>
		</view>
		<view class="pdlr12" v-if="datainfo.carType==1">
			<view class="clists bgef">
				<view class="clist"><view class="tit">关联房号：</view>{{datainfo.visitPortal}}</view>
				<view class="clist"><view class="tit">手机号码：</view>{{datainfo.mobileNumber}}</view>
			</view>
		</view>
		<view class="chtop flexc">
			<view class="line"></view>
			<view>违停记录</view>
			<view class="flex1"></view>
			<view class="num coff" v-if="datainfo.isBlack=='Y'">(已登黑名单)</view>
		</view>
		<!-- 步骤条 -->
		<view class="steps" v-for="(ite,idx) in datainfo.children">
			<image :src="icoa" v-if="idx==0" class="circle"></image>
			<image :src="icob" v-else class="circle"></image>
			<view class="step">
				<view class="slist">
					<view class="tit">登记时间：</view>{{ite.createTime}}
				</view>
				<view class="slist">
					<view class="tit">违停拍照：</view>
					<view class="imgas" v-if="ite.illegalPhoto">
						<image :src="baseUrl+aite" v-for="(aite,aidx) in kaPhoto(ite.illegalPhoto)" :key="aidx" @click.stop="getPreview(aidx,ite.illegalPhoto)"></image>
					</view>
				</view>
			</view>
		</view>
		<loading></loading>
	</view>
</template>

<script>
	import config from '@/config'
	import {selectDictValue} from "@/utils/common.js"
	import {illegalParkingDet,illegalParkingDel,illegalParkingCancel} from "@/api/work/car.js"
	import {getDictionaryFn} from "@/api/system/user.js"
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	export default{
		components:{},
		data(){
			return{
				// line:require('@/car/static/car/line.png'),
				carc:require('@/mine/static/house/carcc.png'),
				card:require('@/mine/static/house/carbb.png'),
				icoa:require('@/mine/static/house/icoa.png'),
				icob:require('@/mine/static/house/icob.png'),
				baseUrl:config.baseUrl,
				datainfo:{},
				id:'',
				carType:[],
			}
		},
		onLoad: function(e) {
			this.init()
			if(e.id){
				this.id=e.id;
				this.getDataFn()
			}
		},
		methods:{
			checkPermi, checkRole,
			kaType(data, list) {
				return selectDictValue(list, data);
			},
			kaPhoto(data){
				return data.split(',');
			},
			init(){
				// 车辆类型
				getDictionaryFn('car_type').then(res=>{
					if(res.code==200){
						this.carType = res.data.map(v => {
							return {
								dictLabel: v.dictLabel,
								dictValue: v.dictValue
							}
						})
					}
				})
			},
			getDataFn(){
				illegalParkingDet(this.id).then(res=>{
					if(res.code==200){
						this.datainfo=JSON.parse(JSON.stringify(res.data));
					}
				})
			},
			getPreview(idx,arr) {
				var newArr=[];
				var list=arr.split(',')
				list.forEach(ite=>{
					var ds=this.baseUrl+ite
					newArr.push(ds)
				})
				uni.previewImage({
					urls: newArr,
					current:idx,
					success: function(data) {},
					fail: function(err) {}
				});
			},
			getDelFn(){
				var that=this;
				uni.showModal({
					title: '解除黑名单',
					content: "是否确认解除",
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							that.getLiftFn()
						} else if (res.cancel) {
						}
					}
				});
			},
			getLiftFn(){
				var that=this;
				var info=JSON.parse(JSON.stringify(this.datainfo));
				var params={};
				params.plateNumber=info.plateNumber;
				params.illegalParkingId=info.illegalParkingId;
				params.isBlack="N"
				// 车牌号，id,isblace
				illegalParkingCancel(params).then(res=>{
					if(res.code==200){
						this.$toast("解除成功")
						setTimeout(function(){
							uni.$emit("refCarPark")
							uni.navigateBack({
								delta:1
							})
						},1500)
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
.bgef{background: #EFF4FF;}
.irecord{background: #FFFFFF;border-radius: 20rpx;flex: 1;padding-bottom: 10rpx;
	.ctop{padding:20rpx 48rpx;margin-bottom:14rpx;
		.imgs{width: 30rpx;height: 24rpx;margin-right: 12rpx;}
		.tit{font-size: 32rpx;color: #272727;font-weight: bold;margin-right: 14rpx;}
		.txt{font-weight: 500;font-size: 24rpx;
			&.ca{color: #0256FD;}
			&.cb{color: #FE5A0E;}	
		}
	}
	.clists{padding: 22rpx 40rpx 22rpx;border-radius: 20rpx;box-sizing: border-box;
			.clist{font-size: 26rpx;color: #272727;display: flex;line-height: 52rpx;
				.tit{font-size: 26rpx;color: #272727;flex: 0 0 auto;min-width: 108rpx;text-align-last: justify;font-weight: bold;}		
			}
		}
	.chtop{padding-top: 36rpx;margin-bottom: 32rpx;padding-right: 48rpx;
		image{width: 14rpx;height: 48rpx;margin-right: 20rpx;}
		view{font-weight: bold;font-size: 32rpx;color: #272727;}
		.num{font-weight: 500;font-size: 24rpx;color: #AAAAAA;}
		.line{width: 14rpx;height: 48rpx;background: #0256FD;border-radius:0 12rpx 12rpx 0;margin-right: 18rpx;}
	}
	.steps{display: flex;padding: 0 32rpx 12rpx;position: relative;
		&::after{content: '';background: #E6E6E6;width: 2rpx;position: absolute;top: 38rpx;bottom: -14rpx;left: 44rpx;}
		.circle{width: 24rpx;height: 24rpx;margin-right: 24rpx;flex: 0 0 auto;margin-top: 14rpx;}
		.step{
			.slist{font-size: 26rpx;color: #272727;display: flex;line-height: 52rpx;margin-bottom: 6rpx;
				.tit{font-weight: bold;text-align-last: justify;flex: 0 0 auto;min-width: 108rpx;}
				.imgas{display: flex;align-items: center;flex-wrap: wrap;
					image{width: 160rpx;height: 160rpx;margin-right: 30rpx;margin-bottom: 14rpx;}
				}
			}
		}
	}
	
}
</style>