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} 元`}
--- a/src/constants/job.ts
+++ b/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',
 }
--- a/src/pages/job-detail/index.tsx
+++ b/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);
-        return;
+
+      if (data.sourcePlat !== 'bl') {
+        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 = {
-          id: profile.id,
-          name: profile.name,
-          age: profile.age,
-          height: profile.height,
-          weight: profile.weight,
-          shoeSize: profile.shoeSize,
-          gender: profile.gender,
-          workedSecCategoryStr: profile.workedSecCategoryStr,
-        };
-        navigateTo(PageUrl.MessageChat, { chatId: chat.chatId, material: materialMessage, jobId: data.id });
+        let materialMessage: null | IMaterialMessage = null;
+        if (!needCreateMaterial) {
+          const profile = await requestProfileDetail();
+          materialMessage = {
+            id: profile.id,
+            name: profile.name,
+            age: profile.age,
+            height: profile.height,
+            weight: profile.weight,
+            shoeSize: profile.shoeSize,
+            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="确定"
--- a/src/pages/message-chat/index.tsx
+++ b/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);
--- a/src/types/job.ts
+++ b/src/types/job.ts
@ -49,6 +49,7 @@ export type JobDetails = JobInfo &
    declarationType: DeclarationType; // 报单类型
    userId: string; // 发布人的 userId
    verifyFailReason?: string; // 审核不通过的原因
+    sourcePlat?: string;
  };

 export interface JobManageInfo {