feat: 接口对接

wupengfei

2025-03-21 1bbd7061dac79cacf5513234a04cac8ba0be5c6f

 packages/components/src/Card/FlexJobCard.vue

@@ -1,39 +1,36 @@
<template>
  <div class="flexJob-card-wrapper">
    <div class="flexJob-card-top-wrapper">
      <UserAvatar :size="60" class="flexJob-card-top-avatar" />
      <div class="flexJob-card-top-info">
        <div class="flexJob-card-top-info-item">
          <div class="flexJob-card-top-info-name">{{ '洋洋' }}</div>
          <div class="flexJob-card-top-info-gender">
            <img v-if="1" :src="IconMale" class="flexJob-card-top-info-gender-icon" />
            <img v-else :src="IconFemale" class="flexJob-card-top-info-gender-icon" />
          </div>
          <div class="flexJob-card-top-info-auth">{{ '已实名' }}</div>
        </div>
        <div class="flexJob-card-top-info-detail">{{ '26岁 | 非学生 | 本科 | 上岗121次' }}</div>
      </div>
    </div>
    <FlexJobTopView
      :name="name"
      :age="age"
      :genderType="genderType"
      :isRealName="isRealName"
      :arrangeCount="arrangeCount"
      :educationalLevel="educationalLevel"
    />
    <div class="flexJob-card-done-list">
      {{
        '做过：客房服务员、客房服务员、客房客房服务员、客房做过：客房服务员、客房服务员、客房客房服务员、客房'
      }}
      {{ workExperience }}
    </div>
    <div class="flexJob-card-done-detail">
    <div class="flexJob-card-done-detail" v-if="showDoneDetail">
      <div class="flexJob-card-done-detail-item">
        {{ '在「宁波雷迪森酒店」，做过客房服务员在「宁波雷迪森酒店」，做过客房服务员' }}
      </div>
      <div class="flexJob-card-done-detail-item">{{ '在「宁波雷迪森酒店」，做过客房服务员' }}</div>
    </div>
    <div class="flexJob-card-footer">
      <div class="flexJob-card-footer-left" v-if="showFooterLeft">
        <slot name="footerLeft">
          <div class="flexJob-card-footer-text">取消收藏</div>
        </slot>
      <div class="flexJob-card-footer-left-wrapper">
        <div class="flexJob-card-footer-left" v-if="showFooterLeft">
          <slot name="footerLeft">
            <div class="flexJob-card-footer-text" @click.stop="emit('cancelCollection')">
              取消收藏
            </div>
          </slot>
        </div>
      </div>

      <div class="flexJob-card-footer-right" v-if="showFooterRight">
        <slot name="footerRight">
          <nut-button type="primary">立即联系</nut-button>
          <nut-button type="primary" @click.stop="emit('contact')">立即联系</nut-button>
        </slot>
      </div>
    </div>
@@ -41,9 +38,9 @@
</template>

<script setup lang="ts">
import IconMale from '@/assets/mine/icon-male.png';
import IconFemale from '@/assets/mine/icon-female.png';
import { CommonTaskCardProps } from './card';
import FlexJobTopView from './FlexJobTopView.vue';
import { Gender } from '@12333/constants';

defineOptions({
  name: 'FlexJobCard',
@@ -52,12 +49,27 @@
type Props = CommonTaskCardProps & {
  showFooterLeft?: boolean;
  showFooterRight?: boolean;
  showDoneDetail?: boolean;

  name?: string;
  genderType?: Gender;
  age?: number;
  isRealName?: boolean;
  educationalLevel?: string;
  workExperience?: string;
  arrangeCount?: number;
};

const props = withDefaults(defineProps<Props>(), {
  showFooterLeft: true,
  showFooterRight: true,
  showDoneDetail: true,
});

const emit = defineEmits<{
  (e: 'cancelCollection'): void;
  (e: 'contact'): void;
}>();
</script>

<style lang="scss">
@@ -74,55 +86,7 @@
  }

  .flexJob-card-top-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 38px;

    .flexJob-card-top-avatar {
      margin-right: 30px;
    }

    .flexJob-card-top-info {
      display: flex;
      flex-direction: column;

      .flexJob-card-top-info-item {
        display: flex;
        align-items: center;

        .flexJob-card-top-info-name {
          font-size: 34px;
          line-height: 34px;
          font-weight: bold;
          color: boleGetCssVar('text-color', 'primary');
        }

        .flexJob-card-top-info-gender {
          display: inline-flex;
          align-items: center;
          height: 34px;
          margin: 0 10px;

          .flexJob-card-top-info-gender-icon {
            width: 24px;
            height: 24px;
          }
        }

        .flexJob-card-top-info-auth {
          font-size: 28px;
          line-height: 34px;
        }
      }

      .flexJob-card-top-info-detail {
        font-size: 24px;
        font-weight: 400;
        line-height: 28px;
        margin-top: 12px;
        color: boleGetCssVar('text-color', 'secondary');
      }
    }
  }

  .flexJob-card-done-list {
@@ -153,10 +117,14 @@
  .flexJob-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: #d9d9d9 1px solid;
    padding-top: 24px;
    margin-top: 18px;

    .flexJob-card-footer-left-wrapper {
      flex: 1;
      min-width: 0;
    }

    .flexJob-card-footer-left {
      .flexJob-card-footer-text {
@@ -169,6 +137,11 @@
    .flexJob-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;
      }
    }
  }
}