feat: biz-service
This commit is contained in:
eleanor.mao
parent
70c2bbd529
commit
f60a753e5a
90
src/components/user-batch-publish/index.less
Normal file
90
src/components/user-batch-publish/index.less
Normal file
@ -0,0 +1,90 @@
|
||||
@import '@/styles/common.less';
|
||||
@import '@/styles/variables.less';
|
||||
|
||||
.user-batch-publish {
|
||||
padding: 16px 24px;
|
||||
padding-bottom: 200px;
|
||||
|
||||
&__header-image {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
font-weight: 500;
|
||||
color: @blColor;
|
||||
margin-top: 24px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__cell {
|
||||
height: 100px;
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
border-radius: 16px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
&__cost-describe {
|
||||
height: 100px;
|
||||
padding: 0 32px;
|
||||
border-radius: 16px;
|
||||
.flex-row();
|
||||
justify-content: space-between;
|
||||
background: #FFFFFF;
|
||||
margin-top: 24px;
|
||||
|
||||
&__price {
|
||||
font-size: 48px;
|
||||
line-height: 48px;
|
||||
font-weight: 500;
|
||||
color: @blHighlightColor;
|
||||
}
|
||||
|
||||
&__original_price {
|
||||
flex: 1;
|
||||
font-size: 32px;
|
||||
line-height: 34px;
|
||||
font-weight: 400;
|
||||
color: @blColorG1;
|
||||
margin-left: 16px;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
&__illustrate {
|
||||
padding: 24px 32px;
|
||||
margin-top: 24px;
|
||||
font-size: 28px;
|
||||
line-height: 48px;
|
||||
font-weight: 400;
|
||||
color: @blColorG2;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16px;
|
||||
|
||||
&__describe {
|
||||
.flex-row();
|
||||
font-size: 28px;
|
||||
line-height: 48px;
|
||||
font-weight: 400;
|
||||
color: @blColorG2;
|
||||
margin-top: 8px;
|
||||
|
||||
&__view {
|
||||
color: @blHighlightColor;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__buy-button {
|
||||
.button(@width: 100%; @height: 80px; @fontSize: 32px);
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
195
src/components/user-batch-publish/index.tsx
Normal file
195
src/components/user-batch-publish/index.tsx
Normal file
@ -0,0 +1,195 @@
|
||||
import { Button, Image, 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 = `群发次数：每日一次，连发3天
|
||||
群发内容：仅限主播招聘通告，违规内容不发
|
||||
联系方法：通告中留通告主联系方式，主播直接联系`;
|
||||
const cityValues: CityValue[] = [
|
||||
{ cityCode: '440100', cityName: '广州', count: 300 },
|
||||
{ cityCode: '440300', cityName: '深圳', count: 100 },
|
||||
{ cityCode: '330100', cityName: '杭州', count: 300 },
|
||||
{ cityCode: '110100', cityName: '北京', count: 100 },
|
||||
{ cityCode: '510100', cityName: '成都', count: 50 },
|
||||
{ cityCode: '430100', cityName: '长沙', count: 50 },
|
||||
{ cityCode: '350200', cityName: '厦门', count: 50 },
|
||||
{ cityCode: '310100', cityName: '上海', count: 100 },
|
||||
{ cityCode: '420100', cityName: '武汉', count: 50 },
|
||||
{ cityCode: '610100', cityName: '西安', count: 50 },
|
||||
{ cityCode: '410100', cityName: '郑州', count: 100 },
|
||||
].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: 100, productSpecId: ProductSpecId.GroupBatchPublish100, label: '100', price: 68 },
|
||||
{ value: 300, productSpecId: ProductSpecId.GroupBatchPublish300, label: '300', price: 128 },
|
||||
{ value: 500, productSpecId: ProductSpecId.GroupBatchPublish500, label: '500', price: 188 },
|
||||
{ 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[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>
|
||||
);
|
||||
}
|
||||
@ -1,3 +1,5 @@
|
||||
import { GroupItem } from '@/types/group';
|
||||
|
||||
export enum GroupType {
|
||||
// 所有可加入的群
|
||||
All = 'ALL',
|
||||
@ -29,3 +31,30 @@ export const GROUP_STATUS_OPTIONS = [
|
||||
{ label: '全部', value: GroupStatus.All },
|
||||
{ label: '已申请', value: GroupStatus.Requested },
|
||||
];
|
||||
|
||||
export const GROUPS: GroupItem[] = [
|
||||
{ title: '【杭州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc223f495e159af95e' },
|
||||
{ title: '【广州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb4b88b8abb7a7c8b' },
|
||||
{ title: '【深圳】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcfe70d8736e14bb64' },
|
||||
{ title: '【北京】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb119c94575e91262' },
|
||||
{ title: '【上海】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4189e68429cf07f8' },
|
||||
{ title: '【郑州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcd1c53b7bf8ecdb97' },
|
||||
{ title: '【长沙】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc76be8f2b3f8aa437' },
|
||||
{ title: '【成都】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcf75cefbdc62946fa' },
|
||||
{ title: '【重庆】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcd7008f747d545f83' },
|
||||
{ title: '【武汉】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc047c94f8c709b395' },
|
||||
{ title: '【厦门】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc2007a895cb48464b' },
|
||||
{ title: '【西安】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc34768971b7354220' },
|
||||
{ title: '【合肥】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc41c9785cc2035277' },
|
||||
{ title: '【南京】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcc6dc8d0a9692b70e' },
|
||||
{ title: '【青岛】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfce8d7a68190f6a1d2' },
|
||||
{ title: '【佛山】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcfac1132df386fac8' },
|
||||
{ title: '【东莞】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb2b0e39026f7dddc' },
|
||||
{ title: '【苏州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4642f90a6e3528ff' },
|
||||
{ title: '【福州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc126483dedadde82b' },
|
||||
{ title: '【泉州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4c8c42b1a9337aaf' },
|
||||
{ title: '【温州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb0ea5f197a18b335' },
|
||||
{ title: '【天津】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcda46c23dade6f6a3' },
|
||||
{ title: '【昆明】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcf2aebcbf3d46d9cd' },
|
||||
{ title: '【全国】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcc60ac7b6420787a8' },
|
||||
];
|
||||
|
||||
@ -7,17 +7,14 @@ import { useCallback } from 'react';
|
||||
import HomePage from '@/components/home-page';
|
||||
import LoginButton from '@/components/login-button';
|
||||
import { APP_TAB_BAR_ID } from '@/constants/app';
|
||||
import { GROUPS } from '@/constants/group';
|
||||
import useListHeight, { IUseListHeightProps } from '@/hooks/use-list-height';
|
||||
import { GroupItem } from '@/types/group';
|
||||
import { openCustomerServiceChat } from '@/utils/common';
|
||||
import { getCommonShareMessage } from '@/utils/share';
|
||||
|
||||
import './index.less';
|
||||
|
||||
interface GroupItem {
|
||||
title: string;
|
||||
serviceUrl: string;
|
||||
}
|
||||
|
||||
const PREFIX = 'group-v2-page';
|
||||
const LIST_CONTAINER_CLASS = `${PREFIX}__list-container`;
|
||||
const CALC_LIST_PROPS: IUseListHeightProps = {
|
||||
@ -27,32 +24,6 @@ const CALC_LIST_PROPS: IUseListHeightProps = {
|
||||
return diffRect.top - rect.top;
|
||||
},
|
||||
};
|
||||
const GROUPS: GroupItem[] = [
|
||||
{ title: '【杭州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc223f495e159af95e' },
|
||||
{ title: '【广州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb4b88b8abb7a7c8b' },
|
||||
{ title: '【深圳】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcfe70d8736e14bb64' },
|
||||
{ title: '【北京】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb119c94575e91262' },
|
||||
{ title: '【上海】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4189e68429cf07f8' },
|
||||
{ title: '【郑州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcd1c53b7bf8ecdb97' },
|
||||
{ title: '【长沙】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc76be8f2b3f8aa437' },
|
||||
{ title: '【成都】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcf75cefbdc62946fa' },
|
||||
{ title: '【重庆】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcd7008f747d545f83' },
|
||||
{ title: '【武汉】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc047c94f8c709b395' },
|
||||
{ title: '【厦门】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc2007a895cb48464b' },
|
||||
{ title: '【西安】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc34768971b7354220' },
|
||||
{ title: '【合肥】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc41c9785cc2035277' },
|
||||
{ title: '【南京】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcc6dc8d0a9692b70e' },
|
||||
{ title: '【青岛】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfce8d7a68190f6a1d2' },
|
||||
{ title: '【佛山】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcfac1132df386fac8' },
|
||||
{ title: '【东莞】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb2b0e39026f7dddc' },
|
||||
{ title: '【苏州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4642f90a6e3528ff' },
|
||||
{ title: '【福州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc126483dedadde82b' },
|
||||
{ title: '【泉州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4c8c42b1a9337aaf' },
|
||||
{ title: '【温州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb0ea5f197a18b335' },
|
||||
{ title: '【天津】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcda46c23dade6f6a3' },
|
||||
{ title: '【昆明】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcf2aebcbf3d46d9cd' },
|
||||
{ title: '【全国】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcc60ac7b6420787a8' },
|
||||
];
|
||||
|
||||
export default function GroupV2() {
|
||||
const listHeight = useListHeight(CALC_LIST_PROPS);
|
||||
|
||||
@ -1,90 +1,52 @@
|
||||
@import '@/styles/common.less';
|
||||
@import '@/styles/variables.less';
|
||||
|
||||
.page-user-batch-publish {
|
||||
padding: 24px;
|
||||
padding-bottom: 200px;
|
||||
.page-biz-service {
|
||||
&__tabs {
|
||||
--tabs-active-color: @blHighlightColor;
|
||||
--tabs-nav-background-color: #fff;
|
||||
--tabs-wrap-height: 98px;
|
||||
|
||||
&__header-image {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
> .taroify-tabs__wrap {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
font-weight: 500;
|
||||
color: @blColor;
|
||||
margin-top: 24px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
> .taroify-tabs__content {
|
||||
padding-top: var(--tabs-wrap-height);
|
||||
}
|
||||
}
|
||||
|
||||
&__cell {
|
||||
height: 100px;
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
border-radius: 16px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
&__cost-describe {
|
||||
height: 100px;
|
||||
padding: 0 32px;
|
||||
border-radius: 16px;
|
||||
.flex-row();
|
||||
justify-content: space-between;
|
||||
background: #FFFFFF;
|
||||
margin-top: 24px;
|
||||
|
||||
&__price {
|
||||
font-size: 48px;
|
||||
line-height: 48px;
|
||||
&__recruitment {
|
||||
padding: 24px;
|
||||
&-card {
|
||||
background: #fff;
|
||||
padding: 32px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
&-h5 {
|
||||
font-weight: 500;
|
||||
color: @blHighlightColor;
|
||||
}
|
||||
|
||||
&__original_price {
|
||||
flex: 1;
|
||||
font-size: 32px;
|
||||
line-height: 34px;
|
||||
font-weight: 400;
|
||||
color: @blColorG1;
|
||||
margin-left: 16px;
|
||||
text-decoration: line-through;
|
||||
line-height: 40px;
|
||||
color: #1d2129;
|
||||
padding-bottom: 16px;
|
||||
padding-top: 40px;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__illustrate {
|
||||
padding: 24px 32px;
|
||||
margin-top: 24px;
|
||||
font-size: 28px;
|
||||
line-height: 48px;
|
||||
font-weight: 400;
|
||||
color: @blColorG2;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16px;
|
||||
|
||||
&__describe {
|
||||
.flex-row();
|
||||
&-body {
|
||||
font-size: 28px;
|
||||
line-height: 48px;
|
||||
font-weight: 400;
|
||||
color: @blColorG2;
|
||||
margin-top: 8px;
|
||||
|
||||
&__view {
|
||||
color: @blHighlightColor;
|
||||
margin-left: 4px;
|
||||
line-height: 40px;
|
||||
|
||||
& + & {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__buy-button {
|
||||
.button(@width: 100%; @height: 80px; @fontSize: 32px);
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,197 +1,44 @@
|
||||
import { Button, Image, Text } from '@tarojs/components';
|
||||
import Taro, { useLoad } from '@tarojs/taro';
|
||||
|
||||
import { Cell } from '@taroify/core';
|
||||
import { useCallback, useState } from 'react';
|
||||
import { Tabs } from '@taroify/core';
|
||||
|
||||
import HomePage from '@/components/home-page';
|
||||
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 UserBatchPublish from '@/components/user-batch-publish';
|
||||
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 = 'page-user-batch-publish';
|
||||
const PREFIX = 'page-biz-service';
|
||||
const log = logWithPrefix(PREFIX);
|
||||
const SERVICE_ILLUSTRATE = `群发次数：每日一次，连发3天
|
||||
群发内容：仅限主播招聘通告，违规内容不发
|
||||
联系方法：通告中留通告主联系方式，主播直接联系`;
|
||||
const cityValues: CityValue[] = [
|
||||
{ cityCode: '440100', cityName: '广州', count: 300 },
|
||||
{ cityCode: '440300', cityName: '深圳', count: 100 },
|
||||
{ cityCode: '330100', cityName: '杭州', count: 300 },
|
||||
{ cityCode: '110100', cityName: '北京', count: 100 },
|
||||
{ cityCode: '510100', cityName: '成都', count: 50 },
|
||||
{ cityCode: '430100', cityName: '长沙', count: 50 },
|
||||
{ cityCode: '350200', cityName: '厦门', count: 50 },
|
||||
{ cityCode: '310100', cityName: '上海', count: 100 },
|
||||
{ cityCode: '420100', cityName: '武汉', count: 50 },
|
||||
{ cityCode: '610100', cityName: '西安', count: 50 },
|
||||
{ cityCode: '410100', cityName: '郑州', count: 100 },
|
||||
].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: 100, productSpecId: ProductSpecId.GroupBatchPublish100, label: '100', price: 68 },
|
||||
{ value: 300, productSpecId: ProductSpecId.GroupBatchPublish300, label: '300', price: 128 },
|
||||
{ value: 500, productSpecId: ProductSpecId.GroupBatchPublish500, label: '500', price: 188 },
|
||||
{ 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]);
|
||||
|
||||
useLoad(async () => {
|
||||
try {
|
||||
const cOptions: CityOption[] = cityValues.map(value => ({ value, label: value.cityName }));
|
||||
const initCity = cOptions[0].value;
|
||||
|
||||
setLoading(false);
|
||||
setCity(initCity);
|
||||
setCityOptions(cOptions);
|
||||
log('init data done', cOptions);
|
||||
} catch (e) {
|
||||
Toast.error('加载失败请重试');
|
||||
}
|
||||
});
|
||||
|
||||
if (loading) {
|
||||
return <PageLoading />;
|
||||
}
|
||||
|
||||
export default function BizService() {
|
||||
return (
|
||||
<HomePage>
|
||||
<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}>
|
||||
播络合作群列表
|
||||
<Tabs className={`${PREFIX}__tabs`} defaultValue={1}>
|
||||
<Tabs.TabPane value={0} title="主播群"></Tabs.TabPane>
|
||||
<Tabs.TabPane value={1} title="群代发">
|
||||
<UserBatchPublish />
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane value={2} title="代招">
|
||||
<div className={`${PREFIX}__recruitment`}>
|
||||
<div className={`${PREFIX}__recruitment-card`}>
|
||||
<div className={`${PREFIX}__recruitment-h5`}>服务城市</div>
|
||||
<div className={`${PREFIX}__recruitment-body`}>江、沪、皖-上海、南京、合肥</div>
|
||||
<div className={`${PREFIX}__recruitment-body`}>粤、闽-广州、深圳、佛山、厦门、福州、泉州</div>
|
||||
<div className={`${PREFIX}__recruitment-body`}>京、鲁-北京、青岛</div>
|
||||
<div className={`${PREFIX}__recruitment-body`}>鄂、豫、湘、陕-长沙、武汉、郑州、西安</div>
|
||||
<div className={`${PREFIX}__recruitment-body`}>川、渝、云-成都、重庆、昆明</div>
|
||||
<div className={`${PREFIX}__recruitment-h5`}>服务方式及收费标准</div>
|
||||
<div className={`${PREFIX}__recruitment-body`}>服务方式：提供录屏和基本资料供挑选，挑中安排面试</div>
|
||||
<div className={`${PREFIX}__recruitment-body`}>收费标准：安排一场面试200元</div>
|
||||
<div className={`${PREFIX}__recruitment-body`}>收费方式：预付费，按安排面试场数扣费</div>
|
||||
<div className={`${PREFIX}__recruitment-h5`}>服务能力</div>
|
||||
<div className={`${PREFIX}__recruitment-body`}>
|
||||
我们在每个城市均有数量众多的主播群，少则几十个，多则上千个，有各种类型和层次的带货主播资源
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</Tabs.TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
</HomePage>
|
||||
);
|
||||
|
||||
@ -49,3 +49,7 @@ export interface GetGroupsResponse extends IPaginationResponse {
|
||||
export interface GetGroupDetailsRequest {
|
||||
blGroupId: string;
|
||||
}
|
||||
export interface GroupItem {
|
||||
title: string;
|
||||
serviceUrl: string;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user