加群需要添加API

TUIKit/components/TUIGroup/create-group/group-introduction/config.ts

@@ -1,50 +1,59 @@
-import TUIChatEngine from '@tencentcloud/chat-uikit-engine-lite';
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine-lite'
 
 const groupIntroConfig = [
   {
     icon: 'https://web.sdk.qcloud.com/im/assets/images/Public.svg',
-    label: '陌生人社交群（Public）',
+    label: '陌生人社交群',
     type: TUIChatEngine.TYPES.GRP_PUBLIC,
-    detail: '类似 QQ 群，创建后群主可以指定群管理员，用户搜索群 ID 发起加群申请后，需要群主或管理员审批通过才能入群。详见',
-    src: '产品文档',
+    detail:
+      '（Public）类似 QQ 群，创建后群主可以指定群管理员，用户搜索群 ID 发起加群申请后，需要群主或管理员审批通过才能入群。',
+    src: '产品文档'
   },
   {
     icon: 'https://web.sdk.qcloud.com/im/assets/images/Meeting.svg',
-    label: '临时会议群（Meeting）',
+    label: '临时会议群',
     type: TUIChatEngine.TYPES.GRP_MEETING,
-    detail: '创建后可以随意进出，且支持查看入群前消息；适合用于音视频会议场景、在线教育场景等与实时音视频产品结合的场景。详见',
-    src: '产品文档',
+    detail:
+      '（Meeting）创建后可以随意进出，且支持查看入群前消息；适合用于音视频会议场景、在线教育场景等与实时音视频产品结合的场景。',
+    src: '产品文档'
   },
   {
     icon: 'https://web.sdk.qcloud.com/im/assets/images/Work.svg',
-    label: '好友工作群（Work）',
+    label: '好友工作群',
     type: TUIChatEngine.TYPES.GRP_WORK,
-    detail: '类似普通微信群，创建后仅支持已在群内的好友邀请加群，且无需被邀请方同意或群主审批。详见',
-    src: '产品文档',
+    detail:
+      '（Work）类似普通微信群，创建后仅支持已在群内的好友邀请加群，且无需被邀请方同意或群主审批。',
+    src: '产品文档'
   },
   {
     icon: 'https://web.sdk.qcloud.com/im/assets/images/AVChatroom.svg',
-    label: '直播群（AVChatroom）',
+    label: '直播群',
     type: TUIChatEngine.TYPES.GRP_AVCHATROOM,
-    detail: '创建后可以随意进出，没有群成员数量上限，但不支持历史消息存储；适合与直播产品结合，用于弹幕聊天场景。详见',
-    src: '产品文档',
+    detail:
+      '（AVChatroom）创建后可以随意进出，没有群成员数量上限，但不支持历史消息存储；适合与直播产品结合，用于弹幕聊天场景。',
+    src: '产品文档'
   },
   {
     icon: 'https://web.sdk.qcloud.com/im/assets/images/Community.png',
-    label: '社群（Community）',
+    label: '社群',
     type: TUIChatEngine.TYPES.GRP_COMMUNITY,
-    detail: '创建后可以随意进出，最多支持100000人，支持历史消息存储，用户搜索群 ID 发起加群申请后，无需管理员审批即可进群。详见',
-    src: '产品文档',
-  },
-];
+    detail:
+      '（Community）创建后可以随意进出，最多支持100000人，支持历史消息存储，用户搜索群 ID 发起加群申请后，无需管理员审批即可进群。',
+    src: '产品文档'
+  }
+]
 
 const findGroupIntroConfig = (type: string) => {
   return groupIntroConfig.filter((item: any) => {
-    return item.type === type;
-  })[0];
-};
+    return item.type === type
+  })[0]
+}
 
