Files
boluo-app-main/src/components/join-group-hint/index.tsx
chashaobao 0cd1a46762 revert ad
2025-07-27 15:59:28 +08:00

64 lines
2.1 KiB
TypeScript

import { Button, Image } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { Plus } from '@taroify/icons';
import { useCallback, useState } from 'react';
import { RoleType } from '@/constants/app';
import { CacheKey } from '@/constants/cache-key';
import { CITY_CODE_TO_NAME_MAP } from '@/constants/city';
import { GROUPS } from '@/constants/group';
import { getRoleTypeWithDefault } from '@/utils/app';
import { openCustomerServiceChat } from '@/utils/common';
import { getCurrentCityCode } from '@/utils/location';
import { checkCityCode, validCityCode } from '@/utils/user';
import './index.less';
const PREFIX = 'join-group-hint';
const DEFAULT_GROUP = {
name: '播络主播招聘群',
serviceUrl: 'https://work.weixin.qq.com/kfid/kfcc60ac7b6420787a8',
};
export function JoinGroupHint() {
const cityCode = getCurrentCityCode();
const roleType = getRoleTypeWithDefault();
const group = GROUPS.find(g => String(g.cityCode) === cityCode);
const [clicked, setClicked] = useState(!!Taro.getStorageSync(CacheKey.JOIN_GROUP_CARD_CLICKED));
const handleClick = useCallback(() => {
if (group && !checkCityCode(cityCode)) {
return;
}
openCustomerServiceChat(group ? group.serviceUrl : DEFAULT_GROUP.serviceUrl);
Taro.setStorageSync(CacheKey.JOIN_GROUP_CARD_CLICKED, true);
setClicked(true);
}, [cityCode, group]);
if (!validCityCode(cityCode) || clicked) {
return null;
}
return (
<div className={PREFIX}>
<Image
className={`${PREFIX}__icon`}
src="https://publiccdn.neighbourhood.com.cn/img/group-avatar.png"
mode="aspectFit"
/>
<div className={`${PREFIX}__left`}>
<div className={`${PREFIX}__left-title`}>
{group ? `${CITY_CODE_TO_NAME_MAP.get(cityCode)}主播招聘群` : DEFAULT_GROUP.name}
</div>
<div className={`${PREFIX}__left-desc`}>{roleType === RoleType.Anchor ? '高薪工作早知道' : '免费招主播'}</div>
</div>
<div className={`${PREFIX}__right`}>
<Button className={`${PREFIX}__button`} onClick={handleClick}>
<Plus />
</Button>
</div>
</div>
);
}