feat: first commit

src/components/product-dialog/steps-ui/common-qr-code.tsx

@@ -0,0 +1,71 @@
+import { Button, Image } from '@tarojs/components';
+
+import classNames from 'classnames';
+import { ReactElement } from 'react';
+
+import { PREFIX } from '@/components/product-dialog/const';
+import QrCode from '@/components/qr-code';
+import { QrCodeType } from '@/constants/product';
+
+interface IProps {
+  type: QrCodeType;
+  onClickCopy?: () => void;
+}
+
+export default function QrCodeContent(props: IProps) {
+  const { type, onClickCopy } = props;
+
+  let header: ReactElement | string | null = null;
+  let describe: ReactElement | string | null = null;
+  let footer: ReactElement | string | null = null;
+
+  if (type === QrCodeType.ConnectCustomerService) {
+    header = <div className="highlight">复制对接信息，发送给小二</div>;
+    describe = (
+      <Button className={`${PREFIX}__qr-code__copy-button`} onClick={onClickCopy}>
+        复制对接信息
+      </Button>
+    );
+    footer = '在微信聊天框长按即可粘贴已复制内容';
+  } else if (type === QrCodeType.PublishJob) {
+    header = (
+      <>
+        <Image
+          mode="aspectFit"
+          className={`${PREFIX}__qr-code__copy-icon`}
+          src={require('@/statics/svg/success-circle-fill.svg')}
+        />
+        <div className={`${PREFIX}__qr-code__copy-success`}>您已支付</div>
+      </>
+    );
+    describe = (
+      <div className={`${PREFIX}__qr-code__steps`}>
+        <div className={`${PREFIX}__qr-code__step`}>
+          <div className={`${PREFIX}__qr-code__step-number`}>1</div>
+          <div className={`${PREFIX}__qr-code__step-title`}>扫码二维码联系专属客服</div>
+        </div>
+        <div className={`${PREFIX}__qr-code__step-line`} />
+        <div className={`${PREFIX}__qr-code__step`}>
+          <div className={`${PREFIX}__qr-code__step-number`}>2</div>
+          <div className={classNames(`${PREFIX}__qr-code__step-title`, 'highlight')}>发送付款截图</div>
+        </div>
+      </div>
+    );
+    footer = (
+      <div className={`${PREFIX}__qr-code__tips-footer`}>
+        <div className="divider" />
+        <div className="tips">{`客服工作时间：工作日9:30-18:00\n上班后会第一时间为您处理`}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`${PREFIX}__qr-code`}>
+      <div className={`${PREFIX}__qr-code__header`}>{header}</div>
+      {describe}
+      <QrCode className={`${PREFIX}__qr-code__image`} type={type} />
+      <div className={`${PREFIX}__qr-code__tips`}>长按并识别二维码，添加好友</div>
+      <div className={`${PREFIX}__qr-code__footer`}>{footer}</div>
+    </div>
+  );
+}

src/components/product-dialog/steps-ui/company-publish-job-buy.tsx

