park-shanghai-app/components/emergencyForm.vue

<template>
	<view class="form-container">
		<!-- 工单类型 -->
		<view class="form-item" style="flex-direction: column; justify-content: left; gap: 20rpx; margin-bottom: 20px">
			<text class="form-label">工单类型：</text>
			<uni-data-checkbox v-model="formData.workOrderType" :localdata="workOrderTypes" @change="handleWorkOrderTypeChange" />
		</view>

		<!-- 倒伏相关选项 -->
		<view class="form-item" v-if="showFallOptions">
			<uni-data-checkbox v-model="formData.fallAffect" :localdata="fallAffectOptions" />
		</view>

		<!-- 影响类型 - 改为方形多选框 -->
		<view class="form-item">
			<text class="form-label">影响类型：</text>
			<checkbox-group @change="handleLevelChange">
				<label class="checkbox-item" v-for="item in workOrderLevels" :key="item.value">
					<checkbox :value="item.value" :checked="formData.workOrderLevel.includes(item.value)" />
					<text>{{ item.text }}</text>
				</label>
			</checkbox-group>
		</view>

		<!-- 工单描述 -->
		<view class="form-item" style="flex-direction: column; align-items: flex-start; gap: 20rpx">
			<text class="form-label">工单描述：</text>
			<textarea
				v-model="formData.description"
				placeholder="请详细描述问题情况..."
				style="width: 100%; min-height: 200rpx; padding: 20rpx; border: 1px solid #eee; border-radius: 8rpx"
			/>
		</view>

		<!-- 工单图片 -->
		<view class="form-item" style="margin-bottom: 200rpx">
			<text class="form-label" style="width: 150rpx">工单图片：</text>
			<uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" @select="select" @progress="progress" @success="success" @fail="fail" />
		</view>

		<view class="bottom-btn">
			<button type="default" class="back-btn" @click="handleBack">退单</button>
			<button type="primary" @click="handleSubmit('pending')">上报待处置</button>
			<button type="primary" @click="handleSubmit('processed')">处理反馈</button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

// 表单数据
const formData = ref({
	workOrderType: '',
	fallAffect: '',
	workOrderLevel: [],
	description: '',
	images: []
});

// 图片上传相关
const imageValue = ref([]);

// 控制显示倒伏选项
const showFallOptions = ref(false);

// 选项数据
const workOrderTypes = [
	{ value: 'fall', text: '行道树/乔木' },
	{ value: 'tilt', text: '花箱设施' },
	{ value: 'broken', text: '建筑物' },
	{ value: 'others', text: '其他' }
];

const fallAffectOptions = [
	{ value: 'wire', text: '倒伏' },
	{ value: 'vehicle', text: '倾斜' },
	{ value: 'wall', text: '断枝' },
	{ value: 'eaves', text: '其他' }
];

const workOrderLevels = [
	{ value: 'wire', text: '线缆' },
	{ value: 'road', text: '道路' },
	{ value: 'vehicle', text: '车辆' },
	{ value: 'building', text: '建筑物' },
	{ value: 'others', text: '其他' }
];

// 工单类型变化处理
const handleWorkOrderTypeChange = (e) => {
	showFallOptions.value = formData.value.workOrderType === 'fall';
	if (!showFallOptions.value) {
		formData.value.fallAffect = '';
	}
};

// 影响类型多选处理
const handleLevelChange = (e) => {
	formData.value.workOrderLevel = e.detail.value;
};

// 图片上传相关方法
const select = (e) => {
	console.log('选择文件:', e);
};
const progress = (e) => {
	console.log('上传进度:', e);
};
const success = (e) => {
	console.log('上传成功:', e);
	formData.value.images.push(e.tempFilePaths[0]);
};
const fail = (e) => {
	console.log('上传失败:', e);
};

// 按钮处理方法
const handleBack = () => {
	uni.showModal({
		title: '提示',
		content: '确定要退单吗？',
		success: (res) => {
			if (res.confirm) {
				console.log('退单操作');
			}
		}
	});
};

const handleSubmit = (type) => {
	// 表单验证
	if (!formData.value.workOrderType) {
		uni.showToast({ title: '请选择工单类型', icon: 'none' });
		return;
	}

	if (showFallOptions.value && !formData.value.fallAffect) {
		uni.showToast({ title: '请选择倒伏状态', icon: 'none' });
		return;
	}

	if (formData.value.workOrderLevel.length === 0) {
		uni.showToast({ title: '请选择影响类型', icon: 'none' });
		return;
	}

	if (!formData.value.description) {
		uni.showToast({ title: '请输入工单描述', icon: 'none' });
		return;
	}

	console.log('提交数据:', {
		...formData.value,
		submitType: type
	});

	uni.showToast({ title: '提交成功', icon: 'success' });
};
</script>

<style>
.form-container {
	padding: 30rpx;
	padding-bottom: 160rpx; /* 给底部按钮留空间 */
}

.form-item {
	display: flex;
	margin-bottom: 40rpx;
}

.form-label {
	width: 230rpx;
	font-size: 30rpx;
	color: #767d9c;
}

.checkbox-item {
	margin-right: 30rpx;
	margin-bottom: 20rpx;
	display: inline-flex;
	align-items: center;
}

checkbox {
	margin-right: 10rpx;
	transform: scale(0.9);
}

.bottom-btn {
	width: 100%;
	display: flex;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20rpx;
	background-color: #fff;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.bottom-btn button {
	flex: 1;
	margin: 0 10rpx;
	font-size: 28rpx;
}

button[type='default'] {
	background-color: #f8f8f8;
	color: #333;
}
</style>