property/property_ui/work/pages/service/patroldetail.vue

<template>
	<view class="irecord">
		<view class="patlist">
			<view class="pattop flexc">
				<image :src="home" class="imgs"></image>
				<view class="tit">幸福小区1栋2单元电梯间</view>
				<view class="flex1"></view>
				<view class="txt cd" v-if="datainfo.type==1">未巡更</view>
				<view class="txt cc" v-if="datainfo.type==2">已巡更</view>
			</view>
			<view class="patlistr">
				<view class="clist"><view class="tit">巡检类型</view>：设备维修</view>
				<view class="clist"><view class="tit">巡检时间</view>：2024-11-27 10:00</view>
				<view class="clist"><view class="tit">巡检路线</view>：幸福小区1号楼1-2单元</view>
				<view class="clist"><view class="tit">巡检人</view>：刘兵琦</view>
			</view>
		</view>
		
		<view class="chtop flexc">
			<image :src="line"></image>
			<view>巡更详情</view>
			<view class="flex1"></view>
		</view>
		<view class="patlist">
			<view class="patlistr" style="padding-bottom: 14rpx;">
				<view class="clist"><view class="tit">巡检人</view>：设备维修</view>
				<view class="clist"><view class="tit">手机号码</view>：2024-11-27 10:00</view>
				<view class="clist"><view class="tit">巡检时间</view>：幸福小区1号楼1-2单元</view>
				<view class="clist"><view class="tit">巡检结果</view>：刘兵琦</view>
				<view class="clist"><view class="tit">巡检详情</view>：
					<view class="flexdc">
						<view>1.设备正常，无任何异动和意向；</view>
						<view>2.电力系统正常，无故障提示；</view>
						<view>3.设备使用正常，无异常提示；</view>
					</view>
					
				</view>
				<view class="clist mt6"><view class="tit">照片</view>：
					<!-- 图片 -->
					<view class="imgs">
						<image :src="home" class="img" @click="getPreview"></image>
						<image :src="home" class="img" @click="getPreview"></image>
						<image :src="home" class="img" @click="getPreview"></image>
					</view>
				
				</view>
			</view>
		</view>
		<loading></loading>
	</view>
</template>

<script>
	import config from '@/config'
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	export default{
		components:{},
		data(){
			return{
				line:require('@/work/static/car/line.png'),
				home:require("@/work/static/service/home.png"),
				baseUrl:config.baseUrl,
				datainfo:{
					type:1,heiflag:true
				},
			}
		},
		onLoad: function() {
		
		},
		methods:{
			checkPermi, checkRole,
			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) {}
				});
			},
			getDelFn(){
				var that=this;
				uni.showModal({
					title: '解除黑名单',
					content: "是否确认解除",
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							// that.filelist.splice(idx,1)
						} else if (res.cancel) {
						}
					}
				});
			},
			getOcrIdCard(obj){
				var params={
					image:obj.url,
					idCardSide:obj.type
				}
				getOcrIdCard(params).then(res=>{
					if(res.code==200){
						var datainfo=res.data;
						if(obj.type=='front'){
							this.datainfo.realName=datainfo.realName;
							this.datainfo.idCard=datainfo.idCard;
							this.datainfo.address=datainfo.address;
						}else{
							this.datainfo.expirationDate=datainfo.expirationDate
						}
					}
				})
			}
		}
	}
</script>
<style>
	page{
		background:#F3F3F0;padding-top:24rpx;
	}
</style>
<style lang="scss" scoped>
.bgef{background: #EFF4FF;}
.irecord{flex: 1;background: #ffffff;min-height: calc(100vh - 24rpx);padding-bottom: 24rpx;box-sizing: border-box;
	.patlist{border-radius: 20rpx;padding: 0 18rpx 4rpx;
		.pattop{padding:32rpx 30rpx;margin-bottom: 2rpx;
			.imgs{width: 28rpx;height: 28rpx;margin-right: 12rpx;}
			.tit{font-size: 30rpx;color: #272727;font-weight: bold;margin-right: 14rpx;}
			.txt{font-weight: 500;font-size:24rpx;
				&.ca{color: #3565ED;}
				&.cb{color: #FE5A0E;}	
				&.cc{color: #28C529;}	
				&.cd{color: #FF6969;}	
			}
		}
		.patlistr{background: #EFF4FF;border-radius: 20rpx;padding: 24rpx 0 24rpx 40rpx;
			.clist{font-weight: 500;font-size: 26rpx;color: #272727;display: flex;line-height: 52rpx;
				.tit{font-size: 26rpx;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;}
	}	
}
.imgs{display: flex;align-items: center;flex-wrap: wrap;
	.img{width: 160rpx;height:160rpx;border-radius: 20rpx;margin: 0 26rpx 26rpx 0;position: relative;
		&:nth-of-type(3n){margin-right: 0;}
		}
}
</style>