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="main-content">
      <!-- 顶部固定Tabs -->
      <up-tabs
          v-model="activeTopTab"
          :list="topTabList"
          :scrollable="false"
          sticky
          active-color="#3c9cff"
          inactive-color="#666"
          class="top-tabs"
          @click="activeTopTabClick"
      ></up-tabs>

      <!-- 顶部Tab内容区 -->
      <view class="tab-content">
        <!-- 1. 工单详情Tab -->
        <view v-show="activeTopTab == 0" class="detail-content">
          <up-cell-group :border="false"  class="detail-cell-group">
            <!-- 工单编号 -->
            <up-cell title="工单编号" :value="orderDetail.orderNo || '--'" align="middle"></up-cell>
            <!-- 工单位置 -->

            <up-cell  align="middle">

              <template #title>
                <view  style="min-width: 200rpx">工单位置</view>
              </template>
              <template #value>
                <view class="common-text-color up-line-1">{{ orderDetail.roadName || '--' }}</view>
              </template>
            </up-cell>
            <!-- 工单名称 -->
            <up-cell title="工单名称" :value="orderDetail.orderName || '--'" align="middle"></up-cell>
            <!-- 情况描述 -->
            <up-cell >
              <template #title>
                <view  style="min-width: 200rpx">情况描述</view>
              </template>
              <template #value>
                <view class="common-text-color up-line-1">{{ orderDetail.remark || '--' }}</view>
              </template>
            </up-cell>
            <!-- 紧急程度 -->
            <up-cell
                title="紧急程度"
                :value="uni.$dict.getDictLabel('workorder_pressing_type', orderDetail.pressingType) || '--'"
                align="middle"
            ></up-cell>

            <!-- 问题照片 -->
            <up-cell title="问题照片">
              <template #value>
                <view class="cell-content-wrap">
                  <up-album
                      v-if="!!orderDetail.problemImgsList?.length"
                      :urls="orderDetail.problemImgsList.slice(0, 3)"
                      singleSize="70"
                      :preview-full-image="true"
                  ></up-album>
                  <text v-else class="empty-text">暂无问题照片</text>
                </view>
              </template>
            </up-cell>
            <!-- 希望完成时间 -->
            <up-cell
                title="希望完成时间"
                :value="timeFormat(orderDetail.finishDate, 'yyyy-mm-dd hh:MM:ss') || '--'"
                align="middle"
                :border="false"
            ></up-cell>
          </up-cell-group>


          <!-- 图片分类Tabs区块 -->
<!--          <view class="img-tabs-block">-->
<!--            <up-tabs-->
<!--                v-model="activeImgTab"-->
<!--                :list="imgTabList"-->
<!--                :scrollable="false"-->
<!--                active-color="#3c9cff"-->
<!--                inactive-color="#666"-->
<!--                class="img-tabs"-->
<!--            ></up-tabs>-->

<!--            &lt;!&ndash; 图片Tab内容区 &ndash;&gt;-->
<!--            <view class="img-tab-content">-->
<!--              <up-album-->
<!--                  v-if="getCurrentImgList().length"-->
<!--                  :urls="getCurrentImgList().slice(0, 3)"-->
<!--                  singleSize="100"-->
<!--                  :preview-full-image="true"-->
<!--                  class="img-album"-->
<!--              ></up-album>-->
<!--              <text v-else class="empty-img-text">暂无{{ imgTabList[activeImgTab].name }}图片</text>-->
<!--            </view>-->
<!--          </view>-->
        </view>

        <!-- 2. 流程节点Tab -->
        <view v-show="activeTopTab == 1" class="process-content">
          <up-empty
              mode="data"

          ></up-empty>
          <!-- 可根据实际需求补充流程节点展示逻辑 -->
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { timeFormat } from '@/uni_modules/uview-plus';
import { getMyTaskDetail, getDoneTaskDetail, getTodoTaskDetail } from '@/api/work-order-manage/work-order-manage';

// 状态管理
const loading = ref(true);
const activeTopTab = ref(0); // 顶部Tab激活索引
const activeImgTab = ref(0); // 图片分类Tab激活索引

// 顶部Tab列表
const topTabList = ref([
  { name: '工单详情' },
  { name: '流程节点' }
]);

const activeTopTabClick = (item)=>{
  console.log(item)
  activeTopTab.value = item.index
}

// 图片分类Tab列表（带角标配置）
const imgTabList = ref([
  { name: '开始', badge: { isDot: true } },
  { name: '进行中' },
  { name: '结束', badge: { isDot: true } },
  { name: '人员' },
  { name: '材料' }
]);

// 工单详情数据
const orderDetail = ref({});

/**
 * 获取当前激活的图片列表
 */
const getCurrentImgList = computed(() => {
  const tabKeyMap = ['startImgs', 'processingImgs', 'endImgs', 'personImgs', 'materialImgs'];
  return orderDetail[tabKeyMap[activeImgTab.value]] || [];
});

/**
 * 获取工单详情
 */
const getMyTaskDetailQuery = async (taskId) => {
  try {
    loading.value = true;
    const res = await getMyTaskDetail({ taskId });
    console.log('工单详情接口返回：', res);
    orderDetail.value = res

  } catch (error) {
    console.error('获取工单详情失败：', error);
    uni.showToast({ title: '加载失败，请重试', icon: 'none' });
  } finally {
    loading.value = false;
  }
};

// 页面加载
onLoad((options) => {
  console.log(options)
  const { taskId, activeTab } = options;
  // 0-待办 1我发起的- 2-已办
  console.log(taskId)
  if(activeTab==0){
    getTodoTaskDetail(taskId);
  }
  if(activeTab==1){
    getMyTaskDetailQuery(taskId);

  }
  if(activeTab==2){
    getDoneTaskDetail(taskId);
  }
});
</script>

<style scoped lang="scss">
// 全局样式
.page-container {
  min-height: 100vh;

}

// 主内容容器
.main-content {
  padding-bottom: 20rpx;
}

// 顶部Tabs
.top-tabs {
  //background-color: #fff;
}

// Tab内容区
.tab-content {
  padding: 16rpx;
}

// 工单详情内容
.detail-content {
  .detail-cell-group {
    background-color: #fff;

    margin-bottom: 20rpx;
  }


  .cell-content-wrap {
    //display: flex;
    //flex-wrap: wrap;
    //gap: 12rpx;
  }


}

// 图片分类Tabs区块
.img-tabs-block {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 16rpx;

  // 图片Tabs样式（平均分配空间）
  .img-tabs {
    --u-tabs-item-flex: 1; // 平均分配空间
    --u-tabs-item-font-size: 26rpx;
    --u-tabs-item-height: 72rpx;
    margin-bottom: 16rpx;
  }

  // 图片内容区
  .img-tab-content {
    padding: 10rpx 0;
    min-height: 120rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .img-album {
      width: 100%;
    }

  }
}

// 流程节点空状态
.process-content {
  .empty-process {
    margin-top: 100rpx;
  }
}
</style>