magic-csb/boluo-app-main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 报单优化

Browse Source
This commit is contained in:
chashaobao
2025-07-27 23:23:29 +08:00
parent 0cd1a46762
commit 260e543fe6
7 changed files with 160 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/components/product-dialog/steps-ui/job-buy.tsx
View File

@ -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 (
<div className={`${PREFIX}__job-buy`}>
<div className={`${PREFIX}__job-buy__header`}>
<div>今日通告对接次数</div>
<div className="highlight">已用完</div>
</div>
<div className={`${PREFIX}__job-buy__describe`}>
<div>请</div>
<div className="highlight">明日</div>
<div>再来 或 </div>
<div className="highlight">升级会员</div>
</div>
{buyOnly ? (
<div className={`${PREFIX}__job-buy__header`}>开通播络会员即可直接查看联系方式</div>
) : (
<div className={`${PREFIX}__job-buy__header`}>
<div>今日通告对接次数</div>
<div className="highlight">已用完</div>
</div>
)}
{buyOnly ? (
<div className={`${PREFIX}__job-buy__describe`}>每天可获取12个联系方式</div>
) : (
<div className={`${PREFIX}__job-buy__describe`}>
<div>请</div>
<div className="highlight">明日</div>
<div>再来 或 </div>
<div className="highlight">升级会员</div>
</div>
)}
<div className={`${PREFIX}__job-buy__container`}>
{LIST.map(item => (
<div
key={item.price}
className={classNames(`${PREFIX}__job-buy__item`, {
selected: item.amt === selectItem.amt,
disabled: item.amt === 0,
})}
onClick={item.amt === 0 ? undefined : () => handleClickItem(item)}
>
<div className={classNames(`${PREFIX}__job-buy__item__title`, { free: item.amt === 0 })}>{item.title}</div>
<div className={`${PREFIX}__job-buy__item__content`}>{item.content}</div>
<div className={`${PREFIX}__job-buy__item__price`}>{item.price}</div>
{item.badge && <Badge className={`${PREFIX}__job-buy__item__badge`} text={item.badge} />}
</div>
))}
{LIST.map(item => {
if (buyOnly && !item.amt) {
return null;
}
return (
<div
key={item.price}
className={classNames(`${PREFIX}__job-buy__item`, {
selected: item.amt === selectItem.amt,
disabled: item.amt === 0,
})}
onClick={item.amt === 0 ? undefined : () => handleClickItem(item)}
>
<div className={classNames(`${PREFIX}__job-buy__item__title`, { free: item.amt === 0 })}>
{item.title}
</div>
<div className={`${PREFIX}__job-buy__item__content`}>{buyOnly ? item.buyOnlyContent : item.content}</div>
<div className={`${PREFIX}__job-buy__item__price`}>{item.price}</div>
{item.badge && <Badge className={`${PREFIX}__job-buy__item__badge`} text={item.badge} />}
</div>
);
})}
</div>
<Button className={`${PREFIX}__job-buy__button`} onClick={handleBuy}>
{`支付 ${selectItem.amt} 元`}