<template> 
 | 
  <Calendar v-model="queryState.date"></Calendar> 
 | 
  <ProTabs 
 | 
    v-model="queryState.checkReceiveStatus" 
 | 
    name="task-tab" 
 | 
    :showPaneContent="false" 
 | 
    class="task-tabs" 
 | 
    isTransparent 
 | 
    title-gutter="8" 
 | 
    title-scroll 
 | 
  > 
 | 
    <ProTabPane :title="`待提交`" :pane-key="EnumTaskCheckReceiveStatus.WaitSubmit"></ProTabPane> 
 | 
    <ProTabPane 
 | 
      :title="`待验收`" 
 | 
      :pane-key="EnumTaskCheckReceiveStatus.WaitCheckReceive" 
 | 
    ></ProTabPane> 
 | 
    <ProTabPane :title="`已验收`" :pane-key="EnumTaskCheckReceiveStatus.Completed"></ProTabPane> 
 | 
  </ProTabs> 
 | 
  <InfiniteLoading 
 | 
    scrollViewClassName="common-infinite-scroll-list" 
 | 
    v-bind="infiniteLoadingProps" 
 | 
    :key="queryState.checkReceiveStatus" 
 | 
  > 
 | 
    <template #renderItem="{ item }"> 
 | 
      <MyTaskCard 
 | 
        :name="item.name" 
 | 
        :beginTime="item.beginTime" 
 | 
        :endTime="item.endTime" 
 | 
        :addressName="item.addressName" 
 | 
        @click="goSubmitTaskDetail(item)" 
 | 
      /> 
 | 
    </template> 
 | 
  </InfiniteLoading> 
 | 
</template> 
 | 
  
 | 
<script setup lang="ts"> 
 | 
import { MyTaskCard, ProTabs, ProTabPane, Calendar } from '@12333/components'; 
 | 
import Taro from '@tarojs/taro'; 
 | 
import { EnumTaskCheckReceiveStatus } from '@12333/constants'; 
 | 
import { useCheckReceiveTasks } from '@12333/hooks'; 
 | 
  
 | 
defineOptions({ 
 | 
  name: 'InnerPage', 
 | 
}); 
 | 
  
 | 
const { queryState, infiniteLoadingProps } = useCheckReceiveTasks(); 
 | 
  
 | 
function goSubmitTaskDetail(item: API.GetCheckReceiveTasksQueryResultItem) { 
 | 
  Taro.navigateTo({ 
 | 
    url: `${RouterPath.taskCheckDetail}?id=${item.id}&date=${queryState.date}&checkReceiveStatus=${queryState.checkReceiveStatus}`, 
 | 
  }); 
 | 
} 
 | 
</script> 
 |