feat:

src/pages/group-owner-certification/index.tsx

@@ -1,26 +1,123 @@
+import { Button, Image } from '@tarojs/components';
+import Taro, { useShareAppMessage } from '@tarojs/taro';
+
 import { Tabs } from '@taroify/core';
+import { Arrow } from '@taroify/icons';
+import { useCallback, useEffect, useRef, 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() {
-  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>
+  const location = useLocation();
+  const inviteCode = useInviteCode();
+  const [cityCode, setCityCode] = useState<string>(location.cityCode);
+  const cityValuesChangedRef = useRef(false);
+  Taro.showShareMenu({
+    withShareTicket: true,
+  });
+  useShareAppMessage(async () => {
+    const { authCode } = await generateGroupAuthCode();
+    return getCommonShareMessage({
+      useCapture: false,
+      title: `群主测试，${authCode}`,
+      inviteCode,
+      params: { authCode },
+      path: PageUrl.GroupOwnerCertificate,
+      imageUrl: 'https://publiccdn.neighbourhood.com.cn/img/share-group-owner-certificate.png',
+    });
+  });
+
+  const handleClickCityMenu = useCallback(() => {
+    navigateTo(PageUrl.CitySearch, { city: cityCode, source: OpenSource.GroupOwnerCertificate });
+  }, [cityCode]);
+
+  const handleCityChange = useCallback(data => {
+    console.log('handleCityChange', data);
+    const { openSource, cityCode: cCode } = data;
+    if (openSource !== OpenSource.GroupOwnerCertificate) {
+      return;
+    }
+    cityValuesChangedRef.current = true;
+    setCityCode(cCode);
+  }, []);
+
+  useEffect(() => {
+    if (cityValuesChangedRef.current) {
+      return;
+    }
+    setCityCode(location.cityCode);
+  }, [location]);
+  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(() => {
+    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}>
+                  {CITY_CODE_TO_NAME_MAP.get(cityCode)}
+                  <Arrow size={16} />
+                </div>
+                <div className={`${PREFIX}__lined-wrapper`}>
+                  <div className={`${PREFIX}__lined-title`}>长按并识别二维码添加运营</div>
+                </div>
+                {staffInfo && <Image className={`${PREFIX}__qrcode`} src={staffInfo.staffQrCode} mode="aspectFill" />}
+              </div>
+              <div className={`${PREFIX}__title`}>第二步</div>
+              <div className={`${PREFIX}__card`}>
+                <div className={`${PREFIX}__h1 ${PREFIX}__bold`}>点击以下按钮分享小程序到群，并在群里打开小程序</div>
+                <div className={`${PREFIX}__body center`}>
+                  <div className="highlight">1次分享只能认证一个群，有多个群请分享多次，不可在微信聊天里直接转发；</div>
+                  一般1天内完成，超时未完成认证请重新分享或者咨询运营
+                </div>
+                <Button className={`${PREFIX}__share`} openType="share">
+                  分享小程序
+                </Button>
               </div>
             </div>
           </div>
-        </div>
-      </Tabs.TabPane>
-      <Tabs.TabPane value={1} title="已认证的群"></Tabs.TabPane>
-    </Tabs>
-  </div>;
+        </Tabs.TabPane>
+        <Tabs.TabPane value={1} title="已认证的群">
+          <GroupCertificationList />
+        </Tabs.TabPane>
+      </Tabs>
+    </div>
+  );
 }