127 lines
4.9 KiB
TypeScript
127 lines
4.9 KiB
TypeScript
import { Button, Image } from '@tarojs/components';
|
||
import Taro, { useShareAppMessage } from '@tarojs/taro';
|
||
|
||
import { Tabs } from '@taroify/core';
|
||
import { Arrow } from '@taroify/icons';
|
||
import { Fragment, useCallback, useEffect, useState } from 'react';
|
||
|
||
import GroupCertificationList from '@/components/group-certification-list';
|
||
import { EventName, OpenSource, PageUrl } from '@/constants/app';
|
||
import { CITY_CODE_TO_NAME_MAP } from '@/constants/city';
|
||
import useInviteCode from '@/hooks/use-invite-code';
|
||
import useLocation from '@/hooks/use-location';
|
||
import { StaffInfo } from '@/types/partner';
|
||
import { generateGroupAuthCode, getStaffInfo } from '@/utils/partner';
|
||
import { navigateTo } from '@/utils/route';
|
||
import { getCommonShareMessage } from '@/utils/share';
|
||
import './index.less';
|
||
|
||
const PREFIX = 'group-owner-certification';
|
||
|
||
export default function GroupOwnerCertification() {
|
||
const location = useLocation();
|
||
const inviteCode = useInviteCode();
|
||
const [cityCode, setCityCode] = useState<string>();
|
||
Taro.showShareMenu({
|
||
withShareTicket: true,
|
||
});
|
||
useShareAppMessage(async () => {
|
||
const { authCode } = await generateGroupAuthCode();
|
||
return getCommonShareMessage({
|
||
useCapture: false,
|
||
title: `我在认证群主，宝子帮我点击下 ${authCode}`,
|
||
inviteCode,
|
||
params: { authCode },
|
||
path: PageUrl.Job,
|
||
imageUrl: 'https://publiccdn.neighbourhood.com.cn/img/share-group-owner-certificate.png',
|
||
});
|
||
});
|
||
|
||
const handleClickCityMenu = useCallback(() => {
|
||
navigateTo(PageUrl.CitySearch, { city: cityCode || location.cityCode, source: OpenSource.GroupOwnerCertificate });
|
||
}, [cityCode, location.cityCode]);
|
||
|
||
const handleCityChange = useCallback(data => {
|
||
console.log('handleCityChange', data);
|
||
const { openSource, cityCode: cCode } = data;
|
||
if (openSource !== OpenSource.GroupOwnerCertificate) {
|
||
return;
|
||
}
|
||
setCityCode(cCode);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
Taro.eventCenter.on(EventName.SELECT_CITY, handleCityChange);
|
||
return () => {
|
||
Taro.eventCenter.off(EventName.SELECT_CITY, handleCityChange);
|
||
};
|
||
}, [handleCityChange]);
|
||
|
||
const [staffInfo, setStaffInfo] = useState<StaffInfo | null>(null);
|
||
useEffect(() => {
|
||
if (!cityCode) return;
|
||
|
||
getStaffInfo(cityCode)
|
||
.then(data => {
|
||
setStaffInfo(data);
|
||
})
|
||
.catch(() => {
|
||
setStaffInfo(null);
|
||
});
|
||
}, [cityCode]);
|
||
|
||
return (
|
||
<div className={PREFIX}>
|
||
<Tabs className={`${PREFIX}__tabs`}>
|
||
<Tabs.TabPane value={0} title="认证方法">
|
||
<div className={`${PREFIX}__main`}>
|
||
<div className={`${PREFIX}__block`}>
|
||
<div className={`${PREFIX}__title`}>第一步：拉运营入群</div>
|
||
<div className={`${PREFIX}__card`}>
|
||
<div className={`${PREFIX}__body`}>
|
||
<div>拉播络城市运营进入你的带货主播群，</div>
|
||
<div>请确认你是群主且是带货主播群，不然不要拉</div>
|
||
</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 className={`${PREFIX}__title`}>第二步</div>
|
||
<div className={`${PREFIX}__card`}>
|
||
<div className={`${PREFIX}__h1 ${PREFIX}__bold`}>点击以下按钮分享小程序到群，并在群里打开小程序</div>
|
||
<div className={`${PREFIX}__body`}>
|
||
<div className="highlight">1次分享只能认证一个群，有多个群请分享多次，不可在微信聊天里直接转发；</div>
|
||
<div>一般1天内完成，超时未完成认证请重新分享或者咨询运营</div>
|
||
</div>
|
||
<Button className={`${PREFIX}__share`} openType="share">
|
||
分享小程序
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Tabs.TabPane>
|
||
<Tabs.TabPane value={1} title="已认证的群">
|
||
<GroupCertificationList />
|
||
</Tabs.TabPane>
|
||
</Tabs>
|
||
</div>
|
||
);
|
||
}
|