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 class="bottomMenuGroup">
			<view class="menuBtn" @click="goToPrevPage">
				<image class="threeLineMenuIcon" src="/static/threeLineMenu.png" ></image>
			</view>
			<view class="prevBtn" @click="switchItem(-1)">上一项</view>
			<view class="nextBtn" @click="switchItem(1)">下一项</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 查核项详情
	 */
	export default {
		data() {
			return {
				detail: {
					checkPointName: '',
					deptName: '',
					checkModelName: '',
					lastResult: '',
					checkResult: '',
					checkItemName: '',
					checkResultRequestList: [],
					checkPointId: ''
				},
				itemBelongGroup:[],
				itemId:''
			};
		},
		onLoad: function ({id, checkPointId}) {
			console.log('22');
			this.checkPointId = checkPointId;
			this.itemId = id;
			this.loadItemDetail(id);
			//接收来自上个页面所传过来的数据
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('acceptDataFromOpenerPage', (data)=>{
			    // console.log({data});
				this.itemBelongGroup =data.data[0].responseList.map((item,index)=>{
					    return({
							index:index,
							id:item['id'],
						})
				});
				//重新导航进页面，删除缓存并设置最新数据
				uni.removeStorageSync('itemBelongGroup');
			    uni.setStorageSync('itemBelongGroup',this.itemBelongGroup);
			});
			//手动刷新页面，获取本地缓存
			const itemBelongGroup = uni.getStorageSync('itemBelongGroup');
			this.itemBelongGroup = itemBelongGroup;
		},
		methods: {
			getArr(value) {
				return value ? value.split(',') : [];
			},
			goLegendDetails(checkItemId) {
				//跳转到图例详情
				uni.navigateTo({
					url: `/pages/legendDetails/legendDetails?checkItemId=${checkItemId}&checkPointId=${this.checkPointId}`
				});
			},
			dispatch(key, data) {
				return this.$store.dispatch({type: 'checkList/commActions', key, data});
			},
			goToPrevPage(){
				// uni.navigateBack({
				//     delta: 1
				// });
				window.history.back();
			},
			loadItemDetail(id){
				this.dispatch('checkTaskDetail', {id}).then((data)=>{
					if(data) {
						this.detail = data;
						this.itemId = id;
					}
				});
			},
			switchItem(num){
				let current = this.itemBelongGroup.filter(item=>{
					  return item.id == this.itemId;
				});
				if(num<0){
					if(current[0].index==0){
						 uni.showToast({
						     title: '已经没有上一项',
						     duration: 2000,
							 icon:'none'
						 });
						 return;
					}
				}
				if(num>0){
					if(current[0].index==this.itemBelongGroup.length-1){
						 uni.showToast({
						     title: '已经没有下一项',
						     duration: 2000,
							 icon:'none'
						 });
						 return;
					}
				}
				let needItemIndex = num>0?current[0].index+1:current[0].index-1;
				let needItemId = this.itemBelongGroup[needItemIndex].id;
				this.loadItemDetail(needItemId);	
			}
		}
	}
</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;
							}
						}
					}
				}
			}
		}
		.bottomMenuGroup {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 75rpx;
			display: flex;
			flex-direction: row;
			background: #FFFFFF;
			border-top:0.62rpx solid #DADEE6;
			.menuBtn {
				display: flex;
				width: 75rpx;
				height: 75rpx;
				justify-content: center;
				align-items: center;
				border-right: 0.62rpx solid #DADEE6;
				.threeLineMenuIcon {
					width: 26.25rpx;
					height: 21.25rpx;
				}
				
			}
			.prevBtn {
				border-right: 0.62rpx solid #DADEE6;
			}
			.prevBtn,.nextBtn {
				display: flex;
				flex: 1;
			    justify-content: center;
				height:75rpx;
				line-height:75rpx;
				font-size: 22.5rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #3377FF;
			}
		}
	}
</style>