加群需要添加API

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

@@ -1,15 +1,11 @@
 <template>
-  <div
-    class="group"
-    :class="[!isPC ? 'group-h5' : '']"
-  >
+  <div class="group" :class="[!isPC ? 'group-h5' : '']">
     <div class="group-box">
-      <ul
-        v-if="!groupInfo.isEdit"
-        class="group-list"
-      >
+      <ul v-if="!groupInfo.isEdit" class="group-list">
         <li class="group-list-item">
-          <label class="group-list-item-label">{{ TUITranslateService.t('TUIGroup.群头像') }}</label>
+          <label class="group-list-item-label">
+            {{ TUITranslateService.t('TUIGroup.群头像') }}
+          </label>
           <Avatar :url="groupInfo.profile.avatar" />
         </li>
         <ul>
@@ -24,7 +20,7 @@
               v-model="groupInfo.profile[item.key]"
               type="text"
               :placeholder="item.placeholder"
-            >
+            />
             <span
               v-else
               class="group-h5-list-item-content"
@@ -34,9 +30,18 @@
               <Icon :file="rightIcon" />
             </span>
           </li>
+          <li class="group-list-item" @click="cbPopupShow.open('bottom')">
+            <label class="group-list-item-label">申请加群方式</label>
+            <span class="group-h5-list-item-content">
+              <p class="content">{{ applyJoinOptionName }}</p>
+              <Icon :file="rightIcon" />
+            </span>
+          </li>
           <li class="group-list-introduction">
             <div class="group-list-item">
-              <label class="group-list-item-label">{{ TUITranslateService.t('TUIGroup.群类型') }}</label>
+              <label class="group-list-item-label">
+                {{ TUITranslateService.t('TUIGroup.群类型') }}
+              </label>
               <GroupIntroduction
                 v-if="isPC"
                 :groupType="groupInfo.profile.type"
@@ -51,34 +56,35 @@
                 <Icon :file="rightIcon" />
               </span>
             </div>
-            <article
-              v-if="!isPC"
-              class="group-h5-list-item-introduction"
-            >
-              <label class="introduction-name">{{ groupTypeDetail.label }}：</label>
-              <span class="introduction-detail">{{ groupTypeDetail.detail }}</span>
-              <a
-                :href="documentLink.product.url"
-                target="view_window"
-              >
-                {{ TUITranslateService.t(`TUIGroup.${groupTypeDetail.src}`) }}
-              </a>
+            <article v-if="!isPC" class="group-h5-list-item-introduction">
+              <label class="introduction-name">
+                {{ groupTypeDetail.label }}：
+              </label>
+              <span class="introduction-detail">
+                {{ groupTypeDetail.detail }}
+              </span>
+              <!-- <a :href="documentLink.product.url" target="view_window">
+                {{
+                  TUITranslateService.t(`TUIGroup.${groupTypeDetail.src}`)
+                }}
+              </a> -->
             </article>
           </li>
         </ul>
       </ul>
       <!-- Edit Group Name -->
-      <div
-        v-else
-        class="group-list group-list-edit"
-      >
+      <div v-else class="group-list group-list-edit">
         <input
           v-if="groupInfo.groupConfig.type === 'input'"
           v-model="groupInfo.groupConfig.value"
           class="group-name-input"
           type="text"
-          :placeholder="TUITranslateService.t(`TUIGroup.${groupInfo.groupConfig.placeholder}`)"
-        >
+          :placeholder="
+            TUITranslateService.t(
+              `TUIGroup.${groupInfo.groupConfig.placeholder}`
+            )
+          "
+        />
         <GroupIntroduction
           v-else
           class="group-introduction-list"
@@ -103,176 +109,258 @@
         </button>
       </footer>
     </div>
+
+    <uni-popup ref="cbPopupShow" backgroundColor="#fff">
+      <view class="popup-content">
+        <text
+          v-for="(item, index) in groupJoinTypeConfig"
+          :key="index"
+          :class="{ 'on-text': item.value === applyJoinOption }"
+          @click="
+            () => {
+              cbPopupShow.close()
+              applyJoinOption = item.value
+            }
+          "
+        >
+          {{ item.label }}
+        </text>
+        <text @click="cbPopupShow.close()">取消</text>
+      </view>
+    </uni-popup>
   </div>
 </template>
 <script lang="ts" setup>
