feat: 广告

2025-07-07 01:15:50 +08:00
parent de7f0e14fe
commit e8cf28b6e9
18 changed files with 507 additions and 53 deletions
--- a/src/components/prejob-popup/index.less
+++ b/src/components/prejob-popup/index.less
@ -0,0 +1,82 @@
+@import '@/styles/common.less';
+@import '@/styles/variables.less';
+
+.prejob-popup {
+  &__content {
+    padding: 40px 32px;
+  }
+
+  &__title {
+    font-weight: 500;
+    font-size: 32px;
+    line-height: 48px;
+    margin-bottom: 31px;
+    text-align: center;
+  }
+
+  &__body {
+  }
+
+  &__item {
+    .flex-row();
+    margin-bottom: 40px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &-icon {
+      width: 88px;
+      height: 88px;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &.share {
+        background: #feba00;
+        > image {
+          width: 40px;
+          height: 46px;
+        }
+      }
+      &.vip {
+        background: #b094ff;
+        > image {
+          width: 48px;
+          height: 42px;
+        }
+      }
+      &.video {
+        background: #34a853;
+        > image {
+          width: 46px;
+          height: 44px;
+        }
+      }
+    }
+    &-main {
+      padding: 0 24px;
+      flex: 1;
+      .title {
+        font-weight: 500;
+        font-size: 28px;
+        line-height: 40px;
+        margin-bottom: 8px;
+      }
+      .desc {
+        font-size: 24px;
+        line-height: 36px;
+        color: @blColorG1;
+      }
+    }
+    &-action {
+      flex: 0 0 auto;
+    }
+  }
+
+  &__btn {
+    .button(@width: 136px, @height: 72px, @fontSize: 28px, @fontWeight: 400, @borderRadius: 43px, @highlight: 0);
+    background: #f2f2f2;
+  }
+}
--- a/src/components/prejob-popup/index.tsx
+++ b/src/components/prejob-popup/index.tsx
@ -0,0 +1,86 @@
+import { Button, Image } from '@tarojs/components';
+
+import { Popup } from '@taroify/core';
+
+import SafeBottomPadding from '@/components/safe-bottom-padding';
+import { PageUrl } from '@/constants/app';
+import { GET_CONTACT_TYPE } from '@/constants/job';
+import { hasShareToGetContact } from '@/utils/job';
+import { navigateTo } from '@/utils/route';
+
+import './index.less';
+
+interface IProps {
+  open: boolean;
+  onCancel: () => void;
+  onConfirm: (type: GET_CONTACT_TYPE) => void;
+}
+
+const PREFIX = 'prejob-popup';
+
+const GET_CONTACT_TYPE_OPTIONS = [
+  {
+    type: GET_CONTACT_TYPE.SHARE,
+    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: '开通会员每天可查看10个',
+    btnText: '开通',
+  },
+  {
+    type: GET_CONTACT_TYPE.VIDEO,
+    icon: 'https://publiccdn.neighbourhood.com.cn/img/video.svg',
+    title: '观看视频',
+    desc: '观看6-30s广告即可免费查看',
+    btnText: '观看',
+  },
+];
+
+export function PrejobPopup({ open, onCancel, onConfirm }: IProps) {
+  const handleClick = (type: GET_CONTACT_TYPE) => () => {
+    if (type === GET_CONTACT_TYPE.SHARE) {
+      navigateTo(PageUrl.PartnerShare);
+    } else {
+      onConfirm(type);
+    }
+  };
+  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 => {
+            // 该方式只能用一次, 以后不再出现在选项中
+            if (option.type === GET_CONTACT_TYPE.SHARE && !hasShareToGetContact()) {
+              return null;
+            }
+
+            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>
+      </div>
+      <SafeBottomPadding />
+    </Popup>
+  );
+}
--- a/src/components/product-dialog/const.ts
+++ b/src/components/product-dialog/const.ts
@ -3,6 +3,7 @@ export const PREFIX = 'product-dialog';
 export enum DialogStatus {
  // 加载中
  LOADING = 'loading',
+  PRE_ACTION = 'pre_action',
  // 直接联系通告主
  JOB_CONTACT_DIRECT = 'job_contact_direct',
  // 联系客服去联系通告主 -> 订阅通知
@ -13,6 +14,7 @@ export enum DialogStatus {
  JOB_UNABLE_UNLOCK = 'job_unable_unlock',
  // 通告解锁次数用完，购买界面
  JOB_BUY = 'job_buy',
+  PREACTION_JOB_BUY = 'preaction_job_buy',
  // 加群二维码
  GROUP_QR_CODE = 'group_qr_code',
  // 确定加群
--- a/src/components/product-dialog/index.less
+++ b/src/components/product-dialog/index.less
@ -133,6 +133,7 @@
    &__header {
      .flex-row();
      .header-font();
+      font-size: 32px;

      .highlight {
        color: @blHighlightColor;
@ -143,7 +144,8 @@
    &__describe {
      .flex-row();
      .describe-font();
-      margin-top: 24px;
+      margin-top: 18px;
+      line-height: 40px;

      .highlight {
        color: @blHighlightColor;
@ -158,13 +160,13 @@

    &__item {
      position: relative;
-      width: 170px;
+      width: 182px;
      height: 192px;
      .flex-column();
      justify-content: center;
      border: 2px solid @blHighlightColor;
      border-radius: 8px;
-      margin-right: 24px;
+      margin-right: 15px;

      &:last-child {
        margin-right: 0;
@ -660,4 +662,4 @@
    }
  }

-}
+}
--- a/src/components/product-dialog/job/index.tsx
+++ b/src/components/product-dialog/job/index.tsx
@ -3,20 +3,24 @@ import Taro from '@tarojs/taro';
 import { Dialog } from '@taroify/core';
 import { useCallback, useEffect, useRef, useState } from 'react';

+import { PrejobPopup } from '@/components/prejob-popup';
 import { DialogStatus, PREFIX } from '@/components/product-dialog/const';
 import JobBuy from '@/components/product-dialog/steps-ui/job-buy';
 import ContactCustomerService from '@/components/product-dialog/steps-ui/job-contact-customer';
 import ContactDirect from '@/components/product-dialog/steps-ui/job-contact-direct';
 import UnableUnlockContent from '@/components/product-dialog/steps-ui/job-unable';
+import { EventName } from '@/constants/app';
+import { GET_CONTACT_TYPE } from '@/constants/job';
 import { DeclarationType, ProductType } from '@/constants/product';
 import { JobDetails } from '@/types/job';
 import { ProductInfo } from '@/types/product';
 import { logWithPrefix } from '@/utils/common';
+import { getSkipPrejobAction, setSkipPrejobAction } from '@/utils/job';
 import {
-  requestProductUseRecord,
-  requestProductBalance,
-  requestUseProduct,
  requestAllBuyProduct,
+  requestProductBalance,
+  requestProductUseRecord,
+  requestUseProduct,
 } from '@/utils/product';
 import Toast from '@/utils/toast';

@ -33,13 +37,31 @@ const log = logWithPrefix('product-job-dialog');
 function ProductJobDialog(props: Omit<IProps, 'visible'>) {
  const { data, onClose } = props;
  const [status, setStatus] = useState<DialogStatus>(DialogStatus.LOADING);
+  const [showContact, setShowContact] = useState(false);
+  const [showPrejob, setShowPrejob] = useState(false);
  const [publisherAcctNo, setPublisherAcctNo] = useState<string>('');
-  const initRef = useRef(() => {});
+  const initRef = useRef<(skipPreAction?: boolean, skipRecordGet?: boolean) => void | Promise<void>>(() => {});

  const handleCloseDialog = useCallback(() => {
+    setShowContact(false);
    onClose();
  }, [onClose]);

+  const handleClosePrejob = useCallback(() => {
+    setShowPrejob(false);
+  }, []);
+
+  const handleConfirmPrejob = useCallback(async (type: GET_CONTACT_TYPE) => {
+    if (type === GET_CONTACT_TYPE.VIP) {
+      const allowBuy = await requestAllBuyProduct(PRODUCT_CODE);
+      setShowContact(true);
+      setShowPrejob(false);
+      setStatus(allowBuy ? DialogStatus.PREACTION_JOB_BUY : DialogStatus.JOB_UNABLE_UNLOCK);
+    } else if (type === GET_CONTACT_TYPE.VIDEO) {
+      Taro.eventCenter.trigger(EventName.SHOW_VIDEO_REWARD);
+    }
+  }, []);
+
  const handleAfterBuy = useCallback(async () => {
    const time = await requestProductBalance(PRODUCT_CODE);
    if (time <= 0) {
@ -49,6 +71,8 @@ function ProductJobDialog(props: Omit<IProps, 'visible'>) {
    }
    const productInfo = await requestUseProduct(PRODUCT_CODE, { jobId: data.id });
    const declarationTypeResult = productInfo.declarationTypeResult;
+    setShowContact(true);
+    setShowPrejob(false);
    if (declarationTypeResult?.type === DeclarationType.Direct && declarationTypeResult.publisherAcctNo) {
      setStatus(DialogStatus.JOB_CONTACT_DIRECT);
      setPublisherAcctNo(declarationTypeResult.publisherAcctNo);
@ -62,8 +86,9 @@ function ProductJobDialog(props: Omit<IProps, 'visible'>) {
  }, [data]);

  useEffect(() => {
-    initRef.current = async () => {
+    initRef.current = async (skipPreAction?: boolean, skipRecordGet?: boolean) => {
      const handleContact = (declarationTypeResult?: ProductInfo['declarationTypeResult']) => {
+        setShowContact(true);
        if (declarationTypeResult?.type === DeclarationType.Direct && declarationTypeResult.publisherAcctNo) {
          setStatus(DialogStatus.JOB_CONTACT_DIRECT);
          setPublisherAcctNo(declarationTypeResult.publisherAcctNo);
@ -77,19 +102,34 @@ function ProductJobDialog(props: Omit<IProps, 'visible'>) {
        //   setStatus(DialogStatus.JOB_CONTACT_CS);
        //   return;
        // }
-        const result = await requestProductUseRecord(PRODUCT_CODE, { jobId: data.id });
-        log('requestProductUseRecord result', result);
-        if (result) {
-          handleContact(result.declarationTypeResult);
-          return;
+        if (!skipRecordGet) {
+          const result = await requestProductUseRecord(PRODUCT_CODE, { jobId: data.id });
+          log('requestProductUseRecord result', result);
+          if (result) {
+            handleContact(result.declarationTypeResult);
+            return;
+          }
        }
        const time = await requestProductBalance(PRODUCT_CODE);
        if (time <= 0) {
          const allowBuy = await requestAllBuyProduct(PRODUCT_CODE);
+          setShowContact(true);
          setStatus(allowBuy ? DialogStatus.JOB_BUY : DialogStatus.JOB_UNABLE_UNLOCK);
-        } else {
+        }
+        // 创建模卡之后可以直接解锁一次, 分享后解锁一次
+        else if (getSkipPrejobAction() || skipPreAction) {
          const productInfo = await requestUseProduct(PRODUCT_CODE, { jobId: data.id });
+          setShowPrejob(false);
+          if (!skipPreAction) {
+            setSkipPrejobAction(false);
+          }
          handleContact(productInfo.declarationTypeResult);
+        } else {
+          setShowPrejob(true);
+          setStatus(DialogStatus.PRE_ACTION);
+
+          // const productInfo = await requestUseProduct(PRODUCT_CODE, { jobId: data.id });
+          // handleContact(productInfo.declarationTypeResult);
        }
      } catch (e) {
        Toast.error('出错了，请重试');
@ -104,21 +144,44 @@ function ProductJobDialog(props: Omit<IProps, 'visible'>) {
    initRef.current();
  }, []);

+  useEffect(() => {
+    Taro.eventCenter.once(EventName.PRE_ACTION_SHARE_SUCCESS, () => {
+      initRef.current(true, true);
+    });
+    Taro.eventCenter.on(EventName.PRE_ACTION_VIDEO_SUCCESS, () => {
+      initRef.current(true, true);
+    });
+
+    return () => {
+      Taro.eventCenter.off(EventName.PRE_ACTION_SHARE_SUCCESS);
+      Taro.eventCenter.off(EventName.PRE_ACTION_VIDEO_SUCCESS);
+    };
+  }, []);
+
  if (status === DialogStatus.LOADING) {
    return null;
  }

  return (
-    <Dialog className={PREFIX} onClose={onClose} open>
-      <Dialog.Content>
-        {status === DialogStatus.JOB_CONTACT_CS && <ContactCustomerService onAfterConfirm={handleCloseDialog} />}
-        {status === DialogStatus.JOB_CONTACT_DIRECT && (
-          <ContactDirect publisherAcctNo={publisherAcctNo} onAfterConfirm={handleCloseDialog} onReport={handleReport} />
-        )}
-        {status === DialogStatus.JOB_BUY && <JobBuy onConfirm={handleAfterBuy} />}
-        {status === DialogStatus.JOB_UNABLE_UNLOCK && <UnableUnlockContent onConfirm={handleCloseDialog} />}
-      </Dialog.Content>
-    </Dialog>
+    <div>
+      <PrejobPopup open={showPrejob} onCancel={handleClosePrejob} onConfirm={handleConfirmPrejob} />
+      <Dialog className={PREFIX} onClose={onClose} open={showContact}>
+        <Dialog.Content>
+          {status === DialogStatus.JOB_CONTACT_CS && <ContactCustomerService onAfterConfirm={handleCloseDialog} />}
+          {status === DialogStatus.JOB_CONTACT_DIRECT && (
+            <ContactDirect
+              publisherAcctNo={publisherAcctNo}
+              onAfterConfirm={handleCloseDialog}
+              onReport={handleReport}
+            />
+          )}
+          {(status === DialogStatus.JOB_BUY || status === DialogStatus.PREACTION_JOB_BUY) && (
+            <JobBuy onConfirm={handleAfterBuy} justBuy={status === DialogStatus.PREACTION_JOB_BUY} />
+          )}
+          {status === DialogStatus.JOB_UNABLE_UNLOCK && <UnableUnlockContent onConfirm={handleCloseDialog} />}
+        </Dialog.Content>
+      </Dialog>
+    </div>
  );
 }

--- a/src/components/product-dialog/steps-ui/job-buy.tsx
+++ b/src/components/product-dialog/steps-ui/job-buy.tsx
@ -2,7 +2,7 @@ import Taro from '@tarojs/taro';

 import { Button } from '@taroify/core';
 import classNames from 'classnames';
-import { useCallback, useEffect, useState } from 'react';
+import { Fragment, useCallback, useEffect, useState } from 'react';

 import Badge from '@/components/badge';
 import { PREFIX } from '@/components/product-dialog/const';
@ -16,6 +16,7 @@ import { postSubscribe, subscribeMessage } from '@/utils/subscribe';
 import Toast from '@/utils/toast';

 interface IProps {
+  justBuy?: boolean;
  onConfirm: () => void;
 }

@ -29,22 +30,22 @@ interface Item {
 }

 const LIST: Item[] = [
-  { id: ProductSpecId.WeeklyVIP, title: '非会员', content: '每日2次', price: '免费', amt: 0 },
+  { id: ProductSpecId.WeeklyVIP, title: '日会员', content: '1天内免广告', price: '60播豆', amt: 6, badge: '限时体验' },
  {
    id: ProductSpecId.WeeklyVIP,
    title: '周会员',
-    content: '每日5次',
-    price: '60播豆',
-    amt: 6,
-    badge: '限时体验',
+    content: '7天内免广告',
+    price: '180播豆',
+    amt: 18,
+    badge: '4.2折',
  },
  {
    id: ProductSpecId.NewMonthlyVIP,
    title: '月会员',
-    content: '每日5次',
-    price: '180播豆',
-    amt: 18,
-    badge: ' 超值',
+    content: '30天内免广告',
+    price: '300播豆',
+    amt: 30,
+    badge: '1.6折',
  },
 ];

@ -75,6 +76,7 @@ export default function JobBuy(props: IProps) {
        type: OrderType.VIP,
        amt: getOrderPrice(selectItem.amt),
        productCode: ProductType.VIP,
+        // todo: 日会员的 productSpectId 是什么？
        productSpecId: selectItem.id,
      });
      log('handleBuy payInfo', payOrderNo, createPayInfo);
@ -107,14 +109,26 @@ export default function JobBuy(props: IProps) {
  return (
    <div className={`${PREFIX}__job-buy`}>
      <div className={`${PREFIX}__job-buy__header`}>
-        <div>今日通告对接次数</div>
-        <div className="highlight">已用完</div>
+        {props.justBuy ? (
+          <div>开通播络会员即可直接查看联系方式</div>
+        ) : (
+          <Fragment>
+            <div>今日通告对接次数</div>
+            <div className="highlight">已用完</div>
+          </Fragment>
+        )}
      </div>
      <div className={`${PREFIX}__job-buy__describe`}>
-        <div>请</div>
-        <div className="highlight">明日</div>
-        <div>再来 或 </div>
-        <div className="highlight">升级会员</div>
+        {props.justBuy ? (
+          <div>每天可查看10个联系方式</div>
+        ) : (
+          <Fragment>
+            <div>请</div>
+            <div className="highlight">明日</div>
+            <div>再来 或 </div>
+            <div className="highlight">升级会员</div>
+          </Fragment>
+        )}
      </div>
      <div className={`${PREFIX}__job-buy__container`}>
        {LIST.map(item => (