优化UI，修复群BUG

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

@@ -14,51 +14,61 @@
       @getMore="getMember('more')"
     />
     <main
-      v-else-if="!currentTab || (isUniFrameWork && currentTab != 'admin')"
+      v-else-if="
+        currentGroup?.groupID &&
+        (!currentTab || (isUniFrameWork && currentTab != 'admin'))
+      "
       class="main"
     >
-      <ManageName
-        :isAuthor="isOwner || isAdmin || isWorkGroup"
-        :data="currentGroup"
-        @update="updateProfile"
-      />
-      <div class="user-info space-top">
-        <header class="user-info-header" @click="setCurrentTab('member')">
-          <label class="user-info-header-left">
-            {{ TUITranslateService.t(`TUIGroup.群成员`) }}
-          </label>
-          <div class="user-info-header-right">
-            <span class="span">
-              {{ currentGroup.memberCount || groupMemberList.length }}
-              {{ TUITranslateService.t(`TUIGroup.人`) }}
-            </span>
-            <Icon :file="rightIcon" />
-          </div>
-        </header>
-        <ol class="user-info-list">
-          <dl
-            v-for="(item, index) in groupMemberList.slice(0, showUserNum)"
-            :key="index"
-            class="user-info-list-item"
+      <view class="main-box">
+        <ManageName
+          :isAuthor="isOwner || isAdmin || isWorkGroup"
+          :data="currentGroup"
+          @update="updateProfile"
+        />
+        <div class="user-info space-top">
+          <header
+            class="user-info-header"
+            @click="setCurrentTab('member')"
           >
-            <dt
-              class="user-info-list-item-main"
-              @click="handleMemberProfileShow(item)"
+            <label class="user-info-header-left">
+              {{ TUITranslateService.t(`TUIGroup.群成员`) }}
+            </label>
+            <div class="user-info-header-right">
+              <span class="span">
+                {{ currentGroup.memberCount || groupMemberList.length }}
+                {{ TUITranslateService.t(`TUIGroup.人`) }}
+              </span>
+              <Icon :file="rightIcon" />
+            </div>
+          </header>
+          <ol class="user-info-list">
+            <dl
+              v-for="(item, index) in groupMemberList.slice(
+                0,
+                showUserNum
+              )"
+              :key="index"
+              class="user-info-list-item"
             >
-              <Avatar
-                useSkeletonAnimation
-                :url="
-                  item.avatar ||
-                  'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
-                "
-                size="40px"
-              />
-            </dt>
-            <dd class="user-info-list-item-info">
-              {{ item.nick || item.userID }}
-            </dd>
-          </dl>
-          <dl v-if="isShowAddMember" class="user-info-list-item">
+              <dt
+                class="user-info-list-item-main"
+                @click="handleMemberProfileShow(item)"
+              >
+                <Avatar
+                  useSkeletonAnimation
+                  :url="
+                    item.avatar ||
+                    'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
+                  "
+                  size="40px"
+                />
+              </dt>
+              <dd class="user-info-list-item-info">
+                {{ item.nick || item.userID }}
+              </dd>
+            </dl>
+            <!-- <dl v-if="isShowAddMember" class="user-info-list-item">
             <dt class="avatar" @click="toggleMask('add')">+</dt>
           </dl>
           <dl
@@ -66,87 +76,88 @@
             class="user-info-list-item"
           >
             <dt class="avatar" @click="toggleMask('remove')">-</dt>
-          </dl>
-        </ol>
-        <div
-          v-if="groupMemberList.length > showUserNum"
-          class="view-more"
-          @click="setCurrentTab('member')"
-        >
-          <p>{{ TUITranslateService.t(`TUIGroup.查看更多群成员`) }}</p>
-          <Icon :file="rightIcon" size="14px" />
+          </dl> -->
+          </ol>
+          <div
+            v-if="groupMemberList.length > showUserNum"
+            class="view-more"
+            @click="setCurrentTab('member')"
+          >
+            <p>{{ TUITranslateService.t(`TUIGroup.查看更多群成员`) }}</p>
+            <Icon :file="rightIcon" size="14px" />
+          </div>
         </div>
-      </div>
-      <ul class="content list space-top" @click="editLableName = ''">
-        <li class="list-item" @click="setCurrentTab('notification')">
-          <aside class="aside">
+        <ul class="content list space-top" @click="editLableName = ''">
+          <li class="list-item" @click="setCurrentTab('notification')">
+            <aside class="aside">
+              <label class="label">
+                {{ TUITranslateService.t(`TUIGroup.群公告`) }}
+              </label>
+              <article class="article">
+                {{ currentGroup.notification }}
+              </article>
+            </aside>
+            <Icon :file="rightIcon" class="end" />
+          </li>
+          <li
+            v-if="(isAdmin || isOwner) && isSetMuteTime"
+            class="list-item"
+            @click="setCurrentTab('admin')"
+          >
             <label class="label">
-              {{ TUITranslateService.t(`TUIGroup.群公告`) }}
+              {{ TUITranslateService.t(`TUIGroup.群管理`) }}
             </label>
