事故事件

pages/qhse/detail.vue

@@ -1,261 +1,326 @@
 <template>
   <view class="page">
-    <view class="content">
-      <!-- 遍历表单数据生成卡片列表 -->
-      <view class="card-list">
-        <!-- 事件时间 -->
-        <view class="card-item">
-          <view class="card-label">事件时间</view>
-          <view class="card-value">
-            <uni-datepicker
-              type="datetime"
-              placeholder="请选择事件时间"
-              :disabled="true"
-              v-model="form.actualTime"
-            />
+    <view class="hero-card">
+      <!-- <view class="hero-badge">QHSE</view> -->
+      <view class="hero-title">事故事件详情</view>
+      <view class="hero-subtitle">
+        查看事故时间、等级、现场信息及附件资料
+      </view>
+    </view>
+    <scroll-view scroll-y class="detail-scroll">
+      <view class="">
+        <view class="detail-item">
+          <view class="detail-label">事故时间</view>
+          <view class="detail-value">
+            <text>{{
+              new Date(form.actualTime).toLocaleDateString().replace(/\//g, "-")
+            }}</text>
           </view>
         </view>
 
-        <!-- 事件级别 -->
-        <view class="card-item">
-          <view class="card-label">事件级别</view>
-          <view class="card-value text-value">{{
+        <view class="detail-item">
+          <view class="detail-label">事故级别</view>
+          <view class="detail-value text-value">{{
             form.accidentGrade || "-"
           }}</view>
         </view>
 
-        <!-- 事件类型 -->
-        <view class="card-item">
-          <view class="card-label">事件类型</view>
-          <view class="card-value">
+        <view class="detail-item">
+          <view class="detail-label">事故类型</view>
+          <view class="detail-value">
             <uni-easyinput
-              v-model="form.accidentType"
+              :modelValue="form.accidentType || ''"
               :disabled="true"
-              border="none"
+              :inputBorder="false"
+              :clearable="false"
+              placeholder="-"
             />
           </view>
         </view>
 
-        <!-- 事件地址 -->
-        <view class="card-item">
-          <view class="card-label">事件地址</view>
-          <view class="card-value">
+        <view class="detail-item">
+          <view class="detail-label">事故地点</view>
+          <view class="detail-value">
             <uni-easyinput
-              v-model="form.accidentAddress"
+              :modelValue="form.accidentAddress || ''"
               :disabled="true"
-              border="none"
+              :inputBorder="false"
+              :clearable="false"
+              placeholder="-"
             />
           </view>
         </view>
 
-        <!-- 现场负责人 -->
-        <view class="card-item">
-          <view class="card-label">现场负责人</view>
-          <view class="card-value">
+        <view class="detail-item">
+          <view class="detail-label">现场负责人</view>
+          <view class="detail-value">
             <uni-easyinput
-              v-model.number="form.dutyPerson"
+              :modelValue="form.dutyPerson || ''"
               :disabled="true"
-              border="none"
+              :inputBorder="false"
+              :clearable="false"
+              placeholder="-"
             />
           </view>
         </view>
 
-        <!-- 事件损失情况 -->
-        <view class="card-item">
-          <view class="card-label">事件损失情况</view>
-          <view class="card-value">
+        <view class="detail-item">
+          <view class="detail-label">损失情况</view>
+          <view class="detail-value">
             <uni-easyinput
-              v-model="form.lossSituation"
+              :modelValue="form.lossSituation || ''"
               :disabled="true"
-              border="none"
+              :inputBorder="false"
+              :clearable="false"
+              placeholder="-"
             />
           </view>
         </view>
 
-        <!-- 现场采取措施 -->
-        <view class="card-item">
-          <view class="card-label">现场采取措施</view>
-          <view class="card-value">
+        <view class="detail-item">
+          <view class="detail-label">现场采取措施</view>
+          <view class="detail-value">
             <uni-easyinput
               type="textarea"
               autoHeight
-              v-model="form.emergencyMeasure"
+              :modelValue="form.emergencyMeasure || ''"
               :disabled="true"
-              border="none"
+              :inputBorder="false"
+              :clearable="false"
+              placeholder="-"
             />
           </view>
         </view>
 
-        <!-- 事件简要经过 -->
-        <view class="card-item">
-          <view class="card-label">事件简要经过</view>
-          <view class="card-value">
+        <view class="detail-item">
+          <view class="detail-label">事故简要经过</view>
+          <view class="detail-value">
             <uni-easyinput
               type="textarea"
               autoHeight
-              v-model="form.description"
+              :modelValue="form.description || ''"
               :disabled="true"
-              border="none"
+              :inputBorder="false"
+              :clearable="false"
+              placeholder="-"
             />
           </view>
         </view>
 
-        <!-- 附件/现场图片 -->
-        <view class="card-item">
-          <view class="card-label">附件/现场图片</view>
-          <view class="card-value image-container">
-            <view class="image-list">
-              <view class="image-item" v-if="form.pic">
-                <image
-                  :src="form.pic"
-                  mode="widthFix"
-                  @click="previewImage(form.pic)"
-                />
-              </view>
-              <text v-else class="no-data">暂无图片</text>
-            </view>
-          </view>
-        </view>
-
-        <!-- 备注 -->
-        <view class="card-item">
-          <view class="card-label">备注</view>
-          <view class="card-value">
+        <view class="detail-item">
+          <view class="detail-label">备注</view>
+          <view class="detail-value">
             <uni-easyinput
               type="textarea"
               autoHeight
-              v-model="form.remark"
+              :modelValue="form.remark || ''"
               :disabled="true"
-              border="none"
+              :inputBorder="false"
+              :clearable="false"
+              placeholder="-"
             />
           </view>
         </view>
+
+        <view class="detail-item">
+          <view class="detail-label">附件图片</view>
+          <view class="detail-value">
+            <view v-if="imageList.length" class="image-list">
+              <view
+                v-for="(item, index) in imageList"
+                :key="index"
+                class="image-item"
+                @click="previewImage(item)"
+              >
+                <image :src="item" mode="aspectFill" />
+              </view>
+            </view>
+            <view v-else class="empty-text">暂无图片</view>
+          </view>
+        </view>
       </view>
-    </view>
+    </scroll-view>
   </view>
 </template>
 
 <script setup>
-import { ref, onMounted, computed } from "vue";
+import { computed, ref } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
 import { getDetail } from "@/api/qhse";
 
-// 当前查看的任务 id
 const id = ref(null);
-let form = ref({}); // 初始化为空对象，避免渲染报错
+const form = ref({});
+
+const imageList = computed(() => {
+  const pic = form.value?.pic;
+  if (!pic) return [];
+  return Array.isArray(pic) ? pic.filter(Boolean) : [pic];
+});
 
-// 从路由参数读取详情 id
 onLoad(async (options) => {
-  id.value = Number(options.id) || null;
-
-  if (id.value) {
-    try {
-      let data = await getDetail(id.value);
-      form.value = data.data || {};
-      console.log("data>>>>>>>>>>>>", form.value);
-    } catch (error) {
-      console.error("获取详情失败", error);
-    }
+  id.value = Number(options?.id) || null;
+
+  if (!id.value) {
+    return;
+  }
+
+  try {
+    const data = await getDetail(id.value);
+    form.value = data.data || {};
+  } catch (error) {
+    console.error("获取事故详情失败", error);
+    uni.showToast({
+      title: "获取详情失败",
+      icon: "none",
+    });
   }
 });
 
-// 预览图片方法
-const previewImage = (url) => {
-  if (!url) return;
+const previewImage = (current) => {
+  if (!current || !imageList.value.length) return;
+
   uni.previewImage({
-    urls: [url],
-    current: url,
+    urls: imageList.value,
+    current,
   });
 };
 </script>
 
 <style lang="scss" scoped>
+.hero-card {
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 24rpx;
+  padding: 32rpx 30rpx;
+  border-radius: 28rpx;
+  background: linear-gradient(135deg, #0f4c81 0%, #1b76c9 100%);
+  box-shadow: 0 16rpx 40rpx rgba(15, 76, 129, 0.18);
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: -40rpx;
+    right: -20rpx;
+    width: 180rpx;
+    height: 180rpx;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.12);
+  }
+}
+
+.hero-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 18rpx;
+  padding: 8rpx 18rpx;
+  border-radius: 999rpx;
+  background: rgba(255, 255, 255, 0.14);
+  color: #e9f4ff;
+  font-size: 22rpx;
+  letter-spacing: 2rpx;
+}
+
+.hero-title {
+  position: relative;
+  z-index: 1;
+  margin-bottom: 12rpx;
+  color: #ffffff;
+  font-size: 38rpx;
+  font-weight: 600;
+}
+
+.hero-subtitle {
+  position: relative;
+  z-index: 1;
+  color: rgba(255, 255, 255, 0.82);
+  font-size: 24rpx;
+  line-height: 1.6;
+}
+
 .page {
-  min-height: 100vh;
-  background-color: #f5f7fa; // 浅灰色背景，突出卡片
-  padding: 20rpx;
+  height: 190%;
+  background: #f4f7fb;
+}
+
+.detail-scroll {
+  height: 100%;
+}
+
+.detail-list {
+  padding: 24rpx;
   box-sizing: border-box;
 }
 
-.content {
-  width: 100%;
+.detail-item {
+  margin-bottom: 20rpx;
+  padding: 24rpx;
+  border-radius: 20rpx;
+  background: #ffffff;
+  box-shadow: 0 8rpx 24rpx rgba(31, 45, 61, 0.06);
+  border-left: solid 8rpx #009eff;
+}
+
+.detail-label {
+  margin-bottom: 14rpx;
+  color: #6b7a8c;
+  font-size: 24rpx;
+  line-height: 1.4;
+}
+
+.detail-value {
+  color: #1f2d3d;
+  font-size: 28rpx;
+  line-height: 1.7;
 }
 
-.card-list {
+.text-value {
+  min-height: 44rpx;
+}
+
+.image-list {
   display: flex;
-  flex-direction: column;
-  gap: 20rpx; // 卡片之间的间距
+  flex-wrap: wrap;
+  gap: 18rpx;
 }
 
-.card-item {
-  background-color: #ffffff;
+.image-item {
+  width: calc(50% - 9rpx);
+  height: 220rpx;
+  overflow: hidden;
   border-radius: 16rpx;
-  padding: 30rpx;
-  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05); // 轻微阴影
-  display: flex;
-  flex-direction: column;
+  background: #eef3f8;
 
-  .card-label {
-    font-size: 28rpx;
-    color: #909399; // 标签颜色稍浅
-    margin-bottom: 16rpx;
-    font-weight: 500;
+  image {
+    width: 100%;
+    height: 100%;
   }
+}
 
-  .card-value {
-    font-size: 30rpx;
-    color: #303133; // 内容颜色深
-    width: 100%;
+.empty-text {
+  color: #97a6b5;
+  font-size: 26rpx;
+}
 
-    // 覆盖 uni-easyinput 的默认样式，使其融入卡片
-    ::v-deep .uni-easyinput__content {
-      background-color: transparent !important;
-      border: none !important;
-      padding: 0 !important;
-      min-height: auto !important;
-    }
-
-    ::v-deep .uni-easyinput__content-input {
-      font-size: 30rpx;
-      color: #303133;
-      padding: 0 !important;
-    }
-
-    ::v-deep .uni-textarea {
-      background-color: transparent !important;
-      border: none !important;
-      padding: 0 !important;
-    }
-  }
+::v-deep .uni-easyinput__content,
+::v-deep .uni-easyinput__content-textarea,
+::v-deep .uni-date-editor,
+::v-deep .uni-date-editor--x {
+  padding: 0 !important;
+  border: none !important;
+  background: transparent !important;
+}
 
-  .text-value {
-    line-height: 1.5;
-  }
+::v-deep .uni-easyinput__content-input,
+::v-deep .uni-easyinput__content-textarea,
+::v-deep .uni-date__x-input {
+  padding: 0 !important;
+  color: #1f2d3d !important;
+  font-size: 28rpx !important;
+  line-height: 1.7 !important;
+}
 
-  .image-container {
-    .image-list {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 20rpx;
-    }
-
-    .image-item {
-      width: 200rpx;
-      height: 200rpx;
-      border-radius: 8rpx;
-      overflow: hidden;
-      border: 1rpx solid #ebeef5;
-
-      image {
-        width: 100%;
-        height: 100%;
-      }
-    }
-
-    .no-data {
-      font-size: 28rpx;
-      color: #c0c4cc;
-    }
-  }
+::v-deep .is-disabled {
+  opacity: 1 !important;
 }
 </style>