diff --git a/src/components/prejob-popup/index.less b/src/components/prejob-popup/index.less index c450739..55ab642 100644 --- a/src/components/prejob-popup/index.less +++ b/src/components/prejob-popup/index.less @@ -33,7 +33,7 @@ align-items: center; justify-content: center; - &.share { + &.material { background: #feba00; > image { width: 40px; diff --git a/src/components/prejob-popup/index.tsx b/src/components/prejob-popup/index.tsx index c5b6a2e..fbbb6e2 100644 --- a/src/components/prejob-popup/index.tsx +++ b/src/components/prejob-popup/index.tsx @@ -1,13 +1,17 @@ import { Button, Image } from '@tarojs/components'; -import { Popup } from '@taroify/core'; +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 { - open: boolean; onCancel: () => void; onConfirm: (type: GET_CONTACT_TYPE) => void; } @@ -15,45 +19,71 @@ interface IProps { 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: '开通会员每天可查看5个', + desc: '开通会员每天可查看10个', btnText: '开通', }, ]; -export function PrejobPopup({ open, onCancel, onConfirm }: IProps) { +export function PrejobPopup({ onCancel, onConfirm }: IProps) { + const [openPopup, setOpenPopup] = useState(true); + const [openDialog, setOpenDialog] = useState(false); const handleClick = (type: GET_CONTACT_TYPE) => () => { - onConfirm(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 ( - -
-
以下方式任选其一均可获取联系方式
-
- {GET_CONTACT_TYPE_OPTIONS.map(option => { - return ( -
-
- + + +
+
以下方式任选其一均可获取联系方式
+
+ {GET_CONTACT_TYPE_OPTIONS.map(option => { + return ( +
+
+ +
+
+
{option.title}
+
{option.desc}
+
+
+ +
-
-
{option.title}
-
{option.desc}
-
-
- -
-
- ); - })} + ); + })} +
-
- - + + + + + + + + ); } diff --git a/src/components/product-dialog/steps-ui/job-buy.tsx b/src/components/product-dialog/steps-ui/job-buy.tsx index 47ae302..e59b170 100644 --- a/src/components/product-dialog/steps-ui/job-buy.tsx +++ b/src/components/product-dialog/steps-ui/job-buy.tsx @@ -16,6 +16,7 @@ import { postSubscribe, subscribeMessage } from '@/utils/subscribe'; import Toast from '@/utils/toast'; interface IProps { + buyOnly?: boolean; onConfirm: () => void; } @@ -23,6 +24,7 @@ interface Item { id: ProductSpecId; title: string; content: string; + buyOnlyContent?: string; price: string; amt: number; badge?: string; @@ -33,7 +35,8 @@ const LIST: Item[] = [ { id: ProductSpecId.DailyVIP, title: '日会员', - content: '每日+5次', + content: '每日+10次', + buyOnlyContent: '每日12次', price: '60播豆', amt: 6, badge: '限时体验', @@ -41,7 +44,8 @@ const LIST: Item[] = [ { id: ProductSpecId.WeeklyVIP, title: '周会员', - content: '每日+5次', + content: '每日+10次', + buyOnlyContent: '每日12次', price: '180播豆', amt: 18, badge: ' 超值', @@ -62,7 +66,7 @@ const subscribe = async () => { }; export default function JobBuy(props: IProps) { - const { onConfirm } = props; + const { onConfirm, buyOnly } = props; const [selectItem, setSelectItem] = useState(LIST[1]); const handleClickItem = useCallback((newSelectItem: Item) => setSelectItem(newSelectItem), []); @@ -106,32 +110,47 @@ export default function JobBuy(props: IProps) { return (
-
-
今日通告对接次数
-
已用完
-
-
-
-
明日
-
再来 或
-
升级会员
-
+ {buyOnly ? ( +
开通播络会员即可直接查看联系方式
+ ) : ( +
+
今日通告对接次数
+
已用完
+
+ )} + {buyOnly ? ( +
每天可获取12个联系方式
+ ) : ( +
+
+
明日
+
再来 或
+
升级会员
+
+ )}
- {LIST.map(item => ( -
handleClickItem(item)} - > -
{item.title}
-
{item.content}
-
{item.price}
- {item.badge && } -
- ))} + {LIST.map(item => { + if (buyOnly && !item.amt) { + return null; + } + return ( +
handleClickItem(item)} + > +
+ {item.title} +
+
{buyOnly ? item.buyOnlyContent : item.content}
+
{item.price}
+ {item.badge && } +
+ ); + })}