threeonecheck_web/pages/hiddendanger/view.vue

<template>
	<view class="padding page">
		<view class="padding bg-white radius">
			<view class="flex">
				<view class="text-gray">隐患图片/视频</view>
				<view class="text-red">*</view>
			</view>
			<view class="margin-bottom">
				<view v-if="rectifyAttachments.length > 0" class="margin-top">
					<view class="flex" style="flex-wrap: wrap; gap: 10rpx;">
						<image v-for="(img, idx) in rectifyAttachments" :key="idx" :src="getFullPath(img.filePath)" style="width: 136rpx;height: 136rpx;border-radius: 16rpx;" mode="aspectFill" @click="previewRectifyImage(idx)"></image>
					</view>
				</view>
				<view v-else class="text-gray text-sm">暂无图片</view>
				<view class="text-gray text-sm margin-top-xs">必填：请上传现场照片或者视频作为隐患证据</view>
			</view>
			<view class="flex margin-bottom">
				<view class="text-gray">隐患标题</view>
				<view class="text-red">*</view>
			</view>
			<up-input  v-model="detailData.title" disabled="true" disabledColor="#F6F6F6"  border="surround"/>
			<view class="margin-bottom text-gray text-sm margin-top-xs" >请用简洁的语言概括隐患要点</view>
			<view class="flex margin-bottom"> 
				<view class="text-gray">隐患等级</view>
				<view class="text-red">*</view>
			</view>
			<view class="flex col-3" style="gap: 10rpx;">
				<view :class="detailData.level === 1 ? 'bg-blue light' : 'bg-gray'" style="padding: 16rpx 40rpx;">轻微隐患</view>
				<view :class="detailData.level === 2 ? 'bg-blue light' : 'bg-gray'" style="padding: 16rpx 40rpx;">一般隐患</view>
				<view :class="detailData.level === 3 ? 'bg-blue light' : 'bg-gray'" style="padding: 16rpx 40rpx;">重大隐患</view>
			</view>
			<view class="text-gray text-sm margin-top-xs margin-bottom">请用隐患可能造成的危害程度选择等级</view>
			<view class="flex">
				<view class="text-gray">隐患位置</view>
				<view class="text-red">*</view>
			</view>
			<view class="address-box margin-top-sm margin-bottom-sm">
				<input 
					class="address-input" 
					v-model="detailData.address" 
					placeholder="暂无地址" 
					disabled
				/>
				<button class="address-btn bg-blue">选择地址</button>
			</view>
			<view class="text-gray text-sm">如：办公楼3层东侧消防通道，生产车间A区设备旁等，或点击"选择地址"按钮在地图上选择</view>
			<view class="flex margin-bottom ">
				<view class="text-gray">隐患描述</view>
				<view class="text-red">*</view>
			</view>
			<up-textarea v-model="detailData.description" placeholder="暂无描述" disabled></up-textarea>
			<view class="text-gray text-sm margin-top-xs margin-bottom">请详细说明隐患现状、潜在风险及影响范围</view>
			<view class="text-gray margin-bottom">隐患来源</view>
			<view class="bg-gray padding radius">{{ detailData.source || '暂无' }}</view>
			<view class="text-gray margin-top margin-bottom">创建时间</view>
			<view class="bg-gray padding radius">{{ detailData.createdAt || '暂无' }}</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { getHiddenDangerDetail } from '@/request/api.js'
	import { baseUrl } from '@/request/request.js'
	
	// 详情数据
	const detailData = reactive({
		hazardId: '',
		assignId: '',
		title: '',
		level: 0,
		levelName: '',
		source: '',
		description: '',
		address: '',
		createdAt: '',
		attachments: []
	});
	
	// 整改附件（单独存储）
	const rectifyAttachments = ref([]);
	
	// 获取完整图片路径
	const getFullPath = (filePath) => {
		if (!filePath) return '';
		// 如果已经是完整路径则直接返回
		if (filePath.startsWith('http://') || filePath.startsWith('https://')) {
			return filePath;
		}
		// 拼接 baseUrl
		return baseUrl + filePath;
	};
	
	// 图片预览 - 隐患图片
	const previewImage = (attachments, index) => {
		const urls = attachments.map(item => getFullPath(item.filePath));
		uni.previewImage({
			current: index,
			urls: urls
		});
	};
	
	// 图片预览 - 整改图片
	const previewRectifyImage = (index) => {
		const urls = rectifyAttachments.value.map(item => getFullPath(item.filePath));
		uni.previewImage({
			current: index,
			urls: urls
		});
	};
	
	// 获取隐患详情
	const fetchDetail = async (hazardId, assignId) => {
		try {
			const res = await getHiddenDangerDetail({ hazardId, assignId });
			if (res.code === 0 && res.data) {
				Object.assign(detailData, res.data);
				
				// 提取整改附件：assigns[0].rectify.attachments
				if (res.data.assigns && res.data.assigns.length > 0) {
					const assign = res.data.assigns[0];
					if (assign.rectify && assign.rectify.attachments) {
						rectifyAttachments.value = assign.rectify.attachments;
						console.log('整改附件:', rectifyAttachments.value);
					}
				}
			} else {
				uni.showToast({ title: res.msg || '获取详情失败', icon: 'none' });
			}
		} catch (error) {
			console.error('获取隐患详情失败:', error);
			uni.showToast({ title: '请求失败', icon: 'none' });
		}
	};
	
	onLoad((options) => {
		if (options.hazardId && options.assignId) {
			fetchDetail(options.hazardId, options.assignId);
		}
	});
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background: #EBF2FC;
	}
	
	.address-box {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}
	
	.address-input {
		flex: 1;
		height: 80rpx;
		background: #F6F6F6;
		border-radius: 12rpx;
		padding: 0 24rpx;
		font-size: 28rpx;
		color: #333;
	}
	
	.address-btn {
		flex-shrink: 0;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 32rpx;
		border-radius: 12rpx;
		font-size: 28rpx;
		color: #fff;
	}
</style>