feat(3.8): 进群

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 {

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: {

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,

src/pages/group-detail/index.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '进通告群',
+});

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

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

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]
   );

src/types/location.ts

@@ -32,4 +32,5 @@ export interface CityConfigListItem {
   updated: string;
   price: number | null;
   sendCount: number | null;
+  groupQrCode?: string;
 }