-import TUIChatEngine, {
-  TUITranslateService,
-  TUIGroupService,
-  TUIStore,
-  StoreName,
-} from '@tencentcloud/chat-uikit-engine-lite';
-import { computed, reactive, watchEffect } from '../../../adapter-vue';
-import documentLink from '../../../utils/documentLink';
-import { isPC } from '../../../utils/env';
-import Icon from '../../common/Icon.vue';
-import rightIcon from '../../../assets/icon/right-icon.svg';
-import GroupIntroduction from './group-introduction/index.vue';
-import { groupIntroConfig, findGroupIntroConfig } from './group-introduction/config';
-import { Toast, TOAST_TYPE } from '../../common/Toast/index';
-import Avatar from '../../common/Avatar/index.vue';
-import Server from '../server';
-import { IUserProfile } from '../../../interface';
-const TUIGroupServer = Server.getInstance();
-const TUIConstants = TUIGroupServer.constants;
+  import TUIChatEngine, {
+    TUITranslateService,
+    TUIGroupService,
+    TUIStore,
+    StoreName
+  } from '@tencentcloud/chat-uikit-engine-lite'
+  import {
+    computed,
+    ref,
+    reactive,
+    watchEffect
+  } from '../../../adapter-vue'
+  import documentLink from '../../../utils/documentLink'
+  import { isPC } from '../../../utils/env'
+  import Icon from '../../common/Icon.vue'
+  import rightIcon from '../../../assets/icon/right-icon.svg'
+  import GroupIntroduction from './group-introduction/index.vue'
+  import {
+    groupIntroConfig,
+    findGroupIntroConfig,
+    groupJoinTypeConfig
+  } from './group-introduction/config'
+  import { Toast, TOAST_TYPE } from '../../common/Toast/index'
+  import Avatar from '../../common/Avatar/index.vue'
+  import Server from '../server'
+  import { IUserProfile } from '../../../interface'
+  import { createImGroup } from '../../../../api/tui-kit'
 
-const groupInfo = reactive<any>({
-  profile: {
-    groupID: '',
-    name: '',
-    type: groupIntroConfig[0].type,
-    avatar: groupIntroConfig[0].icon,
-    introduction: '',
-    notification: '',
-    // joinOption: '',
-    memberList: [],
-    isSupportTopic: false,
-  },
-  groupConfig: {
-    title: '',
-    value: '',
-    key: '',
-    type: '',
-    placeholder: '',
-  },
-  isEdit: false,
-});
+  const TUIGroupServer = Server.getInstance()
+  const TUIConstants = TUIGroupServer.constants
 
-watchEffect(() => {
-  const params = TUIGroupServer.getOnCallParams(TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP);
-  groupInfo.profile.memberList = params.memberList;
-  groupInfo.groupConfig.title = params.title;
-});
+  /** 自定义数据 */
+  const cbPopupShow = ref(null)
+  const applyJoinOption = ref('NeedPermission')
 
-const groupTypeDetail = computed(() => {
-  return findGroupIntroConfig(groupInfo.profile.type);
-});
+  const applyJoinOptionName = computed(() => {
+    const data = groupJoinTypeConfig.find(
+      v => v.value === applyJoinOption.value
+    )
+    return data?.label || ''
+  })
+  // =======
+  const groupInfo = reactive<any>({
+    profile: {
+      groupID: '',
+      name: '',
+      type: groupIntroConfig[0].type,
+      avatar: groupIntroConfig[0].icon,
+      introduction: '',
+      notification: '',
+      // joinOption: '',
+      memberList: [],
+      isSupportTopic: false
+    },
+    groupConfig: {
+      title: '',
+      value: '',
+      key: '',
+      type: '',
+      placeholder: ''
+    },
+    isEdit: false
+  })
 
-const headerTitle = computed(() => {
-  let name = '添加群聊';
-  if (groupInfo.isEdit) {
-    name = groupInfo.groupConfig.title;
-  }
-  return TUITranslateService.t(`TUIGroup.${name}`);
-});
+  watchEffect(() => {
+    const params = TUIGroupServer.getOnCallParams(
+      TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP
+    )
+    groupInfo.profile.memberList = params.memberList
+    groupInfo.groupConfig.title = params.title
+  })
 
