messageDetail.vue

<template>
  <view class="h-page" ref="uv-back-top">
    <uv-sticky offset-top="0">
      <CustomNavBar :title="t('TaskNotice.alarmDetail')" />
      <!-- 固定头部 -->
      <view class="fixed-header">
        <view class="message-card">
          <!-- 店铺信息 -->
          <view class="message-section">
            <view class="section-label">{{ t('asisTab.mallT') }}</view>
            <view class="section-content">{{
              taskLogRecordParams.storeName
            }}</view>
          </view>

          <!-- 时间信息 -->
          <view class="message-section">
            <view class="section-label">{{ t('table.time') }}: </view>
            <view class="section-content">{{ taskLogRecordParams.time }}</view>
          </view>

          <!-- 状态信息 -->
          <view class="message-section">
            <view class="section-label">{{ t('maintenance.monitor.project.statusSimple') }}: </view>
            <view class="section-content">
              <!-- Pending, Confirm, False alarm -->
              <statusBtn :status="taskLogRecordParams.childStatusValue" />
            </view>
          </view>
          <!-- 处理人 -->
          <view class="message-section">
            <view class="section-label">{{ t('table.handler') }}: </view>
            <view class="section-content">{{
              taskLogRecordParams.userName
            }}</view>
          </view>
          <!-- 处理时间 -->
          <view class="message-section">
            <view class="section-label">{{ t('TaskNotice.processedTime') }}: </view>
            <view class="section-content">{{
              taskLogRecordParams.counttime
            }}</view>
          </view>
        </view>
      </view>
    </uv-sticky>
    <view class="h-c-container">
      <!-- 可滚动内容 -->
      <view class="scrollable-content">
        <view class="content-wrapper">
          <!-- 告警内容标题 -->
          <view class="alarm-title">{{ t('TaskNotice.alarmContent') }}</view>

          <!-- 告警内容 -->
          <view class="alarm-content">
            <view class="alarm-icon">
              <image
                src="/static/message/alarmTip.png"
                mode="aspectFit"
              ></image>
            </view>
            <view class="alarm-text">
             {{ taskLogRecordParams.content }}
            </view>
          </view>
          <!-- process content -->
          <view class="process-content">
            <view class="process-title">{{ t('TaskNotice.process') }}</view>

            <!-- 告警记录 -->
            <view class="process-item record">
              <view class="process-dot process-dot-first checked">
                <uv-icon
                  name="checkmark"
                  size="20rpx"
                  color="#FFFFFF"
                ></uv-icon>
              </view>
              <!-- <view class="process-line"></view> -->
              <view class="process-info">
                <view class="process-header">
                  <view class="process-name">{{ t('TaskNotice.alarm') }}</view>
                  <view class="process-time">{{
                    taskLogRecordParams.time
                  }}</view>
                </view>
                <view class="process-desc">{{ taskLogRecordParams.title }}</view>
              </view>
            </view>

            <!-- 处理记录 -->
            <view class="process-item">
              <view class="process-dot checked">
                <uv-icon
                  name="checkmark"
                  size="20rpx"
                  color="#FFFFFF"
                ></uv-icon>
              </view>
              <view class="process-info">
                <view class="process-header">
                  <view class="process-name">{{ t('app.inspection.handled') }}</view>
                  <view class="process-time">{{
                    taskLogRecordParams.createTime
                  }}</view>
                </view>
                <view class="process-user">
                  <image
                    src="/static/message/user.png"
                    mode="aspectFit"
                    class="user-avatar"
                  ></image>
                  <text class="user-name">{{
                    taskLogRecordParams.userName
                  }}</text>
                </view>
                <view class="process-image">
                  <!-- 到时候统一抽取出来？ -->
                  <image
                    :src="`${host.assetsIp}/${taskLogRecordParams.photo}`"
                    mode="widthFix"
                    class="evidence-image"
                  ></image>
                </view>
                <view v-if="taskLogRecordParams.comment" class="process-note">
                  {{ taskLogRecordParams.comment }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="h-300rpx"></view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useNav } from "@/hooks";
import CustomNavBar from "@/components/CustomNav.nvue";
import { t } from "@/plugins/index.js";
import statusBtn from "./cmp/statusBtn.vue";
import { getTaskLogRecordApi, getMessageListApi } from "@/api";
import { onLoad, onShow } from "@dcloudio/uni-app";
import host from "@/utils/ip-config.js";
import { getPageParams} from "@/utils";

