feat: 报单优化

2025-07-27 23:23:29 +08:00
parent 0cd1a46762
commit 260e543fe6
7 changed files with 160 additions and 79 deletions
--- 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;
--- 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 (
-    <Popup rounded className={PREFIX} placement="bottom" open={open} 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} />
+    <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 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>
-      </div>
-      <SafeBottomPadding />
-    </Popup>
+        <SafeBottomPadding />
+      </Popup>
+      <Dialog open={openDialog} onClose={onCancel}>
+        <Dialog.Content>
+          <JobBuy onConfirm={handleAfterBuy} buyOnly />
+        </Dialog.Content>
+      </Dialog>
+    </Fragment>
  );
 }
--- 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 (
    <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} 元`}