-const createInfo = computed(() => {
-  const groupNameInput = {
-    name: TUITranslateService.t('TUIGroup.群名称'),
-    key: 'name',
-    placeholder: TUITranslateService.t('TUIGroup.请输入群名称'),
-  };
-  const groupIDInput = {
-    name: `${TUITranslateService.t('TUIGroup.群ID')}(${TUITranslateService.t('TUIGroup.选填')})`,
-    key: 'groupID',
-    placeholder: TUITranslateService.t('TUIGroup.请输入群ID'),
-  };
-  return groupInfo.profile.type === TUIChatEngine.TYPES.GRP_COMMUNITY
-    ? [groupNameInput]
-    : [groupNameInput, groupIDInput];
-});
+  const groupTypeDetail = computed(() => {
+    return findGroupIntroConfig(groupInfo.profile.type)
+  })
 
-const submitDisabledStatus = computed(() => {
-  return groupInfo.profile.name === '' && !groupInfo.isEdit;
-});
-
-const selected = (type: any) => {
-  if (groupInfo.profile.type !== type) {
-    groupInfo.profile.type = type;
-    groupInfo.profile.avatar = findGroupIntroConfig(type).icon;
+  const headerTitle = computed(() => {
+    let name = '添加群聊'
     if (groupInfo.isEdit) {
-      groupInfo.groupConfig.value = type;
+      name = groupInfo.groupConfig.title
+    }
+    return TUITranslateService.t(`TUIGroup.${name}`)
+  })
+
+  const createInfo = computed(() => {
+    const groupNameInput = {
+      name: TUITranslateService.t('TUIGroup.群名称'),
+      key: 'name',
+      placeholder: TUITranslateService.t('TUIGroup.请输入群名称')
+    }
+    const groupIDInput = {
+      name: `${TUITranslateService.t(
+        'TUIGroup.群ID'
+      )}(${TUITranslateService.t('TUIGroup.选填')})`,
+      key: 'groupID',
+      placeholder: TUITranslateService.t('TUIGroup.请输入群ID')
+    }
+    return groupInfo.profile.type === TUIChatEngine.TYPES.GRP_COMMUNITY
+      ? [groupNameInput]
+      : [groupNameInput, groupIDInput]
+  })
+
+  const submitDisabledStatus = computed(() => {
+    return groupInfo.profile.name === '' && !groupInfo.isEdit
+  })
+
+  const selected = (type: any) => {
+    if (groupInfo.profile.type !== type) {
+      groupInfo.profile.type = type
+      groupInfo.profile.avatar = findGroupIntroConfig(type).icon
+      if (groupInfo.isEdit) {
+        groupInfo.groupConfig.value = type
+      }
     }
   }
-};
 
-const createGroup = async (options: any) => {
-  try {
-    options.memberList = options.memberList.map((item: IUserProfile) => {
-      return { userID: item.userID };
-    });
-    if (options.type === TUIChatEngine.TYPES.GRP_COMMUNITY) {
-      delete options.groupID;
+  const createGroup = async (options: any) => {
+    console.log('确认创建==', options)
+    // const data = {
+    //   currentMemberCount:
+    // }
+    // createImGroup()
+    return
+    try {
+      options.memberList = options.memberList.map(
+        (item: IUserProfile) => {
+          return { userID: item.userID }
+        }
+      )
+      if (options.type === TUIChatEngine.TYPES.GRP_COMMUNITY) {
+        delete options.groupID
+      }
+      const res = await TUIGroupService.createGroup(options)
+      const { type } = res.data.group
+      if (type === TUIChatEngine.TYPES.GRP_AVCHATROOM) {
+        await TUIGroupService.joinGroup({
+          groupID: res.data.group.groupID,
+          applyMessage: ''
+        })
+      }
+      handleCompleteCreate(res.data.group)
+      Toast({
+        message: TUITranslateService.t('TUIGroup.群组创建成功'),
+        type: TOAST_TYPE.SUCCESS
+      })
+    } catch (err: any) {
+      Toast({
+        message: err.message,
+        type: TOAST_TYPE.ERROR
+      })
     }
-    const res = await TUIGroupService.createGroup(options);
-    const { type } = res.data.group;
-    if (type === TUIChatEngine.TYPES.GRP_AVCHATROOM) {
-      await TUIGroupService.joinGroup({
-        groupID: res.data.group.groupID,
-        applyMessage: '',
-      });
+  }
+
+  const submit = () => {
+    const { profile } = groupInfo
+
+    if (groupInfo.isEdit) {
+      groupInfo.profile[groupInfo.groupConfig.key] =
+        groupInfo.groupConfig.value
+      return (groupInfo.isEdit = !groupInfo.isEdit)
+    } else {
+      createGroup(profile)
     }
-    handleCompleteCreate(res.data.group);
-    Toast({
-      message: TUITranslateService.t('TUIGroup.群组创建成功'),
-      type: TOAST_TYPE.SUCCESS,
-    });
-  } catch (err: any) {
-    Toast({
-      message: err.message,
-      type: TOAST_TYPE.ERROR,
-    });
   }
-};
 
-const submit = () => {
-  const { profile } = groupInfo;
-  if (groupInfo.isEdit) {
-    groupInfo.profile[groupInfo.groupConfig.key] = groupInfo.groupConfig.value;
-    return groupInfo.isEdit = !groupInfo.isEdit;
-  } else {
-    createGroup(profile);
+  const closeCreated = () => {
+    if (groupInfo.isEdit) {
+      return (groupInfo.isEdit = !groupInfo.isEdit)
+    }
+    handleCompleteCreate(null)
   }
-};
 
-const closeCreated = () => {
-  if (groupInfo.isEdit) {
-    return groupInfo.isEdit = !groupInfo.isEdit;
+  const edit = (label: string) => {
+    groupInfo.isEdit = !groupInfo.isEdit
+    groupInfo.groupConfig.key = label
+    groupInfo.groupConfig.value = (groupInfo.profile as any)[label]
+    switch (label) {
+      case 'name':
+        groupInfo.groupConfig.title = '设置群名称'
+        groupInfo.groupConfig.placeholder = '请输入群名称'
+        groupInfo.groupConfig.type = 'input'
+        break
+      case 'groupID':
+        groupInfo.groupConfig.title = '设置群ID'
+        groupInfo.groupConfig.placeholder = '请输入群ID'
+        groupInfo.groupConfig.type = 'input'
+        break
+      case 'type':
+        groupInfo.groupConfig.title = '选择群类型'
+        groupInfo.groupConfig.type = 'select'
+        break
+    }
   }
-  handleCompleteCreate(null);
-};
 
-const edit = (label: string) => {
-  groupInfo.isEdit = !groupInfo.isEdit;
-  groupInfo.groupConfig.key = label;
-  groupInfo.groupConfig.value = (groupInfo.profile as any)[label];
-  switch (label) {
-    case 'name':
-      groupInfo.groupConfig.title = '设置群名称';
-      groupInfo.groupConfig.placeholder = '请输入群名称';
-      groupInfo.groupConfig.type = 'input';
-      break;
-    case 'groupID':
-      groupInfo.groupConfig.title = '设置群ID';
-      groupInfo.groupConfig.placeholder = '请输入群ID';
-      groupInfo.groupConfig.type = 'input';
-      break;
-    case 'type':
-      groupInfo.groupConfig.title = '选择群类型';
-      groupInfo.groupConfig.type = 'select';
-      break;
+  const handleCompleteCreate = (group: any) => {
+    TUIStore.update(StoreName.GRP, 'isShowCreateComponent', false)
+    const callback = TUIGroupServer.getOnCallCallback(
+      TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP
+    )
+    callback && callback(group)
   }
-};
-
-const handleCompleteCreate = (group: any) => {
-  TUIStore.update(StoreName.GRP, 'isShowCreateComponent', false);
-  const callback = TUIGroupServer.getOnCallCallback(TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP);
-  callback && callback(group);
-};
-
-defineExpose({
-  closeCreated,
-});
 
+  defineExpose({
+    closeCreated
+  })
 </script>
 <style lang="scss" scoped src="./style/index.scss"></style>
+<style lang="scss" scoped>
+  .popup-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 34rpx 0;
+    text + text {
+      margin-top: 20rpx;
+    }
+    text {
+      border: 2rpx solid #a7a7a7;
+      width: 80%;
+      padding: 18rpx 0;
+      border-radius: 50rpx;
+      text-align: center;
+      font-size: 28rpx;
+      color: #333333;
+    }
+    .on-text {
+      border: 2rpx solid #348aec;
+      background: rgb(65, 178, 212);
+      color: #ffffff;
+    }
+  }
+</style>