From 6968fb6e41787d311addb804b29285aecc553f2d Mon Sep 17 00:00:00 2001 From: wupengfei <834520024@qq.com> Date: 星期二, 05 八月 2025 17:03:47 +0800 Subject: [PATCH] feat: 名片 --- apps/bMiniApp/src/assets/businessCard/icon-phone.png | 0 apps/bMiniApp/src/subpackages/businessCard/businessCard/InnerPage.vue | 8 apps/bMiniApp/src/constants/router.ts | 2 apps/bMiniApp/src/subpackages/businessCard/businessCardDetail/businessCardDetail.vue | 17 ++ apps/bMiniApp/src/subpackages/businessCard/components/BusinessCardDetailItem.vue | 2 apps/bMiniApp/project.private.config.json | 2 apps/bMiniApp/src/subpackages/businessCard/components/BusinessCardView.vue | 25 +- apps/bMiniApp/src/app.config.ts | 7 apps/bMiniApp/src/subpackages/businessCard/businessCardShare/businessCardShare.config.ts | 3 apps/bMiniApp/src/subpackages/businessCard/components/BusinessCardHolderView.vue | 47 +++-- packages/components/src/Card/FlexJobTopView.vue | 8 apps/bMiniApp/src/subpackages/businessCard/businessCardDetail/businessCardDetail.config.ts | 3 packages/components/src/index.ts | 1 apps/bMiniApp/src/subpackages/businessCard/businessCardDetail/InnerPage.vue | 48 ++++++ packages/components/src/Card/BusinessCardHolderCard.vue | 114 ++++++++++++++ apps/bMiniApp/src/subpackages/businessCard/businessCardShare/businessCardShare.vue | 17 ++ apps/bMiniApp/src/subpackages/businessCard/components/BusinessCardDetailInfoView.vue | 97 +++++------ apps/bMiniApp/src/subpackages/businessCard/businessCardShare/InnerPage.vue | 69 ++++++++ 18 files changed, 383 insertions(+), 87 deletions(-) diff --git a/apps/bMiniApp/project.private.config.json b/apps/bMiniApp/project.private.config.json index 34009f7..03021e0 100644 --- a/apps/bMiniApp/project.private.config.json +++ b/apps/bMiniApp/project.private.config.json @@ -80,7 +80,7 @@ }, { "name": "", - "pathName": "subpackages/businessCard/businessCard/businessCard", + "pathName": "subpackages/businessCard/businessCardShare/businessCardShare", "query": "", "launchMode": "default", "scene": null diff --git a/apps/bMiniApp/src/app.config.ts b/apps/bMiniApp/src/app.config.ts index 34f147c..8192a0b 100644 --- a/apps/bMiniApp/src/app.config.ts +++ b/apps/bMiniApp/src/app.config.ts @@ -76,7 +76,12 @@ }, { root: 'subpackages/businessCard', - pages: ['businessCard/businessCard', 'businessCardEdit/businessCardEdit'], + pages: [ + 'businessCard/businessCard', + 'businessCardEdit/businessCardEdit', + 'businessCardDetail/businessCardDetail', + 'businessCardShare/businessCardShare', + ], }, { root: 'subpackages/task', diff --git a/apps/bMiniApp/src/assets/businessCard/icon-phone.png b/apps/bMiniApp/src/assets/businessCard/icon-phone.png new file mode 100644 index 0000000..cd63698 --- /dev/null +++ b/apps/bMiniApp/src/assets/businessCard/icon-phone.png Binary files differ diff --git a/apps/bMiniApp/src/constants/router.ts b/apps/bMiniApp/src/constants/router.ts index 489c816..5130d44 100644 --- a/apps/bMiniApp/src/constants/router.ts +++ b/apps/bMiniApp/src/constants/router.ts @@ -35,6 +35,8 @@ businessCard = '/subpackages/businessCard/businessCard/businessCard', businessCardEdit = '/subpackages/businessCard/businessCardEdit/businessCardEdit', + businessCardDetail = '/subpackages/businessCard/businessCardDetail/businessCardDetail', + businessCardShare = '/subpackages/businessCard/businessCardShare/businessCardShare', publishTask = '/subpackages/task/publishTask/publishTask', taskCheck = '/subpackages/task/taskCheck/taskCheck', diff --git a/apps/bMiniApp/src/subpackages/businessCard/businessCard/InnerPage.vue b/apps/bMiniApp/src/subpackages/businessCard/businessCard/InnerPage.vue index 752d047..ce8150a 100644 --- a/apps/bMiniApp/src/subpackages/businessCard/businessCard/InnerPage.vue +++ b/apps/bMiniApp/src/subpackages/businessCard/businessCard/InnerPage.vue @@ -5,7 +5,7 @@ class="home-tabs" isTransparent title-gutter="12" - title-scroll + fullHeight > <ProTabPane :title="`鎴戠殑鍚嶇墖`" pane-key="1"> <BusinessCardView></BusinessCardView> @@ -30,10 +30,4 @@ <style lang="scss"> @import '@/styles/common.scss'; - -.businessCard-page-wrapper { - .nut-tab-pane { - background-color: transparent; - } -} </style> diff --git a/apps/bMiniApp/src/subpackages/businessCard/businessCardDetail/InnerPage.vue b/apps/bMiniApp/src/subpackages/businessCard/businessCardDetail/InnerPage.vue new file mode 100644 index 0000000..f1f4e1e --- /dev/null +++ b/apps/bMiniApp/src/subpackages/businessCard/businessCardDetail/InnerPage.vue @@ -0,0 +1,48 @@ +<template> + <LoadingLayout :loading="isLoading" :error="isError" :loadError="refetch"> + <BusinessCardDetailInfoView> </BusinessCardDetailInfoView> + <PageFooter> + <PageFooterBtn type="primary" class="business-card-btn">鏀朵笅鍚嶇墖</PageFooterBtn> + <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 * as flexWorkerServices from '@12333/services/api/FlexWorker'; +import BusinessCardDetailInfoView from '../components/BusinessCardDetailInfoView.vue'; + +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> diff --git a/apps/bMiniApp/src/subpackages/businessCard/businessCardDetail/businessCardDetail.config.ts b/apps/bMiniApp/src/subpackages/businessCard/businessCardDetail/businessCardDetail.config.ts new file mode 100644 index 0000000..305fdb1 --- /dev/null +++ b/apps/bMiniApp/src/subpackages/businessCard/businessCardDetail/businessCardDetail.config.ts @@ -0,0 +1,3 @@ +export default definePageConfig({ + disableScroll: true, +}); diff --git a/apps/bMiniApp/src/subpackages/businessCard/businessCardDetail/businessCardDetail.vue b/apps/bMiniApp/src/subpackages/businessCard/businessCardDetail/businessCardDetail.vue new file mode 100644 index 0000000..1c0c3c8 --- /dev/null +++ b/apps/bMiniApp/src/subpackages/businessCard/businessCardDetail/businessCardDetail.vue @@ -0,0 +1,17 @@ +<template> + <PageLayoutWithBg class="businessCardDetail-page-wrapper" :title="'鍚嶇墖璇︽儏'"> + <InnerPage></InnerPage> + </PageLayoutWithBg> +</template> + +<script setup lang="ts"> +import InnerPage from './InnerPage.vue'; + +defineOptions({ + name: 'businessCardDetail', +}); +</script> + +<style lang="scss"> +@import '@/styles/common.scss'; +</style> diff --git a/apps/bMiniApp/src/subpackages/businessCard/businessCardShare/InnerPage.vue b/apps/bMiniApp/src/subpackages/businessCard/businessCardShare/InnerPage.vue new file mode 100644 index 0000000..f34d2f0 --- /dev/null +++ b/apps/bMiniApp/src/subpackages/businessCard/businessCardShare/InnerPage.vue @@ -0,0 +1,69 @@ +<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> diff --git a/apps/bMiniApp/src/subpackages/businessCard/businessCardShare/businessCardShare.config.ts b/apps/bMiniApp/src/subpackages/businessCard/businessCardShare/businessCardShare.config.ts new file mode 100644 index 0000000..305fdb1 --- /dev/null +++ b/apps/bMiniApp/src/subpackages/businessCard/businessCardShare/businessCardShare.config.ts @@ -0,0 +1,3 @@ +export default definePageConfig({ + disableScroll: true, +}); diff --git a/apps/bMiniApp/src/subpackages/businessCard/businessCardShare/businessCardShare.vue b/apps/bMiniApp/src/subpackages/businessCard/businessCardShare/businessCardShare.vue new file mode 100644 index 0000000..cbb1d85 --- /dev/null +++ b/apps/bMiniApp/src/subpackages/businessCard/businessCardShare/businessCardShare.vue @@ -0,0 +1,17 @@ +<template> + <PageLayoutWithBg class="businessCardShare-page-wrapper" :title="'鍒嗕韩鍚嶇墖'"> + <InnerPage></InnerPage> + </PageLayoutWithBg> +</template> + +<script setup lang="ts"> +import InnerPage from './InnerPage.vue'; + +defineOptions({ + name: 'businessCardShare', +}); +</script> + +<style lang="scss"> +@import '@/styles/common.scss'; +</style> diff --git a/apps/bMiniApp/src/subpackages/businessCard/components/BusinessCardDetailInfoView.vue b/apps/bMiniApp/src/subpackages/businessCard/components/BusinessCardDetailInfoView.vue index 4b5c95d..dc7b383 100644 --- a/apps/bMiniApp/src/subpackages/businessCard/components/BusinessCardDetailInfoView.vue +++ b/apps/bMiniApp/src/subpackages/businessCard/components/BusinessCardDetailInfoView.vue @@ -1,26 +1,29 @@ <template> <ContentScrollView class="business-card-detail-info-wrapper"> - <TaskCheckPersonalView :name="'1231231'" :contactPhone="'133'"> - <template #actions> - <nut-button type="primary" @click="emit('edit')">缂栬緫</nut-button> - </template> - </TaskCheckPersonalView> - <div class="business-card-detail"> - <BusinessCardDetailItem :icon="IconWechat" :value="`寰俊锛�${'13333333333'}`" /> - <BusinessCardDetailItem :icon="IconPosition" :value="`鑱屼綅锛�${'缁忕悊'}`" /> - <BusinessCardDetailItem :icon="IconEmail" :value="`閭锛�${'yangyang@123.com'}`" /> - <BusinessCardDetailItem :icon="IconCompany" :value="`鍏徃锛�${'鏉窞浜哄姏鏃犲咖绉戞妧'}`" /> - <BusinessCardDetailItem :icon="IconAddress" :value="`鍦板潃锛�${'鏉窞甯備笂鍩庡尯'}`" /> + <div class="business-card-detail-company-content"> + <TaskCheckPersonalView :name="'1231231'" :contactPhone="'133'"> + <template #actions> + <slot name="actions"></slot> + </template> + </TaskCheckPersonalView> + <div class="business-card-detail"> + <BusinessCardDetailItem :icon="IconWechat" :value="`寰俊锛�${'13333333333'}`" /> + <BusinessCardDetailItem :icon="IconPosition" :value="`鑱屼綅锛�${'缁忕悊'}`" /> + <BusinessCardDetailItem :icon="IconEmail" :value="`閭锛�${'yangyang@123.com'}`" /> + <BusinessCardDetailItem :icon="IconCompany" :value="`鍏徃锛�${'鏉窞浜哄姏鏃犲咖绉戞妧'}`" /> + <BusinessCardDetailItem :icon="IconAddress" :value="`鍦板潃锛�${'鏉窞甯備笂鍩庡尯'}`" /> + </div> + </div> + + <div class="business-card-detail-company-content company-intro"> + <div class="business-card-detail-company-intro-title">鍏徃绠�浠�</div> + <div class="business-card-detail-company-intro-content"> + {{ + '鎴戞槸鍏徃鐨勪笟鍔$畝浠嬫垜鏄叕鍙哥殑涓氬姟绠�浠嬫垜鏄叕鍙哥殑涓氬姟绠� 浠嬫垜鏄叕鍙哥殑涓氬姟绠�浠嬫垜鏄叕鍙哥殑涓氬姟绠�浠嬫垜鏄叕鍙哥殑涓氬姟 绠�浠嬫垜鏄叕鍙哥殑涓氬姟绠�浠嬫垜鏄叕鍙哥殑涓氬姟绠�浠嬫垜鏄叕鍙哥殑涓� 鍔$畝浠嬫垜鏄叕鍙哥殑涓氬姟绠�浠嬫垜鏄叕鍙哥殑涓氬姟绠�浠�' + }} + </div> </div> </ContentScrollView> - <div class="business-card-detail-company-intro"> - <div class="business-card-detail-company-intro-title">鍏徃绠�浠�</div> - <div class="business-card-detail-company-intro-content"> - {{ - '鎴戞槸鍏徃鐨勪笟鍔$畝浠嬫垜鏄叕鍙哥殑涓氬姟绠�浠嬫垜鏄叕鍙哥殑涓氬姟绠� 浠嬫垜鏄叕鍙哥殑涓氬姟绠�浠嬫垜鏄叕鍙哥殑涓氬姟绠�浠嬫垜鏄叕鍙哥殑涓氬姟 绠�浠嬫垜鏄叕鍙哥殑涓氬姟绠�浠嬫垜鏄叕鍙哥殑涓氬姟绠�浠嬫垜鏄叕鍙哥殑涓� 鍔$畝浠嬫垜鏄叕鍙哥殑涓氬姟绠�浠嬫垜鏄叕鍙哥殑涓氬姟绠�浠�' - }} - </div> - </div> </template> <script setup lang="ts"> @@ -35,48 +38,42 @@ defineOptions({ name: 'BusinessCardDetailInfoView', }); - -const emit = defineEmits<{ - (e: 'edit'): void; -}>(); </script> <style lang="scss"> @import '@/styles/common.scss'; .business-card-detail-info-wrapper { - background-color: #ffffff; - padding-top: 20px; + background-color: transparent; - .flexJob-card-top-wrapper { - padding-top: 40px; - padding-bottom: 32px; - border-bottom: 1px solid #d9d9d9; - } + .business-card-detail-company-content { + background-color: #ffffff; + border-radius: 12px; + padding: 30px 24px; - .business-card-detail { - padding: 20px 0 10px; - } -} + .flexJob-card-top-wrapper { + padding-bottom: 32px; + border-bottom: 1px solid #d9d9d9; + } -.business-card-detail-company-intro { - background-color: #ffffff; - margin-top: 30px; - padding: 30px 24px; + &.company-intro { + margin-top: 30px; - .business-card-detail-company-intro-title { - font-size: 28px; - line-height: 40px; - color: boleGetCssVar('text-color', 'primary'); - font-weight: 600; - margin-bottom: 10px; - } + .business-card-detail-company-intro-title { + font-size: 28px; + line-height: 40px; + color: boleGetCssVar('text-color', 'primary'); + font-weight: 600; + margin-bottom: 10px; + } - .business-card-detail-company-intro-content { - font-size: 24px; - line-height: 36px; - color: #4e5969; - font-weight: 400; + .business-card-detail-company-intro-content { + font-size: 24px; + line-height: 36px; + color: #4e5969; + font-weight: 400; + } + } } } </style> diff --git a/apps/bMiniApp/src/subpackages/businessCard/components/BusinessCardDetailItem.vue b/apps/bMiniApp/src/subpackages/businessCard/components/BusinessCardDetailItem.vue index 4586ecd..685a0cf 100644 --- a/apps/bMiniApp/src/subpackages/businessCard/components/BusinessCardDetailItem.vue +++ b/apps/bMiniApp/src/subpackages/businessCard/components/BusinessCardDetailItem.vue @@ -22,7 +22,7 @@ @import '@/styles/common.scss'; .business-card-detail-item { - margin-bottom: 24px; + margin-top: 24px; display: flex; align-items: center; diff --git a/apps/bMiniApp/src/subpackages/businessCard/components/BusinessCardHolderView.vue b/apps/bMiniApp/src/subpackages/businessCard/components/BusinessCardHolderView.vue index 7072562..3cec948 100644 --- a/apps/bMiniApp/src/subpackages/businessCard/components/BusinessCardHolderView.vue +++ b/apps/bMiniApp/src/subpackages/businessCard/components/BusinessCardHolderView.vue @@ -1,31 +1,35 @@ <template> <InfiniteLoading scrollViewClassName="common-infinite-scroll-list" v-bind="infiniteLoadingProps"> <template #renderItem="{ item }"> - <FlexJobCard - :name="item.name" - :age="item.age" - :genderType="item.genderType" - :workExperience="item.workExperience" + <BusinessCardHolderCard + :name="'item.name'" + :age="20" + :genderType="1" + :isRealName="true" + :show-footer-left="false" > - <template #footerLeft> - <div class="flexJob-card-footer-text">{{ FlexTaskWorkerHireEnum[item.hireStatus] }}</div> + <template #detail> + <div class="businessCardHolder-card-detail"> + <div class="businessCardHolder-card-detail-item">{{ `寰俊锛�${'13333333333'}` }}</div> + <div class="businessCardHolder-card-detail-item"> + {{ `鍏徃锛�${'鏉窞浜哄姏鏃犲咖绉戞妧'}` }} + </div> + </div> </template> <template #footerRight> - <nut-button type="primary" @click="handleDelete()">鍒犻櫎</nut-button> + <nut-button type="danger" plain @click="handleDelete()">鍒犻櫎</nut-button> <nut-button type="primary" @click="goForward()">杞彂</nut-button> </template> - </FlexJobCard> + </BusinessCardHolderCard> </template> </InfiniteLoading> </template> <script setup lang="ts"> import { OrderInputType } from '@12333/constants'; -import { RouterPath } from '@/constants'; -import { FlexTaskWorkerHireEnum } from '@12333/constants/task'; import { useInfiniteLoading } from '@12333/hooks'; -import * as flexWorkerServices from '@12333/services/api/FlexWorker'; -import { FlexJobCard } from '@12333/components'; +import * as flexEnterpriseServices from '@12333/services/api/FlexEnterprise'; +import { BusinessCardHolderCard } from '@12333/components'; import Taro from '@tarojs/taro'; defineOptions({ @@ -42,16 +46,16 @@ pageModel: { rows: 20, page: pageParam, - orderInput: [{ property: 'creationTime', order: OrderInputType.Desc }], + orderInput: [{ property: 'id', order: OrderInputType.Desc }], }, }; - return flexWorkerServices.getFlexTaskWorkerApplyList(params, { + return flexEnterpriseServices.getFlexEnterpriseList(params, { showLoading: false, }); }, { - queryKey: ['flexWorkerServices/getFlexTaskWorkerApplyList'], + queryKey: ['flexEnterpriseServices/getFlexEnterpriseList'], } ); @@ -62,4 +66,15 @@ <style lang="scss"> @import '@/styles/common.scss'; + +.businessCardHolder-card-detail { + margin-top: 10px; + + .businessCardHolder-card-detail-item { + font-size: 24px; + font-weight: 400; + color: boleGetCssVar('text-color', 'regular'); + line-height: 36px; + } +} </style> diff --git a/apps/bMiniApp/src/subpackages/businessCard/components/BusinessCardView.vue b/apps/bMiniApp/src/subpackages/businessCard/components/BusinessCardView.vue index aa1186c..b933c79 100644 --- a/apps/bMiniApp/src/subpackages/businessCard/components/BusinessCardView.vue +++ b/apps/bMiniApp/src/subpackages/businessCard/components/BusinessCardView.vue @@ -1,7 +1,18 @@ <template> <LoadingLayout :loading="isLoading" :error="isError" :loadError="refetch"> - <BusinessCardDetailInfoView @edit="goEditBusinessCard"></BusinessCardDetailInfoView> - <PageFooterBtn type="primary" class="business-card-btn">閫掑悕鐗�</PageFooterBtn> + <BusinessCardDetailInfoView> + <template #actions> + <nut-button + class="business-card-detail-info-edit-button" + type="primary" + @click="goEditBusinessCard" + >缂栬緫</nut-button + > + </template> + </BusinessCardDetailInfoView> + <PageFooter> + <PageFooterBtn type="primary" class="business-card-btn">閫掑悕鐗�</PageFooterBtn> + </PageFooter> </LoadingLayout> </template> @@ -43,18 +54,12 @@ url: `${RouterPath.businessCardEdit}?id=${id}`, }); } - -function handleBusinessCard() {} </script> <style lang="scss"> @import '@/styles/common.scss'; -.businessCard-page-wrapper { - .business-card-btn { - width: 100%; - margin: 40px auto 0; - font-size: 28px; - } +.business-card-detail-info-edit-button { + height: 52px; } </style> diff --git a/packages/components/src/Card/BusinessCardHolderCard.vue b/packages/components/src/Card/BusinessCardHolderCard.vue new file mode 100644 index 0000000..72cc153 --- /dev/null +++ b/packages/components/src/Card/BusinessCardHolderCard.vue @@ -0,0 +1,114 @@ +<template> + <div class="businessCardHolder-card-wrapper"> + <FlexJobTopView + :name="name" + :age="age" + :genderType="genderType" + :isRealName="isRealName" + :arrangeCount="arrangeCount" + :educationalLevel="educationalLevel" + > + <template #detail> + <slot name="detail"> </slot> + </template> + </FlexJobTopView> + + <div class="businessCardHolder-card-footer"> + <div class="businessCardHolder-card-footer-left-wrapper"> + <div class="businessCardHolder-card-footer-left" v-if="showFooterLeft"> + <slot name="footerLeft"> </slot> + </div> + </div> + <div class="businessCardHolder-card-footer-right" v-if="showFooterRight"> + <slot name="footerRight"> </slot> + </div> + </div> + </div> +</template> + +<script setup lang="ts"> +import { CommonTaskCardProps } from './card'; +import FlexJobTopView from './FlexJobTopView.vue'; +import { Gender } from '@12333/constants'; + +defineOptions({ + name: 'BusinessCardHolderCard', +}); + +type Props = CommonTaskCardProps & { + showFooterLeft?: boolean; + showFooterRight?: boolean; + showDoneDetail?: boolean; + + name?: string; + genderType?: Gender; + age?: number; + isRealName?: boolean; + educationalLevel?: string; + arrangeCount?: number; +}; + +const props = withDefaults(defineProps<Props>(), { + showFooterLeft: true, + showFooterRight: true, + showDoneDetail: true, +}); +</script> + +<style lang="scss"> +@import '@/styles/common.scss'; + +.businessCardHolder-card-wrapper { + padding: 32px 24px 20px; + margin-bottom: 24px; + background-color: #fff; + border-radius: 12px; + + &:last-child { + margin-bottom: 0; + } + + .businessCardHolder-card-top-wrapper { + margin-bottom: 38px; + } + + .businessCardHolder-card-done-list { + font-size: 24px; + line-height: 36px; + color: boleGetCssVar('text-color', 'primary'); + margin-bottom: 12px; + @include ellipsis; + } + + .businessCardHolder-card-footer { + display: flex; + align-items: center; + border-top: #d9d9d9 1px solid; + padding-top: 24px; + margin-top: 18px; + + .businessCardHolder-card-footer-left-wrapper { + flex: 1; + min-width: 0; + } + + .businessCardHolder-card-footer-left { + .businessCardHolder-card-footer-text { + font-size: 24px; + line-height: 36px; + color: boleGetCssVar('color', 'primary'); + } + } + + .businessCardHolder-card-footer-right { + --nut-button-default-font-size: 24px; + --nut-button-default-height: 52px; + --nut-button-default-line-height: 49px; + + .nut-button { + min-width: 144rpx; + } + } + } +} +</style> diff --git a/packages/components/src/Card/FlexJobTopView.vue b/packages/components/src/Card/FlexJobTopView.vue index ba2b4fd..35f10ac 100644 --- a/packages/components/src/Card/FlexJobTopView.vue +++ b/packages/components/src/Card/FlexJobTopView.vue @@ -12,7 +12,9 @@ /> <img v-else :src="IconFemale" class="flexJob-card-top-info-gender-icon" /> </div> - <div class="flexJob-card-top-info-auth">{{ isRealName ? '宸插疄鍚�' : '鏈疄鍚�' }}</div> + <div class="flexJob-card-top-info-auth" :class="{ 'is-real-name': isRealName }"> + {{ isRealName ? '宸插疄鍚�' : '鏈疄鍚�' }} + </div> </div> <slot name="detail"> <div class="flexJob-card-top-info-detail"> @@ -97,6 +99,10 @@ font-size: 28px; line-height: 34px; flex-shrink: 0; + + &.is-real-name { + color: #2a9e1b; + } } } diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index 8702eca..e05bd94 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -27,6 +27,7 @@ export { default as MyTaskCard } from './Card/MyTaskCard.vue'; export { default as SignCard } from './Card/SignCard.vue'; export { default as FlexJobCard } from './Card/FlexJobCard.vue'; +export { default as BusinessCardHolderCard } from './Card/BusinessCardHolderCard.vue'; export { default as TaskPrice } from './Card/TaskPrice.vue'; export { default as TaskDetailWelfareItem } from './Card/TaskDetailWelfareItem.vue'; export { default as FlexJobTopView } from './Card/FlexJobTopView.vue'; -- Gitblit v1.9.1