androidCnToWechatGrt/pagesOperation/record/detail.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='详情'></cus-header>
		<div class="boxs">
			<div class="box">
				<div class="box_item">
					<div class="left">项目订单号</div>
					<div class="right">{{dto.orderNo2||''}}</div>
				</div>
				<div class="box_item">
					<div class="left">巡检地点</div>
					<div class="right">{{dto.inspectionSite||''}}</div>
				</div>
				<div class="box_item">
					<div class="left">巡检任务</div>
					<div class="right">{{dto.inspectionTask||''}}</div>
				</div>
				<div class="box_item">
					<div class="left">巡检负责人</div>
					<div class="right">{{dto.inspector||''}}</div>
				</div>
				<div class="box_item">
					<div class="left">巡检时间</div>
					<div class="right">{{dto.startDate2||''}}</div>
				</div>
			</div>
			<div class="box">
				<div class="box_item">
					<div class="left">巡检结果</div>
					<div class="right">{{dto.status===0?'正常':'异常'}}</div>
				</div>
				<div class="box_item2">
					<div class="top">备注</div>
					<div class="bottom">{{dto.remark||''}}</div>
				</div>
			</div>
			<div class="box">
				<div class="box_item2">
					<div class="top">巡检打卡</div>
					<div class="bottom">
						<div class="imgs" v-if="imgList.length">
							<image :src="img" v-for="(img,idx) in imgList" :key="idx"></image>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="btn" @tap="back">返回</div>
		</div>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				id:'',
				dto:{},
				projectList:[],
				typeList:[],
				imgList:[],
			}
		},
		async onLoad(option) {
			this.id = option.id;
			await this.getOrderList();
			this.getDetail();
		},
		methods:{
			getOrderList(){
				return new Promise((resolve,reject)=>{
					this.$api.get('/wms/project/getOrderPage',{page:1,limit:-1}).then(res=>{
						if(res.data.code===0){
							this.projectList = res.data.data.list;
							resolve();
						}else this.$showToast(res.data.msg)
					})
				})
			},
			getDetail(){
				this.$api.get('/wms/order/inspection/'+this.id).then(res=>{
					if(res.data.code!==0) return this.$showToast(res.data.msg)
					this.dto = res.data.data;
					this.dto.startDate2 = new Date(this.dto.startDate).Format('yyyy-MM-dd');
					this.dto.orderNo2 = this.projectList.find(p=>p.id==this.dto.orderId)?.orderNo||'';
					this.imgList = this.dto.inspectionFile.split(',');
				})
			},
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		padding-bottom: 168rpx;
		background: #F4F8FB;
		
		.boxs{
			padding: 0 24rpx;
			.box{
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-top: 20rpx;
				padding: 0 24rpx;
			}
		}
		
		.box_item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECEEF5;
			padding: 24rpx 0;
			.left{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #1D2129;
				line-height: 42rpx;
			}
			.right{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #4E5969;
				line-height: 40rpx;
				text-align: right;
			}
		}
		.box_item2{
			.top{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #1D2129;
				line-height: 42rpx;
				padding: 24rpx 0;
			}
			.bottom{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #4E5969;
				line-height: 40rpx;
			}
		}
		
		.imgs{
			display: flex;
			justify-content: space-evenly;
			flex-wrap: wrap;
			margin-top: -20rpx;
			image{
				width: 180rpx;
				height: 180rpx;
				margin-top: 20rpx;
			}
		}
		
		.bottom{
			width: 100%;
			height: 148rpx;
			padding: 20rpx 48rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 9;
			.btn{
				width: 100%;
				height: 88rpx;
				background: #2E69EB;
				border-radius: 16rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
			}
		}
	}
</style>