<template> 
 | 
  <InfiniteLoading 
 | 
    scrollViewClassName="common-infinite-scroll-list home-list" 
 | 
    v-bind="infiniteLoadingProps" 
 | 
  > 
 | 
    <template #renderItem="{ item }"> 
 | 
      <TaskCard 
 | 
        :name="item.name" 
 | 
        :begin-time="item.beginTime" 
 | 
        :end-time="item.endTime" 
 | 
        :billing-method="item.billingMethod" 
 | 
        :benefits="item.benefits" 
 | 
        :service-fee="item.serviceFee" 
 | 
        :settlement-cycle="item.settlementCycle" 
 | 
        :address-name="item.addressName" 
 | 
        @click="goTaskDetail(item)" 
 | 
      > 
 | 
        <template #actions> 
 | 
          <div class="task-card-actions-text">{{ '已取消' }}</div> 
 | 
        </template> 
 | 
      </TaskCard> 
 | 
    </template> 
 | 
  </InfiniteLoading> 
 | 
</template> 
 | 
  
 | 
<script setup lang="ts"> 
 | 
import { TaskCard } from '@12333/components'; 
 | 
import { useInfiniteLoading } from '@12333/hooks'; 
 | 
import { EnumPagedListOrder } from '@12333/constants'; 
 | 
import * as taskServices from '@12333/services/apiV2/task'; 
 | 
import Taro from '@tarojs/taro'; 
 | 
  
 | 
defineOptions({ 
 | 
  name: 'InnerPage', 
 | 
}); 
 | 
  
 | 
const { infiniteLoadingProps } = useInfiniteLoading( 
 | 
  ({ pageParam }) => { 
 | 
    let params: API.GetPersonalCancelTaskInfosQuery = { 
 | 
      pageModel: { 
 | 
        rows: 20, 
 | 
        page: pageParam, 
 | 
        orderInput: [{ property: 'id', order: EnumPagedListOrder.Desc }], 
 | 
      }, 
 | 
    }; 
 | 
    return taskServices.getPersonalCancelTaskInfos(params, { 
 | 
      showLoading: false, 
 | 
    }); 
 | 
  }, 
 | 
  { 
 | 
    queryKey: ['taskServices/getPersonalCancelTaskInfos'], 
 | 
  } 
 | 
); 
 | 
  
 | 
function goTaskDetail(item: API.GetPersonalHireTaskInfosQueryResultItem) { 
 | 
  Taro.navigateTo({ 
 | 
    url: `${RouterPath.taskDetail}?id=${item.id}&from=cancel`, 
 | 
  }); 
 | 
} 
 | 
</script> 
 | 
  
 | 
<style lang="scss"> 
 | 
@import '@/styles/common.scss'; 
 | 
  
 | 
.mineCancel-page-wrapper { 
 | 
  .task-card-actions-text { 
 | 
    font-size: 24px; 
 | 
    line-height: 42px; 
 | 
    color: #9fa4ac; 
 | 
  } 
 | 
} 
 | 
</style> 
 |