feat: 报单优化

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>
   );
 }