feat: 名片

wupengfei

4 天以前 6968fb6e41787d311addb804b29285aecc553f2d

feat: 名片

 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

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

 apps/bMiniApp/src/assets/businessCard/icon-phone.png

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

 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>

 apps/bMiniApp/src/subpackages/businessCard/businessCardDetail/InnerPage.vue

New file
@@ -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>

 apps/bMiniApp/src/subpackages/businessCard/businessCardDetail/businessCardDetail.config.ts

New file
@@ -0,0 +1,3 @@
export default definePageConfig({
  disableScroll: true,
});

 apps/bMiniApp/src/subpackages/businessCard/businessCardDetail/businessCardDetail.vue

New file
@@ -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>

 apps/bMiniApp/src/subpackages/businessCard/businessCardShare/InnerPage.vue

New file
@@ -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>

 apps/bMiniApp/src/subpackages/businessCard/businessCardShare/businessCardShare.config.ts

New file
@@ -0,0 +1,3 @@
export default definePageConfig({
  disableScroll: true,
});

 apps/bMiniApp/src/subpackages/businessCard/businessCardShare/businessCardShare.vue

New file
@@ -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>

 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>

 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;


 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>

 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>

 packages/components/src/Card/BusinessCardHolderCard.vue

New file
@@ -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>

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


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