zhgdyunapp_vue3/pages/projectEnd/qualityManage/pouringOrderLedger/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="control-list" :style="{ 'padding-top': (statusBarHeight + 45) * 1.5 + 'rpx' }"
			v-if="listData && listData.length>0">
			<view class="control-item" v-for="(item,index) in listData" :key="index">
				<view class="item-title b-bottom">
					{{item.sideStationAddr}}
				</view>
				<view class="item-select-box b-bottom" :class="{'b-bottom': item.imageUrl}">
					<view class="item-content">旁站记录：{{item.buildSituation}}</view>
				</view>
				<view class="item-img" v-if="item.imageUrl">
					现场照片
					<view class="img-wrap flex a-center">
						<view class="imgBox" v-for="(item,index) in item.imageUrl.split(',')" :key="index">
							<image :src="url_config+'image/'+item" class="img"
								@click="previewImage(url_config+'image/'+item)"></image>
						</view>
					</view>

				</view>
			</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>
	export default {
		// props: ['detailId'],
		data() {
			return {
				listData: [],
				detailId: "",
				statusBarHeight: 0,
				activeIndex: 1,
			}
		},
		onLoad(option) {
			this.detailId = option.detailId;
			this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
		},
		created() {
			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/dangerousEngineeringSideStation/selectList',
					method: 'post',
					data: {
						engineeringId: this.detailId,
						type: 10,
					},
					success: res => {
						uni.hideLoading()
						if (res.code == 200) {
							this.listData = res.result
							console.log(res)
						}
					}
				})
			}
		}
	}
</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: 60rpx;
			line-height: 86rpx;
			color: #fff;
		}
	}

	.fixedheader {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;

		:deep( .headerBox ){
			// background-color: #F3F5F7;
		}
	}

	.control {
		padding-top: 20rpx;
		padding-bottom: 40rpx;

		.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>