boluo-app-main/src/pages/user-batch-publish/index.tsx

import { Image } from '@tarojs/components';
import Taro, { useLoad, useShareAppMessage } from '@tarojs/taro';

import { Button, Tabs } from '@taroify/core';
import { useCallback, useState } from 'react';

import HomePage from '@/components/home-page';
import SearchCity from '@/components/search-city';
import { PageType, PageUrl, RoleType } from '@/constants/app';
import useCityOperators from '@/hooks/use-city-operators';
import useInviteCode from '@/hooks/use-invite-code';
import { switchRoleType } from '@/utils/app';
import { openCustomerServiceChat } from '@/utils/common';
import { getCurrentCityCode } from '@/utils/location';
import { getPageQuery, navigateTo } from '@/utils/route';
import { getCommonShareMessage } from '@/utils/share';
import { checkCityCode } from '@/utils/user';

import './index.less';

const PREFIX = 'page-biz-service';
const EXAMPLE_IMAGE = 'https://publiccdn.neighbourhood.com.cn/img/delegate-example.png';
const COMMENT_IMAGE = 'https://publiccdn.neighbourhood.com.cn/img/delegate-comments.png';
export default function BizService() {
  const inviteCode = useInviteCode();
  const cityOperators = useCityOperators();
  const [value, setValue] = useState('0');

  const handleClickDelegate = useCallback(() => {
    navigateTo(PageUrl.GroupDelegatePublish);
  }, []);
  const handlePreview = (current: string) => {
    Taro.previewImage({
      current,
      urls: [EXAMPLE_IMAGE, COMMENT_IMAGE],
    });
  };
  const handleOpenService = useCallback(() => {
    openCustomerServiceChat('https://work.weixin.qq.com/kfid/kfcd60708731367168d');
  }, []);
  const handleSelectCity = useCallback(
    cityCode => {
      if (!checkCityCode(cityCode)) {
        return;
      }
      const group = cityOperators.find(g => String(g.cityCode) === cityCode);
      if (group) {
        openCustomerServiceChat(group.groupLink);
      }
    },
    [cityOperators]
  );
  const handleChange = useCallback(v => {
    setValue(v);
  }, []);

  useLoad(() => {
    switchRoleType(RoleType.Company);

    const query = getPageQuery<{ tab?: string }>();
    if (query.tab) {
      handleChange(query.tab);
    }
  });

  Taro.showShareMenu({
    withShareTicket: true,
  });

  useShareAppMessage(() =>
    getCommonShareMessage({
      inviteCode,
      path: PageUrl.UserBatchPublish,
      title: '邀请你加入本地主播求职招聘群',
      params: { tab: '1' },
    })
  );

  return (
    <HomePage type={PageType.BatchPublish}>
      <div className={PREFIX}>
        <Tabs className={`${PREFIX}__tabs`} value={value} onChange={handleChange}>
          <Tabs.TabPane value="0" title="群代发">
            <div className={`${PREFIX}__delegate`}>
              <Image
                mode="widthFix"
                className={`${PREFIX}__header-image`}
                src="https://publiccdn.neighbourhood.com.cn/img/pub-job.png"
              />
              <div className={`${PREFIX}__delegate-h5`}>服务说明</div>
              <div className={`${PREFIX}__delegate-card`}>
                <div className={`${PREFIX}__delegate-body`}>服务方式：帮您把招聘需求发到众多同城合作主播群</div>
                <div className={`${PREFIX}__delegate-body`}>群发次数：杭州、广州发3次，其他城市1次</div>
                <div className={`${PREFIX}__delegate-body`}>内容要求：仅限带货主播招聘需求，其他不发</div>
                <div className={`${PREFIX}__delegate-body`}>主播联系：内容中留招聘方联系方式，主播直接联系</div>
              </div>
              <div className={`${PREFIX}__delegate-h5`}>代发示例</div>
              <div className={`${PREFIX}__delegate-card image`} onClick={() => handlePreview(EXAMPLE_IMAGE)}>
                <Image className={`${PREFIX}__delegate-image`} src={EXAMPLE_IMAGE} mode="heightFix" />
              </div>
              <div className={`${PREFIX}__delegate-h5`}>部分客户评价</div>
              <div className={`${PREFIX}__delegate-card image`} onClick={() => handlePreview(COMMENT_IMAGE)}>
                <Image className={`${PREFIX}__delegate-image`} src={COMMENT_IMAGE} mode="heightFix" />
              </div>
              <div className={`${PREFIX}__delegate-fix`}>
                <Button className={`${PREFIX}__delegate-btn`} onClick={handleClickDelegate}>
                  我要代发
                </Button>
              </div>
            </div>
          </Tabs.TabPane>
          <Tabs.TabPane
            value="1"
            title={
              <>
                主播群
                {/*<Image src={require('@/statics/svg/star.svg')} className={`${PREFIX}__star`} />*/}
              </>
            }
          >
            <SearchCity
              onSelectCity={handleSelectCity}
              currentCity={getCurrentCityCode()}
              forGroup
              offset={72}
              banner="点击城市名称，进本地通告群，免费招主播"
            />
          </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 className={`${PREFIX}__recruitment-btn-group`}>
                  <Button className={`${PREFIX}__recruitment-btn`} onClick={handleOpenService}>
                    点此咨询
                  </Button>
                </div>
              </div>
            </div>
          </Tabs.TabPane>
        </Tabs>
      </div>
    </HomePage>
  );
}