fix: 灵工管理

zhengyiming

3 天以前 ac7fde69c457b3488bbfe2671dbfeb3eeba26414

 packages/components/src/Card/FlexJobTopView.vue

@@ -1,17 +1,29 @@
<template>
  <div :class="['flexJob-card-top-wrapper', size]">
    <UserAvatar :size="size === 'small' ? 50 : 60" class="flexJob-card-top-avatar" />
    <Avatar
      :src="setOSSLink(avatar)"
      :size="size === 'small' ? 50 : 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-name">{{ name }}</div>
        <div class="flexJob-card-top-info-gender">
          <img v-if="1" :src="IconMale" class="flexJob-card-top-info-gender-icon" />
          <img
            v-if="gender === EnumUserGender.Male"
            :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 class="flexJob-card-top-info-auth" :class="{ 'is-real-name': isReal }">
          {{ isReal ? '已实名' : '未实名' }}
        </div>
      </div>
      <slot name="detail">
        <div class="flexJob-card-top-info-detail">{{ '26岁 | 非学生 | 本科 | 上岗121次' }}</div>
        <div class="flexJob-card-top-info-detail">
          {{ infoDetail }}
        </div>
      </slot>
    </div>
  </div>
@@ -20,6 +32,10 @@
<script setup lang="ts">
import IconMale from '@/assets/mine/icon-male.png';
import IconFemale from '@/assets/mine/icon-female.png';
import { AvatarImage, EnumUserGender } from '@12333/constants';
import { Avatar } from '@12333/components';
import { computed } from 'vue';
import { setOSSLink } from '@12333/utils';

defineOptions({
  name: 'FlexJobTopView',
@@ -27,11 +43,34 @@

type Props = {
  size?: 'normal' | 'small';

  avatar?: string;
  name?: string;
  gender?: EnumUserGender;
  age?: number;
  isReal?: boolean;
  personalIdentityContent?: string;
  educationalBackgroundContent?: string;
  taskCount?: number;
};

const props = withDefaults(defineProps<Props>(), {
  size: 'normal',
  avatar: AvatarImage,
  personalIdentityContent: '',
  educationalBackgroundContent: '',
});

const infoDetail = computed(() =>
  [
    props.age > 0 ? `${props.age}岁` : '',
    props.personalIdentityContent,
    props.educationalBackgroundContent,
    props.taskCount > 0 ? `上岗${props.taskCount ?? 0}次` : '',
  ]
    .filter(Boolean)
    .join('|')
);
</script>

<style lang="scss">
@@ -80,6 +119,10 @@
        font-size: 28px;
        line-height: 34px;
        flex-shrink: 0;

        &.is-real-name {
          color: #2a9e1b;
        }
      }
    }