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