Web_TracerMethodology/pages/auditItemDetails/auditItemDetails.vue

<template>
	<view class="auditItemDetails">
		<view class="top-box">
			<view class="icon-wrap">
				<image src="../../static/chahexiang-bg.png"></image>
				<text>查核项</text>
			</view>
			<image class="img-tuli" 
				@click="goLegendDetails(detail.checkItemId)"
				src="../../static/tuli.png"></image>
			<view class="title-wrap">
				<text>{{detail.checkItemName}}</text>
				<text>{{detail.checkPointName}}</text>
			</view>
			<view class="children">
				<view class="child">
					<text>{{detail.deptName || '--'}}</text>
					<text>查核单位</text>
				</view>
				<view class="child">
					<text>{{detail.checkModelName || '--'}}</text>
					<text>查核方式</text>
				</view>
				<view class="child">
					<text>{{detail.lastResult || '--'}}</text>
					<text>上次结果</text>
				</view>
				<view class="child">
					<text>{{detail.checkResult || '--'}}</text>
					<text>本次结果</text>
				</view>
			</view>
		</view>
		<view class="bottom-box" 
			v-for="(item, index) in detail.checkResultRequestList"
			:key="index">
			<view class="box-item">
				<view>查核结果</view>
				<view>{{item.checkResultDescribe}}</view>
			</view>
			<view class="box-item">
				<view>查核时间</view>
				<view>{{detail.completeTimeStr}}</view>
			</view>
			<view class="box-item">
				<view>图片展示</view>
				<view class="img-wrap">
					<image mode="widthFix" 
						v-for="(img, i) in getArr(item.checkResultUrl)"
						:key="i"
						:src="img"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 查核项详情
	 */
	export default {
		data() {
			return {
				detail: {
					checkPointName: '',
					deptName: '',
					checkModelName: '',
					lastResult: '',
					checkResult: '',
					checkItemName: '',
					checkResultRequestList: []
				}
			};
		},
		onLoad: function ({id}) {
			this.dispatch('checkTaskDetail', {id}).then((data)=>{
				if(data) {
					this.detail = data;
				}
			});
		},
		methods: {
			getArr(value) {
				return value ? value.split(',') : [];
			},
			goLegendDetails(checkItemId) {
				//跳转到图例详情
				uni.navigateTo({
					url: `/pages/legendDetails/legendDetails?checkItemId=${checkItemId}`
				});
			},
			dispatch(key, data) {
				return this.$store.dispatch({type: 'checkList/commActions', key, data});
			}
		}
	}
</script>

<style lang="less">
	.auditItemDetails {
		.top-box {
			position: relative;
			margin-top: 15rpx;
			padding-bottom: 37.5rpx;
			background-color: #fff;
			.icon-wrap {
				position: relative;
				overflow: hidden;
				width: 125rpx;
				height: 37.5rpx;
				image {
					width: 100%;
					height: 100%;
				}
				text {
					position: absolute;
					top: 0;
					left: 25rpx;
					font-size: 20rpx;
					line-height: 37.5rpx;
					color: #fff;
				}
			}
			.img-tuli {
				position: absolute;
				top: 25rpx;
				right: 25rpx;
				width: 40rpx;
				height: 40rpx;
			}
			.title-wrap {
				display: flex;
				flex-direction: column;
				padding: 25rpx 31.25rpx;
				text {
					font-size: 25rpx;
					line-height: 37.5rpx;
					&:last-child {
						padding-top: 4.37rpx;
						font-size: 17.5rpx;
						line-height: 26.25rpx;
						color: #7A8599;
					}
				}
			}
			.children {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 10.62rpx;
				.child {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					flex: 1;
					border-right: 1px solid #DADEE6;
					text {
						font-weight: 500;
						&:last-child {
							font-size: 17.5rpx;
							line-height: 26.25rpx;
							color: #7A8599;
							font-weight: 400;
						}
					}
					&:last-child {
						border-right: 0;
					}
				}
			}
		}
		.bottom-box {
			margin-top: 15rpx;
			padding: 0 25rpx;
			background-color: #fff;
			
			.box-item {
				display: flex;
				flex-direction: row;
				border-bottom: 0.62rpx solid #DADEE6;
				padding: 26.25rpx 0;
				&:last-child {
					border-bottom: 0;
				}
				>view {
					width: 100%;
					&:first-child {
						width: 175rpx;
						white-space: nowrap;
						color: #525866;
					}
					&.img-wrap {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						
						image {
							margin-bottom: 12.5rpx;
							width: calc(50% - 12.5rpx);
							&:nth-child(2n) {
								margin-left: 12.5rpx;
							}
						}
					}
				}
			}
		}
	}
</style>