feat:

src/pages/group-owner-certification/index.config.ts

@@ -1,5 +1,4 @@
 export default definePageConfig({
   navigationBarTitleText: '群主认证',
   enableShareAppMessage: true,
-  usingComponents: {},
 });

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

@@ -1 +1,127 @@
-.group-owner-certification {}
+@import '@/styles/common.less';
+@import '@/styles/variables.less';
+
+.group-owner-certification {
+  &__tabs {
+    --tabs-active-color: @blHighlightColor;
+    --tabs-nav-background-color: #fff;
+    --tabs-wrap-height: 98px;
+
+    > .taroify-tabs__wrap {
+      position: fixed;
+      width: 100vw;
+      top: 0;
+      left: 0;
+      z-index: 2;
+    }
+
+    > .taroify-tabs__content {
+      padding-top: var(--tabs-wrap-height);
+    }
+  }
+
+  &__main {
+    padding-left: 24px;
+    padding-right: 24px;
+    padding-top: 48px;
+  }
+
+  &__block {
+    margin-bottom: 40px;
+  }
+
+  &__card {
+    background: #fff;
+    border-radius: 24px;
+    padding: 24px 32px;
+    margin-bottom: 48px;
+  }
+
+  &__bold {
+    font-weight: 500;
+    margin-bottom: 8px;
+  }
+
+  &__body {
+    font-weight: 400;
+    font-size: 28px;
+    line-height: 40px;
+    color: @blColor;
+
+    .highlight {
+      color: @blHighlightColor;
+      display: inline;
+    }
+
+    &.center {
+      text-align: center;
+    }
+  }
+
+  &__title {
+    margin-bottom: 24px;
+    font-weight: 500;
+    font-size: 32px;
+    line-height: 32px;
+
+    color: #1d2129;
+  }
+
+  &__share {
+    .button(@height: 72px; @width: 384px; @fontSize: 28px; @fontWeight: 400; @borderRadius: 44px; @highlight: 0);
+    margin-top: 32px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  &__lined-wrapper {
+    text-align: center;
+    margin-top: 48px;
+    margin-bottom: 24px;
+  }
+  &__lined-title {
+    text-align: center;
+    font-weight: 400;
+    font-size: 28px;
+    line-height: 40px;
+    color: #333333;
+    position: relative;
+    display: inline-block;
+
+    &:before {
+      content: '';
+      position: absolute;
+      left: -68px;
+      width: 56px;
+      height: 1px;
+      background: #ccc;
+      top: 50%;
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      right: -68px;
+      width: 56px;
+      height: 1px;
+      background: #ccc;
+      top: 50%;
+    }
+  }
+  &__city-select {
+    background: #F7F7F7;
+    border-radius: 16px;
+    padding: 34px 32px;
+    font-weight: 400;
+    font-size: 32px;
+    line-height: 32px;
+    color: #333333;
+    display: flex;
+    justify-content: space-between;
+  }
+  &__qrcode {
+    width: 280px;
+    height: 280px;
+    background: #6F7686;
+    margin: auto auto 24px;
+  }
+}

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>
+  );
 }

src/pages/group-v2/index.tsx

@@ -5,8 +5,8 @@ import { useCallback } from 'react';
 import HomePage from '@/components/home-page';
 import SearchCity from '@/components/search-city';
 import { PageType, PageUrl, RoleType } from '@/constants/app';
-import { GROUPS } from '@/constants/group';
 import useInviteCode from '@/hooks/use-invite-code';
+import useServiceUrls from '@/hooks/use-service-urls';
 import { switchRoleType } from '@/utils/app';
 import { openCustomerServiceChat } from '@/utils/common';
 import { getCurrentCityCode } from '@/utils/location';
@@ -20,6 +20,7 @@ const PREFIX = 'group-v2-page';
 
 export default function GroupV2() {
   const inviteCode = useInviteCode();
+  const serviceUrls = useServiceUrls();
 
   useLoad(() => {
     switchRoleType(RoleType.Anchor);
@@ -32,15 +33,18 @@ export default function GroupV2() {
     getCommonShareMessage({ inviteCode, title: '邀请你加入本地主播求职招聘群', path: PageUrl.GroupV2 })
   );
 
-  const handleSelectCity = useCallback(cityCode => {
-    if (!checkCityCode(cityCode)) {
-      return;
-    }
-    const group = GROUPS.find(g => String(g.cityCode) === cityCode);
-    if (group) {
-      openCustomerServiceChat(group.serviceUrl);
-    }
-  }, []);
+  const handleSelectCity = useCallback(
+    cityCode => {
+      if (!checkCityCode(cityCode)) {
+        return;
+      }
+      const group = serviceUrls.find(g => String(g.cityCode) === cityCode);
+      if (group) {
+        openCustomerServiceChat(group.serviceUrl);
+      }
+    },
+    [serviceUrls]
+  );
 
   return (
     <HomePage type={PageType.GroupV2}>

src/pages/user-batch-publish/index.tsx

@@ -7,8 +7,8 @@ import { useCallback, useState } from 'react';
 import HomePage from '@/components/home-page';
 import SearchCity from '@/components/search-city';
 import { PageType, PageUrl, RoleType } from '@/constants/app';
-import { GROUPS } from '@/constants/group';
 import useInviteCode from '@/hooks/use-invite-code';
+import useServiceUrls from '@/hooks/use-service-urls';
 import { switchRoleType } from '@/utils/app';
 import { openCustomerServiceChat } from '@/utils/common';
 import { getCurrentCityCode } from '@/utils/location';
@@ -23,6 +23,7 @@ const EXAMPLE_IMAGE = 'https://publiccdn.neighbourhood.com.cn/img/delegate-examp
 const COMMENT_IMAGE = 'https://publiccdn.neighbourhood.com.cn/img/delegate-comments.png';
 export default function BizService() {
   const inviteCode = useInviteCode();
+  const serviceUrls = useServiceUrls();
   const [value, setValue] = useState('0');
 
   const handleClickDelegate = useCallback(() => {
@@ -37,15 +38,18 @@ export default function BizService() {
   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);
-    }
-  }, []);
+  const handleSelectCity = useCallback(
+    cityCode => {
+      if (!checkCityCode(cityCode)) {
+        return;
+      }
+      const group = serviceUrls.find(g => String(g.cityCode) === cityCode);
+      if (group) {
+        openCustomerServiceChat(group.serviceUrl);
+      }
+    },
+    [serviceUrls]
+  );
   const handleChange = useCallback(v => {
     setValue(v);
   }, []);