-export {
-  groupIntroConfig,
-  findGroupIntroConfig,
-};
+/** 入群方式 */
+const groupJoinTypeConfig = [
+  { label: '自由加入', value: 'FreeAccess' },
+  { label: '需要验证', value: 'NeedPermission' },
+  { label: '禁止加群', value: 'DisableApply' }
+]
+
+export { groupIntroConfig, groupJoinTypeConfig, findGroupIntroConfig }

TUIKit/components/TUIGroup/create-group/group-introduction/index.vue

@@ -10,66 +10,64 @@
       <main class="select-item-type">
         <div class="select-item-header">
           <aside class="left">
-            <Icon
-              class="icon"
-              :file="item.icon"
-            />
-            <span class="select-item-label">{{ TUITranslateService.t(`TUIGroup.${item.label}`) }}</span>
+            <Icon class="icon" :file="item.icon" />
+            <span class="select-item-label">
+              {{ TUITranslateService.t(`TUIGroup.${item.label}`) }}
+            </span>
           </aside>
-          <Icon
-            v-if="selectType === item.type"
-            :file="selectedIcon"
-          />
+          <Icon v-if="selectType === item.type" :file="selectedIcon" />
         </div>
-        <span class="select-item-detail">{{ TUITranslateService.t(`TUIGroup.${item.detail}`) }}</span>
+        <!-- <span class="select-item-detail">
+          {{ TUITranslateService.t(`TUIGroup.${item.detail}`) }}
+        </span>
         <a
           class="link"
           :href="documentLink.product.url"
           target="_blank"
           @click="openUrl(documentLink.product.url)"
-        >{{
-          TUITranslateService.t(`TUIGroup.${item.src}`) }}</a>
+        >
+          {{ TUITranslateService.t(`TUIGroup.${item.src}`) }}
+        </a> -->
       </main>
     </li>
   </ul>
 </template>
 <script lang="ts" setup>
-import { ref, watchEffect } from '../../../../adapter-vue';
-import { TUITranslateService } from '@tencentcloud/chat-uikit-engine-lite';
-import { TUIGlobal } from '@tencentcloud/universal-api';
-import documentLink from '../../../../utils/documentLink';
-import Icon from '../../../common/Icon.vue';
-import selectedIcon from '../../../../assets/icon/selected.svg';
-import { groupIntroConfig } from './config';
-import { isUniFrameWork } from '../../../../utils/env';
+  import { ref, watchEffect } from '../../../../adapter-vue'
+  import { TUITranslateService } from '@tencentcloud/chat-uikit-engine-lite'
+  import { TUIGlobal } from '@tencentcloud/universal-api'
+  import documentLink from '../../../../utils/documentLink'
+  import Icon from '../../../common/Icon.vue'
+  import selectedIcon from '../../../../assets/icon/selected.svg'
+  import { groupIntroConfig } from './config'
+  import { isUniFrameWork } from '../../../../utils/env'
 
-const props = defineProps({
-  groupType: {
-    type: String,
-    default: '',
-  },
-});
+  const props = defineProps({
+    groupType: {
+      type: String,
+      default: ''
+    }
+  })
 
-const type = groupIntroConfig;
+  const type = groupIntroConfig
 
-const selectType = ref();
+  const selectType = ref()
 
-const emit = defineEmits(['selectType']);
+  const emit = defineEmits(['selectType'])
 
-watchEffect(() => {
-  selectType.value = props.groupType;
-});
+  watchEffect(() => {
+    selectType.value = props.groupType
+  })
 
-const selected = (item: any) => {
-  selectType.value = item.type;
-  emit('selectType', item.type);
-};
-
-const openUrl = (link: string) => {
-  if (!isUniFrameWork) {
-    TUIGlobal?.open(link);
+  const selected = (item: any) => {
+    selectType.value = item.type
+    emit('selectType', item.type)
   }
-};
 
+  const openUrl = (link: string) => {
+    if (!isUniFrameWork) {
+      TUIGlobal?.open(link)
+    }
+  }
 </script>
 <style lang="scss" scoped src="../style/index.scss"></style>