-            <article class="article">
-              {{ currentGroup.notification }}
-            </article>
-          </aside>
-          <Icon :file="rightIcon" class="end" />
-        </li>
-        <li
-          v-if="(isAdmin || isOwner) && isSetMuteTime"
-          class="list-item"
-          @click="setCurrentTab('admin')"
-        >
-          <label class="label">
-            {{ TUITranslateService.t(`TUIGroup.群管理`) }}
-          </label>
-          <Icon :file="rightIcon" />
-        </li>
-        <li class="list-item">
-          <label class="label">
-            {{ TUITranslateService.t(`TUIGroup.群类型`) }}
-          </label>
-          <span class="span">
-            {{
-              TUITranslateService.t(
-                `TUIGroup.${typeName[currentGroup.type]}`
-              )
-            }}
-          </span>
-        </li>
-        <li class="list-item">
-          <label class="label">
-            {{ TUITranslateService.t(`TUIGroup.加群方式`) }}
-          </label>
-          <span class="span">
-            {{
-              TUITranslateService.t(
-                `TUIGroup.${typeName[currentGroup.joinOption]}`
-              )
-            }}
-          </span>
-        </li>
-      </ul>
-      <ul class="footer list space-top">
-        <!-- <li
+            <Icon :file="rightIcon" />
+          </li>
+          <li class="list-item">
+            <label class="label">
+              {{ TUITranslateService.t(`TUIGroup.群类型`) }}
+            </label>
+            <span class="span">
+              {{
+                TUITranslateService.t(
+                  `TUIGroup.${typeName[currentGroup.type]}`
+                )
+              }}
+            </span>
+          </li>
+          <li class="list-item">
+            <label class="label">
+              {{ TUITranslateService.t(`TUIGroup.加群方式`) }}
+            </label>
+            <span class="span">
+              {{
+                TUITranslateService.t(
+                  `TUIGroup.${typeName[currentGroup.joinOption]}`
+                )
+              }}
+            </span>
+          </li>
+        </ul>
+        <ul class="footer list space-top">
+          <!-- <li
           v-if="currentSelfRole === 'Owner' && groupMemberList.length > 1"
           class="list-item"
           @click.stop="toggleMask('changeOwner')"
         >
           {{ TUITranslateService.t(`TUIGroup.转让群组`) }}
         </li> -->
-        <li
-          v-if="canIDissmissGroup"
-          class="list-item"
-          @click.stop="dismissGroup(currentGroup)"
-        >
-          {{ TUITranslateService.t(`TUIGroup.解散群聊`) }}
-        </li>
-        <li
-          v-else
-          class="list-item"
-          @click.stop="quitGroup(currentGroup)"
-        >
-          {{ TUITranslateService.t(`TUIGroup.退出群组`) }}
-        </li>
-      </ul>
+          <li
+            v-if="canIDissmissGroup"
+            class="list-item"
+            @click.stop="dismissGroup(currentGroup)"
+          >
+            {{ TUITranslateService.t(`TUIGroup.解散群聊`) }}
+          </li>
+          <li
+            v-else
+            class="list-item"
+            @click.stop="quitGroup(currentGroup)"
+          >
+            {{ TUITranslateService.t(`TUIGroup.退出群组`) }}
+          </li>
+        </ul>
+      </view>
     </main>
     <ManageMember
       v-if="currentTab === 'member'"
@@ -238,12 +249,15 @@
   import Server from '../server'
   import { enableSampleTaskStatus } from '../../../utils/enableSampleTaskStatus'
   import { IFriendProfile, IGroupMember } from '../../../interface'
+  import { useUI } from '../../../../utils/use-ui'
   import {
     createImGroup,
     deleteImGroup,
     quitImGroup
   } from '../../../../api/tui-kit'
 
+  const { showLoading, hideLoading, showDialog } = useUI()
+
   const TUIGroupServer = Server.getInstance()
   const TUIConstants = TUIGroupServer.constants
 
@@ -676,14 +690,25 @@
   }
 
   const dismissGroup = async (group: any) => {
+    const show = await showDialog('提示', '确定要解散群组吗？')
+    if (!show) {
+      return
+    }
     // await deleteImGroup(group.groupID)
-    await TUIGroupService.dismissGroup(group.groupID)
-    enableSampleTaskStatus('dismissGroup')
-    Toast({
-      message: TUITranslateService.t('TUIGroup.群组解散成功'),
-      type: TOAST_TYPE.SUCCESS
-    })
-    clearGroupInfo()
+    showLoading()
+    TUIGroupService.dismissGroup(group.groupID)
+      .then(() => {
+        enableSampleTaskStatus('dismissGroup')
+        hideLoading()
+        Toast({
+          message: TUITranslateService.t('TUIGroup.群组解散成功'),
+          type: TOAST_TYPE.SUCCESS
+        })
+        clearGroupInfo()
+      })
+      .catch(() => {
+        hideLoading()
+      })
   }
 
   const clearGroupInfo = () => {
@@ -724,9 +749,8 @@
     switch (transferType.value) {
       case 'add':
         try {
-          imMemberResponse = await TUIGroupService.getGroupMemberProfile(
-            options
-          )
+          imMemberResponse =
+            await TUIGroupService.getGroupMemberProfile(options)
           transferList.value = transferList.value.filter(
             (item: any) => item.userID !== imResponse.data[0]?.userID
           )
@@ -752,9 +776,8 @@
         break
       case 'remove':
         try {
-          imResponse = await TUIGroupService.getGroupMemberProfile(
-            options
-          )
+          imResponse =
+            await TUIGroupService.getGroupMemberProfile(options)
           if (imResponse.data.memberList.length === 0) {
             const message = TUITranslateService.t(
               'TUIGroup.该用户不在群组内'
@@ -894,9 +917,24 @@
   }
 
   const quitGroup = async (group: any) => {
+    const show = await showDialog('提示', '确定要退出群组吗？')
+    if (!show) {
+      return
+    }
+    showLoading()
     // await quitImGroup(group.groupID)
-    await TUIGroupService.quitGroup(group.groupID)
-    clearGroupInfo()
+    TUIGroupService.quitGroup(group.groupID)
+      .then(() => {
+        hideLoading()
+        Toast({
+          message: '退出群组成功',
+          type: TOAST_TYPE.SUCCESS
+        })
+        clearGroupInfo()
+      })
+      .catch(() => {
+        hideLoading()
+      })
   }
 
   const back = () => {