| <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> |