zhgdyunapp_vue3/pages/projectEnd/buildEquipToolManage/equipmentManage/side.vue

<template>
	<view class="control">
		<!-- <view class="control-h2 flex j-between a-center">
			进度记录
			<view class="control-total">0/10</view>
		</view> -->
		<view class="fixedheader">
			<headers :showBack="true">
			<view class="headerName">
				安全检查详情
			</view>
		</headers>
		</view>
		
		<view class="list" :style="{ 'padding-top': ((statusBarHeight * 2) + 45) * 1.5 + 'rpx' }" v-if="listData && listData.length>0">
			<view class="list-item" v-for="(item,index) in listData" :key="index" @click="checkItem(item)">
				<view class="list-title">
					<!-- 未销项 -->
					<view>
						<!-- <text class="tag" v-if="item.hiddenDangerNum > 0">未销项{{item.hiddenDangerNum}}</text> -->
						检查内容：{{item.inspectionContent}}
					</view>

				</view>
				<view class="list-content">
					<view class="list-info">
						检查单位：{{item.inspectionUnitName}}
					</view>
					<view class="list-info">
						检查人：{{item.inspectorName}}
					</view>
					<view class="list-info">
						检查结果：{{item.inspectionResult == 1 ? '合格' : '不合格'}}
					</view>
					<view class="list-info">
						附件：<view class="download" @click="downloadFn(item)" v-for="ele in item.attachment"
							:key="ele.uid">
							{{ ele.name }}
						</view>
					</view>
					<view class="list-info">
						检查时间：{{item.inspectionTime}}
					</view>
					<!-- <view class="list-info">
						图片：<view class="download" v-for="item in item.image" :key="item.id">
							<image :src="item.url.includes('http://') ? item.url : url_config+'image/'+item.url"
								class="img"
								@click="previewImage(item.url.includes('http://') ? item.url : url_config+'image/'+item.url)">
							</image>
						</view>	
					</view> -->
					<!-- <view class="info-status" v-if="item.issuperdanger">超危</view> -->
				</view>
			</view>
			<!-- <view class="loadMoreBox" v-if="isLoadMore">
				<uni-load-more :status="loadStatus" iconType="auto"></uni-load-more>
			</view> -->
		</view>
		<view class="no_data1" v-else>
			<image src="/static/bthgIcon/noData1.png"></image>
		</view>
		<view class="add-btn" @click="addForm">
			<!-- <uni-icons2 v-if="activeIndex == 5" type="camera" size="30" color="#fff"></uni-icons2>
			<uni-icons2 v-else type="plusempty" size="30" color="#fff"></uni-icons2> -->
			<span>+</span>
		</view>
	</view>
</template>

