81 lines
2.1 KiB
Vue
81 lines
2.1 KiB
Vue
<template>
|
|
<PageContainer :title="title" @click-back="handleClickBack" class="page-container">
|
|
<!-- 当前站点信息 -->
|
|
<CurrentSite />
|
|
|
|
<!-- 事件类型 -->
|
|
<PanelItem title="事件类型" style="margin-bottom: 10px" v-if="!isContinue">
|
|
<van-row gutter="10">
|
|
<van-col v-for="(item, index) in eventTypeOptions" :span="24 / eventTypeOptions.length" :key="index">
|
|
<van-button block plain :type="item.value === eventType ? 'primary' : 'default'" @click="eventType = item.value"> {{ item.label }} </van-button>
|
|
</van-col>
|
|
</van-row>
|
|
</PanelItem>
|
|
|
|
<!-- 根据事件类型渲染不同表单 -->
|
|
<WaterDisaster v-if="eventType === 'water'" />
|
|
<IceDisaster v-if="eventType === 'ice'" />
|
|
</PageContainer>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, computed } from 'vue'
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
import { showToast, showSuccessToast, showFailToast } from 'vant'
|
|
import PageContainer from '@/components/PageContainer.vue'
|
|
import CurrentSite from '@/components/CurrentSite.vue'
|
|
import PanelItem from '@/components/PanelItem.vue'
|
|
import WaterDisaster from './WaterDisaster/WaterDisaster.vue'
|
|
import IceDisaster from './IceDisaster/IceDisaster.vue'
|
|
import { request } from '@shared/utils/request'
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
|
|
// 是否为续报
|
|
const isContinue = computed(() => route.query.isContinue)
|
|
|
|
const title = computed(() => {
|
|
const label = eventType.value === 'ice' ? '冰毁' : '水毁'
|
|
if(!isContinue.value) return `${label}填报`
|
|
return `${label}续报`
|
|
})
|
|
|
|
// 事件类型
|
|
const eventType = ref(route.query.eventType ? route.query.eventType : 'water')
|
|
const eventTypeOptions = [
|
|
{
|
|
label: '水毁灾害',
|
|
value: 'water'
|
|
},
|
|
{
|
|
label: '冰雪灾害',
|
|
value: 'ice'
|
|
}
|
|
]
|
|
|
|
// 返回上一页
|
|
const handleClickBack = () => {
|
|
router.go(-1)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page-container {
|
|
background-color: #f5f7fa;
|
|
padding-bottom: 80px;
|
|
}
|
|
|
|
.event-type-group {
|
|
display: flex;
|
|
gap: 24px;
|
|
:deep(.van-radio) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.coming-soon {
|
|
padding: 40px 20px;
|
|
}
|
|
</style>
|