feat: biz-service

src/components/user-batch-publish/index.less

@@ -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;
+  }
+}

src/components/user-batch-publish/index.tsx

@@ -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>
+  );
+}

src/constants/group.ts

@@ -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' },
+];

src/pages/group-v2/index.tsx

@@ -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);

src/pages/user-batch-publish/index.less

@@ -1,90 +1,52 @@
 @import '@/styles/common.less';
 @import '@/styles/variables.less';
 
-.page-user-batch-publish {
+.page-biz-service {
-  padding: 24px;
+  &__tabs {
-  padding-bottom: 200px;
+    --tabs-active-color: @blHighlightColor;
+    --tabs-nav-background-color: #fff;
+    --tabs-wrap-height: 98px;
 
-  &__header-image {
+    > .taroify-tabs__wrap {
-    width: 100%;
+      position: fixed;
-    height: 120px;
+      width: 100vw;
-    margin-top: 24px;
+      top: 0;
-  }
+      left: 0;
+      z-index: 2;
+    }
 
-  &__title {
+    > .taroify-tabs__content {
-    font-size: 32px;
+      padding-top: var(--tabs-wrap-height);
-    line-height: 48px;
-    font-weight: 500;
-    color: @blColor;
-    margin-top: 24px;
-
-    &:first-child {
-      margin-top: 0;
     }
   }
 
-  &__cell {
+  &__recruitment {
-    height: 100px;
+    padding: 24px;
-    padding-left: 32px;
+    &-card {
-    padding-right: 32px;
+      background: #fff;
-    border-radius: 16px;
+      padding: 32px;
-    margin-top: 24px;
+      border-radius: 24px;
-  }
+    }
-
+    &-h5 {
-  &__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;
+      line-height: 40px;
-      font-weight: 400;
+      color: #1d2129;
-      color: @blColorG1;
+      padding-bottom: 16px;
-      margin-left: 16px;
+      padding-top: 40px;
-      text-decoration: line-through;
+
+      &:first-child {
+        padding-top: 0;
+      }
     }
-  }
 
-  &__illustrate {
+    &-body {
-    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;
+      line-height: 40px;
-      font-weight: 400;
+
-      color: @blColorG2;
+      & + & {
-      margin-top: 8px;
+        padding-top: 20px;
-  
-      &__view {
-        color: @blHighlightColor;
-        margin-left: 4px;
       }
     }
   }
-
+}
-  &__buy-button {
-    .button(@width: 100%; @height: 80px; @fontSize: 32px);
-    margin-top: 40px;
-  }
-}

src/pages/user-batch-publish/index.tsx

@@ -1,197 +1,44 @@
-import { Button, Image, Text } from '@tarojs/components';
+import { Tabs } from '@taroify/core';
-import Taro, { useLoad } from '@tarojs/taro';
-
-import { Cell } from '@taroify/core';
-import { useCallback, useState } from 'react';
 
 import HomePage from '@/components/home-page';
-import PageLoading from '@/components/page-loading';
+import UserBatchPublish from '@/components/user-batch-publish';
-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 {
+const PREFIX = 'page-biz-service';
-  cityName: string;
-}
-
-interface CityOption extends ISelectOption<CityValue> {
-  value: CityValue;
-}
-
-const PREFIX = 'page-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]);
-
-  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" />
+        <Tabs className={`${PREFIX}__tabs`} defaultValue={1}>
-        <div className={`${PREFIX}__title`}>请选择城市</div>
+          <Tabs.TabPane value={0} title="主播群"></Tabs.TabPane>
-        <Cell isLink align="center" className={`${PREFIX}__cell`} title={city?.cityName} onClick={handleClickCity} />
+          <Tabs.TabPane value={1} title="群代发">
-        <div className={`${PREFIX}__title`}>可购买群数</div>
+            <UserBatchPublish />
-        <Cell align="center" className={`${PREFIX}__cell`} title={city?.count} />
+          </Tabs.TabPane>
-        <div className={`${PREFIX}__title`}>服务费用</div>
+          <Tabs.TabPane value={2} title="代招">
-        <div className={`${PREFIX}__cost-describe`}>
+            <div className={`${PREFIX}__recruitment`}>
-          <div className={`${PREFIX}__cost-describe__price`}>{`${price}元`}</div>
+              <div className={`${PREFIX}__recruitment-card`}>
-          <div className={`${PREFIX}__cost-describe__original_price`}>{`原价：${originalPrice}元`}</div>
+                <div className={`${PREFIX}__recruitment-h5`}>服务城市</div>
-        </div>
+                <div className={`${PREFIX}__recruitment-body`}>江、沪、皖-上海、南京、合肥</div>
-        <div className={`${PREFIX}__title`}>服务说明</div>
+                <div className={`${PREFIX}__recruitment-body`}>粤、闽-广州、深圳、佛山、厦门、福州、泉州</div>
-        <div className={`${PREFIX}__illustrate`}>
+                <div className={`${PREFIX}__recruitment-body`}>京、鲁-北京、青岛</div>
-          <Text>{SERVICE_ILLUSTRATE}</Text>
+                <div className={`${PREFIX}__recruitment-body`}>鄂、豫、湘、陕-长沙、武汉、郑州、西安</div>
-          <div className={`${PREFIX}__illustrate__describe`}>
+                <div className={`${PREFIX}__recruitment-body`}>川、渝、云-成都、重庆、昆明</div>
-            <div>附：</div>
+                <div className={`${PREFIX}__recruitment-h5`}>服务方式及收费标准</div>
-            <div className={`${PREFIX}__illustrate__describe__view`} onClick={handleClickViewGroup}>
+                <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>
+          </Tabs.TabPane>
-        </div>
+        </Tabs>
-        <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>
     </HomePage>
   );

src/types/group.ts

@@ -49,3 +49,7 @@ export interface GetGroupsResponse extends IPaginationResponse {
 export interface GetGroupDetailsRequest {
   blGroupId: string;
 }
+export interface GroupItem {
+  title: string;
+  serviceUrl: string;
+}