| | |
| | | <template> |
| | | <PageLayoutWithBg class="flexJobDetail-page-wrapper" title="灵工详情" :need-auth="false"> |
| | | <LoadingLayout :loading="isLoading" :error="isError" :loadError="refetch"> |
| | | <ContentView 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 ? hiddenIDNumberForEnd6('330902199909123456') : '立即联系后可查看' }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </ContentView> |
| | | <ProTabs |
| | | v-model="tab" |
| | | name="flexJobDetail-tab" |
| | | :showSmile="false" |
| | | class="flexJobDetail-tabs" |
| | | isTransparent |
| | | title-gutter="8" |
| | | fullHeight |
| | | > |
| | | <ProTabPane :title="`简历`" pane-key="1"> |
| | | <curriculumView /> |
| | | </ProTabPane> |
| | | <ProTabPane :title="`经历`" pane-key="2"> |
| | | <experienceView /> |
| | | </ProTabPane> |
| | | </ProTabs> |
| | | <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 :isCollapse="isCollapse"> |
| | | <template #footer> |
| | | <PageFooterAction |
| | | :icon="IconShare" |
| | | text="分享" |
| | | :isFlex="false" |
| | | openType="share" |
| | | ></PageFooterAction> |
| | | <PageFooterAction |
| | | :icon="IconAttentionActive" |
| | | text="收藏" |
| | | :isFlex="false" |
| | | @click="handleAttention" |
| | | ></PageFooterAction> |
| | | <PageFooterBtn type="primary" @click="toggle">立即联系</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, ProTabs, ProTabPane } from '@12333/components'; |
| | | import * as flexWorkerServices from '@12333/services/api/FlexWorker'; |
| | | 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 curriculumView from './components/curriculumView.vue'; |
| | | import experienceView from './components/experienceView.vue'; |
| | | import { hiddenIDNumberForEnd6 } from '@12333/utils'; |
| | | import { Message } from '@12333/utils'; |
| | | |
| | | defineOptions({ |
| | | name: 'flexJobDetail', |
| | |
| | | const router = Taro.useRouter(); |
| | | const taskId = router.params?.id ?? ''; |
| | | |
| | | const tab = ref('1'); |
| | | |
| | | const { |
| | | isLoading, |
| | | isError, |
| | | data: detail, |
| | | refetch, |
| | | } = useQuery({ |
| | | queryKey: ['orderServices/getOrdeForDetail', taskId], |
| | | queryKey: ['flexWorkerServices/getOrdeForDetail', taskId], |
| | | queryFn: async () => { |
| | | return await orderServices.getOrdeForDetail( |
| | | return await flexWorkerServices.getOrdeForDetail( |
| | | { id: taskId }, |
| | | { |
| | | showLoading: false, |
| | |
| | | }); |
| | | |
| | | const { isCollapse, toggle } = useToggle(); |
| | | |
| | | async function handleAttention() { |
| | | try { |
| | | let params: API.CollectFlexWorkerResumeInput = { |
| | | flexWorkerId: detail.value?.flexWorkerId, |
| | | userResumeId: detail.value?.userResumeId, |
| | | }; |
| | | let res = await flexWorkerServices.collectFlexWorkerResume(params); |
| | | if (res) { |
| | | Message.success('收藏成功'); |
| | | } |
| | | } catch (error) {} |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | @import '@/styles/common.scss'; |
| | | |
| | | .flexJobDetail-page-wrapper { |
| | | .flexJobDetail-top { |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | .flexJobDetail-contact-info { |
| | | padding-left: 130px; |
| | | margin-bottom: 78px; |
| | | |
| | | .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; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |