90 lines
3.0 KiB
TypeScript
90 lines
3.0 KiB
TypeScript
import { Button, Image } from '@tarojs/components';
|
|
|
|
import { Popup, Dialog } from '@taroify/core';
|
|
import { Fragment, useCallback, useState } from 'react';
|
|
|
|
import JobBuy from '@/components/product-dialog/steps-ui/job-buy';
|
|
import SafeBottomPadding from '@/components/safe-bottom-padding';
|
|
import { PageUrl } from '@/constants/app';
|
|
import { GET_CONTACT_TYPE } from '@/constants/job';
|
|
import { navigateTo } from '@/utils/route';
|
|
|
|
import './index.less';
|
|
|
|
interface IProps {
|
|
onCancel: () => void;
|
|
onConfirm: (type: GET_CONTACT_TYPE) => void;
|
|
}
|
|
|
|
const PREFIX = 'prejob-popup';
|
|
|
|
const GET_CONTACT_TYPE_OPTIONS = [
|
|
{
|
|
type: GET_CONTACT_TYPE.MATERIAL,
|
|
icon: 'https://publiccdn.neighbourhood.com.cn/img/file.svg',
|
|
title: '创建模卡（免费报单）',
|
|
desc: '免费报单，优先推荐给企业，机会更多',
|
|
btnText: '创建',
|
|
},
|
|
{
|
|
type: GET_CONTACT_TYPE.VIP,
|
|
icon: 'https://publiccdn.neighbourhood.com.cn/img/diamond.svg',
|
|
title: '播络会员',
|
|
desc: '开通会员每天可查看10个',
|
|
btnText: '开通',
|
|
},
|
|
];
|
|
|
|
export function PrejobPopup({ onCancel, onConfirm }: IProps) {
|
|
const [openPopup, setOpenPopup] = useState(true);
|
|
const [openDialog, setOpenDialog] = useState(false);
|
|
const handleClick = (type: GET_CONTACT_TYPE) => () => {
|
|
if (type === GET_CONTACT_TYPE.MATERIAL) {
|
|
navigateTo(PageUrl.MaterialUploadVideo);
|
|
onConfirm(type);
|
|
}
|
|
if (type === GET_CONTACT_TYPE.VIP) {
|
|
setOpenPopup(false);
|
|
setOpenDialog(true);
|
|
}
|
|
};
|
|
const handleAfterBuy = useCallback(async () => {
|
|
onConfirm(GET_CONTACT_TYPE.VIP);
|
|
}, [onConfirm]);
|
|
return (
|
|
<Fragment>
|
|
<Popup rounded className={PREFIX} placement="bottom" open={openPopup} onClose={onCancel}>
|
|
<div className={`${PREFIX}__content`}>
|
|
<div className={`${PREFIX}__title`}>以下方式任选其一均可获取联系方式</div>
|
|
<div className={`${PREFIX}__body`}>
|
|
{GET_CONTACT_TYPE_OPTIONS.map(option => {
|
|
return (
|
|
<div className={`${PREFIX}__item`} key={option.type}>
|
|
<div className={`${PREFIX}__item-icon ${option.type}`}>
|
|
<Image mode="aspectFit" src={option.icon} />
|
|
</div>
|
|
<div className={`${PREFIX}__item-main`}>
|
|
<div className="title">{option.title}</div>
|
|
<div className="desc">{option.desc}</div>
|
|
</div>
|
|
<div className={`${PREFIX}__item-action`}>
|
|
<Button className={`${PREFIX}__btn`} onClick={handleClick(option.type)}>
|
|
{option.btnText}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
<SafeBottomPadding />
|
|
</Popup>
|
|
<Dialog open={openDialog} onClose={onCancel}>
|
|
<Dialog.Content>
|
|
<JobBuy onConfirm={handleAfterBuy} buyOnly />
|
|
</Dialog.Content>
|
|
</Dialog>
|
|
</Fragment>
|
|
);
|
|
}
|