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 @click="previewHandle(i,item.checkResultUrl)" mode="widthFix" v-for="(img, i) in getArr(item.checkResultUrl)" :key="i" :src="img"></image>
				</view>
			</view>
		</view>

		<view class="bottomMenuGroup" v-if="ifShowBotBtn">
			<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 class="bottomBtn" @click="goToPrevPage" v-if="ifImprover">{{bottomBtnText}}</view>
	</view>
</template>

<script>
	/**
	 * 查核项详情
	 */

	// #ifdef APP
	const pictureModule = uni.requireNativePlugin("Wlake-PictureView")
	const modal = uni.requireNativePlugin('modal');
	// #endif

	import {
		_goBackFresh
	} from '../../utils/compatible.js';
	export default {
		data() {
			return {
				detail: {
					checkPointName: '',
					deptName: '',
					checkModelName: '',
					lastResult: '',
					checkResult: '',
					checkItemName: '',
					checkResultRequestList: [],
					checkPointId: ''
				},
				ifShowBotBtn: false,
				itemBelongGroup: [],
				itemId: '',
				ifImprover: true,
				bottomBtnText: '返回改善任务详情'
			};
		},
		onLoad: function({
			id,
			checkPointId
		}) {
			const pages = getCurrentPages();
			const reversedPageList = pages.reverse();
			if (reversedPageList && reversedPageList[0].route == 'pages/checkMainPoints/checkMainPoints') {
				this.bottomBtnText = '返回查核任务列表'
			}

			const roleNum = uni.getStorageSync('nowPermission');
			if (roleNum == 3) this.ifShowBotBtn = true;
			if (roleNum == 3) this.ifImprover = false;
			this.checkPointId = checkPointId;
			this.itemId = id;
			this.loadItemDetail(id);

			//只有查核展示底部按钮
			if (roleNum == 3) {
				//接收来自上个页面所传过来的数据
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.on('acceptDataFromOpenerPage', (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: {
			/**
			 * @param {number} index
			 * @param {string} imgUrls 
			 */
			previewHandle(index,imgUrls) {
				const picList = imgUrls ? imgUrls.split(',') : [] ;
				// #ifdef APP
				pictureModule.PictureViewerMain({
						'listPic': picList,
						'position':index, // 0 开始算  最大值为   listPic 数组数量 减一 
					},
					(ret) => {
						// modal.toast({
						// 	message: ret,
						// 	duration: 1.5
						// });
					});
				// #endif
			},
			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() {
				// _goBackFresh('pages/checkMainPoints/checkMainPoints');
                uni.navigateBack({
                    delta: 1
                });
			},
			loadItemDetail(id) {
				this.dispatch('checkTaskDetail', {
					id
				}).then((data) => {
					if (data) {
						this.detail = data;
						this.itemId = id;

					}
				});
			},
			switchItem(num) {
				let currentIndex = this.detail.checkDetailIds.findIndex(t => t == this.itemId);
				if (currentIndex - 1 == -1 && num < 0) {
					//当前项为第一个时且操作是点击上一项
					uni.showToast({
						title: '已经没有上一项',
						duration: 2000,
						icon: 'none'
					});
					return;
				}


				if (currentIndex + 1 > this.detail.checkDetailIds.length - 1 && num > 0) {
					//当前项为第一个时且操作是点击下一项
					uni.showToast({
						title: '已经没有下一项',
						duration: 2000,
						icon: 'none'
					});
					return;
				}

				let needItemId = num > 0 ? this.detail.checkDetailIds[currentIndex + 1] : this.detail.checkDetailIds[
					currentIndex - 1];
				if (needItemId) {
					this.loadItemDetail(needItemId);
				}

			}
		}
	}
</script>

<style lang="less" scoped>
	.auditItemDetails {
		.bottomBtn {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 75rpx;
			line-height: 75rpx;
			text-align: center;
			font-size: 22.5rpx;
			font-family: SourceHanSansCN-Normal, SourceHanSansCN;
			font-weight: 400;
			color: #FFFFFF;
			background: #3377FF;
		}

		.top-box {
			position: relative;
			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;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;

					&: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;
					width: 25%;
					border-right: 1px solid #DADEE6;

					text {
						width: 100%;
						text-align: center;
						font-weight: 500;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;

						&: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:160rpx;

							&: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>