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 || '--'"

              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>
  
  
          <up-cell
              align="middle"
          >
            <template #title>
              <view  style="min-width: 200rpx">工单位置</view>
            </template>
            <template #value>
              <view  class="up-line-1 common-text-color" >{{orderDetail.lonLatAddress || '--'}}</view>
            </template>
            lonLatAddress
  

          </up-cell>

  
          <!-- 3. 工单名称 -->
          <up-cell
              title="工单名称"
              :value="orderDetail.orderName || '--'"

              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" >

              <up-album

                  :urls="orderDetail.problemsImgs "

                  singleSize="70"

                  multipleSize="70"

                  :preview-full-image="true"
  

              ></up-album>

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

            </view>

            </template>

          </up-cell>
  

          <!-- 6. 完成照片 -->
          <up-cell title="完成照片">

            <template #value>

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

  
                  :urls="orderDetail.endImgs"

                  singleSize="70"

                  multipleSize="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 } from 'vue';

  import { inspectionPlanDetail } from "@/api/quick-order/quick-order";

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

  // 给orderDetail指定类型，明确图片数组的类型

  interface OrderDetail {
    problemsImgs?: string[];
    endImgs?: string[];
    [key: string]: any; // 兼容其他属性
  }

  // 初始化时给图片数组赋空数组，避免模板解析时访问undefined

  const orderDetail = ref<OrderDetail>({
    problemsImgs: [],
    endImgs: []
  });
  const loading = ref(true);

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

      console.log('接口返回problemsImgs：', res.problemsImgs); // 确认数据存在
      // 修复3：解构赋值时，强制保证图片数组为数组类型

      orderDetail.value = {
        ...res,

        problemsImgs: Array.isArray(res.problemsImgs) ? res.problemsImgs : [],
        endImgs: Array.isArray(res.endImgs) ? res.endImgs : []

      };

    } 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">

  // 内容容器

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

  }
  

  .cell-content-wrap {
    :deep(image) { // 小程序中图片标签是image，且需要穿透样式隔离
      width: 70px !important;
      height: 70px !important;
    }
  }

  </style>