SmartParks_uniapp/pages/sys/workbench/earlyWarning/warnDetail.vue

<template>
	<view class="page">

		<!-- 预警信息卡片 -->
		<view class="card">
			<view class="card-header">预警信息</view>
			<view class="card-content">
				<view class="info-item" v-for="(item, index) in warnInfoList" :key="index">
					<text class="label">{{ item.label }}：</text>
					<text class="value">{{ item.value || '-' }}</text>
				</view>
			</view>
		</view>

		<!-- 处理情况卡片 或 详情情况卡片 -->
		<view class="card" style="margin-top: 30rpx;">
			<view class="card-header">
				{{ pageType === 'handle' ? '处理情况' : '处理记录' }}
			</view>
			<view class="card-content">

				<!-- =============== 处理情况模式 =============== -->
				<view v-if="pageType === 'handle'">
					<!-- 处理状态选择 (目前隐藏) -->
					<view v-if="false" class="form-item" @click="showStatusPopup = true">
						<text class="form-label">处理状态：</text>
						<view class="select-input">{{ handleStatus || '请选择状态' }}</view>
					</view>

					<!-- 处理情况描述 -->
					<view class="form-item">
						<text class="form-label">处理情况描述：</text>
						<textarea class="textarea" placeholder="请输入描述" v-model="handleDesc" auto-height></textarea>
					</view>

					<!-- 上传照片 -->
					<view>
						<view class="add-warn-label">上传照片 <text class="add-warn-optional">(非必填，最多三张)</text></view>
						<u-upload
							:fileList="selectedImages"
							@delete="deletePic"
							@on-list-change="onListChange"
							name="upload"
							multiple
							maxCount="3"
							width="180"
							height="180"
							:autoUpload="false">
						</u-upload>
					</view>
				</view>

				<!-- =============== 详情情况模式 =============== -->
				<view v-else>
					<!-- 显示处理情况描述 -->
					<view class="form-item">
						<text class="form-label">处理情况描述：</text>
						<view class="value">{{ handleDesc || '-' }}</view>
					</view>

					<!-- 显示上传的图片 -->
					<view v-if="realImages.length > 0">
						<view class="add-warn-label">相关图片</view>
						<view class="image-list">
							<image
								v-for="(img, idx) in realImages"
								:key="idx"
								:src="img"
								mode="aspectFill"
								class="preview-image"
								@click="previewImage(idx)"
							/>
						</view>
					</view>
				</view>

			</view>
		</view>

		<!-- 底部提交按钮 (仅处理情况模式显示) -->
		<view class="btn-box" v-if="pageType === 'handle'">
			<button class="submit-btn" @click="submit">去上报</button>
		</view>

		<!-- 底部状态选择弹窗 -->
		<view v-if="showStatusPopup" class="popup-mask" @click.self="showStatusPopup = false">
			<view class="popup">
				<view class="popup-item" v-for="(status, i) in statusList" :key="i" @click="selectStatus(status)">
					{{ status }}
				</view>
				<view class="popup-cancel" @click="showStatusPopup = false">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
import { uploadFiles } from '@/common/upload.js';

