217 lines
8.4 KiB
TypeScript
217 lines
8.4 KiB
TypeScript
import { Button } from '@tarojs/components';
|
||
import Taro from '@tarojs/taro';
|
||
|
||
import { Cell, Dialog } from '@taroify/core';
|
||
import { Fragment, useCallback, useEffect, useState } from 'react';
|
||
|
||
import PageLoading from '@/components/page-loading';
|
||
import { PublishJobQrCodeDialog } from '@/components/product-dialog/publish-job';
|
||
import CompanyPublishJobBuy from '@/components/product-dialog/steps-ui/company-publish-job-buy';
|
||
import SafeBottomPadding from '@/components/safe-bottom-padding';
|
||
import { ISelectOption } from '@/components/select';
|
||
import { PageUrl } from '@/constants/app';
|
||
import { JobManageStatus } from '@/constants/job';
|
||
import { OrderStatus, OrderType, ProductSpecId, ProductType } from '@/constants/product';
|
||
import { usePublishJob } from '@/hooks/use-publish-job';
|
||
import { BatchPublishGroup } from '@/types/group';
|
||
import { logWithPrefix } from '@/utils/common';
|
||
import { requestJobDetail } from '@/utils/job';
|
||
import {
|
||
getOrderPrice,
|
||
isCancelPay,
|
||
requestAllBuyProduct,
|
||
requestCreatePayInfo,
|
||
requestOrderInfo,
|
||
requestPayment,
|
||
} from '@/utils/product';
|
||
import { navigateTo } from '@/utils/route';
|
||
import Toast from '@/utils/toast';
|
||
import './index.less';
|
||
|
||
interface CityValue extends BatchPublishGroup {
|
||
cityName: string;
|
||
}
|
||
|
||
interface CityOption extends ISelectOption<CityValue> {
|
||
value: CityValue;
|
||
}
|
||
|
||
const PREFIX = 'user-batch-publish';
|
||
const log = logWithPrefix(PREFIX);
|
||
export const cityValues: CityValue[] = [
|
||
{ cityCode: '440100', cityName: '广州', count: 800 },
|
||
{ cityCode: '440300', cityName: '深圳', count: 100 },
|
||
{ cityCode: '330100', cityName: '杭州', count: 750 },
|
||
{ cityCode: '110100', cityName: '北京', count: 150 },
|
||
{ cityCode: '510100', cityName: '成都', count: 100 },
|
||
{ cityCode: '500100', cityName: '重庆', count: 50 },
|
||
{ cityCode: '430100', cityName: '长沙', count: 50 },
|
||
{ cityCode: '350200', cityName: '厦门', count: 50 },
|
||
{ cityCode: '310100', cityName: '上海', count: 150 },
|
||
{ cityCode: '420100', cityName: '武汉', count: 80 },
|
||
{ cityCode: '610100', cityName: '西安', count: 60 },
|
||
{ cityCode: '410100', cityName: '郑州', count: 150 },
|
||
].sort((a, b) => b.count - a.count);
|
||
const MIN_GROUP_SIZE = 20;
|
||
const GROUP_OPTIONS = [
|
||
{ value: MIN_GROUP_SIZE, productSpecId: ProductSpecId.GroupBatchPublish20, label: '20', price: 18 },
|
||
{ value: 50, productSpecId: ProductSpecId.GroupBatchPublish50, label: '50', price: 40 },
|
||
{ value: 60, productSpecId: ProductSpecId.GroupBatchPublish60, label: '60', price: 48 },
|
||
{ value: 80, productSpecId: ProductSpecId.GroupBatchPublish80, label: '80', price: 58 },
|
||
{ value: 100, productSpecId: ProductSpecId.GroupBatchPublish100, label: '100', price: 68 },
|
||
{ value: 150, productSpecId: ProductSpecId.GroupBatchPublish150, label: '150', price: 98 },
|
||
{ value: 300, productSpecId: ProductSpecId.GroupBatchPublish300, label: '300', price: 128 },
|
||
{ value: 500, productSpecId: ProductSpecId.GroupBatchPublish500, label: '500', price: 168 },
|
||
{ value: 750, productSpecId: ProductSpecId.GroupBatchPublish750, label: '750', price: 188 },
|
||
{ value: 800, productSpecId: ProductSpecId.GroupBatchPublish800, label: '800', price: 198 },
|
||
{ value: 1000, productSpecId: ProductSpecId.GroupBatchPublish1000, label: '1000', price: 288 },
|
||
];
|
||
|
||
const calcPrice = (city: CityValue | null) => {
|
||
if (!city) {
|
||
return {};
|
||
}
|
||
const { count } = city;
|
||
const originalPrice = count * 1;
|
||
const price = GROUP_OPTIONS.find(o => o.value === count)?.price || 18;
|
||
const productSpecId = GROUP_OPTIONS.find(o => o.value === count)?.productSpecId || ProductSpecId.GroupBatchPublish20;
|
||
return { price, originalPrice, productSpecId };
|
||
};
|
||
|
||
export default function UserBatchPublish({ cityCode, jobId }: { cityCode: string; jobId: string }) {
|
||
const [loading, setLoading] = useState(true);
|
||
const [showQrCode, setShowQrCode] = useState(false);
|
||
const [city, setCity] = useState<CityOption['value'] | null>(null);
|
||
const { price, originalPrice, productSpecId } = calcPrice(city);
|
||
const [showPublishJob, setShowPublishJob] = useState(false);
|
||
|
||
const [showBuy, setShowBuy, handlePublishJob] = usePublishJob(jobId);
|
||
|
||
const handleClickViewGroup = useCallback(() => navigateTo(PageUrl.GroupList, { city: city?.cityCode }), [city]);
|
||
|
||
const handleClickBuy = useCallback(async () => {
|
||
// if (1 < 2) {
|
||
// await new Promise(r => setTimeout(r, 3000));
|
||
// setShowQrCode(true);
|
||
// return;
|
||
// }
|
||
if (!price || !productSpecId) {
|
||
return;
|
||
}
|
||
try {
|
||
Taro.showLoading();
|
||
const allowBuy = await requestAllBuyProduct(ProductType.GroupBatchPublish);
|
||
if (!allowBuy) {
|
||
Taro.hideLoading();
|
||
Toast.info('您最近已购买过，可直接联系客服');
|
||
setShowQrCode(true);
|
||
return;
|
||
}
|
||
|
||
const jobDetail = await requestJobDetail(jobId);
|
||
|
||
if (jobDetail.status !== JobManageStatus.Open) {
|
||
Taro.hideLoading();
|
||
setShowPublishJob(true);
|
||
return;
|
||
}
|
||
|
||
const { payOrderNo, createPayInfo } = await requestCreatePayInfo({
|
||
type: OrderType.GroupBatchPublish,
|
||
amt: getOrderPrice(price),
|
||
// amt: 1,
|
||
productCode: ProductType.GroupBatchPublish,
|
||
productSpecId: productSpecId,
|
||
});
|
||
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();
|
||
setShowQrCode(true);
|
||
} catch (e) {
|
||
Taro.hideLoading();
|
||
Toast.error(isCancelPay(e) ? '取消购买' : '购买失败请重试');
|
||
log('handleBuy error', e);
|
||
}
|
||
}, [jobId, price, productSpecId]);
|
||
|
||
useEffect(() => {
|
||
if (!cityCode) {
|
||
return;
|
||
}
|
||
try {
|
||
const initCity = cityValues.find(o => o.cityCode === cityCode);
|
||
|
||
setLoading(false);
|
||
if (initCity) {
|
||
setCity(initCity);
|
||
} else {
|
||
Toast.info('当前城市不支持代发');
|
||
}
|
||
} catch (e) {
|
||
Toast.error('加载失败请重试');
|
||
}
|
||
}, [cityCode]);
|
||
|
||
if (loading) {
|
||
return <PageLoading />;
|
||
}
|
||
|
||
return (
|
||
<div className={PREFIX}>
|
||
{/*<Image mode="widthFix" className={`${PREFIX}__header-image`} src="https://neighbourhood.cn/pubJob.png" />*/}
|
||
<div className={`${PREFIX}__title`}>服务说明</div>
|
||
<div className={`${PREFIX}__illustrate`}>
|
||
服务方式：帮您把招聘需求<div className="underline">发到本地主播群，投递量大幅增加</div>
|
||
</div>
|
||
<div className={`${PREFIX}__title`}>当前通告城市</div>
|
||
<Cell align="center" className={`${PREFIX}__cell`} title={city ? city.cityName : '暂不支持代发'} />
|
||
{city && (
|
||
<Fragment>
|
||
<div className={`${PREFIX}__extra`} onClick={handleClickViewGroup}>
|
||
查看该城市合作群列表
|
||
</div>
|
||
<div className={`${PREFIX}__title`}>可购买群数</div>
|
||
<Cell align="center" className={`${PREFIX}__cell`} title={city?.count} />
|
||
<div className={`${PREFIX}__title`}>服务费用</div>
|
||
<div className={`${PREFIX}__cost-describe`}>
|
||
<div className={`${PREFIX}__cost-describe__price`}>{`${price}元`}</div>
|
||
<div className={`${PREFIX}__cost-describe__original_price`}>{`原价：${originalPrice}元`}</div>
|
||
</div>
|
||
|
||
<Button className={`${PREFIX}__buy-button`} onClick={handleClickBuy}>
|
||
立即购买
|
||
</Button>
|
||
</Fragment>
|
||
)}
|
||
<SafeBottomPadding />
|
||
<div>
|
||
<PublishJobQrCodeDialog onClose={() => setShowQrCode(false)} open={showQrCode} />
|
||
<Dialog open={showBuy} onClose={() => setShowBuy(false)}>
|
||
<Dialog.Content>
|
||
<CompanyPublishJobBuy onNext={handlePublishJob} />
|
||
</Dialog.Content>
|
||
</Dialog>
|
||
<Dialog open={showPublishJob} onClose={() => setShowPublishJob(false)}>
|
||
<Dialog.Content>
|
||
<div className={`${PREFIX}__publish-title`}>请先发布通告</div>
|
||
<Button className={`${PREFIX}__publish-button`} onClick={handlePublishJob}>
|
||
发布该通告
|
||
</Button>
|
||
</Dialog.Content>
|
||
</Dialog>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|