203 lines
7.9 KiB
TypeScript
203 lines
7.9 KiB
TypeScript
import { Button, Text } from '@tarojs/components';
|
||
import Taro from '@tarojs/taro';
|
||
|
||
import { Cell } from '@taroify/core';
|
||
import { useCallback, useState, useEffect } from 'react';
|
||
|
||
import PageLoading from '@/components/page-loading';
|
||
import { PublishJobQrCodeDialog } from '@/components/product-dialog/publish-job';
|
||
import SafeBottomPadding from '@/components/safe-bottom-padding';
|
||
import { ISelectOption, PopupSelect } from '@/components/select';
|
||
import { PageUrl } from '@/constants/app';
|
||
import { OrderStatus, OrderType, ProductSpecId, ProductType } from '@/constants/product';
|
||
import { BatchPublishGroup } from '@/types/group';
|
||
import { logWithPrefix } from '@/utils/common';
|
||
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);
|
||
const SERVICE_ILLUSTRATE = `服务方式：帮您把招聘需求发到众多同城合作主播群
|
||
群发次数：每日1次，连发3天
|
||
内容要求：仅限带货主播招聘需求，其他不发
|
||
主播联系：内容中留招聘方联系方式，主播直接联系`;
|
||
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() {
|
||
const [loading, setLoading] = useState(true);
|
||
const [showCitySelect, setShowCitySelect] = useState(false);
|
||
const [showQrCode, setShowQrCode] = useState(false);
|
||
const [city, setCity] = useState<CityOption['value'] | null>(null);
|
||
const [cityOptions, setCityOptions] = useState<CityOption[]>([]);
|
||
const { price, originalPrice, productSpecId } = calcPrice(city);
|
||
|
||
const handleClickCity = useCallback(() => setShowCitySelect(true), []);
|
||
|
||
const handleSelectCity = useCallback(value => {
|
||
setCity(value);
|
||
setShowCitySelect(false);
|
||
}, []);
|
||
|
||
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 { 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);
|
||
}
|
||
}, [price, productSpecId]);
|
||
|
||
useEffect(() => {
|
||
try {
|
||
const cOptions: CityOption[] = cityValues.map(value => ({ value, label: value.cityName }));
|
||
const initCity = (cOptions.find(o => o.label === '重庆') || cOptions[0]).value;
|
||
|
||
setLoading(false);
|
||
setCity(initCity);
|
||
setCityOptions(cOptions);
|
||
log('init data done', cOptions);
|
||
} catch (e) {
|
||
Toast.error('加载失败请重试');
|
||
}
|
||
}, []);
|
||
|
||
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>
|
||
<Cell isLink align="center" className={`${PREFIX}__cell`} title={city?.cityName} onClick={handleClickCity} />
|
||
<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>
|
||
<div className={`${PREFIX}__title`}>服务说明</div>
|
||
<div className={`${PREFIX}__illustrate`}>
|
||
<Text>{SERVICE_ILLUSTRATE}</Text>
|
||
<div className={`${PREFIX}__illustrate__describe`}>
|
||
<div>附：</div>
|
||
<div className={`${PREFIX}__illustrate__describe__view`} onClick={handleClickViewGroup}>
|
||
播络合作群列表
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Button className={`${PREFIX}__buy-button`} onClick={handleClickBuy}>
|
||
立即购买
|
||
</Button>
|
||
<SafeBottomPadding />
|
||
<div>
|
||
<PopupSelect
|
||
value={city}
|
||
options={cityOptions}
|
||
open={showCitySelect}
|
||
onSelect={handleSelectCity}
|
||
onClose={() => setShowCitySelect(false)}
|
||
/>
|
||
<PublishJobQrCodeDialog onClose={() => setShowQrCode(false)} open={showQrCode} />
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|