冰雪专题App端 完成事件页面编写

packages/mobile/src/views/IceEvent/IceEventDetails.vue

@@ -8,24 +8,17 @@
 
     <div class="content" v-if="eventDetailData">
       <van-cell-group>
-        <van-cell
+        <van-cell title="基本信息" style="font-size: 18px; font-weight: bold; line-height: inherit">
-          title="基本信息"
-          style="font-size: 18px; font-weight: bold; line-height: inherit"
-        >
         </van-cell>
         <van-cell :title="'发生时间： ' + eventDetailData?.event?.occurTime">
         </van-cell>
-        <van-cell
+        <van-cell :title="'发生地点： ' + eventDetailData?.event?.occurLocation">
-          :title="'发生地点： ' + eventDetailData?.event?.occurLocation"
-        >
         </van-cell>
         <van-cell :title="'起点桩号： ' + eventDetailData?.event?.startStakeNo">
         </van-cell>
         <van-cell :title="'止点桩号： ' + eventDetailData?.event?.endStakeNo">
         </van-cell>
-        <van-cell
+        <van-cell :title="'受灾里程： ' + eventDetailData?.event?.disasterMileage">
-          :title="'受灾里程： ' + eventDetailData?.event?.disasterMileage"
-        >
         </van-cell>
         <van-cell :title="'填报人： ' + eventDetailData?.event?.reporterName">
         </van-cell>
@@ -33,101 +26,103 @@
         </van-cell>
       </van-cell-group>
       <van-cell-group>
-        <van-cell
+        <van-cell title="处置情况" style="font-size: 18px; font-weight: bold; line-height: inherit">
-          title="处置情况"
-          style="font-size: 18px; font-weight: bold; line-height: inherit"
-        >
         </van-cell>
-        <van-cell
+        <van-cell :title="'处置措施： ' + eventDetailData?.event?.disposalMeasures">
-          :title="'处置措施： ' + eventDetailData?.event?.disposalMeasures"
-        >
         </van-cell>
-        <van-cell
+        <van-cell :title="'预计恢复时间： ' + eventDetailData?.event?.expectRecoverTime">
-          :title="'预计恢复时间： ' + eventDetailData?.event?.expectRecoverTime"
-        >
         </van-cell>
       </van-cell-group>
       <van-cell-group>
-        <van-cell
+        <van-cell title="实施情况" style="font-size: 18px; font-weight: bold; line-height: inherit">
-          title="实施情况"
-          style="font-size: 18px; font-weight: bold; line-height: inherit"
-        >
         </van-cell>
-        <van-cell
+        <van-cell :title="'投入人力： ' + eventDetailData?.material?.inputManpower + ' 人次'
-          :title="
+          ">
-            '投入人力： ' + eventDetailData?.material?.inputManpower + ' 人次'
-          "
-        >
         </van-cell>
-        <van-cell
+        <van-cell :title="'投入资金： ' + eventDetailData?.material?.inputFunds + ' 万元'
-          :title="
+          ">
-            '投入资金： ' + eventDetailData?.material?.inputFunds + ' 万元'
-          "
-        >
         </van-cell>
-        <van-cell
+        <van-cell :title="'投入设备： ' + eventDetailData?.material?.inputEquipment + ' 台班'
-          :title="
+          ">
-            '投入设备： ' + eventDetailData?.material?.inputEquipment + ' 台班'
-          "
-        >
         </van-cell>
-        <van-cell
+        <van-cell v-for="(item, index) in eventDetailData?.materialUsageList" :key="index"
-          v-for="(item, index) in eventDetailData?.materialUsageList"
+          :title="`${item.materialName}：${item.usageAmount} ${item.materialUnit}`">
-          :key="index"
-          :title="`${item.materialName}：${item.usageAmount} ${item.materialUnit}`"
-        >
         </van-cell>
-        <van-cell
+        <van-cell :title="`当前通行状况：${{ 1: '正常通行', 2: '限速通行', 3: '封闭交通' }[
-          :title="`当前通行状况：${
+          eventDetailData?.traffic?.currentStatus
-            { 1: '正常通行', 2: '限速通行', 3: '封闭交通' }[
+        ] || '未知状态'
-              eventDetailData?.traffic?.currentStatus
+          }`">
-            ] || '未知状态'
-          }`"
-        >
         </van-cell>
