JCSS / jcss-miniprogram

  <template>

    <view class="page-container">

      <!-- 页面级加载组件 -->

      <up-loading-page
          v-if="loading"
          :loading="true"
          title="加载中..."
          color="#3c9cff"
      ></up-loading-page>
  

      <!-- 内容容器 -->

      <view v-else class="content-wrap">

        <!-- 空状态 -->

        <view v-if="!Object.keys(orderDetail).length" >
          <empty-view />

        </view>
  
        <!-- 工单详情内容 -->

        <up-cell-group :border="false" inset  v-else>

          <!-- 1. 工单编号 -->
          <up-cell
              title="工单编号"
              :value="orderDetail.orderNo || '--'"
              class="up-line-1"
              align="middle"
          ></up-cell>
  
          <!-- 2. 工单位置 -->
          <up-cell

              align="middle"

          >
            <template #title>
              <view  style="min-width: 200rpx">工单位置</view>
            </template>
            <template #value>

              <view  class="up-line-1 common-text-color" >{{orderDetail.roadName || '--'}}</view>

            </template>
  
          </up-cell>

  
          <!-- 3. 工单名称 -->
          <up-cell
              title="工单名称"
              :value="orderDetail.orderName || '--'"
              class="up-line-1"
              align="middle"
          ></up-cell>
  
          <!-- 4. 情况描述 -->
          <up-cell

              align="middle"

          >
            <template #title>
              <view  style="min-width: 200rpx">情况描述</view>
            </template>
            <template #value>

              <view  class="up-line-1 common-text-color" >{{orderDetail.remark || '--'}}</view>

            </template>
          </up-cell>

          <!-- 5. 问题照片（核心修复：判断条件+空值处理） -->
          <up-cell title="问题照片" >
            <template #value>

            <view class="cell-content-wrap">

  
              <!-- 修复1：正确判断problemImgsList，补充空数组默认值 -->

              <up-album

                  v-if="!!orderDetail.problemImgsList?.length"
                  :urls="orderDetail.problemImgsList || []"
                  singleSize="70"

                  :preview-full-image="true"

              ></up-album>
              <text v-else class="empty-text">暂无问题照片</text>
            </view>

            </template>

          </up-cell>
  

          <!-- 6. 完成照片（优化：空值处理+容错） -->

          <up-cell title="完成照片" align="top">

            <template #value>

            <view class="cell-content-wrap">
              <up-album

                  v-if="!!orderDetail.completeImgsList?.length"
                  :urls="orderDetail.completeImgsList || []"
                  singleSize="70"

                  :preview-full-image="true"

              ></up-album>
              <text v-else class="empty-text">暂无完成照片</text>
            </view>

            </template>

          </up-cell>
  
          <!-- 7. 处理结果 -->
          <up-cell

              align="middle"
              :border="false"

          >
            <template #title>
              <view  style="min-width: 200rpx">处理结果</view>
            </template>
            <template #value>

              <view  class="up-line-1 common-text-color" >{{orderDetail.handleResult || '--'}}</view>

            </template>
          </up-cell>

        </up-cell-group>

      </view>
    </view>
  </template>
  
  <script setup lang="ts">
  import { ref, reactive } from 'vue';
  import { inspectionPlanDetail } from "@/api/quick-order/quick-order";

  import { onLoad, onShow } from '@dcloudio/uni-app';

  import EmptyView from "../../../components/empty-view/empty-view.vue";

  // 状态管理
  const loading = ref(true);
  const orderDetail = ref({});
  

  
  /**
   * 获取工单详情
   */
  const getOrderDetail = async (id: string) => {
    try {
      loading.value = true;
      const res = await inspectionPlanDetail({ id });

      console.log('接口返回：', res);
      // 优化：确保图片数组为数组类型，避免非数组导致渲染错误
      orderDetail.value = {
        ...res,
        problemImgsList: Array.isArray(res.problemImgsList) ? res.problemImgsList : [],
        completeImgsList: Array.isArray(res.completeImgsList) ? res.completeImgsList : []
      };

    } catch (error) {
      console.error('获取工单详情失败：', error);
      uni.showToast({ title: '加载失败，请重试', icon: 'none' });
    } finally {
      loading.value = false;
    }
  };
  
  // 页面加载
  onLoad((options) => {
    const { id } = options;
    if (id) {
      getOrderDetail(id);
    } else {
      loading.value = false;
      uni.showToast({ title: '缺少工单ID', icon: 'none' });
    }
  });
  </script>
  
  <style scoped lang="scss">

  // 页面基础样式
  .u-page {

  }

  // 内容容器

  .content-wrap {
    background: #fff;
    width: 100%;
    box-sizing: border-box;

  }
  

  </style>