|  |  | 
 |  |  |       <Cell :title="detail?.name ?? ''" titleSize="large"> | 
 |  |  |         <template #title-right> | 
 |  |  |           <img | 
 |  |  |             v-if="from === 'apply'" | 
 |  |  |             :src="detail.isCollected ? IconAttentioActive : IconAttention" | 
 |  |  |             class="taskDetail-attention-icon" | 
 |  |  |             @click="handleAttention" | 
 |  |  |           /> | 
 |  |  |           <div | 
 |  |  |             v-if="from === 'sign'" | 
 |  |  |             :style="{ color: GetPersonalApplyTaskInfosQueryStatusColor[detail.applyButton] }" | 
 |  |  |           > | 
 |  |  |             {{ GetTaskInfoQueryResultApplyButtonText[detail.applyButton] }} | 
 |  |  |           </div> | 
 |  |  |           <div | 
 |  |  |             v-if="from === 'hire'" | 
 |  |  |             :style="{ color: GetPersonalHireTaskInfosQueryStatusColor[detail.hireButton] }" | 
 |  |  |           > | 
 |  |  |             {{ GetTaskInfoQueryResultHireButtonText[detail.hireButton] }} | 
 |  |  |           </div> | 
 |  |  |           <div v-if="from === 'cancel'" :style="{ color: '#999999' }">已取消</div> | 
 |  |  |         </template> | 
 |  |  |         <div class="taskDetail-time"> | 
 |  |  |           {{ dayjs(detail?.beginTime).format('YYYY年MM月DD日') }} 至 | 
 |  |  | 
 |  |  |             </div> --> | 
 |  |  |           </div> | 
 |  |  |           <TaskPrice | 
 |  |  |             v-if="detail.releaseStatus !== EnumTaskReleaseStatus.Stopped" | 
 |  |  |             :value="toThousand(detail.serviceFee ?? 0)" | 
 |  |  |             :unit="BillingMethodEnumUnit[detail.billingMethod]" | 
 |  |  |           /> | 
 |  |  |         </div> | 
 |  |  |         <div class="taskDetail-address-wrapper"> | 
 |  |  |         <div class="taskDetail-address-wrapper" @click="goMap"> | 
 |  |  |           <div class="taskDetail-address-title-wrapper"> | 
 |  |  |             <img :src="IconLocaltion" class="taskDetail-address-title-icon" /> | 
 |  |  |             <div class="taskDetail-address-title">{{ detail?.addressName ?? '' }}</div> | 
 |  |  | 
 |  |  |             @click="goCompanyDetail" | 
 |  |  |             :enterpriseName="detail?.enterpriseName ?? ''" | 
 |  |  |             :taskCount="detail?.taskCount ?? 0" | 
 |  |  |             :isReal="detail?.isReal ?? false" | 
 |  |  |           ></CompanyDesc> | 
 |  |  |         </CellChunk> | 
 |  |  |       </Cell> | 
 |  |  |       <Cell title="任务描述"> | 
 |  |  |         <div class="safe-cell-content">{{ detail?.description ?? '' }}</div> | 
 |  |  |       </Cell> | 
 |  |  |       <Cell> | 
 |  |  |         <template #title> | 
 |  |  | 
 |  |  |         @click="handleCall" | 
 |  |  |       ></PageFooterAction> | 
 |  |  |       <PageFooterBtn | 
 |  |  |         v-if="detail.releaseStatus === EnumTaskReleaseStatus.InProcess" | 
 |  |  |         v-if="from === 'sign' && !!detail?.applyButton" | 
 |  |  |         type="primary" | 
 |  |  |         @click="handleApply" | 
 |  |  |         >{{ `报名(${detail?.applyCount ?? 0}人已报名)` }}</PageFooterBtn | 
 |  |  |         :disabled="detail?.applyButton === GetTaskInfoQueryResultApplyButton.WaitHire" | 
 |  |  |         @click="handleSign" | 
 |  |  |       > | 
 |  |  |       <PageFooterBtn v-if="detail.releaseStatus === EnumTaskReleaseStatus.Stopped" color="#999999" | 
 |  |  |         >已停止</PageFooterBtn | 
 |  |  |         {{ GetTaskInfoQueryResultApplyButtonText[detail.applyButton] }} | 
 |  |  |       </PageFooterBtn> | 
 |  |  |       <PageFooterBtn | 
 |  |  |         v-if=" | 
 |  |  |           from === 'hire' && | 
 |  |  |           !( | 
 |  |  |             detail?.checkReceiveMethod === EnumTaskCheckReceiveMethod.CheckIn && | 
 |  |  |             detail?.hireButton === GetTaskInfoQueryResultHireButton.ApplyCheckReceive | 
 |  |  |           ) | 
 |  |  |         " | 
 |  |  |         type="primary" | 
 |  |  |         :disabled="detail?.hireButton !== GetTaskInfoQueryResultHireButton.ApplyCheckReceive" | 
 |  |  |         @click="handleHire" | 
 |  |  |       > | 
 |  |  |         {{ GetTaskInfoQueryResultHireButtonText[detail.hireButton] }} | 
 |  |  |       </PageFooterBtn> | 
 |  |  |       <template v-if="from === 'apply'"> | 
 |  |  |         <PageFooterBtn | 
 |  |  |           v-if="detail?.releaseStatus === EnumTaskReleaseStatus.InProcess" | 
 |  |  |           type="primary" | 
 |  |  |           @click="handleApply" | 
 |  |  |           :disabled="!!detail?.hireStatus" | 
 |  |  |           >{{ `报名(${detail?.applyCount ?? 0}人已报名)` }}</PageFooterBtn | 
 |  |  |         > | 
 |  |  |  | 
 |  |  |         <PageFooterBtn v-if="detail.releaseStatus === EnumTaskReleaseStatus.Stopped" color="#999999" | 
 |  |  |           >已停止</PageFooterBtn | 
 |  |  |         > | 
 |  |  |       </template> | 
 |  |  |     </PageFooter> | 
 |  |  |   </LoadingLayout> | 
 |  |  | </template> | 
 |  |  | 
 |  |  | import { useQuery } from '@tanstack/vue-query'; | 
 |  |  | import * as taskServices from '@12333/services/apiV2/task'; | 
 |  |  | import * as taskUserServices from '@12333/services/apiV2/taskUser'; | 
 |  |  | import * as enterpriseEmployeeServices from '@12333/services/apiV2/enterpriseEmployee'; | 
 |  |  | import { useToggle } from 'senin-mini/hooks'; | 
 |  |  | import { TaskPrice, TaskDetailWelfareItem } from '@12333/components'; | 
 |  |  | import IconAttention from '@/assets/task/icon-attention.png'; | 
 |  |  | 
 |  |  |   EnumSettlementCycleText, | 
 |  |  |   BillingMethodEnumUnit, | 
 |  |  |   EnumTaskReleaseStatus, | 
 |  |  |   GetPersonalApplyTaskInfosQueryStatusColor, | 
 |  |  |   GetTaskInfoQueryResultApplyButtonText, | 
 |  |  |   GetPersonalHireTaskInfosQueryStatusColor, | 
 |  |  |   GetTaskInfoQueryResultHireButtonText, | 
 |  |  |   GetTaskInfoQueryResultHireButton, | 
 |  |  |   GetTaskInfoQueryResultApplyButton, | 
 |  |  |   EnumTaskCheckReceiveMethod, | 
 |  |  | } from '@12333/constants'; | 
 |  |  | import { useAccessLogin } from '@/hooks'; | 
 |  |  |  | 
 |  |  | 
 |  |  | }); | 
 |  |  |  | 
 |  |  | /** | 
 |  |  |  * TODO 缺少已报名人数 手机 投诉举报接口 报名接口 | 
 |  |  |  * TODO 缺少 投诉举报接口 | 
 |  |  |  */ | 
 |  |  |  | 
 |  |  | const { userDetail } = useUser(); | 
 |  |  | const router = Taro.useRouter(); | 
 |  |  | const taskId = router.params?.id ?? ''; | 
 |  |  | const id = router.params?.id ?? ''; | 
 |  |  | const from = router.params?.from ?? ''; | 
 |  |  |  | 
 |  |  | const { | 
 |  |  |   isLoading, | 
 |  |  | 
 |  |  |   data: detail, | 
 |  |  |   refetch, | 
 |  |  | } = useQuery({ | 
 |  |  |   queryKey: ['taskServices/getTaskInfo', taskId], | 
 |  |  |   queryKey: ['taskServices/getTaskInfo', id], | 
 |  |  |   queryFn: async () => { | 
 |  |  |     return await taskServices.getTaskInfo( | 
 |  |  |       { id: taskId }, | 
 |  |  |       { id: id }, | 
 |  |  |       { | 
 |  |  |         showLoading: false, | 
 |  |  |       } | 
 |  |  | 
 |  |  |  | 
 |  |  | const goComplaint = useAccessLogin(() => { | 
 |  |  |   Taro.navigateTo({ | 
 |  |  |     url: `${RouterPath.complaint}?id=${taskId}`, | 
 |  |  |     url: `${RouterPath.complaint}?id=${id}`, | 
 |  |  |   }); | 
 |  |  | }); | 
 |  |  |  | 
 |  |  | 
 |  |  |   } | 
 |  |  | }); | 
 |  |  |  | 
 |  |  | const handleApply = useAccessLogin(async () => { | 
 |  |  |   try { | 
 |  |  |     let params: API.ApplyTaskCommand = { | 
 |  |  |       ids: [taskId], | 
 |  |  |     }; | 
 |  |  |     let res = await taskUserServices.applyTask(params); | 
 |  |  |     if (res) { | 
 |  |  |       Message.success('报名成功', { | 
 |  |  |         onClosed() { | 
 |  |  |           refetch({ type: 'inactive' }); | 
 |  |  |         }, | 
 |  |  |       }); | 
 |  |  |     } | 
 |  |  |   } catch (error) {} | 
 |  |  | }); | 
 |  |  | const handleApply = useAccessReal( | 
 |  |  |   async () => { | 
 |  |  |     try { | 
 |  |  |       let params: API.ApplyTaskCommand = { | 
 |  |  |         ids: [id], | 
 |  |  |       }; | 
 |  |  |       let res = await taskUserServices.applyTask(params); | 
 |  |  |       if (res) { | 
 |  |  |         Message.success('报名成功'); | 
 |  |  |         refetch({ type: 'inactive' }); | 
 |  |  |       } | 
 |  |  |     } catch (error) {} | 
 |  |  |   }, | 
 |  |  |   { message: '实名成功后才可报名,请前往实名认证' } | 
 |  |  | ); | 
 |  |  |  | 
 |  |  | const handleAttention = useAccessLogin(async () => { | 
 |  |  |   try { | 
 |  |  |     await Message.confirm({ | 
 |  |  |       message: `确定${detail.value?.isCollected ? '取消收藏' : '收藏'}吗?`, | 
 |  |  |     }); | 
 |  |  |     // await Message.confirm({ | 
 |  |  |     //   message: `确定${detail.value?.isCollected ? '取消收藏' : '收藏'}吗?`, | 
 |  |  |     // }); | 
 |  |  |     let params: API.CollectTaskCommand = { | 
 |  |  |       ids: [taskId], | 
 |  |  |       ids: [id], | 
 |  |  |       isCollect: !detail.value?.isCollected, | 
 |  |  |     }; | 
 |  |  |     let res = await taskUserServices.collectTask(params); | 
 |  |  |     if (res) { | 
 |  |  |       Message.success('操作成功', { | 
 |  |  |         onClosed() { | 
 |  |  |           refetch({ type: 'inactive' }); | 
 |  |  |         }, | 
 |  |  |       }); | 
 |  |  |       refetch({ type: 'inactive' }); | 
 |  |  |       // Message.success('操作成功', { | 
 |  |  |       //   onClosed() { | 
 |  |  |       //     refetch({ type: 'inactive' }); | 
 |  |  |       //   }, | 
 |  |  |       // }); | 
 |  |  |     } | 
 |  |  |   } catch (error) {} | 
 |  |  | }); | 
 |  |  | 
 |  |  |     }); | 
 |  |  |   } | 
 |  |  | }); | 
 |  |  |  | 
 |  |  | function handleHire() { | 
 |  |  |   Taro.navigateTo({ | 
 |  |  |     url: `${RouterPath.taskSubmitCheck}?id=${id}`, | 
 |  |  |   }); | 
 |  |  | } | 
 |  |  | const handleSign = useAccessReal(() => { | 
 |  |  |   Taro.navigateTo({ | 
 |  |  |     url: `${RouterPath.mineAgreementSignDetail}?id=${detail.value?.enterpriseEmployeeId}`, | 
 |  |  |   }); | 
 |  |  | }); | 
 |  |  |  | 
 |  |  | function goMap() { | 
 |  |  |   Taro.openLocation({ | 
 |  |  |     latitude: detail.value?.latitude, | 
 |  |  |     longitude: detail.value?.longitude, | 
 |  |  |     scale: 18, | 
 |  |  |   }); | 
 |  |  | } | 
 |  |  |  | 
 |  |  | Taro.useDidShow(() => { | 
 |  |  |   refetch(); | 
 |  |  | }); | 
 |  |  | </script> |