JCSS / jcss-miniprogram

  <template>

    <view class="page-container" style="padding-bottom: 20px;">

      <!-- 页面级加载组件 -->
      <up-loading-page
          v-if="loading"
          :loading="true"
          title="加载中..."
          color="#3c9cff"
      ></up-loading-page>
  
      <!-- 内容容器 -->

      <template v-else>
        <view class="content-wrap" v-for="(i, index) in orderDetail" :key="index">

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

          <up-cell-group :border="false" inset>
            <!-- 1. 工单计划名称 -->

            <up-cell align="middle">

              <template #title>

                <view class="up-line-1">{{i.planName || '--'}}</view>

              </template>

            </up-cell>

  
            <!-- 2. 工单位置 -->
            <up-cell
                title="计划编码"
                :value="i.planNo || '--'"

                align="middle"
            ></up-cell>
  
            <!-- 3. 工单名称 -->
            <up-cell
                title="养护周期"
                :value="`${i.rate}${uni.$dict.getDictLabel('cycle_id_type', i.cycleId)}`"

                align="middle"
            ></up-cell>
  
            <!-- 4. 情况描述 -->
            <up-cell
                title="计划有效期"

                :value="`${timeFormat(i.beginTime,'yyyy-mm-dd')} 至 ${timeFormat(i.endTime,'yyyy-mm-dd')}`"

                align="middle"
            ></up-cell>
  

            <!-- 5. 问题照片（核心修复：兼容WebP + 强制尺寸） -->

            <up-cell title="照片">

              <template #value>
                <view class="cell-content-wrap">

                  <!-- 修复1：手动渲染图片，兼容WebP + 强制尺寸 -->
                  <view v-if="!!i.beginImgList?.length" class="album-container">
                    <view
                        class="album-item"
                        v-for="(imgUrl, imgIndex) in formatImageUrls(i.beginImgList)"
                        :key="imgIndex"
                        @click="previewImage(imgUrl, formatImageUrls(i.beginImgList))"
                    >
                      <image
                          :src="imgUrl"
                          mode="widthFix"
                          class="album-image"
                          :style="{width: '70px', height: '70px', objectFit: 'cover'}"
                      ></image>
                    </view>
                  </view>

                  <text v-else class="empty-text">暂无问题照片</text>
                </view>
              </template>
            </up-cell>
  
            <!-- 7. 处理结果 -->

            <up-cell align="middle">

              <template #title>

                <view style="min-width: 200rpx">巡查描述</view>

              </template>
              <template #value>

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

              </template>
            </up-cell>

  
            <up-cell
                title="提交时间"

                :value="timeFormat(i.finishTime,'yyyy-mm-dd hh:MM:ss') || '--'"

                align="middle"

            ></up-cell>
  

            <up-cell
                title="提交人"
                :value="i.userName || '--'"

                align="middle"
                :border="false"
            ></up-cell>
          </up-cell-group>

        </view>

      </template>

    </view>
  </template>
  
  <script setup lang="ts">

  import {ref} from 'vue';
  import {detailList} from "@/api/maintain-manage/maintain-manage";
  import {onLoad} from '@dcloudio/uni-app';
  import {timeFormat} from '@/uni_modules/uview-plus';

  // 状态管理
  const loading = ref(true);
  const orderDetail = ref([]);
  

  /**
   * 格式化图片URL（兼容WebP + 清理非法字符）
   * @param urls 原始图片列表
   */
  const formatImageUrls = (urls) => {
    if (!Array.isArray(urls) || urls.length === 0) return [];
  
    return urls.map(url => {
      if (typeof url !== 'string') return '';
      // 1. 清理URL开头的非法字符（如数字、空格）
      const validStart = url.indexOf('http');
      const cleanUrl = validStart > 0 ? url.substring(validStart) : url;
      // 2. 小程序兼容：WebP转JPEG（可选，后端无转换则注释）
      // return cleanUrl.replace('.webp', '.jpeg');
      return cleanUrl;
    }).filter(url => !!url);
  };
  
  /**
   * 预览图片
   * @param currentUrl 当前点击的图片
   * @param allUrls 所有图片列表
   */
  const previewImage = (currentUrl, allUrls) => {
    uni.previewImage({
      current: currentUrl,
      urls: allUrls,
      fail: (err) => {
        console.error('预览图片失败：', err);
        uni.showToast({title: '预览图片失败', icon: 'none'});
      }
    });
  };

  /**
   * 获取工单详情
   */

  const getOrderDetail = async (planNo: string) => {

    try {
      loading.value = true;

      let queryData = {

        planNo: planNo,
        pageSize: 100,
        pageNo: 1,
      };

      const res = await detailList(queryData);

      console.log('接口返回：', res);

      // 修复2：正确解析接口数据（res.data.list 而非 res.list）
      orderDetail.value = res.data?.list || res.list || [];
  
      // 调试：打印格式化后的图片URL
      console.log('格式化后图片URL：', formatImageUrls(orderDetail.value[0]?.beginImgList || []));

    } catch (error) {
      console.error('获取工单详情失败：', error);

      uni.showToast({title: '加载失败，请重试', icon: 'none'});

    } finally {
      loading.value = false;
    }
  };
  
  // 页面加载
  onLoad((options) => {

    const {planNo} = options;

    if (planNo) {
      getOrderDetail(planNo);
    } 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;

    margin-bottom: 30rpx;

  }
  

  // 图片容器样式
  .cell-content-wrap {
    padding: 10rpx 0;
  }
  
  // 自定义相册容器
  .album-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10rpx; // 图片间距
  }
  
  // 单张图片样式
  .album-item {
    width: 70px;
    height: 70px;
    border-radius: 4rpx;
    overflow: hidden;
  }

  // 图片样式（强制尺寸 + 覆盖）
  .album-image {
    width: 100%;
    height: 100%;
    object-fit: cover; // 保持比例裁剪，避免拉伸
  }
  
  // 空文本样式
  .empty-text {
    color: #999;
    font-size: 14px;
    line-height: 70px; // 和图片高度对齐
  }

  </style>