@@ -0,0 +1,172 @@
+import Taro from '@tarojs/taro';
+
+import { Button } from '@taroify/core';
+import classNames from 'classnames';
+import { useCallback, useEffect, useState } from 'react';
+
+import Badge from '@/components/badge';
+import { PREFIX } from '@/components/product-dialog/const';
+import { CollectEventName, ReportEventId } from '@/constants/event';
+import { OrderStatus, OrderType, ProductSpecId, ProductType } from '@/constants/product';
+import { SubscribeTempId } from '@/constants/subscribe';
+import { logWithPrefix } from '@/utils/common';
+import { collectEvent, reportEvent } from '@/utils/event';
+import { getOrderPrice, isCancelPay, requestCreatePayInfo, requestOrderInfo, requestPayment } from '@/utils/product';
+import { postSubscribe, subscribeMessage } from '@/utils/subscribe';
+import Toast from '@/utils/toast';
+
+interface IProps {
+  onNext: () => void;
+}
+
+const log = logWithPrefix('company-publish-job-buy');
+const TEMP_IDS = [SubscribeTempId.UNREAD_MESSAGE_REMINDER, SubscribeTempId.NEW_MESSAGE_REMINDER];
+interface Item {
+  id: ProductSpecId;
+  title: string;
+  price: string;
+  amt: number;
+  contents: { content: string; highlight?: boolean }[];
+  badge?: string;
+}
+
+const LIST: Item[] = [
+  {
+    id: ProductSpecId.BOSS_VIP_NEW_1,
+    title: '展示一周',
+    price: '480播豆',
+    amt: 48,
+    badge: '限时体验',
+    contents: [
+      { content: '-1个通告' },
+      { content: '-每天可查看20个主播详情' },
+      { content: '-每天可自主联系10个主播' },
+      // { content: '-播络可代为联系20个主播（高成功率）', highlight: true },
+      { content: '-有效期一周' },
+    ],
+  },
+  {
+    id: ProductSpecId.BOSS_VIP_NEW_2,
+    title: '展示一月',
+    price: '960播豆',
+    amt: 96,
+    badge: '五折',
+    contents: [
+      { content: '-1个通告' },
+      { content: '-每天可查看20个主播详情' },
+      { content: '-每天可自主联系10个主播' },
+      // { content: '-播络可代为联系20个主播（高成功率）', highlight: true },
+      { content: '-有效期一个月' },
+    ],
+  },
+  // {
+  //   id: ProductSpecId.BOSS_VIP_NEW_3,
+  //   title: '季会员',
+  //   price: '2680播豆',
+  //   amt: 268,
+  //   badge: '7折',
+  //   contents: [
+  //     { content: '-1个通告' },
+  //     { content: '-每天可查看20个主播详情' },
+  //     { content: '-每天可自主联系10个主播' },
+  //     { content: '-播络可代为联系60个主播（高成功率）', highlight: true },
+  //     { content: '-有效期3个月' },
+  //   ],
+  // },
+];
+
+const subscribe = async () => {
+  const result = await subscribeMessage(TEMP_IDS);
+  const successIds: SubscribeTempId[] = [];
+  TEMP_IDS.forEach(id => {
+    result[id] === 'accept' && successIds.push(id);
+  });
+  postSubscribe(TEMP_IDS, successIds);
+};
+
+export default function CompanyPublishJobBuy(props: IProps) {
+  const { onNext } = props;
+  const [selectItem, setSelectItem] = useState(LIST[0]);
+
+  const handleClickItem = useCallback((newSelectItem: Item) => setSelectItem(newSelectItem), []);
+
+  const handleBuy = useCallback(async () => {
+    log('handleBuy');
+    reportEvent(ReportEventId.CLICK_PAY_PUBLISH_JOB);
+    try {
+      Taro.showLoading();
+      const { payOrderNo, createPayInfo } = await requestCreatePayInfo({
+        type: OrderType.CompanyVip,
+        amt: getOrderPrice(selectItem.amt),
+        productCode: ProductType.BOSS_VIP_NEW,
+        productSpecId: selectItem.id,
+      });
+      log('handleBuy payInfo', payOrderNo, createPayInfo);
+      await requestPayment({
+        timeStamp: createPayInfo.timeStamp,
+        nonceStr: createPayInfo.nonceStr,
+        package: createPayInfo.packageVal,
+        signType: createPayInfo.signType,
+        paySign: createPayInfo.paySign,
+        success: () => subscribe(),
+      });
+      const { status } = await requestOrderInfo({ payOrderNo });
+      log('handleBuy orderInfo', status);
+      if (status !== OrderStatus.Success) {
+        throw new Error('order status error');
+      }
+      Taro.hideLoading();
+      onNext();
+    } catch (e) {
+      Taro.hideLoading();
+      Toast.error(isCancelPay(e) ? '取消购买' : '购买失败请重试');
+      log('handleBuy error', e);
+    }
+  }, [selectItem, onNext]);
+
+  useEffect(() => {
+    collectEvent(CollectEventName.CREATE_ORDER_VIEW, { orderType: OrderType.BossVip, source: 'user-page' });
+  }, []);
+
+  return (
+    <div className={`${PREFIX}__company-publish-job-buy`}>
+      <div className={`${PREFIX}__company-publish-job-buy__header`}>发认证通告限时折扣</div>
+      <div className={`${PREFIX}__company-publish-job-buy__price-container`}>
+        {LIST.map(item => (
+          <div
+            key={item.price}
+            className={classNames(`${PREFIX}__company-publish-job-buy__item`, {
+              selected: item.amt === selectItem.amt,
+              disabled: item.amt === 0,
+            })}
+            onClick={item.amt === 0 ? undefined : () => handleClickItem(item)}
+          >
+            <div className={classNames(`${PREFIX}__company-publish-job-buy__item__title`, { free: item.amt === 0 })}>
+              {item.title}
+            </div>
+            <div className={`${PREFIX}__company-publish-job-buy__item__price`}>{item.price}</div>
+            {item.badge && <Badge className={`${PREFIX}__company-publish-job-buy__item__badge`} text={item.badge} />}
+          </div>
+        ))}
+      </div>
+      <div className={`${PREFIX}__company-publish-job-buy__divider`}>
+        <div className={`${PREFIX}__company-publish-job-buy__divider__left-line`} />
+        <div className={`${PREFIX}__company-publish-job-buy__divider__title`}>包含</div>
+        <div className={`${PREFIX}__company-publish-job-buy__divider__right-line`} />
+      </div>
+      <div className={`${PREFIX}__company-publish-job-buy__contents`}>
+        {selectItem.contents.map(i => (
+          <div
+            className={classNames(`${PREFIX}__company-publish-job-buy__content`, { highlight: i.highlight })}
+            key={i.content}
+          >
+            {i.content}
+          </div>
+        ))}
+      </div>
+      <Button className={`${PREFIX}__company-publish-job-buy__button`} onClick={handleBuy}>
+        {`支付${selectItem.amt}元`}
+      </Button>
+    </div>
+  );
+}

