83 lines
3.1 KiB
TypeScript
83 lines
3.1 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 } from '@/utils/material';
|
|
import { navigateTo } from '@/utils/route';
|
|
import { activeDate } from '@/utils/time';
|
|
|
|
import './index.less';
|
|
|
|
interface IProps {
|
|
data: AnchorInfo;
|
|
jobId?: string;
|
|
}
|
|
|
|
const PREFIX = 'anchor-card';
|
|
const getSalary = (data: AnchorInfo) => {
|
|
const { fullTimeMinPrice, fullTimeMaxPrice, partyTimeMinPrice, partyTimeMaxPrice } = data;
|
|
const prices: string[] = [];
|
|
if (fullTimeMinPrice && fullTimeMaxPrice) {
|
|
prices.push(`${fullTimeMinPrice / 1000}-${fullTimeMaxPrice / 1000}K/月`);
|
|
}
|
|
if (partyTimeMinPrice && partyTimeMaxPrice) {
|
|
prices.push(`${partyTimeMinPrice}-${partyTimeMaxPrice}/小时`);
|
|
}
|
|
return prices.filter(Boolean).join(' ');
|
|
};
|
|
|
|
function AnchorCard(props: IProps) {
|
|
const { data, jobId } = props;
|
|
const style = data.isRead ? ({ '--read-color': '#999999' } as React.CSSProperties) : {};
|
|
const cover = (data.materialVideoInfoList.find(video => video.isDefault) || data.materialVideoInfoList[0])?.coverUrl;
|
|
|
|
const handleClick = useCallback(
|
|
() => navigateTo(PageUrl.MaterialView, { jobId, resumeId: data.id, source: MaterialViewSource.AnchorList }),
|
|
[data, jobId]
|
|
);
|
|
|
|
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;
|