feat:
This commit is contained in:
chashaobao
102
src/components/product-dialog/contact/index.tsx
Normal file
102
src/components/product-dialog/contact/index.tsx
Normal file
@ -0,0 +1,102 @@
|
||||
import Taro from '@tarojs/taro';
|
||||
|
||||
import { Dialog } from '@taroify/core';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
|
||||
import { DialogStatus, PREFIX } from '@/components/product-dialog/const';
|
||||
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 { DeclarationType, ProductType } from '@/constants/product';
|
||||
import { JobDetails } from '@/types/job';
|
||||
import { ProductInfo } from '@/types/product';
|
||||
import { logWithPrefix } from '@/utils/common';
|
||||
import { requestProductUseRecord, requestUseProduct } from '@/utils/product';
|
||||
import Toast from '@/utils/toast';
|
||||
|
||||
import '../index.less';
|
||||
import { EventName } from '@/constants/app';
|
||||
|
||||
interface IProps {
|
||||
data: JobDetails;
|
||||
productInfo?: ProductInfo;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const PRODUCT_CODE = ProductType.VIP;
|
||||
const log = logWithPrefix('product-contact-dialog');
|
||||
|
||||
function ProductContactDialog(props: Omit<IProps, 'visible'>) {
|
||||
const { data, productInfo: productInfoProps, onClose } = props;
|
||||
const [status, setStatus] = useState<DialogStatus>(DialogStatus.LOADING);
|
||||
const [publisherAcctNo, setPublisherAcctNo] = useState<string>('');
|
||||
const initRef = useRef(() => {});
|
||||
|
||||
const handleCloseDialog = useCallback(() => {
|
||||
onClose();
|
||||
}, [onClose]);
|
||||
|
||||
const handleReport = useCallback(() => {
|
||||
log('report', data.id);
|
||||
}, [data]);
|
||||
|
||||
useEffect(() => {
|
||||
initRef.current = async () => {
|
||||
const handleContact = (declarationTypeResult?: ProductInfo['declarationTypeResult']) => {
|
||||
if (declarationTypeResult?.type === DeclarationType.Direct && declarationTypeResult.publisherAcctNo) {
|
||||
setStatus(DialogStatus.JOB_CONTACT_DIRECT);
|
||||
setPublisherAcctNo(declarationTypeResult.publisherAcctNo);
|
||||
} else {
|
||||
setStatus(DialogStatus.JOB_CONTACT_CS);
|
||||
}
|
||||
};
|
||||
try {
|
||||
Taro.showLoading();
|
||||
// if (1 < 2) {
|
||||
// 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 (!productInfoProps?.balance) {
|
||||
setStatus(DialogStatus.JOB_UNABLE_UNLOCK);
|
||||
return;
|
||||
}
|
||||
const productInfo = await requestUseProduct(PRODUCT_CODE, { jobId: data.id });
|
||||
Taro.eventCenter.trigger(EventName.READ_CONTACT);
|
||||
handleContact(productInfo.declarationTypeResult);
|
||||
} catch (e) {
|
||||
Toast.error('出错了，请重试');
|
||||
handleCloseDialog();
|
||||
} finally {
|
||||
Taro.hideLoading();
|
||||
}
|
||||
};
|
||||
}, [data, handleCloseDialog]);
|
||||
|
||||
useEffect(() => {
|
||||
initRef.current();
|
||||
}, []);
|
||||
|
||||
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_UNABLE_UNLOCK && <UnableUnlockContent onConfirm={handleCloseDialog} />}
|
||||
</Dialog.Content>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProductContactDialog;
|
||||
@ -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';
|
||||
@ -11,9 +11,17 @@ import { OrderStatus, OrderType, ProductSpecId, ProductType } from '@/constants/
|
||||
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 {
|
||||
getOrderPrice,
|
||||
isCancelPay,
|
||||
requestCreatePayInfo,
|
||||
requestOrderInfo,
|
||||
requestPayment,
|
||||
requestProductTypeList,
|
||||
} from '@/utils/product';
|
||||
import { postSubscribe, subscribeMessage } from '@/utils/subscribe';
|
||||
import Toast from '@/utils/toast';
|
||||
import { ProductSpecResult } from '@/types/product';
|
||||
|
||||
interface IProps {
|
||||
onNext: () => void;
|
||||
@ -82,22 +90,35 @@ const subscribe = async () => {
|
||||
postSubscribe(TEMP_IDS, successIds);
|
||||
};
|
||||
|
||||
const getJsonContent = (jsonString: string) => {
|
||||
try {
|
||||
return JSON.parse(jsonString);
|
||||
} catch (e) {
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export default function CompanyPublishJobBuy(props: IProps) {
|
||||
const { onNext } = props;
|
||||
const [selectItem, setSelectItem] = useState(LIST[0]);
|
||||
const [productList, setProductList] = useState<ProductSpecResult[]>([]);
|
||||
const [selectItem, setSelectItem] = useState<ProductSpecResult | undefined>();
|
||||
|
||||
const handleClickItem = useCallback((newSelectItem: Item) => setSelectItem(newSelectItem), []);
|
||||
const handleClickItem = useCallback((newSelectItem: ProductSpecResult) => setSelectItem(newSelectItem), []);
|
||||
|
||||
const handleBuy = useCallback(async () => {
|
||||
log('handleBuy');
|
||||
reportEvent(ReportEventId.CLICK_PAY_PUBLISH_JOB);
|
||||
if (!selectItem) {
|
||||
Toast.error('请选择购买的产品');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
Taro.showLoading();
|
||||
const { payOrderNo, createPayInfo } = await requestCreatePayInfo({
|
||||
type: OrderType.CompanyVip,
|
||||
amt: getOrderPrice(selectItem.amt),
|
||||
amt: selectItem.payPrice,
|
||||
productCode: ProductType.BOSS_VIP_NEW,
|
||||
productSpecId: selectItem.id,
|
||||
productSpecId: selectItem.productSpecId,
|
||||
});
|
||||
log('handleBuy payInfo', payOrderNo, createPayInfo);
|
||||
await requestPayment({
|
||||
@ -121,8 +142,14 @@ export default function CompanyPublishJobBuy(props: IProps) {
|
||||
log('handleBuy error', e);
|
||||
}
|
||||
}, [selectItem, onNext]);
|
||||
const handleGetProductInfo = useCallback(async () => {
|
||||
const result = await requestProductTypeList(ProductType.BOSS_VIP_NEW);
|
||||
setProductList(result);
|
||||
setSelectItem(result[0]);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
handleGetProductInfo();
|
||||
collectEvent(CollectEventName.CREATE_ORDER_VIEW, { orderType: OrderType.BossVip, source: 'user-page' });
|
||||
}, []);
|
||||
|
||||
@ -130,19 +157,21 @@ export default function CompanyPublishJobBuy(props: IProps) {
|
||||
<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 => (
|
||||
{productList.map(item => (
|
||||
<div
|
||||
key={item.price}
|
||||
key={item.payPrice}
|
||||
className={classNames(`${PREFIX}__company-publish-job-buy__item`, {
|
||||
selected: item.amt === selectItem.amt,
|
||||
disabled: item.amt === 0,
|
||||
selected: selectItem && item.payPrice === selectItem.payPrice,
|
||||
disabled: item.payPrice === 0,
|
||||
})}
|
||||
onClick={item.amt === 0 ? undefined : () => handleClickItem(item)}
|
||||
onClick={item.payPrice === 0 ? undefined : () => handleClickItem(item)}
|
||||
>
|
||||
<div className={classNames(`${PREFIX}__company-publish-job-buy__item__title`, { free: item.amt === 0 })}>
|
||||
<div
|
||||
className={classNames(`${PREFIX}__company-publish-job-buy__item__title`, { free: item.payPrice === 0 })}
|
||||
>
|
||||
{item.title}
|
||||
</div>
|
||||
<div className={`${PREFIX}__company-publish-job-buy__item__price`}>{item.price}</div>
|
||||
<div className={`${PREFIX}__company-publish-job-buy__item__price`}>{item.priceText}</div>
|
||||
{item.badge && <Badge className={`${PREFIX}__company-publish-job-buy__item__badge`} text={item.badge} />}
|
||||
</div>
|
||||
))}
|
||||
@ -152,20 +181,24 @@ export default function CompanyPublishJobBuy(props: IProps) {
|
||||
<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}
|
||||
{i.inlineHighlight && <div className="highlight-span">{i.inlineHighlight}</div>}
|
||||
{selectItem && (
|
||||
<Fragment>
|
||||
<div className={`${PREFIX}__company-publish-job-buy__contents`}>
|
||||
{getJsonContent(selectItem.contentsJson).map(i => (
|
||||
<div
|
||||
className={classNames(`${PREFIX}__company-publish-job-buy__content`, { highlight: i.highlight })}
|
||||
key={i.content}
|
||||
>
|
||||
{i.content}
|
||||
{i.inlineHighlight && <div className="highlight-span">{i.inlineHighlight}</div>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Button className={`${PREFIX}__company-publish-job-buy__button`} onClick={handleBuy}>
|
||||
{`支付${selectItem.amt}元`}
|
||||
</Button>
|
||||
<Button className={`${PREFIX}__company-publish-job-buy__button`} onClick={handleBuy}>
|
||||
{`支付${selectItem.showPrice}元`}
|
||||
</Button>
|
||||
</Fragment>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -6,51 +6,59 @@ import { useCallback, useEffect, useState } from 'react';
|
||||
|
||||
import Badge from '@/components/badge';
|
||||
import { PREFIX } from '@/components/product-dialog/const';
|
||||
import { PageUrl } from '@/constants/app';
|
||||
import { CollectEventName } from '@/constants/event';
|
||||
import { OrderStatus, OrderType, ProductSpecId, ProductType } from '@/constants/product';
|
||||
import { OrderStatus, OrderType, ProductType } from '@/constants/product';
|
||||
import { SubscribeTempId } from '@/constants/subscribe';
|
||||
import { ProductSpecResult } from '@/types/product';
|
||||
import { logWithPrefix } from '@/utils/common';
|
||||
import { collectEvent } from '@/utils/event';
|
||||
import { getOrderPrice, isCancelPay, requestCreatePayInfo, requestOrderInfo, requestPayment } from '@/utils/product';
|
||||
import {
|
||||
isCancelPay,
|
||||
requestCreatePayInfo,
|
||||
requestOrderInfo,
|
||||
requestPayment,
|
||||
requestProductTypeList,
|
||||
} from '@/utils/product';
|
||||
import { navigateTo } from '@/utils/route';
|
||||
import { postSubscribe, subscribeMessage } from '@/utils/subscribe';
|
||||
import Toast from '@/utils/toast';
|
||||
|
||||
interface IProps {
|
||||
buyOnly?: boolean;
|
||||
onConfirm: () => void;
|
||||
}
|
||||
|
||||
interface Item {
|
||||
id: ProductSpecId;
|
||||
title: string;
|
||||
content: string;
|
||||
buyOnlyContent?: string;
|
||||
price: string;
|
||||
amt: number;
|
||||
badge?: string;
|
||||
}
|
||||
// interface Item {
|
||||
// id: ProductSpecId;
|
||||
// title: string;
|
||||
// content: string;
|
||||
// buyOnlyContent?: string;
|
||||
// price: string;
|
||||
// amt: number;
|
||||
// badge?: string;
|
||||
// }
|
||||
|
||||
const LIST: Item[] = [
|
||||
{ id: ProductSpecId.WeeklyVIP, title: '非会员', content: '每日2次', price: '免费', amt: 0 },
|
||||
{
|
||||
id: ProductSpecId.DailyVIP,
|
||||
title: '日会员',
|
||||
content: '每日+10次',
|
||||
buyOnlyContent: '每日12次',
|
||||
price: '60播豆',
|
||||
amt: 6,
|
||||
badge: '限时体验',
|
||||
},
|
||||
{
|
||||
id: ProductSpecId.WeeklyVIP,
|
||||
title: '周会员',
|
||||
content: '每日+10次',
|
||||
buyOnlyContent: '每日12次',
|
||||
price: '180播豆',
|
||||
amt: 18,
|
||||
badge: ' 超值',
|
||||
},
|
||||
];
|
||||
// const LIST: Item[] = [
|
||||
// { id: ProductSpecId.WeeklyVIP, title: '非会员', content: '每日2次', price: '免费', amt: 0 },
|
||||
// {
|
||||
// id: ProductSpecId.DailyVIP,
|
||||
// title: '日会员',
|
||||
// content: '每日+10次',
|
||||
// buyOnlyContent: '每日12次',
|
||||
// price: '60播豆',
|
||||
// amt: 6,
|
||||
// badge: '限时体验',
|
||||
// },
|
||||
// {
|
||||
// id: ProductSpecId.WeeklyVIP,
|
||||
// title: '周会员',
|
||||
// content: '每日+10次',
|
||||
// buyOnlyContent: '每日12次',
|
||||
// price: '180播豆',
|
||||
// amt: 18,
|
||||
// badge: ' 超值',
|
||||
// },
|
||||
// ];
|
||||
|
||||
const log = logWithPrefix('job-buy');
|
||||
const SUBSCRIBE_ID = SubscribeTempId.SUBSCRIBE_VIP;
|
||||
@ -66,20 +74,26 @@ const subscribe = async () => {
|
||||
};
|
||||
|
||||
export default function JobBuy(props: IProps) {
|
||||
const { onConfirm, buyOnly } = props;
|
||||
const [selectItem, setSelectItem] = useState(LIST[1]);
|
||||
const { onConfirm } = props;
|
||||
const [productList, setProductList] = useState<ProductSpecResult[]>([]);
|
||||
const [selectItem, setSelectItem] = useState<ProductSpecResult | undefined>();
|
||||
|
||||
const handleClickItem = useCallback((newSelectItem: Item) => setSelectItem(newSelectItem), []);
|
||||
const handleClickItem = useCallback((newSelectItem: ProductSpecResult) => setSelectItem(newSelectItem), []);
|
||||
|
||||
const handleBuy = useCallback(async () => {
|
||||
log('handleBuy', selectItem);
|
||||
if (!selectItem) {
|
||||
Toast.error('请选择购买的产品');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
Taro.showLoading();
|
||||
|
||||
const { payOrderNo, createPayInfo } = await requestCreatePayInfo({
|
||||
type: OrderType.VIP,
|
||||
amt: getOrderPrice(selectItem.amt),
|
||||
amt: selectItem.payPrice,
|
||||
productCode: ProductType.VIP,
|
||||
productSpecId: selectItem.id,
|
||||
productSpecId: selectItem.productSpecId,
|
||||
});
|
||||
log('handleBuy payInfo', payOrderNo, createPayInfo);
|
||||
await requestPayment({
|
||||
@ -104,59 +118,65 @@ export default function JobBuy(props: IProps) {
|
||||
}
|
||||
}, [selectItem, onConfirm]);
|
||||
|
||||
const handleGetProductInfo = useCallback(async () => {
|
||||
const result = await requestProductTypeList(ProductType.VIP);
|
||||
setProductList(result);
|
||||
setSelectItem(result[0]);
|
||||
}, []);
|
||||
|
||||
const handleResume = useCallback(() => {
|
||||
navigateTo(PageUrl.MaterialUploadVideo);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
handleGetProductInfo();
|
||||
collectEvent(CollectEventName.CREATE_ORDER_VIEW, { orderType: OrderType.VIP });
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={`${PREFIX}__job-buy`}>
|
||||
{buyOnly ? (
|
||||
<div className={`${PREFIX}__job-buy__header`}>开通播络会员即可直接查看联系方式</div>
|
||||
) : (
|
||||
<div className={`${PREFIX}__job-buy__header`}>
|
||||
<div>今日通告对接次数</div>
|
||||
<div className="highlight">已用完</div>
|
||||
<div className={`${PREFIX}__job-buy__header`}>
|
||||
<div>免费查看次数已用完</div>
|
||||
<div className="highlight">请升级会员</div>
|
||||
</div>
|
||||
<div className={`${PREFIX}__job-buy__describe`}>
|
||||
<div>完善模卡</div>
|
||||
<div> 赠10次查看 </div>
|
||||
<div className="highlight" onClick={handleResume}>
|
||||
去完善
|
||||
</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>
|
||||
<div className={`${PREFIX}__job-buy__container`}>
|
||||
{LIST.map(item => {
|
||||
if (buyOnly && !item.amt) {
|
||||
return null;
|
||||
}
|
||||
{productList.map(item => {
|
||||
return (
|
||||
<div
|
||||
key={item.price}
|
||||
key={item.payPrice}
|
||||
className={classNames(`${PREFIX}__job-buy__item`, {
|
||||
selected: item.amt === selectItem.amt,
|
||||
disabled: item.amt === 0,
|
||||
selected: selectItem && item.payPrice === selectItem.payPrice,
|
||||
disabled: item.payPrice === 0,
|
||||
})}
|
||||
onClick={item.amt === 0 ? undefined : () => handleClickItem(item)}
|
||||
onClick={item.payPrice === 0 ? undefined : () => handleClickItem(item)}
|
||||
>
|
||||
<div className={classNames(`${PREFIX}__job-buy__item__title`, { free: item.amt === 0 })}>
|
||||
<div className={classNames(`${PREFIX}__job-buy__item__title`, { free: item.payPrice === 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>
|
||||
<div className={`${PREFIX}__job-buy__item__content`}>{item.contentSingle}</div>
|
||||
<div className={`${PREFIX}__job-buy__item__price`}>{item.showPrice}元</div>
|
||||
{item.badge && <Badge className={`${PREFIX}__job-buy__item__badge`} text={item.badge} />}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className={`${PREFIX}__job-buy__hint`}>
|
||||
注：日会员有效期为 <div className="highlight">支付后24小时</div>
|
||||
</div>
|
||||
<Button className={`${PREFIX}__job-buy__button`} onClick={handleBuy}>
|
||||
{`支付 ${selectItem.amt} 元`}
|
||||
{selectItem && (
|
||||
<div className={`${PREFIX}__job-buy__hint`}>
|
||||
注：{selectItem?.title}有效期为
|
||||
<div className="highlight">
|
||||
支付后{selectItem?.expire > 1 ? `${selectItem.expire}天` : `${selectItem.expire * 24}小时`}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<Button className={`${PREFIX}__job-buy__button`} disabled={!selectItem} onClick={handleBuy}>
|
||||
{`支付 ${selectItem?.showPrice} 元`}
|
||||
</Button>
|
||||
{/* <div className={`${PREFIX}__job-buy__tips`}>{`已选：${selectItem.title}，含进本地群服务`}</div> */}
|
||||
</div>
|
||||
|
||||
@ -10,7 +10,7 @@ interface IContactDirectProps {
|
||||
}
|
||||
|
||||
export default function ContactDirect(props: IContactDirectProps) {
|
||||
const { publisherAcctNo, onAfterConfirm, onReport } = props;
|
||||
const { publisherAcctNo, onAfterConfirm } = props;
|
||||
|
||||
const handleCopyAndContact = async () => {
|
||||
await copy(publisherAcctNo);
|
||||
|
||||
Reference in New Issue
Block a user