src/components/product-dialog/steps-ui/group-buy-success.tsx

@@ -0,0 +1,32 @@
+import { Image } from '@tarojs/components';
+
+import { Button } from '@taroify/core';
+
+import { PREFIX } from '@/components/product-dialog/const';
+
+interface IProps {
+  unlockTime: number;
+  onConfirm: () => void;
+}
+
+export default function GroupBuySuccess(props: IProps) {
+  return (
+    <div className={`${PREFIX}__group-buy_success`}>
+      <div className={`${PREFIX}__group-buy_success__tips-container`}>
+        <Image
+          mode="aspectFit"
+          className={`${PREFIX}__group-buy_success__icon`}
+          src={require('@/statics/svg/success-circle-fill.svg')}
+        />
+        <div className={`${PREFIX}__group-buy_success__tips`}>购买成功</div>
+      </div>
+      <div className={`${PREFIX}__group-buy_success__header`}>
+        <div>当前剩余人工对接次数</div>
+        <div className="highlight">{` ${props.unlockTime}次`}</div>
+      </div>
+      <Button className={`${PREFIX}__group-buy_success__button`} onClick={props.onConfirm}>
+        返回
+      </Button>
+    </div>
+  );
+}

src/components/product-dialog/steps-ui/group-buy.tsx

