| | |
| | | <template> |
| | | <div :class="['flexJob-card-top-wrapper', size]"> |
| | | <Avatar :src="avatarUrl" :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">{{ name }}</div> |
| | | <div class="flexJob-card-top-info-gender"> |
| | | <img |
| | | v-if="genderType === EnumUserGender.Male" |
| | | 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" :class="{ 'is-real-name': isRealName }"> |
| | | {{ isRealName ? '已实名' : '未实名' }} |
| | | <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"> |
| | | {{ `${age}岁 | ${educationalLevel} | ${educationalLevel} | 上岗${arrangeCount}次` }} |
| | | {{ infoDetail }} |
| | | </div> |
| | | </slot> |
| | | </div> |
| | |
| | | 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', |
| | |
| | | type Props = { |
| | | size?: 'normal' | 'small'; |
| | | |
| | | avatarUrl?: string; |
| | | avatar?: string; |
| | | name?: string; |
| | | genderType?: EnumUserGender; |
| | | gender?: EnumUserGender; |
| | | age?: number; |
| | | educationalLevel?: string; |
| | | arrangeCount?: number; |
| | | isRealName?: boolean; |
| | | isReal?: boolean; |
| | | personalIdentityContent?: string; |
| | | educationalBackgroundContent?: string; |
| | | taskCount?: number; |
| | | }; |
| | | |
| | | const props = withDefaults(defineProps<Props>(), { |
| | | size: 'normal', |
| | | avatarUrl: AvatarImage, |
| | | 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"> |