aiot-app/pages/ehs/snapshot/components/discardDialog.vue

<template>
	<u-popup :show="visible" :round="0" :closeOnClickOverlay="false" :zIndex="99999" @close="handleCancel"
		class="u-popup-my">
		<view class="popup-content">
			<view class="popup-header">
				<text class="popup-title">废弃</text>
				<view class="close-btn" @click="handleCancel">×</view>
			</view>

			<scroll-view class="popup-body" scroll-y>
				<view class="page">
					<view class="card-a">
						<!-- 头部 -->
						<view class="a-header">
							<text class="a-main-title">废弃随手拍</text>
						</view>

						<!-- 废弃信息 -->
						<view class="card-section">
							<view class="section-title">📋 废弃信息</view>
							<view class="info-list">
								<view class="info-item">
									<text class="info-label">废弃原因</text>
									<textarea
										v-if="!isView"
										class="info-textarea"
										v-model="formData.handleOpinion"
										placeholder="请输入废弃原因(100字以内)"
										maxlength="100"
									/>
									<text v-else class="info-value readonly">{{ formData.handleOpinion || '无' }}</text>
								</view>
								<view class="info-item">
									<text class="info-label">废弃人</text>
									<text class="info-value readonly">{{ formData.handlerName }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>

			<view class="popup-footer">
				<template v-if="isView">
					<u-button type="default" @click="handleCancel">关闭</u-button>
				</template>
				<template v-else>
					<u-button type="default" @click="handleCancel">取消</u-button>
					<u-button type="primary" @click="handleSubmit" :loading="loading">确定</u-button>
				</template>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</u-popup>
</template>

<script>
export default {
	emits: ['confirm'],
	data() {
		return {
			visible: false,
			loading: false,
			dialogType: 'add',
			formData: { id: '', handleOpinion: '', handlerName: '' },
			rules: { handleOpinion: { required: true, message: '请输入废弃原因', trigger: 'blur' } }
		};
	},
	computed: {
		isView() {
			return this.dialogType === 'view';
		}
	},
	methods: {
		open(row, type = 'add') {
			this.dialogType = type;
			const userInfo = uni.getStorageSync('userInfo') || {};
			this.formData = {
				id: row.id || '',
				handleOpinion: row.handleOpinion || '',
				handlerName: row.handlerName || userInfo.name || ''
			};
			this.visible = true;
		},
		handleCancel() {
			this.visible = false;
			this.formData = { id: '', handleOpinion: '', handlerName: '' };
		},
		async handleSubmit() {
			if (!this.formData.handleOpinion) {
				this.$refs.uToast.show({ type: 'error', message: '请输入废弃原因' });
				return;
			}
			this.$emit('confirm', { id: this.formData.id, handleOpinion: this.formData.handleOpinion });
			this.visible = false;
			this.formData = { id: '', handleOpinion: '', handlerName: '' };
		}
	}
};
</script>

<style lang="scss" scoped>
.popup-content {
	width: 100vw;
	height: calc(100vh - 100px);
	background: #fff;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	background-color: #eff2f7;
}

.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #e5e5e5;
	background: #fff;

	.popup-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.close-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 60rpx;
		color: #999;
		line-height: 1;
	}
}

.popup-body {
	flex: 1;
	overflow-y: auto;
	padding: 28rpx;
}

.page {
	font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;
}

.card-a {
	background: #ffffff;
	border-radius: 48rpx;
	box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

.a-header {
	background: linear-gradient(135deg, #fef0f0 0%, #fff3e0 100%);
	padding: 40rpx 32rpx 24rpx;
	text-align: center;

	.a-main-title {
		font-size: 36rpx;
		font-weight: 800;
		color: #e53935;
	}
}

.card-section {
	padding: 30rpx 32rpx;
	border-bottom: 2rpx solid #f0f2f5;

	&:last-child {
		border-bottom: none;
	}
}

.section-title {
	font-size: 30rpx;
	font-weight: 700;
	color: #1f2a44;
	margin-bottom: 24rpx;
	padding-left: 16rpx;
	border-left: 6rpx solid #f56c6c;
}

.info-list {
	display: flex;
	flex-direction: column;
	gap: 28rpx;
}

.info-item {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.info-label {
	font-size: 26rpx;
	font-weight: 600;
	color: #6c7a91;
}

.info-value {
	font-size: 28rpx;
	font-weight: 500;
	color: #1e2a3a;
	padding: 16rpx 20rpx;
	border-radius: 24rpx;
	border: 2rpx solid #e9edf2;
	background: #fff;

	&.readonly {
		color: #999;
		background: #f5f5f5;
	}
}

.info-textarea {
	font-size: 28rpx;
	color: #1e2a3a;
	min-height: 160rpx;
	padding: 16rpx 20rpx;
	border-radius: 24rpx;
	border: 2rpx solid #e9edf2;
	background: #fff;
}

.popup-footer {
	display: flex;
	padding: 20rpx 30rpx;
	border-top: 1rpx solid #e5e5e5;
	background: #fff;
	gap: 20rpx;

	/deep/ .u-button {
		flex: 1;
	}
}
</style>