@@ -0,0 +1,110 @@
+import Taro from '@tarojs/taro';
+
+import { Button } from '@taroify/core';
+import classNames from 'classnames';
+import { useCallback, useEffect, useState } from 'react';
+
+import Badge from '@/components/badge';
+import { PREFIX } from '@/components/product-dialog/const';
+import { CollectEventName } from '@/constants/event';
+import { OrderStatus, OrderType, ProductSpecId, ProductType } from '@/constants/product';
+import { logWithPrefix } from '@/utils/common';
+import { collectEvent } from '@/utils/event';
+import {
+  getOrderPrice,
+  requestCreatePayInfo,
+  requestOrderInfo,
+  requestPayment,
+  requestProductBalance,
+} from '@/utils/product';
+import Toast from '@/utils/toast';
+
+interface IProps {
+  source: 'group-list' | 'job-detail';
+  onConfirm: (time: number) => void;
+}
+
+interface Item {
+  id: ProductSpecId;
+  num: number;
+  price: number;
+  badge?: string;
+}
+
+const LIST: Item[] = [
+  { id: ProductSpecId.AddGroup1, num: 1, price: 2 },
+  { id: ProductSpecId.AddGroup2, num: 2, price: 3, badge: '7.5折' },
+  { id: ProductSpecId.AddGroup3, num: 5, price: 6, badge: '6折' },
+];
+
+const log = logWithPrefix('group-buy');
+
+export default function GroupBuy(props: IProps) {
+  const { source, onConfirm } = props;
+  const [selectItem, setSelectItem] = useState(LIST[2]);
+
+  const handleClickItem = useCallback((newSelectItem: Item) => setSelectItem(newSelectItem), []);
+
+  const handleBuy = useCallback(async () => {
+    log('handleBuy', selectItem);
+    try {
+      Taro.showLoading();
+      const { payOrderNo, createPayInfo } = await requestCreatePayInfo({
+        type: OrderType.Group,
+        amt: getOrderPrice(selectItem.price),
+        // amt: selectItem.price,
+        // amt: 1,
+        productCode: ProductType.AddGroup,
+        productSpecId: selectItem.id,
+      });
+      log('handleBuy payInfo', payOrderNo, createPayInfo);
+      await requestPayment({
+        timeStamp: createPayInfo.timeStamp,
+        nonceStr: createPayInfo.nonceStr,
+        package: createPayInfo.packageVal,
+        signType: createPayInfo.signType,
+        paySign: createPayInfo.paySign,
+      });
+      const { status } = await requestOrderInfo({ payOrderNo });
+      log('handleBuy orderInfo', status);
+      if (status !== OrderStatus.Success) {
+        throw new Error('order status error');
+      }
+      const time = await requestProductBalance(ProductType.AddGroup);
+      log('handleBuy new addGroupTime', time);
+      onConfirm(time);
+    } catch (e) {
+      Toast.error('购买失败!');
+      log('handleBuy error', e);
+    } finally {
+      Taro.hideLoading();
+    }
+  }, [selectItem, onConfirm]);
+
+  useEffect(() => {
+    collectEvent(CollectEventName.CREATE_ORDER_VIEW, { orderType: OrderType.Group, source });
+  }, [source]);
+
+  return (
+    <div className={`${PREFIX}__group-buy`}>
+      <div className={`${PREFIX}__group-buy__header`}>购买对接次数</div>
+      <div className={`${PREFIX}__group-buy__container`}>
+        {LIST.map(item => (
+          <div
+            key={item.price}
+            className={classNames(`${PREFIX}__group-buy__item`, { selected: item.price === selectItem.price })}
+            onClick={() => handleClickItem(item)}
+          >
+            <div className={`${PREFIX}__group-buy__item-title`}>{`${item.num} 个`}</div>
+            <div className={`${PREFIX}__group-buy__item-price`}>{`${item.price} 元`}</div>
+            {item.badge && <Badge text={item.badge} />}
+          </div>
+        ))}
+      </div>
+      <Button className={`${PREFIX}__group-buy__button`} onClick={handleBuy}>
+        {`支付 ${selectItem.price} 元`}
+      </Button>
+      <div className={`${PREFIX}__group-buy__tips`}>{`已选：${selectItem.num} 次`}</div>
+    </div>
+  );
+}

src/components/product-dialog/steps-ui/group-confirm.tsx

@@ -0,0 +1,26 @@
+import { Button } from '@taroify/core';
+import classNames from 'classnames';
+
+import { PREFIX } from '@/components/product-dialog/const';
+
+interface IConfirmContentProps {
+  unlockTime: number;
+  onConfirm: () => void;
+}
+
+export default function ConfirmContent(props: IConfirmContentProps) {
+  const { unlockTime, onConfirm } = props;
+  return (
+    <div className={`${PREFIX}__group-confirm`}>
+      <div className={classNames(`${PREFIX}__group-confirm__tips`, 'highlight')}>如您不在群里，可让播络邀请</div>
+      <div className={`${PREFIX}__group-confirm__header`}>
+        <div>您还剩</div>
+        <div className="highlight">{`${unlockTime}次邀请`}</div>
+        <div>机会</div>
+      </div>
+      <Button className={`${PREFIX}__group-confirm__button`} onClick={onConfirm}>
+        邀我进群
+      </Button>
+    </div>
+  );
+}