const { navHeight } = useNav();
const status = ref("Pending");
const taskLogRecordParams = ref({});
onLoad(async (options) => {
  // 获取路由参数
  console.log(options, "options");
  const params = getPageParams(options);
  const id = params.id;
  console.log(id, "id");
  taskLogRecordParams.value = { ...params };
});
</script>

<style lang="scss">
.h-page {
  /* #ifdef H5 */
  min-height: calc(100vh - 44px);
  /* #endif */
  /* #ifndef H5 */
  min-height: 100vh;
  /* #endif */
  background-color: #ffffff;

  .h-c-container {
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .fixed-header {
    // position: sticky;
    // top: 0;
    // z-index: 10;
    background-color: #ffffff;
    padding: 0 32rpx;
    border-bottom: 1px solid #eef0f3;
  }
  .message-card {
    background-color: #fff;
    padding: 0;
    position: relative;
  }

  .message-section {
    display: flex;
    padding: 22rpx 0rpx;
    border-bottom: 2rpx solid #eef0f3;
    gap: 30rpx;

    .section-label {
      font-weight: 400;
      font-size: 28rpx;
      color: #90949d;
    }

    .section-content {
      font-weight: 400;
      font-size: 28rpx;
      color: #262626;
      flex: 1;
    }
    &:last-child {
      border-bottom: none;
    }
  }
  .status-tag {
    display: inline-block;
    padding: 6rpx 18rpx;
    font-weight: 400;
    font-size: 24rpx;
    background: #edeef0;
    color: #878992;
    border-radius: 60rpx 60rpx 60rpx 60rpx;
  }
  .scrollable-content {
    flex: 1;
    height: 100vh;

    .content-wrapper {
      padding: 0 32rpx;
    }

    .alarm-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      padding: 30rpx 0rpx 24rpx;
    }

    .alarm-content {
      display: flex;
      padding: 28rpx;
      background: #f9fafb;
      border-radius: 8rpx 8rpx 8rpx 8rpx;

      .alarm-icon {
        width: 60rpx;
        height: 60rpx;
        margin-right: 20rpx;
        border-radius: 6rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
          width: 40rpx;
          height: 40rpx;
        }
      }

      .alarm-text {
        flex: 1;
        font-size: 30rpx;
        color: #666;
        line-height: 1.5;
      }
    }

    .process-content {
      margin-top: 40rpx;
    }

    .process-title {
      font-weight: normal;
      font-size: 30rpx;
      color: #262626;
      padding: 18rpx 0rpx 24rpx;
    }

    .process-item {
      display: flex;
      position: relative;
      &.record {
        margin-bottom: 45rpx;
      }
    }

    .process-dot {
      width: 27rpx;
      height: 27rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;
      margin-top: 10rpx;
      position: relative;
      &.checked {
        background-color: #387cf5;
        border-color: #387cf5;
      }
      // 第一项有步骤条 虚线效果
      &.process-dot-first::after {
        content: "";
        position: absolute;
        left: 12rpx;
        top: 36rpx;
        width: 2rpx;
        height: 80rpx;
        background: linear-gradient(to bottom, #90949d 50%, transparent 50%);
        background-size: 2rpx 8rpx;
      }
    }

    .process-line {
      position: absolute;
      left: 12rpx;
      top: 32rpx;
      width: 2rpx;
      height: 60rpx;
      background-color: #e5e5e5;
    }

    .process-info {
      flex: 1;
    }

    .process-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12rpx;
    }

    .process-name {
      font-weight: 500;
      font-size: 28rpx;
      color: #262626;
    }

    .process-time {
      font-weight: 400;
      font-size: 24rpx;
      color: #90949d;
    }

    .process-desc {
      font-weight: 400;
      font-size: 24rpx;
      color: #90949d;
    }

    .process-user {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .user-avatar {
        width: 20rpx;
        height: 22rpx;
        margin-right: 12rpx;
      }

      .user-name {
        font-weight: 400;
        font-size: 24rpx;
        color: #90949d;
      }
    }

    .process-image {
      margin-bottom: 20rpx;

      .evidence-image {
        width: 100%;
        border-radius: 12rpx;
      }
    }

    .process-note {
      background: #f9fafb;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      border: 2rpx solid #eef0f3;
      padding: 28rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #4e515e;
      line-height: 44rpx;
    }
    .h-300rpx {
      height: 200rpx;
    }
  }
}
</style>