wupengfei
2025-03-13 186234cb3833e620aa0ae46212fe337eb2d6e77d
apps/bMiniApp/src/subpackages/flexJob/flexJobDetail/flexJobDetail.vue
@@ -1,53 +1,23 @@
<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>
@@ -55,15 +25,12 @@
<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',
@@ -72,17 +39,15 @@
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,
@@ -93,44 +58,21 @@
});
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>