src/components/product-dialog/steps-ui/group-need-buy.tsx

@@ -0,0 +1,27 @@
+import { Button } from '@taroify/core';
+import classNames from 'classnames';
+
+import Badge from '@/components/badge';
+import { PREFIX } from '@/components/product-dialog/const';
+
+interface IUnableContentProp {
+  onConfirm: () => void;
+}
+
+export default function GroupNeedBuyContent(props: IUnableContentProp) {
+  return (
+    <div className={`${PREFIX}__group-need-buy`}>
+      <div className={classNames(`${PREFIX}__group-need-buy__top-tips`, 'highlight')}>如您不在群里，可让播络邀请</div>
+      <div className={`${PREFIX}__group-need-buy__header`}>
+        <div>您的邀请机会</div>
+        <div className="highlight">已用完</div>
+      </div>
+      <div className={`${PREFIX}__group-need-buy__button-container`}>
+        <Button className={`${PREFIX}__group-need-buy__button`} onClick={props.onConfirm}>
+          购买邀请群数
+        </Button>
+        <Badge text="限时折扣" />
+      </div>
+    </div>
+  );
+}

src/components/product-dialog/steps-ui/job-buy.tsx

@@ -0,0 +1,142 @@
+import Taro from '@tarojs/taro';
+
+import { Button } from '@taroify/core';
+import classNames from 'classnames';
+import { useCallback, useEffect, useState } from 'react';
+
+import Badge from '@/components/badge';
+import { PREFIX } from '@/components/product-dialog/const';
+import { CollectEventName } from '@/constants/event';
+import { OrderStatus, OrderType, ProductSpecId, ProductType } from '@/constants/product';
+import { SubscribeTempId } from '@/constants/subscribe';
+import { logWithPrefix } from '@/utils/common';
+import { collectEvent } from '@/utils/event';
+import { getOrderPrice, isCancelPay, requestCreatePayInfo, requestOrderInfo, requestPayment } from '@/utils/product';
+import { postSubscribe, subscribeMessage } from '@/utils/subscribe';
+import Toast from '@/utils/toast';
+
+interface IProps {
+  onConfirm: () => void;
+}
+
+interface Item {
+  id: ProductSpecId;
+  title: string;
+  content: string;
+  price: string;
+  amt: number;
+  badge?: string;
+}
+
+const LIST: Item[] = [
+  { id: ProductSpecId.WeeklyVIP, title: '非会员', content: '每日2次', price: '免费', amt: 0 },
+  {
+    id: ProductSpecId.WeeklyVIP,
+    title: '周会员',
+    content: '每日5次',
+    price: '60播豆',
+    amt: 6,
+    badge: '限时体验',
+  },
+  {
+    id: ProductSpecId.NewMonthlyVIP,
+    title: '月会员',
+    content: '每日5次',
+    price: '180播豆',
+    amt: 18,
+    badge: ' 超值',
+  },
+];
+
+const log = logWithPrefix('job-buy');
+const SUBSCRIBE_ID = SubscribeTempId.SUBSCRIBE_VIP;
+
+const subscribe = async () => {
+  const result = await subscribeMessage([SUBSCRIBE_ID]);
+  const success = result[SUBSCRIBE_ID] === 'accept';
+  if (!success) {
+    postSubscribe([SUBSCRIBE_ID], []);
+    return;
+  }
+  postSubscribe([SUBSCRIBE_ID], [SUBSCRIBE_ID]);
+};
+
+export default function JobBuy(props: IProps) {
+  const { onConfirm } = props;
+  const [selectItem, setSelectItem] = useState(LIST[1]);
+
+  const handleClickItem = useCallback((newSelectItem: Item) => setSelectItem(newSelectItem), []);
+
+  const handleBuy = useCallback(async () => {
+    log('handleBuy', selectItem);
+    try {
+      Taro.showLoading();
+      const { payOrderNo, createPayInfo } = await requestCreatePayInfo({
+        type: OrderType.VIP,
+        amt: getOrderPrice(selectItem.amt),
+        productCode: ProductType.VIP,
+        productSpecId: selectItem.id,
+      });
+      log('handleBuy payInfo', payOrderNo, createPayInfo);
+      await requestPayment({
+        timeStamp: createPayInfo.timeStamp,
+        nonceStr: createPayInfo.nonceStr,
+        package: createPayInfo.packageVal,
+        signType: createPayInfo.signType,
+        paySign: createPayInfo.paySign,
+        success: () => subscribe(),
+      });
+      const { status } = await requestOrderInfo({ payOrderNo });
+      log('handleBuy orderInfo', status);
+      if (status !== OrderStatus.Success) {
+        throw new Error('order status error');
+      }
+      Taro.hideLoading();
+      onConfirm();
+    } catch (e) {
+      Taro.hideLoading();
+      Toast.error(isCancelPay(e) ? '取消购买' : '购买失败请重试');
+      log('handleBuy error', e);
+    }
+  }, [selectItem, onConfirm]);
+
+  useEffect(() => {
+    collectEvent(CollectEventName.CREATE_ORDER_VIEW, { orderType: OrderType.VIP });
+  }, []);
+
+  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>
+      <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>
+        ))}
+      </div>
+      <Button className={`${PREFIX}__job-buy__button`} onClick={handleBuy}>
+        {`支付 ${selectItem.amt} 元`}
+      </Button>
+      {/* <div className={`${PREFIX}__job-buy__tips`}>{`已选：${selectItem.title}，含进本地群服务`}</div> */}
+    </div>
+  );
+}