<script>
	import {
		isJSON
	} from '@/utils/tool.js'
	export default {
		// props: ['detailId'],
		data() {
			return {
				listData: [],
				detailId: '',
				statusBarHeight: 0,
				activeIndex: 1,
			}
		},
		onLoad(option) {
			this.detailId = option.detailId;
			this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
		},
		onShow() {
			this.initData()
		},
		methods: {
			addForm() {
				uni.navigateTo({
					url: './addSide?id=' + this.detailId
				})
				// if(this.activeIndex == 1){
				// 	uni.navigateTo({
				// 		url:'./addPlan?id='+this.detailId
				// 	})
				// } else if(this.activeIndex == 2){
				// 	if(uni.getStorageSync('dangerData')){
				// 		uni.removeStorageSync('dangerData');
				// 	}
				// 	if(uni.getStorageSync('detailData')){
				// 		uni.removeStorageSync('detailData');
				// 	}
				// 	uni.navigateTo({
				// 		// url:'../safeManage/addExamine?type=1&engineeringId='+this.detailId + '&moduleType=safeCheck'
				// 		url:'../../safeSame/addIssue?type=5&engineeringId='+this.detailId + '&moduleType=safeCheck'
				// 	})
				// } else if(this.activeIndex == 3){
				// 	uni.navigateTo({
				// 		url:'./addSide?id='+this.detailId
				// 	})
				// } else if(this.activeIndex == 4){
				// 	if(this.isShowBtn){
				// 		uni.navigateTo({
				// 			url:'./addWorkFinally?id='+this.detailId+'&workTicketCode='+this.detailData.workTicketCode
				// 		})
				// 	}else{
				// 		uni.showToast({
				// 			title: '请勿重复操作',
				// 			icon: "none",
				// 			duration: 2000
				// 		});
				// 	}
				// }
			},
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			initData() {
				this.sendRequest({
					url: 'xmgl/constructionEquipmentToolCheck/page',
					method: 'get',
					data: {
						constructionEquipmentToolId: this.detailId,
						// type: 10,
						pageNo: 1,
						pageSize: -1,
						projectSn: JSON.parse(uni.getStorageSync('projectDetail')).projectSn,
					},
					success: res => {
						uni.hideLoading()
						if (res.code == 200) {
							this.listData = res.result.records.map(item => {
								return {
									...item,
									attachment: isJSON(item.attachment) ? JSON
										.parse(item.attachment) : [],
								}
							})
							console.log(res)
						}
					}
				})
			},
			downloadFn(item) {
				var that = this
				uni.showModal({
					title: '提示',
					content: item.name,
					confirmText: '下载',
					success: function(res) {
						if (res.confirm) {
							uni.downloadFile({
								url: item.url.includes("http://") ? item.url : that.url_config + 'image/' + item.url, //仅为示例，并非真实的资源
								success: (res) => {
									console.log(res)
									if (res.statusCode === 200) {
										// uni.showToast({
										// 	title:'下载成功'
										// })
										var filePath = res.tempFilePath;
										if (!filePath) return
										uni.openDocument({
											filePath: filePath,
											success: function(res) {
												console.log(res);
												console.log('打开文档成功');
												uni.showToast({
													title: '打开文档成功'
												})
											}
										});
									} else {
										uni.showToast({
											title: '下载失败'
										})
									}
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.add-btn {
		background: #4181FE;
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 96rpx;
		position: fixed;
		bottom: 40rpx;
		right: 40rpx;
	
		span {
			font-size: 70rpx;
			// line-height: 86rpx;
			color: #fff;
		}
	}
	.fixedheader {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;
		:deep( .headerBox ){
			background-color: #F3F5F7;
		}
	}
	.download {
		color: #1684FC;
		// cursor: pointer;
	}

	.list {
		padding: 20rpx 0;
		// margin: 0 20rpx;

		.list-item {
			margin: 32rpx 30rpx;
			margin-bottom: 20rpx;
			// padding: 20rpx 0;
			background: #FFFFFF;
			border-radius: 24rpx;
			position: relative;

			.list-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				// border-bottom: 1px solid #F6F6F6;
				font-size: 28rpx;
				padding: 20rpx;

				.tag {
					background: #F0AD4E;
					color: #fff;
					padding: 4rpx 8rpx;
					font-size: 24rpx;
					margin-right: 20rpx;
					margin-left: -20rpx;
					height: 32rpx;
				}

				.status1 {
					background: #2b8df3;
					color: #fff;
					padding: 4rpx 8rpx;
					font-size: 24rpx;
				}

				.status2 {
					background: #F0AD4E;
					color: #fff;
					padding: 4rpx 8rpx;
					font-size: 24rpx;
				}

				.status3 {
					background: #B22222;
					color: #fff;
					padding: 4rpx 8rpx;
					font-size: 24rpx;
				}

				.status4 {
					background: #ccc;
					color: #fff;
					padding: 4rpx 8rpx;
					font-size: 24rpx;
				}
			}

			.list-info {
				display: flex;
				// border-bottom: 1px solid #F6F6F6;
				font-size: 26rpx;
				padding: 20rpx;
			}

			.info-status {
				padding: 3rpx 16rpx;
				// border: 1px solid #DD524D;
				// border-radius: 6rpx;
				// color: #DD524D;
				margin-left: 10rpx;
				border-radius: 30rpx;
				background-color: #DD524D;
				color: white;
			}

			.btn_detail {
				background-color: #4181FE;
				color: white;
				padding: 3rpx 16rpx;
				border-radius: 30rpx;
				position: absolute;
				bottom: 16rpx;
				right: 16rpx;
			}
		}
	}

	.control {
		// padding-top: 20rpx;
		padding-bottom: 40rpx;
		background-color: #F3F5F7;
		min-height: 100vh;

		.flex {
			display: flex;
		}

		.j-between {
			justify-content: space-between;
		}

		.a-center {
			align-items: center;
		}

		.b-bottom {
			border-bottom: 1px solid #F6F6F6;
		}

		.control-h2 {
			font-size: 28rpx;
			height: 60rpx;
			padding: 0 20rpx;
			background: rgba(255, 255, 255, 0.5);
		}

		.control-list {
			font-size: 28rpx;

			.control-item {
				padding: 0 20rpx;
				margin-bottom: 20rpx;
				background: #fff;

				.item-title {
					font-weight: 600;
					height: 72rpx;
					line-height: 72rpx;
				}
			}

			.item-select-box {
				padding: 30rpx 0;

				.item-content {
					width: 100%;
				}

			}

			.img-wrap {
				margin-top: 20rpx;
				flex-wrap: wrap;
			}

			.item-img {
				padding: 30rpx 0;

				.imgBox {
					width: 100rpx;
					height: 100rpx;
					margin-left: 20rpx;

					.img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.no-data {
			text-align: center;

			.img {
				display: block;
				height: 200rpx;
				width: 200rpx;
				margin: 0 auto;
				margin-top: 60rpx;
				margin-bottom: 60rpx;
			}

			.txt {
				color: #C0C4CC;
			}
		}
	}
</style>