From 264501ee01d695494f3d62ecaf299436dfbec337 Mon Sep 17 00:00:00 2001
From: niedongsheng <605973111@qq.com>
Date: Tue, 28 Apr 2026 17:00:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=81=BE=E6=AF=81mobile=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E5=9C=B0=E5=9D=80=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mobile/src/components/BaseDatePicker.vue  |  2 +-
 packages/mobile/src/components/BasePicker.vue |  2 +-
 packages/mobile/src/main.js                   |  1 +
 packages/mobile/src/styles/vant-ui-style.scss |  1 +
 .../IceDisaster/IceDisaster.vue               | 26 ++----
 .../WaterDisaster/WaterDisaster.vue           | 19 ++--
 .../components/DisposalMeasuresSelector.vue   | 87 +++++++++++++++++++
 .../components/LossPicker.vue                 |  2 +-
 8 files changed, 104 insertions(+), 36 deletions(-)
 create mode 100644 packages/mobile/src/styles/vant-ui-style.scss
 create mode 100644 packages/mobile/src/views/DisasterManagement/components/DisposalMeasuresSelector.vue

diff --git a/packages/mobile/src/components/BaseDatePicker.vue b/packages/mobile/src/components/BaseDatePicker.vue
index 7ff82a6..d465818 100644
--- a/packages/mobile/src/components/BaseDatePicker.vue
+++ b/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>
diff --git a/packages/mobile/src/components/BasePicker.vue b/packages/mobile/src/components/BasePicker.vue
index 6d4a7fe..3e9ff80 100644
--- a/packages/mobile/src/components/BasePicker.vue
+++ b/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"
diff --git a/packages/mobile/src/main.js b/packages/mobile/src/main.js
index fc05735..ae61817 100644
--- a/packages/mobile/src/main.js
+++ b/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)
 
diff --git a/packages/mobile/src/styles/vant-ui-style.scss b/packages/mobile/src/styles/vant-ui-style.scss
new file mode 100644
index 0000000..6d06ace
--- /dev/null
+++ b/packages/mobile/src/styles/vant-ui-style.scss
@@ -0,0 +1 @@
+// vant-ui 的样式覆盖均写在这里
\ No newline at end of file
diff --git a/packages/mobile/src/views/DisasterManagement/IceDisaster/IceDisaster.vue b/packages/mobile/src/views/DisasterManagement/IceDisaster/IceDisaster.vue
index a03b2ca..4eecb6c 100644
--- a/packages/mobile/src/views/DisasterManagement/IceDisaster/IceDisaster.vue
+++ b/packages/mobile/src/views/DisasterManagement/IceDisaster/IceDisaster.vue
@@ -64,26 +64,11 @@
     </PanelItem>
 
     <PanelItem title="处置情况">
-      <van-field label="处置措施" label-align="top">
-        <template #input>
-          <van-row :gutter="5">
-            <van-col
-              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>
+      <DisposalMeasuresSelector
+        v-model="formData.report.disposalMeasures"
+        :options="options['iceDisposalMeasures']"
+        label="处置措施"
+      />
 
       <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';
diff --git a/packages/mobile/src/views/DisasterManagement/WaterDisaster/WaterDisaster.vue b/packages/mobile/src/views/DisasterManagement/WaterDisaster/WaterDisaster.vue
index 30dd42b..b161ae8 100644
--- a/packages/mobile/src/views/DisasterManagement/WaterDisaster/WaterDisaster.vue
+++ b/packages/mobile/src/views/DisasterManagement/WaterDisaster/WaterDisaster.vue
@@ -66,19 +66,11 @@
 
     <!-- 处置情况 (report) -->
     <PanelItem title="处置情况">
-      <van-field label="处置措施" label-align="top">
-        <template #input>
-          <div class="measures-options">
-            <van-row gutter="10">
-              <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>
+      <DisposalMeasuresSelector
+        v-model="formData.report.disposalMeasures"
+        :options="options['disposalMeasures']"
+        label="处置措施"
+      />
 
       <!-- 预计恢复时间 (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'
diff --git a/packages/mobile/src/views/DisasterManagement/components/DisposalMeasuresSelector.vue b/packages/mobile/src/views/DisasterManagement/components/DisposalMeasuresSelector.vue
new file mode 100644
index 0000000..a37712d
--- /dev/null
+++ b/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>
diff --git a/packages/mobile/src/views/DisasterManagement/components/LossPicker.vue b/packages/mobile/src/views/DisasterManagement/components/LossPicker.vue
index 283bc72..81585f4 100644
--- a/packages/mobile/src/views/DisasterManagement/components/LossPicker.vue
+++ b/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>