-        <van-cell
+        <van-cell :title="`有无车辆滞留：${{ 0: '无', 1: '有' }[
-          :title="`有无车辆滞留：${
+          eventDetailData?.traffic?.hasStrandedVehicles
-            { 0: '无', 1: '有' }[
+        ] || '未知状态'
-              eventDetailData?.traffic?.hasStrandedVehicles
+          }`">
-            ] || '未知状态'
-          }`"
-        >
         </van-cell>
-        <van-cell
+        <van-cell v-if="eventDetailData?.traffic?.hasStrandedVehicles === 1" :title="'滞留车辆数：' +
-          v-if="eventDetailData?.traffic?.hasStrandedVehicles === 1"
+          eventDetailData?.traffic?.strandedVehicleCount +
-          :title="
+          ' 辆'
-            '滞留车辆数：' +
+          ">
-            eventDetailData?.traffic?.strandedVehicleCount +
-            ' 辆'
-          "
-        >
         </van-cell>
-        <van-cell
+        <van-cell :title="'实际恢复时间： ' + eventDetailData?.traffic?.actualRecoverTime
-          :title="
+          ">
-            '实际恢复时间： ' + eventDetailData?.traffic?.actualRecoverTime
-          "
-        >
         </van-cell>
         <van-cell :title="'附件： '">
           <template #label>
-            <van-image
+            <van-image v-for="(item, index) in eventDetailData?.photos" :key="index" :src="item.photoUrl" fit="cover"
-              v-for="(item, index) in eventDetailData?.photos"
+              width="100px" height="100px" style="margin: 10px" @click="showImage(item.photoUrl)"></van-image>
-              :key="index"
-              :src="item.photoUrl"
-              fit="cover"
-              width="100px"
-              height="100px"
-              style="margin: 10px"
-              @click="showImage(item.photoUrl)"
-            ></van-image>
           </template>
         </van-cell>
       </van-cell-group>
     </div>
+    <van-tabbar>
+      <van-tabbar-item>
+        <template #default>
+          <div class="button-box">
+            <van-button type="primary" style="width: 70%; border-radius: 10px" @click="handleFinishOpen">
+              续报
+            </van-button>
+            <van-button type="primary" style="width: 30%; border-radius: 10px" @click="handleFinishOpen">
+              完成事件
+            </van-button>
+          </div>
+
+        </template>
+      </van-tabbar-item>
+    </van-tabbar>
+
+    <van-popup :show="showFinishPopup" position="bottom" closeable close-on-click-overlay :style="{ height: '20%' }"
+      @close="onFinishPopupClose">
+      <div style="
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          padding: 0 16px;
+        ">
+        <h1 style="
+            margin: 0 0 20px 0;
+            font-size: 18px;
+            color: #333;
+            text-align: center;
+          ">
+          确认完成事件？
+        </h1>
+
+        <div style="display: flex; gap: 20px; width: 100%">
+          <van-button type="default" style="flex: 1; border-radius: 8px" @click="onFinishPopupClose">
+            取消
+          </van-button>
+          <van-button type="primary" style="flex: 1; border-radius: 8px" @click="finishConfirm">
+            确认
+          </van-button>
+        </div>
+      </div>
+    </van-popup>
   </div>
 </template>
-    
+
-    <script setup>
+<script setup>
 import { ref, onMounted, toRaw, reactive } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { showToast, showLoadingToast, showImagePreview } from "vant";
@@ -177,11 +172,31 @@ const onClickLeft = () => {
 const showImage = (url) => {
   showImagePreview([url]);
 };
-</script>
+
+const showFinishPopup = ref(false);
+const onFinishPopupClose = () => {
+  showFinishPopup.value = false;
+};
+const handleFinishOpen = () => {
+  showFinishPopup.value = true;
+};
+
+const finishConfirm = async () => {
+  try {
+    showToast({
+      message: "完成事件相关逻辑",
+      type: "fail",
+    });
+  } catch (error) {
     
-    <style scoped>
+  }
+};
+</script>
+
+<style scoped>
 .home {
-  padding-top: var(--van-nav-bar-height); /* 自动匹配导航栏高度 */
+  padding-top: var(--van-nav-bar-height);
+  /* 自动匹配导航栏高度 */
 }
 
 .content {
@@ -203,14 +218,28 @@ const showImage = (url) => {
   color: white;
   font-size: 12px;
 }
+
 .status-good {
   background-color: #07c160;
 }
+
 .status-warning {
   background-color: #ff976a;
 }
+
 .status-danger {
   background-color: #ee0a24;
 }
-</style>
+
-    
+:deep(.van-tabbar-item__text) {
+  width: 90%;
+  display: block;
+}
+
+.button-box {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  gap: 20px;
+}
+</style>