parking_inspection/pages/center/reportList/reportDetails.vue

<template>
	<view>
		<u-navbar
		 :title="title" 
		 title-color="#fff" 
		 :custom-back="customBack" 
		 :border-bottom="false" 
		 back-icon-color="#CCE8FF" 
		 :background="{background: 'linear-gradient(99deg, #7A4398 0%, #5A5DB9 100%)' }"></u-navbar>
		
		<view class="block-til">异常信息</view>
		<view class="base-info">
			<view class="base-info-item u-flex u-row-between">
				<view class=""><b>路段/停车场：</b>{{pageData.roadName}}</view>
			</view>
			<view class="base-info-item">
				<view class=""><b>泊位号：</b>{{pageData.spaceNo}}</view>
			</view>
			<view class="base-info-item">
				<view class=""><b>问题描述：</b>{{pageData.exceprionDes}}</view>
			</view>
			<view class="base-info-item">
				<view class="">
					<b>图片：</b>
					<view class="img-list">
						<image class="img" @click="previewImage(index)" v-for="(item,index) in pageData.imgList" :src="item" mode="widthFix" :key="index"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="block-til">处理信息</view>
		<view class="base-info">
			<view class="base-info-item">
				<view class=""><b>处理状态：</b>{{pageData.isProcess|filterIsProcess}}</view>
			</view>
			<view class="base-info-item">
				<view class=""><b>处理设配：</b>{{pageData.processDeviceName}}</view>
			</view>
			<view class="base-info-item">
				<view class=""><b>损坏方式：</b>{{pageData.damageTypeName}}</view>
			</view>
			<view class="base-info-item">
				<view class=""><b>处理方式：</b>{{pageData.processTypeName}}</view>
			</view>
			<view class="base-info-item">
				<view class=""><b>处理员：</b>{{pageData.processBy}}</view>
			</view>
			<view class="base-info-item">
				<view class=""><b>上报时间：</b>{{pageData.updateTime}}</view>
			</view>
		</view>
		<view class="evaluateDes-wrap" v-if="pageData.evaluateList.length>=1">
			<view class="block-til">评价信息</view>
			<view class="evaluate-list">
				<view class="evaluate-item" v-for="(item,index) in pageData.evaluateList" :key="index">
					{{item.evaluateDes}}--{{item.createBy}}
				</view>
			</view>
		</view>
		
		<view class="btn-wrap" v-if="pageData.isProcess!=1">
			<u-button class="btn" type="primary" @click="goReport">更新处理进度</u-button>
		</view>

		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				title:'记录详情',
				pageData:{evaluateList:[]},
				id:'',
				deviceId:'',
				dataList:[],
			}
		},
		onLoad(page){
			this.id = page.id;
			// this.deviceId = page.deviceId;
		},
		onShow(){
			this.getReportDetail();
		},
		mounted() {
		},
		onReady() {
			// this.$refs.uForm.setRules(this.rules);
		},
		methods:{
			customBack(){
				uni.navigateBack()
			},
			getReportDetail(){
				this.$u.api.excptionById({id:this.id}).then(res=>{
					if(res.code==200){
						this.pageData = res.data;
						// console.log('payeeReportDetail',res);
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
					console.log('res',res);
				}).catch(err=>{
					console.log('err',err);
				})
			},
			previewImage(index){
				uni.previewImage({
					current: index,
					urls: this.pageData.imgList
				});
			},
			goReport(){
				this.$u.route({
				  url: '/pages/report/report',
				  type:'navigateTo',
					params:{
						reportId:this.pageData.id,
						deviceId:this.pageData.deviceId,
						deviceType:this.pageData.deviceType,
					}
				})
			}
		}
	}
</script>
<style>
	page{background: #F3F3F3;padding-bottom: 24rpx;}
</style>
<style lang="scss" scoped>
@import  '@/pages/report/report.scss';
.btn-wrap{
	margin: 80rpx 50rpx 24rpx;
	min-height: 40px;
	.btn{
		position: fixed;
		left: 24rpx;
		bottom: 0;
		width: calc( 100% - 48rpx );
	}
}
.block-til{
	margin-left: 24rpx;
}
.evaluate-list{
	margin: 24rpx;
	padding: 24rpx;
	border-radius: 10rpx;
	background: #fff;
	.evaluate-item{
		&+.evaluate-item{
			margin-top: 10rpx;
		}
	}
}
</style>