diff --git a/src/constants/app.ts b/src/constants/app.ts
index d9601e4..3040839 100644
--- a/src/constants/app.ts
+++ b/src/constants/app.ts
@@ -84,6 +84,7 @@ export enum PageUrl {
   GroupOwnerCertificate = 'pages/group-owner-certification/index',
   PartnerShareVip = 'pages/partner-share-vip/index',
   InviteOperations = 'pages/invite-operations/index',
+  GroupDetail = 'pages/group-detail/index',
 }
 
 export enum PluginUrl {
diff --git a/src/hooks/use-config.tsx b/src/hooks/use-config.tsx
index 129c13f..9b4cb1d 100644
--- a/src/hooks/use-config.tsx
+++ b/src/hooks/use-config.tsx
@@ -103,6 +103,7 @@ export const APP_CONFIG: AppConfigType = {
     PageUrl.PartnerShareVip,
     PageUrl.InviteOperations,
     PageUrl.AccelerateDelegatePublish,
+    PageUrl.GroupDetail,
     // PageUrl.DevDebug,
   ],
   window: {
diff --git a/src/pages/give-vip/index.tsx b/src/pages/give-vip/index.tsx
index 2d62e47..77f7c11 100644
--- a/src/pages/give-vip/index.tsx
+++ b/src/pages/give-vip/index.tsx
@@ -5,14 +5,12 @@ import { Fragment, useCallback, useState } from 'react';
 
 import SafeBottomPadding from '@/components/safe-bottom-padding';
 import { PageUrl } from '@/constants/app';
-import { logWithPrefix } from '@/utils/common';
 import { claimMembershipCoupon, getCouponCodeFromQuery } from '@/utils/coupon';
 import { getPageQuery, switchTab } from '@/utils/route';
 import { formatTime } from '@/utils/time';
 import './index.less';
 
 const PREFIX = 'give-vip';
-const log = logWithPrefix(PREFIX);
 
 enum State {
   PENDING,
diff --git a/src/pages/group-detail/index.config.ts b/src/pages/group-detail/index.config.ts
new file mode 100644
index 0000000..fceb993
--- /dev/null
+++ b/src/pages/group-detail/index.config.ts
@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '进通告群',
+});
diff --git a/src/pages/group-detail/index.less b/src/pages/group-detail/index.less
new file mode 100644
index 0000000..91ff0d5
--- /dev/null
+++ b/src/pages/group-detail/index.less
@@ -0,0 +1,70 @@
+@import '@/styles/variables.less';
+@import '@/styles/common.less';
+
+.group-detail {
+  padding: 24px;
+  &__card {
+    padding: 32px;
+    background: #fff;
+    border-radius: 24px;
+    .flex-column();
+  }
+  &__city-name {
+    background: #f7f7f7;
+    border-radius: 16px;
+    height: 100px;
+    line-height: 100px;
+    color: #6d3df5;
+    font-size: 32px;
+    width: 100%;
+    margin-bottom: 48px;
+    text-align: center;
+  }
+  &__lined-wrapper {
+    text-align: center;
+    margin-bottom: 20px;
+  }
+  &__lined-title {
+    text-align: center;
+    font-weight: 500;
+    font-size: 32px;
+    line-height: 48px;
+    color: #333333;
+    position: relative;
+    display: inline-block;
+
+    &:before {
+      content: '';
+      position: absolute;
+      left: -72px;
+      width: 56px;
+      height: 1px;
+      background: #ccc;
+      top: 50%;
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      right: -72px;
+      width: 56px;
+      height: 1px;
+      background: #ccc;
+      top: 50%;
+    }
+  }
+  &__text {
+    font-size: 28px;
+    line-height: 40px;
+    color: #333333;
+margin-bottom: 24px;
+
+  }
+  &__qrcode {
+    width: 280px;
+    height: 280px;
+    background: #6f7686;
+    display: block;
+    margin: auto auto 24px;
+  }
+}
diff --git a/src/pages/group-detail/index.tsx b/src/pages/group-detail/index.tsx
new file mode 100644
index 0000000..3042ec1
--- /dev/null
+++ b/src/pages/group-detail/index.tsx
@@ -0,0 +1,44 @@
+import { Image } from '@tarojs/components';
+import { useLoad } from '@tarojs/taro';
+
+import { Fragment, useMemo, useState } from 'react';
+
+import useCityOperators from '@/hooks/use-city-operators';
+import { getPageQuery } from '@/utils/route';
+import './index.less';
+
+const PREFIX = 'group-detail';
+
+export default function GroupDetail() {
+  const cityOperators = useCityOperators();
+  const [cityCode, setCityCode] = useState('');
+
+  useLoad(() => {
+    const query = getPageQuery<{ cityCode: string }>();
+    setCityCode(String(query.cityCode));
+  });
+
+  const operator = useMemo(() => {
+    if (cityOperators.length && cityCode) {
+      return cityOperators.find(it => String(it.cityCode) === cityCode);
+    }
+    return undefined;
+  }, [cityCode, cityOperators]);
+
+  return (
+    <div className={PREFIX}>
+      <div className={`${PREFIX}__card`}>
+        <div className={`${PREFIX}__lined-wrapper`}>
+          <div className={`${PREFIX}__lined-title`}>当前所选城市</div>
+        </div>
+        <div className={`${PREFIX}__city-name`}>{operator?.cityName}</div>
+        {operator && operator.groupQrCode ? (
+          <Fragment>
+            <div className={`${PREFIX}__text`}>长按并识别二维码添加运营</div>
+            <Image className={`${PREFIX}__qrcode`} src={operator?.groupQrCode} showMenuByLongpress mode="aspectFill" />
+          </Fragment>
+        ) : null}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/group-v2/index.tsx b/src/pages/group-v2/index.tsx
index b4f6617..915cb3b 100644
--- a/src/pages/group-v2/index.tsx
+++ b/src/pages/group-v2/index.tsx
@@ -8,10 +8,9 @@ import { PageType, PageUrl, RoleType } from '@/constants/app';
 import useCityOperators from '@/hooks/use-city-operators';
 import useInviteCode from '@/hooks/use-invite-code';
 import { switchRoleType } from '@/utils/app';
-import { openCustomerServiceChat } from '@/utils/common';
 import { getCurrentCityCode } from '@/utils/location';
 import { getInviteCodeFromQueryAndUpdate } from '@/utils/partner';
-import { getPageQuery } from '@/utils/route';
+import { getPageQuery, navigateTo } from '@/utils/route';
 import { getCommonShareMessage } from '@/utils/share';
 import { checkCityCode } from '@/utils/user';
 import './index.less';
@@ -38,10 +37,11 @@ export default function GroupV2() {
       if (!checkCityCode(cityCode)) {
         return;
       }
-      const group = cityOperators.find(g => String(g.cityCode) === cityCode);
-      if (group) {
-        openCustomerServiceChat(group.groupLink);
-      }
+      navigateTo(PageUrl.GroupDetail, { cityCode });
+      // const group = cityOperators.find(g => String(g.cityCode) === cityCode);
+      // if (group) {
+      //   openCustomerServiceChat(group.groupLink);
+      // }
     },
     [cityOperators]
   );
diff --git a/src/types/location.ts b/src/types/location.ts
index 390f90a..c4460c5 100644
--- a/src/types/location.ts
+++ b/src/types/location.ts
@@ -32,4 +32,5 @@ export interface CityConfigListItem {
   updated: string;
   price: number | null;
   sendCount: number | null;
+  groupQrCode?: string;
 }