export default {
	data() {
		return {
			pageType: 'handle', // handle = 处理情况, detail = 详情情况
			warnInfo: {},
			handleStatus: '',
			handleDesc: '',
			showStatusPopup: false,
			statusList: ['未处理', '处理中', '已处理'],
			selectedImages: [], // 存储已选图片
			realImages: [],     // 上传后的真实图片url
			loading: false
		};
	},
	onLoad(options) {
		if (options.item) {
			const item = JSON.parse(decodeURIComponent(options.item));
			this.warnInfo = item;
		}
		if (options.pageType) {
			this.pageType = options.pageType;
		}
	},
	computed: {
		warnInfoList() {
			return [
				{ label: "预警编码", value: this.warnInfo.id },
				{ label: "预警类型", value: this.warnInfo.smallTypeName },
				{ label: "设备名称", value: this.warnInfo.deviceName },
				{ label: "设备位置", value: this.warnInfo.deviceGroupName },
				{ label: "预警级别", value: this.warnInfo.levelName },
				{ label: "预警时间", value: this.warnInfo.reportTime },
				{ label: "下发时间", value: this.warnInfo.servBeginTime },
				{ label: "预警描述", value: this.warnInfo.description }
			];
		}
	},
	methods: {
		// 处理文件列表变化
		onListChange(list) {
			this.selectedImages = list;
		},
		// 删除图片
		deletePic(event) {
			if (event && typeof event.index === 'number') {
				this.selectedImages.splice(event.index, 1);
			}
		},
		selectStatus(status) {
			this.handleStatus = status;
			this.showStatusPopup = false;
		},
		async submit() {
			this.loading = true;
			if (this.selectedImages.length <= 0) {
				this.realSubmit()
				return
			}
			const images = this.selectedImages
				.map(item => item?.path?.replace('file://', '') || item?.url || null)
				.filter(path => path !== null);

			if (images.length === 0) {
				this.realSubmit();
				return;
			}

			const result = await uploadFiles({
				files: images,
				url: this.vuex_config.baseUrl + '/resource/oss/upload',
				name: 'file',
				vm: this
			});

			this.realImages = result.map(item => item.data?.url || '').filter(url => url !== '');
			this.realSubmit();
		},

		async realSubmit() {
			let params = {
				alarmId: this.warnInfo.id,
				remark: this.handleDesc,
				attachments: this.realImages
			}
			let res = await this.$u.api.warnsProcess(params);
			if (res.code == '200') {
				uni.$emit('refreshData', '');
				uni.navigateBack();
			}
			this.loading = false
		},

		// 查看大图
		previewImage(index) {
			uni.previewImage({
				current: this.realImages[index],
				urls: this.realImages
			})
		}
	}
};
</script>

<style scoped>
/* 你的原有样式保持不变 */
.page {
	padding: 30rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
	box-sizing: border-box;
}
.card {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx 30rpx 20rpx 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
}
.card-header {
	font-size: 32rpx;
	font-weight: 700;
	color: #333;
	margin-bottom: 20rpx;
}
.card-content {
	border-top: 1rpx solid #eee;
	padding-top: 20rpx;
}
.info-item {
	display: flex;
	justify-content: space-between;
	padding: 18rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}
.label {
	font-weight: 600;
	color: #666;
	font-size: 28rpx;
}
.value {
	color: #333;
	max-width: 70%;
	font-size: 28rpx;
	text-align: right;
	word-break: break-word;
}
.form-item {
	margin-bottom: 30rpx;
}
.form-label {
	font-weight: 700;
	font-size: 28rpx;
	color: #333;
	margin-bottom: 12rpx;
}
.select-input {
	border: 1rpx solid #ccc;
	border-radius: 12rpx;
	height: 64rpx;
	line-height: 64rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	color: #999;
}
.textarea {
	width: 100%;
	min-height: 160rpx;
	border: 1rpx solid #ccc;
	border-radius: 12rpx;
	padding: 10rpx 20rpx;
	font-size: 28rpx;
	resize: none;
	box-sizing: border-box;
	margin-top: 20rpx;
}
.image-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 20rpx;
}
.preview-image {
	width: 140rpx;
	height: 140rpx;
	border-radius: 12rpx;
}
.upload-btn {
	width: 140rpx;
	height: 140rpx;
	border-radius: 12rpx;
	background: #eee;
	font-size: 60rpx;
	color: #999;
	line-height: 140rpx;
	text-align: center;
	user-select: none;
	border: none;
}
.btn-box {
	margin-top: 40rpx;
	text-align: center;
}
.submit-btn {
	width: 100%;
	background-color: #007aff;
	color: white;
	font-size: 32rpx;
	height: 72rpx;
	line-height: 72rpx;
	border-radius: 36rpx;
	border: none;
	cursor: pointer;
}
.popup-mask {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.4);
	display: flex;
	justify-content: center;
	align-items: flex-end;
	z-index: 9999;
}
.popup {
	width: 100%;
	background: #fff;
	border-top-left-radius: 24rpx;
	border-top-right-radius: 24rpx;
	padding-bottom: 40rpx;
}
.popup-item {
	font-size: 32rpx;
	padding: 30rpx 0;
	text-align: center;
	border-bottom: 1rpx solid #eee;
	color: #007aff;
}
.popup-item:last-child {
	border-bottom: none;
}
.popup-cancel {
	font-size: 32rpx;
	color: #999;
	text-align: center;
	padding: 30rpx 0;
	margin-top: 20rpx;
	border-top: 1rpx solid #eee;
}
.add-warn-optional {
	color: #888;
	font-size: 24rpx;
	font-weight: 400;
}
.add-warn-label {
	font-size: 32rpx;
	color: #000000;
	font-weight: 500;
	margin-bottom: 41rpx;
}
</style>