feat: 报单优化

src/components/prejob-popup/index.less

@@ -33,7 +33,7 @@
       align-items: center;
       justify-content: center;
 
-      &.share {
+      &.material {
         background: #feba00;
         > image {
           width: 40px;

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}>
+    <Fragment>
-      <div className={`${PREFIX}__content`}>
+      <Popup rounded className={PREFIX} placement="bottom" open={openPopup} onClose={onCancel}>
-        <div className={`${PREFIX}__title`}>以下方式任选其一均可获取联系方式</div>
+        <div className={`${PREFIX}__content`}>
-        <div className={`${PREFIX}__body`}>
+          <div className={`${PREFIX}__title`}>以下方式任选其一均可获取联系方式</div>
-          {GET_CONTACT_TYPE_OPTIONS.map(option => {
+          <div className={`${PREFIX}__body`}>
-            return (
+            {GET_CONTACT_TYPE_OPTIONS.map(option => {
-              <div className={`${PREFIX}__item`} key={option.type}>
+              return (
-                <div className={`${PREFIX}__item-icon ${option.type}`}>
+                <div className={`${PREFIX}__item`} key={option.type}>
-                  <Image mode="aspectFit" src={option.icon} />
+                  <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>
-                <div className={`${PREFIX}__item-action`}>
-                  <Button className={`${PREFIX}__btn`} onClick={handleClick(option.type)}>
-                    {option.btnText}
-                  </Button>
-                </div>
-              </div>
-            );
-          })}
         </div>
-      </div>
+        <SafeBottomPadding />
-      <SafeBottomPadding />
+      </Popup>
-    </Popup>
+      <Dialog open={openDialog} onClose={onCancel}>
+        <Dialog.Content>
+          <JobBuy onConfirm={handleAfterBuy} buyOnly />
+        </Dialog.Content>
+      </Dialog>
+    </Fragment>
   );
 }

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

src/constants/job.ts

@@ -177,4 +177,5 @@ export const FULL_PRICE_OPTIONS = FULL_EMPLOY_SALARY_OPTIONS.filter(o => !!o.val
 
 export enum GET_CONTACT_TYPE {
   VIP = 'vip',
+  MATERIAL = 'material',
 }

src/pages/job-detail/index.tsx

@@ -9,13 +9,13 @@ import DevDiv from '@/components/dev-div';
 import JobRecommendList from '@/components/job-recommend-list';
 import { JoinGroupHint } from '@/components/join-group-hint';
 import LoginButton from '@/components/login-button';
-import MaterialGuide from '@/components/material-guide';
 import PageLoading from '@/components/page-loading';
+import { PrejobPopup } from '@/components/prejob-popup';
 import ProductJobDialog from '@/components/product-dialog/job';
 import { RoleType, EventName, PageUrl } from '@/constants/app';
 import { CertificationStatusType } from '@/constants/company';
 import { CollectEventName, ReportEventId } from '@/constants/event';
-import { EMPLOY_TYPE_TITLE_MAP } from '@/constants/job';
+import { EMPLOY_TYPE_TITLE_MAP, GET_CONTACT_TYPE } from '@/constants/job';
 import useInviteCode from '@/hooks/use-invite-code';
 import useUserInfo from '@/hooks/use-user-info';
 import useRoleType from '@/hooks/user-role-type';
@@ -76,9 +76,12 @@ const AnchorFooter = (props: { data: JobDetails }) => {
     reportEvent(ReportEventId.CLICK_JOB_CONTACT);
     try {
       const needCreateMaterial = await isNeedCreateMaterial();
-      if (needCreateMaterial) {
+
-        setShowMaterialGuide(true);
+      if (data.sourcePlat !== 'bl') {
-        return;
+        if (needCreateMaterial) {
+          setShowMaterialGuide(true);
+          return;
+        }
       }
       if (data.isAuthed) {
         const toUserId = data.userId;
@@ -86,19 +89,27 @@ const AnchorFooter = (props: { data: JobDetails }) => {
           Toast.error('不能与自己聊天');
           return;
         }
-        const profile = await requestProfileDetail();
         const chat = await postCreateChat(toUserId);
-        const materialMessage: IMaterialMessage = {
+        let materialMessage: null | IMaterialMessage = null;
-          id: profile.id,
+        if (!needCreateMaterial) {
-          name: profile.name,
+          const profile = await requestProfileDetail();
-          age: profile.age,
+          materialMessage = {
-          height: profile.height,
+            id: profile.id,
-          weight: profile.weight,
+            name: profile.name,
-          shoeSize: profile.shoeSize,
+            age: profile.age,
-          gender: profile.gender,
+            height: profile.height,
-          workedSecCategoryStr: profile.workedSecCategoryStr,
+            weight: profile.weight,
-        };
+            shoeSize: profile.shoeSize,
-        navigateTo(PageUrl.MessageChat, { chatId: chat.chatId, material: materialMessage, jobId: data.id });
+            gender: profile.gender,
+            workedSecCategoryStr: profile.workedSecCategoryStr,
+          };
+        }
+        navigateTo(PageUrl.MessageChat, {
+          chatId: chat.chatId,
+          initText: !materialMessage,
+          material: materialMessage,
+          jobId: data.id,
+        });
       } else {
         setDialogVisible(true);
       }
@@ -113,7 +124,15 @@ const AnchorFooter = (props: { data: JobDetails }) => {
     }
   }, [data]);
 
-  const handleDialogHidden = useCallback(() => setDialogVisible(false), []);
+  const handleDialogHidden = useCallback(() => {
+    setDialogVisible(false);
+  }, []);
+  const handleConfirmPrejob = useCallback((type: GET_CONTACT_TYPE) => {
+    setShowMaterialGuide(false);
+    if (GET_CONTACT_TYPE.VIP === type) {
+      setDialogVisible(true);
+    }
+  }, []);
   return (
     <>
       <div className={`${PREFIX}__footer`}>
@@ -126,7 +145,9 @@ const AnchorFooter = (props: { data: JobDetails }) => {
       </div>
       <div>
         {dialogVisible && <ProductJobDialog data={data} onClose={handleDialogHidden} />}
-        {showMaterialGuide && <MaterialGuide onClose={() => setShowMaterialGuide(false)} />}
+        {showMaterialGuide && (
+          <PrejobPopup onCancel={() => setShowMaterialGuide(false)} onConfirm={handleConfirmPrejob} />
+        )}
         <CommonDialog
           content={errorTips}
           confirm="确定"

src/pages/message-chat/index.tsx

@@ -72,6 +72,7 @@ interface ILoadProps {
   chatId: string;
   jobId?: string;
   job?: string;
+  initText?: boolean;
   material?: string;
 }
 
@@ -90,6 +91,7 @@ export default function MessageChat() {
   const [input, setInput] = useState('');
   const [showMore, setShowMore] = useState(false);
   const [chat, setChat] = useState<IChatInfo | null>(null);
+  const [initText, setInitText] = useState('');
   const [reject, setReject] = useState<boolean>(false);
   const [receiver, setReceiver] = useState<IChatUser | null>(null);
   const [messages, setMessages] = useState<IChatMessage[]>([]);
@@ -100,7 +102,7 @@ export default function MessageChat() {
   const [material, setMaterial] = useState<IMaterialMessage>();
   const [scrollItemId, setScrollItemId] = useState<string>();
   const scrollToLowerRef = useRef(false);
-  const autoSendRef = useRef({ sendJob: false, sendMaterial: false });
+  const autoSendRef = useRef({ sendJob: false, sendMaterial: false, sendText: false });
   const loadMoreRef = useRef(async (chatId: string, currentMessages: IChatMessage[], forceScroll?: boolean) => {
     try {
       const lastMsgId = last(currentMessages)?.msgId;
@@ -278,7 +280,11 @@ export default function MessageChat() {
     }
     job && handleSendJobMessage();
     material && handleSendMaterialMessage();
-  }, [chat, job, material, handleSendJobMessage, handleSendMaterialMessage]);
+    if (initText && !autoSendRef.current.sendText) {
+      autoSendRef.current.sendText = true;
+      handleSendMessage({ type: MessageType.Text, content: '你好，想了解下这个岗位' });
+    }
+  }, [chat, job, material, handleSendJobMessage, handleSendMaterialMessage, initText, handleSendMessage]);
 
   useLoad(async () => {
     const query = getPageQuery<ILoadProps>();
@@ -309,6 +315,9 @@ export default function MessageChat() {
       setScrollItemId(getScrollItemId(last(chatDetail.messages)?.msgId));
       parseJob && setJob(parseJob);
       parseMaterial && setMaterial(parseMaterial);
+      if (!parseMaterial && query.initText && watchType === ChatWatchType.AnchorReject) {
+        setInitText('你好，想了解下这个岗位');
+      }
       Taro.setNavigationBarTitle({ title: toUserInfo.nickName });
       setReceiver(toUserInfo);
       setReject(!watchStatus);

src/types/job.ts

@@ -49,6 +49,7 @@ export type JobDetails = JobInfo &
     declarationType: DeclarationType; // 报单类型
     userId: string; // 发布人的 userId
     verifyFailReason?: string; // 审核不通过的原因
+    sourcePlat?: string;
   };
 
 export interface JobManageInfo {