feat: 灾毁mobile新增地址选择

packages/mobile/src/components/BaseDatePicker.vue

@@ -14,7 +14,7 @@
     />
 
     <!-- 弹出层：同时包含日期和时间选择器 -->
-    <van-popup v-model:show="showPicker" position="bottom" round>
+    <van-popup v-model:show="showPicker" position="bottom">
       <div class="picker-container">
         <div class="picker-header">
           <span class="picker-cancel" @click="showPicker = false">取消</span>

packages/mobile/src/components/BasePicker.vue

@@ -14,7 +14,7 @@
     />
 
     <!-- 弹出层选择器 -->
-    <van-popup v-model:show="showPicker" position="bottom" round>
+    <van-popup v-model:show="showPicker" position="bottom">
       <van-picker
         :modelValue="getPickerValue()"
         :columns="columns"

packages/mobile/src/main.js

@@ -6,6 +6,7 @@ import './styles/index.css'
 import 'vant/lib/index.css'
 import "vant/es/toast/style";
 import "vant/es/popup/style";
+import "./styles/vant-ui-style.scss"
 
 const app = createApp(App)
 

packages/mobile/src/styles/vant-ui-style.scss

@@ -0,0 +1 @@
+// vant-ui 的样式覆盖均写在这里

packages/mobile/src/views/DisasterManagement/IceDisaster/IceDisaster.vue

@@ -64,26 +64,11 @@
     </PanelItem>
 
     <PanelItem title="处置情况">
-      <van-field label="处置措施" label-align="top">
+      <DisposalMeasuresSelector
-        <template #input>
+        v-model="formData.report.disposalMeasures"
-          <van-row :gutter="5">
+        :options="options['iceDisposalMeasures']"
-            <van-col
+        label="处置措施"
-              v-for="(item, index) in options['iceDisposalMeasures']"
+      />
-              :span="8"
-              :key="index"
-            >
-              <van-button
-                block
-                plain
-                :type="item.value === formData.report.disposalMeasures ? 'primary' : 'default'"
-                @click="formData.report.disposalMeasures = item.value"
-              >
-                {{ item.label }}
-              </van-button>
-            </van-col>
-          </van-row>
-        </template>
-      </van-field>
 
       <BaseDatePicker
         v-model="formData.report.expectRecoverTime"
@@ -170,6 +155,7 @@ import { ref, computed, onMounted } from 'vue';
 import PanelItem from '@/components/PanelItem.vue';
 import BasePicker from '@/components/BasePicker.vue';
 import BaseDatePicker from '@/components/BaseDatePicker.vue';
+import DisposalMeasuresSelector from '../components/DisposalMeasuresSelector.vue';
 import PositionPickerMobile from '../components/PositionPickerMobile.vue';
 import RoadRoutesPicker from '../components/RoadRoutesPicker.vue';
 import MaterialPicker from '../components/MaterialPicker.vue';

packages/mobile/src/views/DisasterManagement/WaterDisaster/WaterDisaster.vue

@@ -66,19 +66,11 @@
 
     <!-- 处置情况 (report) -->
     <PanelItem title="处置情况">
-      <van-field label="处置措施" label-align="top">
+      <DisposalMeasuresSelector
-        <template #input>
+        v-model="formData.report.disposalMeasures"
-          <div class="measures-options">
+        :options="options['disposalMeasures']"
-            <van-row gutter="10">
+        label="处置措施"
-              <van-col v-for="(item, index) in options['disposalMeasures']" :span="24 / options['disposalMeasures'].length" :key="index">
+      />
-                <van-button block plain :type="item.value === formData.report.disposalMeasures ? 'primary' : 'default'" @click="formData.report.disposalMeasures = item.value">
-                  {{ item.label }}
-                </van-button>
-              </van-col>
-            </van-row>
-          </div>
-        </template>
-      </van-field>
 
       <!-- 预计恢复时间 (report.expectRecoverTime) -->
       <BaseDatePicker v-model="formData.report.expectRecoverTime" label="预计恢复时间" placeholder="请选择时间" :min-date="minDate" :max-date="maxDate" type="datetime" />
@@ -173,6 +165,7 @@ import PanelItem from '@/components/PanelItem.vue'
 import BasePicker from '@/components/BasePicker.vue'
 import BaseDatePicker from '@/components/BaseDatePicker.vue'
 import DisasterFileUpload from '../components/DisasterFileUpload.vue'
+import DisposalMeasuresSelector from '../components/DisposalMeasuresSelector.vue'
 import PositionPickerMobile from '../components/PositionPickerMobile.vue'
 import RoadRoutesPicker from '../components/RoadRoutesPicker.vue'
 import LossList from '../components/LossList.vue'

packages/mobile/src/views/DisasterManagement/components/DisposalMeasuresSelector.vue

@@ -0,0 +1,87 @@
+<template>
+  <van-field :label="label" label-align="top">
+    <template #input>
+      <div class="measures-selector">
+        <button
+          v-for="item in options"
+          :key="item[valueKey]"
+          type="button"
+          class="measure-chip"
+          :class="{ 'is-active': item[valueKey] === modelValue }"
+          @click="handleSelect(item)"
+        >
+          {{ item[labelKey] }}
+        </button>
+      </div>
+    </template>
+  </van-field>
+</template>
+
+<script setup>
+const props = defineProps({
+  modelValue: {
+    type: [String, Number, Boolean],
+    default: ''
+  },
+  options: {
+    type: Array,
+    default: () => []
+  },
+  label: {
+    type: String,
+    default: '处置措施'
+  },
+  labelKey: {
+    type: String,
+    default: 'label'
+  },
+  valueKey: {
+    type: String,
+    default: 'value'
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const handleSelect = (item) => {
+  const value = item?.[props.valueKey]
+  emit('update:modelValue', value)
+  emit('change', item)
+}
+</script>
+
+<style scoped lang="scss">
+.measures-selector {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
+  gap: 10px;
+  width: 100%;
+}
+
+.measure-chip {
+  min-height: 44px;
+  padding: 10px 12px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  background: #fff;
+  color: #323233;
+  font-size: 14px;
+  line-height: 1.35;
+  text-align: center;
+  word-break: break-word;
+  transition:
+    border-color 0.2s ease,
+    background-color 0.2s ease,
+    color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.measure-chip.is-active {
+  border-color: var(--van-primary-color);
+  color: var(--van-primary-color);
+}
+
+.measure-chip:active {
+  transform: scale(0.98);
+}
+</style>

packages/mobile/src/views/DisasterManagement/components/LossPicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <van-popup v-model:show="showPicker" position="bottom" round>
+  <van-popup v-model:show="showPicker" position="bottom">
     <van-picker :columns="columns" :title="pickerTitle" show-toolbar @confirm="onConfirm" @cancel="showPicker = false" />
   </van-popup>
 </template>