|  |  | 
 |  |  | <template> | 
 |  |  |   <ProTabs | 
 |  |  |     v-model="queryState.mineSignType" | 
 |  |  |     v-model="queryState.status" | 
 |  |  |     name="home-tab" | 
 |  |  |     :showPaneContent="false" | 
 |  |  |     class="home-tabs" | 
 |  |  | 
 |  |  |     title-scroll | 
 |  |  |   > | 
 |  |  |     <ProTabPane :title="`全部`" :pane-key="0"></ProTabPane> | 
 |  |  |     <ProTabPane :title="`待确认`" :pane-key="10"></ProTabPane> | 
 |  |  |     <ProTabPane :title="`待签约`" :pane-key="20"></ProTabPane> | 
 |  |  |     <ProTabPane | 
 |  |  |       :title="`待确认`" | 
 |  |  |       :pane-key="GetPersonalApplyTaskInfosQueryStatus.WaitHire" | 
 |  |  |     ></ProTabPane> | 
 |  |  |     <ProTabPane | 
 |  |  |       :title="`待签约`" | 
 |  |  |       :pane-key="GetPersonalApplyTaskInfosQueryStatus.WaitSignContract" | 
 |  |  |     ></ProTabPane> | 
 |  |  |   </ProTabs> | 
 |  |  |   <InfiniteLoading | 
 |  |  |     scrollViewClassName="common-infinite-scroll-list home-list" | 
 |  |  |     v-bind="infiniteLoadingProps" | 
 |  |  |     :key="queryState.mineSignType" | 
 |  |  |     :key="queryState.status" | 
 |  |  |   > | 
 |  |  |     <template #renderItem="{ item }"> | 
 |  |  |       <TaskCard> | 
 |  |  |       <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" :style="{ color: TaskStatusColor[10] }"> | 
 |  |  |             {{ TaskStatusText[10] }} | 
 |  |  |           <div | 
 |  |  |             class="task-card-actions-text" | 
 |  |  |             :style="{ color: GetPersonalApplyTaskInfosQueryStatusColor[item.status] }" | 
 |  |  |           > | 
 |  |  |             {{ GetPersonalApplyTaskInfosQueryStatusText[item.status] }} | 
 |  |  |           </div> | 
 |  |  |         </template> | 
 |  |  |       </TaskCard> | 
 |  |  | 
 |  |  | <script setup lang="ts"> | 
 |  |  | import { TaskCard, ProTabs, ProTabPane } from '@12333/components'; | 
 |  |  | import { useUserStore } from '@/stores/modules/user'; | 
 |  |  | import { TaskStatusText, TaskStatusColor, TaskStatus } from '@/constants'; | 
 |  |  | import { useInfiniteLoading } from '@12333/hooks'; | 
 |  |  | import { OrderInputType } from '@12333/constants'; | 
 |  |  | import * as orderServices from '@12333/services/api/Order'; | 
 |  |  | import { | 
 |  |  |   EnumPagedListOrder, | 
 |  |  |   GetPersonalApplyTaskInfosQueryStatus, | 
 |  |  |   GetPersonalApplyTaskInfosQueryStatusText, | 
 |  |  |   GetPersonalApplyTaskInfosQueryStatusColor, | 
 |  |  | } from '@12333/constants'; | 
 |  |  | import * as taskServices from '@12333/services/apiV2/task'; | 
 |  |  | import Taro from '@tarojs/taro'; | 
 |  |  |  | 
 |  |  | defineOptions({ | 
 |  |  |   name: 'InnerPage', | 
 |  |  | }); | 
 |  |  |  | 
 |  |  | const queryState = reactive({ | 
 |  |  |   mineSignType: TaskStatus.All, | 
 |  |  |   status: 0 as any as GetPersonalApplyTaskInfosQueryStatus, | 
 |  |  | }); | 
 |  |  |  | 
 |  |  | const userStore = useUserStore(); | 
 |  |  |  | 
 |  |  | const { infiniteLoadingProps } = useInfiniteLoading( | 
 |  |  |   ({ pageParam }) => { | 
 |  |  |     let params: API.FrontOrderListInput = { | 
 |  |  |     let params: API.GetPersonalApplyTaskInfosQuery = { | 
 |  |  |       pageModel: { | 
 |  |  |         rows: 20, | 
 |  |  |         page: pageParam, | 
 |  |  |         orderInput: [ | 
 |  |  |           queryState.mineSignType === TaskStatus.All | 
 |  |  |             ? { property: 'isRecommend', order: OrderInputType.Desc } | 
 |  |  |             : { property: 'lastShelfTime', order: OrderInputType.Desc }, | 
 |  |  |         ], | 
 |  |  |         orderInput: [{ property: 'id', order: EnumPagedListOrder.Desc }], | 
 |  |  |       }, | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     return orderServices.getFrontOrderList(params, { | 
 |  |  |     if (Number(queryState.status)) { | 
 |  |  |       params.status = queryState.status; | 
 |  |  |     } | 
 |  |  |     return taskServices.getPersonalApplyTaskInfos(params, { | 
 |  |  |       showLoading: false, | 
 |  |  |     }); | 
 |  |  |   }, | 
 |  |  |   { | 
 |  |  |     queryKey: ['orderServices/getFrontOrderList', queryState], | 
 |  |  |     queryKey: ['taskServices/getPersonalApplyTaskInfos', queryState], | 
 |  |  |   } | 
 |  |  | ); | 
 |  |  |  | 
 |  |  | function goTaskDetail(item: API.GetPersonalApplyTaskInfosQueryResultItem) { | 
 |  |  |   Taro.navigateTo({ | 
 |  |  |     url: `${RouterPath.taskDetail}?id=${item.id}&from=sign`, | 
 |  |  |   }); | 
 |  |  | } | 
 |  |  | </script> | 
 |  |  |  | 
 |  |  | <style lang="scss"> |