src/components/product-dialog/steps-ui/job-contact-customer.tsx

@@ -0,0 +1,47 @@
+import Taro from '@tarojs/taro';
+
+import { Button } from '@taroify/core';
+
+import { PREFIX } from '@/components/product-dialog/const';
+import { SubscribeTempId } from '@/constants/subscribe';
+import { postSubscribe, subscribeMessage } from '@/utils/subscribe';
+import Toast from '@/utils/toast';
+
+interface IContactCSProps {
+  onAfterConfirm: () => void;
+}
+
+const SUBSCRIBE_ID = SubscribeTempId.SUBSCRIBE_JOB;
+
+export default function ContactCustomerService(props: IContactCSProps) {
+  const { onAfterConfirm } = props;
+
+  const handleClick = async () => {
+    try {
+      Taro.showLoading();
+      const result = await subscribeMessage([SUBSCRIBE_ID]);
+      const success = result[SUBSCRIBE_ID] === 'accept';
+      Taro.hideLoading();
+      if (!success) {
+        Toast.error('拒绝订阅');
+        postSubscribe([SUBSCRIBE_ID], []);
+        return;
+      }
+      Toast.success('订阅成功');
+      postSubscribe([SUBSCRIBE_ID], [SUBSCRIBE_ID]);
+      onAfterConfirm();
+    } catch (e) {}
+  };
+
+  return (
+    <div className={`${PREFIX}__job-contact_cs`}>
+      <div className={`${PREFIX}__job-contact_cs__header`}>您已报名本通告</div>
+      <div className={`${PREFIX}__job-contact_cs__describe`}>本通告尚未维护联系方式</div>
+      <div className={`${PREFIX}__job-contact_cs__content`}>{`本通告不消耗对接次数，\n联系上立马通知您`}</div>
+      <div className={`${PREFIX}__job-contact_cs__describe`}>联系上后会通知您，请点击下方订阅通知</div>
+      <Button className={`${PREFIX}__job-contact_cs__button`} onClick={handleClick}>
+        订阅通知
+      </Button>
+    </div>
+  );
+}

src/components/product-dialog/steps-ui/job-contact-direct.tsx

