JP-Equipment-Jingli/pages/storeManagement/equipmentInspection/inspectionRecord.vue

<template>
	<view>
		<u-navbar title="检验记录"></u-navbar>
		
		<view class="container">
			<view class="main">
				<view class="list-item" v-for="(item,index) in inspectionRecordDeviceList"
				
				 :key="index">
					<!--信息 -->
					<view class="list-infos">
						<view class="infos-head">
							<view class="name">
								{{item.deviceInfo.title}}
							</view>
							<view class="state" @click="ckInfo(item)">
								查看设备
							</view>
						</view>
						<view class="infos">
							<view class="infos-1">
								<view class="infos-item">
									<view class="item-name">
										型号：
									</view>
									<view class="item-value">
										{{item.deviceInfo.model}}
									</view>
								</view>

							</view>
							<view class="infos-2">
								<view class="infos-item">
									<view class="item-name">
										设备编号：
									</view>
									<view class="item-value">
										{{item.deviceInfo.code}}
									</view>
								</view>

							</view>

						</view>

					</view>
                <!-- 检验结果 -->
					<view class="result">
						<view class="title">
							检验结果
						</view>
						<view :class="item.status==1?'value':'value2'">
							{{item.status==1?'合格':'不合格'}}
						</view>
					</view>
                <!-- 备注 -->
                    <view class="remark">
                    	<view class="title">
                    		备注说明：
                    	</view>
						<view class="value">
						   {{item.remark?item.remark:'未填写'}}
						</view>
                    </view>
        <!-- 图片 -->
		<view class="image" v-if="item.imgUrls" >
			<view class="img-box" v-for="(img,index2) in item.imgUrls.split(',')" :key="index2" >
				<!-- src="@/assets/img/image.png"-->
				<img :src="img"  alt="">
			</view>
			
		</view>

				</view>


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

<script>
	import * as API from '@/apis/pagejs/storeManagement.js'
	
	export default {
		data() {
			return {
				show: false,
				inspectionRecordDeviceList:[]
			};
		},
		onLoad(op){
			this.id=op.id
			this.getInfo()
			
		},
		methods: {
			ckInfo(item) {
				
				var url = "/pages/otherFunctions/equipmentRetrieval/equipmentInfo?id=" + item.deviceId;
			
				uni.navigateTo({
					url: url,
				
				})
			},
			getInfo(bl){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.inspectionDetails({
					recordId:this.id,
				}).then((res) => {
					uni.hideLoading();
					this.inspectionRecordDeviceList=res.data.inspectionRecordDeviceList;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			changeShow() {
				this.show = !this.show
			}

		},

	};
</script>

<style scoped lang="scss">
	.head {
		background-color: #fff;
		padding: 32rpx;

		.title {
			color: rgba(51, 51, 51, 1);
			font-size: 36rpx;
			margin-bottom: 16rpx;
		}

		.item {
			display: flex;
			color: #777777;
			margin-top: 16rpx;

			.name,
			.value {
				font-weight: bold;
			}

			.unfold {
				margin-left: auto;
				position: relative;
				color: #929EA5;
				font-family: Microsoft Yahei;

				/deep/.uicon-arrow-down {
					margin-left: 8rpx;
				}
			}

			.options {
				width: 120rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				background-color: #fff;
				color: rgba(65, 80, 88, 1);
				font-family: Microsoft Yahei;
				position: absolute;
				top: 320rpx;
				right: 24rpx;
				box-shadow: 5px 5px 10px gray;
			}
		}
	}

	.container {
		padding-bottom: 60px;
		.main {
			padding: 0 24rpx;

			.list-item {
				border-radius: 8px;
				padding: 24rpx;
				background-color: #fff;
				margin-top: 24rpx;
			}

			// 信息
			.list-infos {
				padding-bottom: 24rpx;
				border-bottom: 1px solid rgba(232, 232, 232, 1);

				.infos-head {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 24rpx;

					.name {
						color: rgba(51, 51, 51, 1);
						font-size: 32rpx;
					}

					.state {
						border: 1px solid rgba(69, 186, 69, 1);
						border-radius: 4px;
						color: rgba(69, 186, 69, 1);
						font-size: 24rpx;
						line-height: 48rpx;
						width: 160rpx;
						text-align: center;

						text {
							img {
								vertical-align: middle;
								margin-right: 4rpx;
							}
						}
					}


				}

				.infos {
					margin-top: 16rpx;
					display: flex;
					justify-content: space-between;
					color: #777777;
					font-size: 24rpx;



					.infos-item {
						display: flex;
						margin-bottom: 8rpx;
						
						.item-value {
							//width: 200rpx;
							max-width: 200rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
				}
			}
   // 结果
     .result{
		 display: flex;
		 justify-content: space-between;
		 margin-top: 24rpx;
		 .title{
			 color:#333333;
			 font-weight: bold;
		 }
		 .value{
			 color: #0EB01D;
		 }
		 .value2{
		 			 color: red;
		 }
	 }
  // 备注
  .remark{
	  display: flex;
	  color:#777777;
	  margin-top: 24rpx;
  }

// 图片
.image{
	margin-top: 24rpx;
	display: flex;
	flex-wrap: wrap;
	.img-box{
		
		border-radius: 4px;
		overflow: hidden;
		margin-bottom: 16rpx;
		
		img{
			width: 100%;
			height: 100%;
		}
	}
	@media screen and(max-width:375px) {
		.img-box{
			width: 154rpx;
			height: 154rpx;
			margin-left: 12rpx;
		}
	}
	@media screen and(min-width:375px) {
		.img-box{
			width: 154rpx;
			height: 154rpx;
			margin-left:8rpx;
		}
	}
}


		}



	}
</style>