76 lines
2.8 KiB
TypeScript
76 lines
2.8 KiB
TypeScript
import { Image as TaroImage } from '@tarojs/components';
|
|
|
|
import { Image } from '@taroify/core';
|
|
import { PhotoFail } from '@taroify/icons';
|
|
import { useCallback } from 'react';
|
|
|
|
import SkeletonLoading from '@/components/skeleton-loading';
|
|
import { PageUrl } from '@/constants/app';
|
|
import { MaterialViewSource, WORK_YEAR_LABELS } from '@/constants/material';
|
|
import { AnchorInfo } from '@/types/material';
|
|
import { calcDistance } from '@/utils/location';
|
|
import { getBasicInfo, getSalary } from '@/utils/material';
|
|
import { navigateTo } from '@/utils/route';
|
|
import { activeDate } from '@/utils/time';
|
|
|
|
import './index.less';
|
|
|
|
interface IProps {
|
|
data: AnchorInfo;
|
|
jobId?: string;
|
|
validator: (onSuccess: () => void) => void;
|
|
}
|
|
|
|
const PREFIX = 'anchor-card';
|
|
|
|
function AnchorCard(props: IProps) {
|
|
const { data, jobId, validator } = props;
|
|
const style = data.isRead ? ({ '--read-color': '#999999' } as React.CSSProperties) : {};
|
|
const cover = (data.materialVideoInfoList.find(video => video.isDefault) || data.materialVideoInfoList[0])?.coverUrl;
|
|
|
|
const handleNavTo = useCallback(() => {
|
|
navigateTo(PageUrl.MaterialView, { jobId, resumeId: data.id, source: MaterialViewSource.AnchorList });
|
|
}, [data, jobId]);
|
|
|
|
const handleClick = useCallback(() => {
|
|
validator(handleNavTo);
|
|
}, [handleNavTo, validator]);
|
|
|
|
return (
|
|
<div className={PREFIX} style={style} onClick={handleClick}>
|
|
<Image
|
|
lazyLoad
|
|
src={cover}
|
|
width={188}
|
|
height={242}
|
|
mode="aspectFill"
|
|
fallback={<PhotoFail />}
|
|
className={`${PREFIX}__cover`}
|
|
placeholder={<SkeletonLoading customName={`${PREFIX}__cover-skeleton`} />}
|
|
/>
|
|
<div className={`${PREFIX}__info-container`}>
|
|
<div className={`${PREFIX}__info`}>
|
|
<div className={`${PREFIX}__info__title`}>{data.name}</div>
|
|
<div className={`${PREFIX}__info__basic`}>{getBasicInfo(data)}</div>
|
|
<div className={`${PREFIX}__info__year`}>{WORK_YEAR_LABELS[data.workedYear] || ''}</div>
|
|
{data.workedSecCategoryStr && (
|
|
<div className={`${PREFIX}__info__categories`}>{`播过 ${data.workedSecCategoryStr}`}</div>
|
|
)}
|
|
<div className={`${PREFIX}__info__salary`}>{getSalary(data)}</div>
|
|
</div>
|
|
<div className={`${PREFIX}__right`}>
|
|
<div className={`${PREFIX}__active-time`}>{activeDate(data.sortTime)}</div>
|
|
{typeof data.distance !== 'undefined' && (
|
|
<div className={`${PREFIX}__distance-wrapper`}>
|
|
<TaroImage className={`${PREFIX}__distance-icon`} src={require('@/statics/svg/location.svg')} />
|
|
<div className={`${PREFIX}__distance`}>{calcDistance(data.distance, 1)}</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default AnchorCard;
|