@@ -0,0 +1,34 @@
+import { Button } from '@taroify/core';
+
+import { PREFIX } from '@/components/product-dialog/const';
+import { copy } from '@/utils/common';
+
+interface IContactDirectProps {
+  publisherAcctNo: string;
+  onAfterConfirm: () => void;
+  onReport: () => void;
+}
+
+export default function ContactDirect(props: IContactDirectProps) {
+  const { publisherAcctNo, onAfterConfirm, onReport } = props;
+
+  const handleCopyAndContact = async () => {
+    await copy(publisherAcctNo);
+    onAfterConfirm();
+  };
+
+  return (
+    <div className={`${PREFIX}__job-contact_direct`}>
+      <div className={`${PREFIX}__job-contact_direct__header`}>您已报名本通告</div>
+      <div className={`${PREFIX}__job-contact_direct__describe`}>通告发布人微信</div>
+      <div className={`${PREFIX}__job-contact_direct__content`}>{publisherAcctNo}</div>
+      <div className={`${PREFIX}__job-contact_direct__describe`}>请添加对方好友，并备注：播络主播报单</div>
+      <Button className={`${PREFIX}__job-contact_direct__button`} onClick={handleCopyAndContact}>
+        复制微信号
+      </Button>
+      {/* <div className={`${PREFIX}__job-contact_direct__report`} onClick={onReport}>
+        上报：微信加不上
+      </div> */}
+    </div>
+  );
+}

src/components/product-dialog/steps-ui/job-contact-with-group.tsx

@@ -0,0 +1,68 @@
+import { Button } from '@taroify/core';
+import classNames from 'classnames';
+import { ReactElement } from 'react';
+
+import Badge from '@/components/badge';
+import { DialogStatus, PREFIX } from '@/components/product-dialog/const';
+
+interface IContactDirectProps {
+  status: DialogStatus;
+  publisherAcctNo: string;
+  imGroupNick: string;
+  inviteTime?: number;
+  onConfirm: (status: DialogStatus) => void;
+}
+
+export default function ContactWithGroup(props: IContactDirectProps) {
+  const { status, publisherAcctNo, inviteTime, onConfirm } = props;
+
+  const handleConfirm = async () => {
+    onConfirm(status);
+  };
+
+  let describe: ReactElement | null = null;
+  let buttonText = '确定';
+  let badge: ReactElement | null = null;
+  if (status === DialogStatus.JOB_CONTACT_INVITE_GROUP) {
+    describe = (
+      <div className={classNames(`${PREFIX}__job-contact-with-group__describe`)}>
+        <div>您还剩</div>
+        <div className="highlight">{`${inviteTime}次对接`}</div>
+        <div>机会</div>
+      </div>
+    );
+  } else if (status === DialogStatus.JOB_CONTACT_NEED_BUY_GROUP) {
+    describe = (
+      <div className={classNames(`${PREFIX}__job-contact-with-group__describe`)}>
+        <div>您的人工对接机会</div>
+        <div className="highlight">已用完</div>
+      </div>
+    );
+  }
+
+  if (status === DialogStatus.JOB_CONTACT_INVITE_GROUP) {
+    buttonText = '帮我对接';
+  } else if (status === DialogStatus.JOB_CONTACT_NEED_BUY_GROUP) {
+    buttonText = '购买对接次数';
+  }
+
+  if (status === DialogStatus.JOB_CONTACT_NEED_BUY_GROUP) {
+    badge = <Badge text="限时折扣" />;
+  }
+
+  return (
+    <div className={`${PREFIX}__job-contact-with-group`}>
+      <div className={`${PREFIX}__job-contact-with-group__header`}>该通告需要播络帮你对接</div>
+      <div className={`${PREFIX}__job-contact-with-group__content`}>
+        <div>{`发布人昵称: ${publisherAcctNo}`}</div>
+      </div>
+      {describe}
+      <div className={`${PREFIX}__job-contact-with-group__button-container`}>
+        <Button className={`${PREFIX}__job-contact-with-group__button`} onClick={handleConfirm}>
+          {buttonText}
+        </Button>
+        {badge}
+      </div>
+    </div>
+  );
+}

src/components/product-dialog/steps-ui/job-unable.tsx

