|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <PageLayoutWithBg class="flexJobDetail-page-wrapper" title="灵工详情" :need-auth="false"> | 
|---|
|  |  |  | <LoadingLayout :loading="isLoading" :error="isError" :loadError="refetch"> | 
|---|
|  |  |  | <ContentScrollView style="background-color: transparent"> | 
|---|
|  |  |  | <FlexJobTopView size="small" class="flexJobDetail-top" /> | 
|---|
|  |  |  | <div class="flexJobDetail-contact-info"> | 
|---|
|  |  |  | <div class="flexJobDetail-contact-info-item"> | 
|---|
|  |  |  | <div class="flexJobDetail-contact-info-item-label">手机号:</div> | 
|---|
|  |  |  | <div class="flexJobDetail-contact-info-item-text"> | 
|---|
|  |  |  | {{ isCollapse ? '13333333333' : '立即联系后可查看' }} | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="flexJobDetail-contact-info-item"> | 
|---|
|  |  |  | <div class="flexJobDetail-contact-info-item-label">身份证号:</div> | 
|---|
|  |  |  | <div class="flexJobDetail-contact-info-item-text"> | 
|---|
|  |  |  | {{ isCollapse ? '330902199909******' : '立即联系后可查看' }} | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </ContentScrollView> | 
|---|
|  |  |  | <PageFooter> | 
|---|
|  |  |  | <PageFooterAction | 
|---|
|  |  |  | :icon="IconShare" | 
|---|
|  |  |  | text="分享" | 
|---|
|  |  |  | :isFlex="false" | 
|---|
|  |  |  | openType="share" | 
|---|
|  |  |  | ></PageFooterAction> | 
|---|
|  |  |  | <PageFooterAction | 
|---|
|  |  |  | :icon="IconAttentionActive" | 
|---|
|  |  |  | text="收藏" | 
|---|
|  |  |  | :isFlex="false" | 
|---|
|  |  |  | ></PageFooterAction> | 
|---|
|  |  |  | <PageFooterBtn type="primary" @click="toggle">立即联系</PageFooterBtn> | 
|---|
|  |  |  | </PageFooter> | 
|---|
|  |  |  | <JobDetailContent | 
|---|
|  |  |  | :avatar="userResumeInfo.avatar" | 
|---|
|  |  |  | :name="userResumeInfo.name" | 
|---|
|  |  |  | :age="userResumeInfo.age" | 
|---|
|  |  |  | :isReal="userResumeInfo.isReal" | 
|---|
|  |  |  | :gender="userResumeInfo.gender" | 
|---|
|  |  |  | :personalIdentityContent="userResumeInfo.personalIdentityContent" | 
|---|
|  |  |  | :educationalBackgroundContent="userResumeInfo.educationalBackgroundContent" | 
|---|
|  |  |  | :taskCount="userResumeInfo.taskCount" | 
|---|
|  |  |  | :contactPhoneNumber="userResumeInfo.contactPhoneNumber" | 
|---|
|  |  |  | :identity="userResumeInfo.identity" | 
|---|
|  |  |  | :isCollapse="isCollapse" | 
|---|
|  |  |  | :userExpectJobs="userResumeInfo.userExpectJobs" | 
|---|
|  |  |  | :freeTime="userResumeInfo.freeTime" | 
|---|
|  |  |  | :jobSeekingStatus="userResumeInfo.jobSeekingStatus" | 
|---|
|  |  |  | :userCredentials="userResumeInfo.userCredentials" | 
|---|
|  |  |  | :workSeniority="userResumeInfo.workSeniority" | 
|---|
|  |  |  | :workExperience="userResumeInfo.workExperience" | 
|---|
|  |  |  | :photos="userResumeInfo.photos" | 
|---|
|  |  |  | :height="userResumeInfo.height" | 
|---|
|  |  |  | :weight="userResumeInfo.weight" | 
|---|
|  |  |  | :videos="userResumeInfo.videos" | 
|---|
|  |  |  | :taskInfoUsers="userResumeInfo.taskInfoUsers" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <template #footer> | 
|---|
|  |  |  | <PageFooterAction | 
|---|
|  |  |  | :icon="IconShare" | 
|---|
|  |  |  | text="分享" | 
|---|
|  |  |  | :isFlex="false" | 
|---|
|  |  |  | openType="share" | 
|---|
|  |  |  | ></PageFooterAction> | 
|---|
|  |  |  | <PageFooterAction | 
|---|
|  |  |  | :icon="userResumeInfo.isCollected ? IconAttentionActive : IconAttention" | 
|---|
|  |  |  | text="收藏" | 
|---|
|  |  |  | :isFlex="false" | 
|---|
|  |  |  | @click="handleAttention" | 
|---|
|  |  |  | ></PageFooterAction> | 
|---|
|  |  |  | <PageFooterBtn type="primary" @click="handleContact">立即联系</PageFooterBtn> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </JobDetailContent> | 
|---|
|  |  |  | </LoadingLayout> | 
|---|
|  |  |  | </PageLayoutWithBg> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | 
|---|
|  |  |  | <script setup lang="ts"> | 
|---|
|  |  |  | import Taro from '@tarojs/taro'; | 
|---|
|  |  |  | import { useQuery } from '@tanstack/vue-query'; | 
|---|
|  |  |  | import * as orderServices from '@12333/services/api/Order'; | 
|---|
|  |  |  | import { FlexJobTopView } from '@12333/components'; | 
|---|
|  |  |  | import * as userResumeServices from '@12333/services/apiV2/userResume'; | 
|---|
|  |  |  | import IconShare from '@/assets/flexJob/icon-share.png'; | 
|---|
|  |  |  | import IconAttention from '@/assets/flexJob/icon-attention-lg.png'; | 
|---|
|  |  |  | import IconAttentionActive from '@/assets/flexJob/icon-attention-lg-active.png'; | 
|---|
|  |  |  | import { useToggle } from 'senin-mini/hooks'; | 
|---|
|  |  |  | import { Message } from '@12333/utils'; | 
|---|
|  |  |  | import { useUserResume } from '@12333/hooks'; | 
|---|
|  |  |  | import { useAccessLogin } from '@/hooks'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | defineOptions({ | 
|---|
|  |  |  | name: 'flexJobDetail', | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const router = Taro.useRouter(); | 
|---|
|  |  |  | const taskId = router.params?.id ?? ''; | 
|---|
|  |  |  | const userId = router.params?.userId ?? ''; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const { | 
|---|
|  |  |  | isLoading, | 
|---|
|  |  |  | isError, | 
|---|
|  |  |  | data: detail, | 
|---|
|  |  |  | refetch, | 
|---|
|  |  |  | } = useQuery({ | 
|---|
|  |  |  | queryKey: ['orderServices/getOrdeForDetail', taskId], | 
|---|
|  |  |  | queryFn: async () => { | 
|---|
|  |  |  | return await orderServices.getOrdeForDetail( | 
|---|
|  |  |  | { id: taskId }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | showLoading: false, | 
|---|
|  |  |  | } | 
|---|
|  |  |  | ); | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | placeholderData: () => ({} as API.OrderInfoDto), | 
|---|
|  |  |  | const { isLoading, isError, userResumeInfo, refetch } = useUserResume({ | 
|---|
|  |  |  | userId: userId, | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const { isCollapse, toggle } = useToggle(); | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <style lang="scss"> | 
|---|
|  |  |  | @import '@/styles/common.scss'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .flexJobDetail-page-wrapper { | 
|---|
|  |  |  | .flexJobDetail-top { | 
|---|
|  |  |  | margin-bottom: 20px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .flexJobDetail-contact-info { | 
|---|
|  |  |  | padding-left: 130px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .flexJobDetail-contact-info-item { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | font-weight: 400; | 
|---|
|  |  |  | font-size: 24px; | 
|---|
|  |  |  | line-height: 28px; | 
|---|
|  |  |  | margin-bottom: 22px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | &:last-child { | 
|---|
|  |  |  | margin-bottom: 0; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .flexJobDetail-contact-info-item-label { | 
|---|
|  |  |  | color: boleGetCssVar('text-color', 'secondary'); | 
|---|
|  |  |  | margin-right: 8px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .flexJobDetail-contact-info-item-text { | 
|---|
|  |  |  | color: boleGetCssVar('text-color', 'primary'); | 
|---|
|  |  |  | flex: 1; | 
|---|
|  |  |  | min-width: 0; | 
|---|
|  |  |  | @include ellipsis; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | const handleContact = useAccessLogin(async () => { | 
|---|
|  |  |  | try { | 
|---|
|  |  |  | if (!isCollapse.value) { | 
|---|
|  |  |  | await userResumeServices.contactUserResume({ id: userId }); | 
|---|
|  |  |  | toggle(); | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | Taro.makePhoneCall({ | 
|---|
|  |  |  | phoneNumber: userResumeInfo.value.contactPhoneNumber, | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } catch (error) {} | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | async function handleAttention() { | 
|---|
|  |  |  | try { | 
|---|
|  |  |  | let params: API.CollectUserResumeCommand = { | 
|---|
|  |  |  | id: userId, | 
|---|
|  |  |  | isCollected: !userResumeInfo.value.isCollected, | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | let res = await userResumeServices.collectUserResume(params); | 
|---|
|  |  |  | if (res) { | 
|---|
|  |  |  | refetch({ type: 'inactive' }); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } catch (error) {} | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </style> | 
|---|
|  |  |  | </script> | 
|---|