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

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

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

import HomePage from '@/components/home-page';
import SearchCity from '@/components/search-city';
import { PageUrl } from '@/constants/app';
import { GROUPS } from '@/constants/group';
import useInviteCode from '@/hooks/use-invite-code';
import { openCustomerServiceChat } from '@/utils/common';
import { getCurrentCityCode } from '@/utils/location';
import { 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 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 = GROUPS.find(g => String(g.cityCode) === cityCode);
    if (group) {
      openCustomerServiceChat(group.serviceUrl);
    }
  }, []);
  useShareAppMessage(() => getCommonShareMessage({ inviteCode }));

  return (
    <HomePage>
      <div className={PREFIX}>
        <Tabs className={`${PREFIX}__tabs`} defaultValue={0}>
          <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`}>群发次数：每日1次，连发3天</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="免费招">
            <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>
  );
}