@@ -0,0 +1,26 @@
+import { Button } from '@taroify/core';
+
+import { PREFIX } from '@/components/product-dialog/const';
+
+interface IUnableUnlockContentProp {
+  onConfirm: () => void;
+}
+
+export default function UnableUnlockContent(props: IUnableUnlockContentProp) {
+  return (
+    <div className={`${PREFIX}__job-unable`}>
+      <div className={`${PREFIX}__job-unable__header`}>
+        <div>今日通告对接次数</div>
+        <div className="highlight">已用完</div>
+      </div>
+      <div className={`${PREFIX}__job-unable__describe`}>
+        <div>请</div>
+        <div className="highlight">明日</div>
+        <div>再来</div>
+      </div>
+      <Button className={`${PREFIX}__job-unable__button`} onClick={props.onConfirm}>
+        确定
+      </Button>
+    </div>
+  );
+}

src/components/product-dialog/steps-ui/publish-job-buy.tsx

@@ -0,0 +1,78 @@
+import Taro from '@tarojs/taro';
+
+import { Button } from '@taroify/core';
+import { useCallback, useEffect } from 'react';
+
+import Badge from '@/components/badge';
+import { PREFIX } from '@/components/product-dialog/const';
+import { CollectEventName } from '@/constants/event';
+import { OrderStatus, OrderType, ProductSpecId, ProductType } from '@/constants/product';
+import { logWithPrefix } from '@/utils/common';
+import { collectEvent } from '@/utils/event';
+import { getOrderPrice, isCancelPay, requestCreatePayInfo, requestOrderInfo, requestPayment } from '@/utils/product';
+import Toast from '@/utils/toast';
+
+interface IProps {
+  onNext: () => void;
+}
+
+const log = logWithPrefix('publish-job-buy');
+const PRICE = 48;
+
+export default function PublishJobBuy(props: IProps) {
+  const { onNext } = props;
+
+  const handleBuy = useCallback(async () => {
+    log('handleBuy');
+    try {
+      Taro.showLoading();
+      const { payOrderNo, createPayInfo } = await requestCreatePayInfo({
+        type: OrderType.BossVip,
+        amt: getOrderPrice(PRICE),
+        // amt: PRICE,
+        // amt: 1,
+        productCode: ProductType.BossVip,
+        productSpecId: ProductSpecId.BossVip,
+      });
+      log('handleBuy payInfo', payOrderNo, createPayInfo);
+      await requestPayment({
+        timeStamp: createPayInfo.timeStamp,
+        nonceStr: createPayInfo.nonceStr,
+        package: createPayInfo.packageVal,
+        signType: createPayInfo.signType,
+        paySign: createPayInfo.paySign,
+      });
+      const { status } = await requestOrderInfo({ payOrderNo });
+      log('handleBuy orderInfo', status);
+      if (status !== OrderStatus.Success) {
+        throw new Error('order status error');
+      }
+      Taro.hideLoading();
+      onNext();
+    } catch (e) {
+      Taro.hideLoading();
+      Toast.error(isCancelPay(e) ? '取消购买' : '购买失败请重试');
+      log('handleBuy error', e);
+    }
+  }, [onNext]);
+
+  useEffect(() => {
+    collectEvent(CollectEventName.CREATE_ORDER_VIEW, { orderType: OrderType.BossVip, source: 'user-page' });
+  }, []);
+
+  return (
+    <div className={`${PREFIX}__publish-job-buy`}>
+      <div className={`${PREFIX}__publish-job-buy__header`}>发通告限时折扣</div>
+
+      <div className={`${PREFIX}__publish-job-buy__price-container`}>
+        <div className={`${PREFIX}__publish-job-buy__price`}>{PRICE}</div>
+        <div>元</div>
+        <Badge className={`${PREFIX}__publish-job-buy__badge`} text="7.1折" />
+      </div>
+      <div className={`${PREFIX}__publish-job-buy__tips`}>原价：68元/月</div>
+      <Button className={`${PREFIX}__publish-job-buy__button`} onClick={handleBuy}>
+        立即支付
+      </Button>
+    </div>
+  );
+}