118 lines
4.3 KiB
TypeScript
118 lines
4.3 KiB
TypeScript
import { Button, Image } from '@tarojs/components';
|
||
import Taro from '@tarojs/taro';
|
||
|
||
import { Arrow } from '@taroify/icons';
|
||
import { Fragment, useCallback, useEffect, useState } from 'react';
|
||
|
||
import { EventName, OpenSource, PageUrl } from '@/constants/app';
|
||
import { CITY_CODE_TO_NAME_MAP } from '@/constants/city';
|
||
import useLocation from '@/hooks/use-location';
|
||
import useUserInfo from '@/hooks/use-user-info';
|
||
import { StaffInfo } from '@/types/partner';
|
||
import { copy } from '@/utils/common';
|
||
import { getStaffInfo } from '@/utils/partner';
|
||
import { navigateTo } from '@/utils/route';
|
||
import './index.less';
|
||
|
||
const PREFIX = 'invite-operations';
|
||
|
||
export default function InviteOperations() {
|
||
const location = useLocation();
|
||
const userInfo = useUserInfo();
|
||
const [cityCode, setCityCode] = useState<string>(location.cityCode);
|
||
const [staffInfo, setStaffInfo] = useState<StaffInfo | null>(null);
|
||
|
||
const handleClickCityMenu = useCallback(() => {
|
||
navigateTo(PageUrl.CitySearch, { city: cityCode || location.cityCode, source: OpenSource.InviteOperations });
|
||
}, [cityCode, location.cityCode]);
|
||
|
||
const handleCityChange = useCallback(data => {
|
||
console.log('handleCityChange', data);
|
||
const { openSource, cityCode: cCode } = data;
|
||
if (openSource !== OpenSource.InviteOperations) {
|
||
return;
|
||
}
|
||
setCityCode(cCode);
|
||
}, []);
|
||
|
||
const handleCopy = useCallback(() => {
|
||
copy(`我的ID是：${userInfo.userId}，邀你进主播群`);
|
||
}, [userInfo.userId]);
|
||
|
||
useEffect(() => {
|
||
Taro.eventCenter.on(EventName.SELECT_CITY, handleCityChange);
|
||
return () => {
|
||
Taro.eventCenter.off(EventName.SELECT_CITY, handleCityChange);
|
||
};
|
||
}, [handleCityChange]);
|
||
|
||
useEffect(() => {
|
||
if (!cityCode) return;
|
||
|
||
getStaffInfo(cityCode)
|
||
.then(data => {
|
||
setStaffInfo(data);
|
||
})
|
||
.catch(() => {
|
||
setStaffInfo(null);
|
||
});
|
||
}, [cityCode]);
|
||
|
||
return (
|
||
<div className={PREFIX}>
|
||
<div className={`${PREFIX}__main`}>
|
||
<div className={`${PREFIX}__block`}>
|
||
<div className={`${PREFIX}__lined-wrapper`}>
|
||
<div className={`${PREFIX}__lined-title ${PREFIX}__title`}>活动说明</div>
|
||
</div>
|
||
<div className={`${PREFIX}__card`}>
|
||
<div className={`${PREFIX}__h1 center`}>邀请播络运营进带货主播群</div>
|
||
<div className={`${PREFIX}__h1 center`} style={{ paddingBottom: `48rpx` }}>
|
||
每邀请进一个群送一个日会员
|
||
</div>
|
||
<div className={`${PREFIX}__edging`}>注：只能邀请带货主播群，请勿邀请其他群</div>
|
||
</div>
|
||
</div>
|
||
<div className={`${PREFIX}__block`}>
|
||
<div className={`${PREFIX}__lined-wrapper`}>
|
||
<div className={`${PREFIX}__lined-title ${PREFIX}__title`}>邀请方法</div>
|
||
</div>
|
||
<div className={`${PREFIX}__card`}>
|
||
<div className={`${PREFIX}__body`}>
|
||
<div className={`${PREFIX}__h1`}>
|
||
加运营为好友并将以下信息 <div className="highlight">粘贴发送给运营</div>
|
||
</div>
|
||
<div className={`${PREFIX}__action-block`}>
|
||
<div>我的ID是：{userInfo.userId}，邀你进主播群</div>
|
||
<Button className={`${PREFIX}__copy`} onClick={handleCopy}>
|
||
复制
|
||
</Button>
|
||
</div>
|
||
<div className={`${PREFIX}__lined-wrapper`}>
|
||
<div className={`${PREFIX}__lined-title`}>选择城市，添加运营</div>
|
||
</div>
|
||
<div className={`${PREFIX}__city-select`} onClick={handleClickCityMenu}>
|
||
{cityCode ? CITY_CODE_TO_NAME_MAP.get(cityCode) : '请选择城市'}
|
||
<Arrow size={16} />
|
||
</div>
|
||
{staffInfo && (
|
||
<Fragment>
|
||
<div className={`${PREFIX}__lined-wrapper`}>
|
||
<div className={`${PREFIX}__lined-title`}>长按并识别二维码添加运营</div>
|
||
</div>
|
||
<Image
|
||
className={`${PREFIX}__qrcode`}
|
||
src={staffInfo.staffQrCode}
|
||
showMenuByLongpress
|
||
mode="aspectFill"
|
||
/>
|
||
</Fragment>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|