<template> 
 | 
  <LoadingLayout :loading="isLoading" :error="isError" :loadError="refetch"> 
 | 
    <ContentScrollView> 
 | 
      <BusinessCardHolderCard 
 | 
        :name="'item.name'" 
 | 
        :age="20" 
 | 
        :genderType="1" 
 | 
        :isRealName="true" 
 | 
        :show-footer-left="false" 
 | 
        :show-footer-right="false" 
 | 
      > 
 | 
        <template #detail> 
 | 
          <div class="businessCardHolder-card-detail"> 
 | 
            <BusinessCardDetailItem :icon="IconPhone" :value="`手机:${'13333333333'}`" /> 
 | 
            <BusinessCardDetailItem :icon="IconWechat" :value="`微信:${'13333333333'}`" /> 
 | 
            <BusinessCardDetailItem :icon="IconCompany" :value="`公司:${'杭州人力无忧科技'}`" /> 
 | 
          </div> 
 | 
        </template> 
 | 
      </BusinessCardHolderCard> 
 | 
    </ContentScrollView> 
 | 
  
 | 
    <PageFooter> 
 | 
      <PageFooterBtn type="primary" class="business-card-btn">下载图片</PageFooterBtn> 
 | 
      <PageFooterBtn type="primary" class="business-card-btn">分享给微信好友</PageFooterBtn> 
 | 
    </PageFooter> 
 | 
  </LoadingLayout> 
 | 
</template> 
 | 
  
 | 
<script setup lang="ts"> 
 | 
import { useQuery } from '@tanstack/vue-query'; 
 | 
import Taro from '@tarojs/taro'; 
 | 
import BusinessCardDetailItem from '../components/BusinessCardDetailItem.vue'; 
 | 
import { BusinessCardHolderCard } from '@12333/components'; 
 | 
import * as flexWorkerServices from '@12333/services/api/FlexWorker'; 
 | 
import IconWechat from '@/assets/businessCard/icon-wechat.png'; 
 | 
import IconCompany from '@/assets/businessCard/icon-company.png'; 
 | 
import IconPhone from '@/assets/businessCard/icon-phone.png'; 
 | 
  
 | 
defineOptions({ 
 | 
  name: 'InnerPage', 
 | 
}); 
 | 
  
 | 
const router = Taro.useRouter(); 
 | 
  
 | 
const id = router.params?.id; 
 | 
  
 | 
const { 
 | 
  isLoading, 
 | 
  isError, 
 | 
  data: detail, 
 | 
  refetch, 
 | 
} = useQuery({ 
 | 
  queryKey: ['flexWorkerServices/getFlexTaskDto', id], 
 | 
  queryFn: async () => { 
 | 
    return await flexWorkerServices.getFlexTaskDto( 
 | 
      { id: id }, 
 | 
      { 
 | 
        showLoading: false, 
 | 
      } 
 | 
    ); 
 | 
  }, 
 | 
  placeholderData: () => ({} as API.GetFlexTaskDtoOutput), 
 | 
  onSuccess(data) {}, 
 | 
}); 
 | 
</script> 
 | 
  
 | 
<style lang="scss"> 
 | 
@import '@/styles/common.scss'; 
 | 
</style> 
 |