diff --git a/src/components/join-group-hint/index.less b/src/components/join-group-hint/index.less
new file mode 100644
index 0000000..ab9c113
--- /dev/null
+++ b/src/components/join-group-hint/index.less
@@ -0,0 +1,41 @@
+@import '@/styles/common.less';
+@import '@/styles/variables.less';
+
+.join-group-hint {
+  .flex-row();
+  background: #FFFFFF;
+  border-radius: 16px;
+  padding: 32px 24px;
+  margin-top: 24px;
+  margin-bottom: 24px;
+
+  &__icon {
+    width: 80px;
+    height: 80px;
+    margin-right: 32px;
+  }
+
+  &__left {
+    flex: 1;
+    padding-left: 8px;
+    &-title {
+      font-weight: 500;
+      font-size: 32px;
+      line-height: 40px;
+      margin-bottom: 16px;
+    }
+    &-desc {
+      font-weight: 400;
+      font-size: 28px;
+      line-height: 40px;
+    }
+  }
+
+  &__right {
+    flex: 0 0 auto;
+  }
+
+  &__button {
+    .button(@width: 186px, @height: 64px, @fontSize: 28px, @fontWeight: 400, @borderRadius: 32px, @highlight: 0);
+  }
+}
diff --git a/src/components/join-group-hint/index.tsx b/src/components/join-group-hint/index.tsx
new file mode 100644
index 0000000..f80a654
--- /dev/null
+++ b/src/components/join-group-hint/index.tsx
@@ -0,0 +1,58 @@
+import { Button, Image } from '@tarojs/components';
+import Taro from '@tarojs/taro';
+
+import { Plus } from '@taroify/icons';
+import { useCallback, useState } from 'react';
+
+import { RoleType } from '@/constants/app';
+import { CacheKey } from '@/constants/cache-key';
+import { CITY_CODE_TO_NAME_MAP } from '@/constants/city';
+import { GROUPS } from '@/constants/group';
+import { getRoleTypeWithDefault } from '@/utils/app';
+import { openCustomerServiceChat } from '@/utils/common';
+import { getCurrentCityCode } from '@/utils/location';
+import { checkCityCode, validCityCode } from '@/utils/user';
+
+import './index.less';
+
+const PREFIX = 'join-group-hint';
+
+export function JoinGroupHint() {
+  const cityCode = getCurrentCityCode();
+  const roleType = getRoleTypeWithDefault();
+  const group = GROUPS.find(g => String(g.cityCode) === cityCode);
+  const [clicked, setClicked] = useState(!!Taro.getStorageSync(CacheKey.JOIN_GROUP_CARD_CLICKED));
+  const handleClick = useCallback(() => {
+    if (!checkCityCode(cityCode)) {
+      return;
+    }
+    if (group) {
+      openCustomerServiceChat(group.serviceUrl);
+      Taro.setStorageSync(CacheKey.JOIN_GROUP_CARD_CLICKED, true);
+      setClicked(true);
+    }
+  }, [cityCode, group]);
+  if (!group || !validCityCode(cityCode) || clicked) {
+    return null;
+  }
+
+  return (
+    <div className={PREFIX}>
+      <Image
+        className={`${PREFIX}__icon`}
+        src="https://publiccdn.neighbourhood.com.cn/img/group-avatar.png"
+        mode="aspectFit"
+      />
+      <div className={`${PREFIX}__left`}>
+        <div className={`${PREFIX}__left-title`}>{CITY_CODE_TO_NAME_MAP.get(cityCode)}主播招聘群</div>
+        <div className={`${PREFIX}__left-desc`}>{roleType === RoleType.Anchor ? '高薪工作早知道' : '免费招主播'}</div>
+      </div>
+      <div className={`${PREFIX}__right`}>
+        <Button className={`${PREFIX}__button`} onClick={handleClick}>
+          <Plus />
+          加入该群
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/user-batch-publish/index.tsx b/src/components/user-batch-publish/index.tsx
index 7b9aba5..773e9b8 100644
--- a/src/components/user-batch-publish/index.tsx
+++ b/src/components/user-batch-publish/index.tsx
@@ -40,18 +40,18 @@ const SERVICE_ILLUSTRATE = `服务方式：帮您把招聘需求发到众多同
 内容要求：仅限带货主播招聘需求，其他不发
 主播联系：内容中留招聘方联系方式，主播直接联系`;
 const cityValues: CityValue[] = [
-  { cityCode: '440100', cityName: '广州', count: 300 }, // 800
+  { cityCode: '440100', cityName: '广州', count: 800 },
   { cityCode: '440300', cityName: '深圳', count: 100 },
-  { cityCode: '330100', cityName: '杭州', count: 300 }, // 750
-  { cityCode: '110100', cityName: '北京', count: 100 }, // 150
+  { cityCode: '330100', cityName: '杭州', count: 750 },
+  { cityCode: '110100', cityName: '北京', count: 150 },
   { cityCode: '510100', cityName: '成都', count: 100 },
-  // { cityCode: '500100', cityName: '重庆', count: 50 },
+  { cityCode: '500100', cityName: '重庆', count: 50 },
   { cityCode: '430100', cityName: '长沙', count: 50 },
   { cityCode: '350200', cityName: '厦门', count: 50 },
-  { cityCode: '310100', cityName: '上海', count: 100 },  // 150
-  { cityCode: '420100', cityName: '武汉', count: 50 }, // 80
-  { cityCode: '610100', cityName: '西安', count: 50 }, // 60
-  { cityCode: '410100', cityName: '郑州', count: 100 }, // 150
+  { cityCode: '310100', cityName: '上海', count: 150 },
+  { cityCode: '420100', cityName: '武汉', count: 80 },
+  { cityCode: '610100', cityName: '西安', count: 60 },
+  { cityCode: '410100', cityName: '郑州', count: 150 },
 ].sort((a, b) => b.count - a.count);
 const MIN_GROUP_SIZE = 20;
 const GROUP_OPTIONS = [
@@ -62,7 +62,7 @@ const GROUP_OPTIONS = [
   { value: 100, productSpecId: ProductSpecId.GroupBatchPublish100, label: '100', price: 68 },
   { value: 150, productSpecId: ProductSpecId.GroupBatchPublish150, label: '150', price: 98 },
   { value: 300, productSpecId: ProductSpecId.GroupBatchPublish300, label: '300', price: 128 },
-  { value: 500, productSpecId: ProductSpecId.GroupBatchPublish500, label: '500', price: 188 }, // 168
+  { value: 500, productSpecId: ProductSpecId.GroupBatchPublish500, label: '500', price: 168 },
   { value: 750, productSpecId: ProductSpecId.GroupBatchPublish750, label: '750', price: 188 },
   { value: 800, productSpecId: ProductSpecId.GroupBatchPublish800, label: '800', price: 198 },
   { value: 1000, productSpecId: ProductSpecId.GroupBatchPublish1000, label: '1000', price: 288 },
@@ -146,7 +146,7 @@ export default function UserBatchPublish() {
   useEffect(() => {
     try {
       const cOptions: CityOption[] = cityValues.map(value => ({ value, label: value.cityName }));
-      const initCity = cOptions[0].value;
+      const initCity = (cOptions.find(o => o.label === '重庆') || cOptions[0]).value;
 
       setLoading(false);
       setCity(initCity);
diff --git a/src/constants/cache-key.ts b/src/constants/cache-key.ts
index 594ca08..f45331f 100644
--- a/src/constants/cache-key.ts
+++ b/src/constants/cache-key.ts
@@ -12,4 +12,5 @@ export enum CacheKey {
   INVITE_CODE = '__invite_code__',
   AGREEMENT_SIGNED = '__agreement_signed__',
   CITY_CODES = '__city_codes__',
+  JOIN_GROUP_CARD_CLICKED = '__join_group_card_clicked__',
 }
diff --git a/src/fragments/profile/view/index.less b/src/fragments/profile/view/index.less
index 0b30951..80b024f 100644
--- a/src/fragments/profile/view/index.less
+++ b/src/fragments/profile/view/index.less
@@ -232,4 +232,8 @@
       }
     }
   }
+
+  .join-group-hint {
+    margin: 24px;
+  }
 }
diff --git a/src/fragments/profile/view/index.tsx b/src/fragments/profile/view/index.tsx
index 38669c6..8ed9b90 100644
--- a/src/fragments/profile/view/index.tsx
+++ b/src/fragments/profile/view/index.tsx
@@ -17,6 +17,7 @@ import { navigateTo } from '@/utils/route';
 
 import './index.less';
 import onChangeEventDetail = SwiperProps.onChangeEventDetail;
+import { JoinGroupHint } from '@/components/join-group-hint';
 
 interface IProps {
   editable: boolean;
@@ -207,6 +208,7 @@ export default function ProfileViewFragment(props: IProps) {
           >{`${coverIndex + 1}/${profile.materialVideoInfoList.length}`}</div>
         </div>
       </div>
+      {!editable && <JoinGroupHint />}
       <div className={`${PREFIX}__body`}>
         <div className={`${PREFIX}__basic-info`}>
           <div className={`${PREFIX}__basic-info__name-container`}>
@@ -228,7 +230,9 @@ export default function ProfileViewFragment(props: IProps) {
               {index ? (
                 <div className={`${PREFIX}__info-group__header__title`}>{data.title}</div>
               ) : (
-                <DevDiv className={`${PREFIX}__info-group__header__title`} OnDev={onDev}>{data.title}</DevDiv>
+                <DevDiv className={`${PREFIX}__info-group__header__title`} OnDev={onDev}>
+                  {data.title}
+                </DevDiv>
               )}
               {editable && (
                 <div className={`${PREFIX}__info-group__header__edit`} onClick={() => handleEditGroupItem(data.type)}>
diff --git a/src/pages/job-detail/index.tsx b/src/pages/job-detail/index.tsx
index 9345e5c..738548d 100644
--- a/src/pages/job-detail/index.tsx
+++ b/src/pages/job-detail/index.tsx
@@ -37,6 +37,7 @@ import Toast from '@/utils/toast';
 import { isNeedCreateMaterial } from '@/utils/user';
 
 import './index.less';
+import { JoinGroupHint } from '@/components/join-group-hint';
 
 const PREFIX = 'job-detail';
 const log = logWithPrefix(PREFIX);
@@ -282,6 +283,8 @@ export default function JobDetail() {
           {data.companyName && <div className={`${PREFIX}__company`}>{`公司：${data.companyName}`}</div>}
         </div>
 
+        {!isOwner && <JoinGroupHint />}
+
         <div className={`${PREFIX}__content`}>
           <div className={`${PREFIX}__content-title`}>职位描述</div>
           <div className={`${PREFIX}__tags`}>
diff --git a/src/utils/user.ts b/src/utils/user.ts
index 227e05f..46f8863 100644
--- a/src/utils/user.ts
+++ b/src/utils/user.ts
@@ -156,14 +156,18 @@ export const getCityCodes = (): string[] => {
   return !cachedValue || !Array.isArray(cachedValue) ? [] : cachedValue;
 };
 export const setCityCodes = (cityCode: string[]) => Taro.setStorageSync(CacheKey.CITY_CODES, cityCode);
-export const checkCityCode = (cityCode: string): boolean => {
+export const validCityCode = (cityCode: string) => {
   const cachedCityCodes = getCityCodes();
   const isNewCityCode = cachedCityCodes.indexOf(cityCode) === -1;
-  if (cachedCityCodes.length === 2 && isNewCityCode) {
+  return !(cachedCityCodes.length === 2 && isNewCityCode);
+};
+export const checkCityCode = (cityCode: string): boolean => {
+  if (!validCityCode(cityCode)) {
     Toast.info('最多只能进入2个城市');
     return false;
   }
-  if (isNewCityCode) {
+  const cachedCityCodes = getCityCodes();
+  if (cachedCityCodes.indexOf(cityCode) === -1) {
     setCityCodes([...cachedCityCodes, cityCode]);
   }
   return true;