添加红包功能

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

@@ -6,7 +6,7 @@
           <label class="group-list-item-label">
             {{ TUITranslateService.t('TUIGroup.群头像') }}
           </label>
-          <Avatar :url="groupInfo.profile.avatar" />
+          <Avatar :url="groupAvatar" @click="selectAvatar" />
         </li>
         <ul>
           <li
@@ -158,21 +158,12 @@
   import Server from '../server'
   import { IUserProfile } from '../../../interface'
   import { createImGroup } from '../../../../api/tui-kit'
+  import { chooseImage } from '../../../../utils/media'
+  import { uploadSingleFile } from '../../../../utils/uploadFile'
 
   const TUIGroupServer = Server.getInstance()
   const TUIConstants = TUIGroupServer.constants
 
-  /** 自定义数据 */
-  const cbPopupShow = ref(null)
-  const applyJoinOption = ref('NeedPermission')
-
-  const applyJoinOptionName = computed(() => {
-    const data = groupJoinTypeConfig.find(
-      v => v.value === applyJoinOption.value
-    )
-    return data?.label || ''
-  })
-  // =======
   const groupInfo = reactive<any>({
     profile: {
       groupID: '',
@@ -195,6 +186,19 @@
     isEdit: false
   })
 
+  /** 自定义数据 */
+  const cbPopupShow = ref(null)
+  const applyJoinOption = ref('NeedPermission')
+  // 群头像
+  const groupAvatar = ref(groupInfo.profile.avatar)
+  const applyJoinOptionName = computed(() => {
+    const data = groupJoinTypeConfig.find(
+      v => v.value === applyJoinOption.value
+    )
+    return data?.label || ''
+  })
+  // =======
+
   watchEffect(() => {
     const params = TUIGroupServer.getOnCallParams(
       TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP
@@ -247,35 +251,69 @@
     }
   }
 
+  /** 选择群头像 */
+  const selectAvatar = async () => {
+    const paths = await chooseImage({ count: 1 })
+    groupAvatar.value = await uploadSingleFile(paths[0], {
+      url: '/api/common/admin/upload/up/single'
+    })
+  }
+
   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: ''
+      const data = {
+        applyJoinOption: applyJoinOption.value,
+        faceUrl: groupAvatar.value,
+        groupName: options.name,
+        groupType: options.type,
+        memberList: options.memberList.map((item: IUserProfile) => {
+          return { memberAccount: item.userID }
         })
       }
-      handleCompleteCreate(res.data.group)
+
+      const res = await createImGroup(data)
+      const e = res.data
+      // const type = e.groupType
+      // if (type === TUIChatEngine.TYPES.GRP_AVCHATROOM) {
+      //   await TUIGroupService.joinGroup({
+      //     groupID: e.groupID,
+      //     applyMessage: ''
+      //   })
+      // }
+
+      const newRes = await TUIGroupService.getGroupProfile({
+        groupID: e.groupId
+      })
+
+      handleCompleteCreate(newRes.data.group)
       Toast({
         message: TUITranslateService.t('TUIGroup.群组创建成功'),
         type: TOAST_TYPE.SUCCESS
       })
+
+      // ========= 原本逻辑
+      // 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)
+      // console.log(res)
+      // 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,

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

@@ -3,8 +3,10 @@
     <div class="group-info" @click="toggleEditStatus">
       <Avatar
         useSkeletonAnimation
-        :url="groupProfile.avatar ||
-          'https://web.sdk.qcloud.com/im/demo/TUIkit/web/img/constomer.svg'"
+        :url="
+          groupProfile.avatar ||
+          'https://web.sdk.qcloud.com/im/demo/TUIkit/web/img/constomer.svg'
+        "
         size="40px"
       />
       <div class="group-details">
@@ -16,28 +18,26 @@
     <div
       v-if="isEdit"
       :class="{
-        'edit-h5': isMobile,
+        'edit-h5': isMobile
       }"
     >
       <main class="edit-h5-main">
-        <header
-          v-if="!isPC"
-          class="edit-h5-header"
-        >
+        <header v-if="!isPC" class="edit-h5-header">
           <aside class="left">
-            <h1 class="title">{{ TUITranslateService.t(`TUIGroup.修改群聊名称`) }}</h1>
-            <span class="subtitle">{{
-              TUITranslateService.t(
-                `TUIGroup.修改群聊名称后，将在群内通知其他成员`
-              )
-            }}</span>
+            <h1 class="title">
+              {{ TUITranslateService.t(`TUIGroup.修改群聊名称`) }}
+            </h1>
+            <span class="subtitle">
+              {{
+                TUITranslateService.t(
+                  `TUIGroup.修改群聊名称后，将在群内通知其他成员`
+                )
+              }}
+            </span>
           </aside>
-          <span
-            class="close"
-            @click="toggleEditStatus"
-          >{{
-            TUITranslateService.t(`关闭`)
-          }}</span>
+          <span class="close" @click="toggleEditStatus">
+            {{ TUITranslateService.t(`关闭`) }}
+          </span>
         </header>
         <div class="input-box">
           <input
@@ -46,24 +46,17 @@
             v-model="inputGroupName"
             class="input"
             type="text"
-          >
-          <span
-            v-if="!isPC"
-            class="tip"
-          >{{
-            TUITranslateService.t(
-              `TUIGroup.仅限中文、字母、数字和下划线，2-20个字`
-            )
-          }}</span>
+          />
+          <span v-if="!isPC" class="tip">
+            {{
+              TUITranslateService.t(
+                `TUIGroup.仅限中文、字母、数字和下划线，2-20个字`
+              )
+            }}
+          </span>
         </div>
-        <footer
-          v-if="!isPC"
-          class="edit-h5-footer"
-        >
-          <button
-            class="btn"
-            @click="updateProfile"
-          >
+        <footer v-if="!isPC" class="edit-h5-footer">
+          <button class="btn" @click="updateProfile">
             {{ TUITranslateService.t(`确认`) }}
           </button>
         </footer>
@@ -73,226 +66,226 @@
 </template>
 
 <script lang="ts" setup>
-import { watchEffect, ref, nextTick, watch } from '../../../adapter-vue';
-import {
-  TUITranslateService,
-  IGroupModel,
-} from '@tencentcloud/chat-uikit-engine-lite';
-import Avatar from "../../common/Avatar/index.vue";
-import Icon from '../../common/Icon.vue';
-import rightIcon from '../../../assets/icon/right-icon.svg';
-import { Toast, TOAST_TYPE } from '../../common/Toast/index';
-import { isMobile, isPC } from '../../../utils/env';
+  import { watchEffect, ref, nextTick, watch } from '../../../adapter-vue'
+  import {
+    TUITranslateService,
+    IGroupModel
+  } from '@tencentcloud/chat-uikit-engine-lite'
+  import Avatar from '../../common/Avatar/index.vue'
+  import Icon from '../../common/Icon.vue'
+  import rightIcon from '../../../assets/icon/right-icon.svg'
+  import { Toast, TOAST_TYPE } from '../../common/Toast/index'
+  import { isMobile, isPC } from '../../../utils/env'
 
-const props = defineProps({
-  data: {
-    type: Object,
-    default: () => ({}),
-  },
-  isAuthor: {
-    type: Boolean,
-    default: false,
-  },
-});
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: () => ({})
+    },
+    isAuthor: {
+      type: Boolean,
+      default: false
+    }
+  })
 
-const groupProfile = ref<IGroupModel>({});
-const inputGroupName = ref('');
-const isEdit = ref(false);
-const nameInputRef = ref<HTMLInputElement>(null);
+  const groupProfile = ref<IGroupModel>({})
+  const inputGroupName = ref('')
+  const isEdit = ref(false)
+  const nameInputRef = ref<HTMLInputElement>(null)
 
-watchEffect(() => {
-  groupProfile.value = props.data;
-});
+  watchEffect(() => {
+    groupProfile.value = props.data
+  })
 
-const emit = defineEmits(['update']);
-const updateProfile = () => {
-  if (!inputGroupName.value) {
-    Toast({
-      message: TUITranslateService.t('TUIGroup.群名称不能为空'),
-      type: TOAST_TYPE.ERROR,
-    });
-  } else {
-    if (inputGroupName.value !== groupProfile.value.name) {
-      emit('update', { key: 'name', value: inputGroupName.value });
-      groupProfile.value.name = inputGroupName.value;
-      inputGroupName.value = '';
+  const emit = defineEmits(['update'])
+  const updateProfile = () => {
+    if (!inputGroupName.value) {
       Toast({
-        message: TUITranslateService.t('TUIGroup.群名称修改成功'),
-        type: TOAST_TYPE.SUCCESS,
-      });
+        message: TUITranslateService.t('TUIGroup.群名称不能为空'),
+        type: TOAST_TYPE.ERROR
+      })
+    } else {
+      if (inputGroupName.value !== groupProfile.value.name) {
+        emit('update', { key: 'name', value: inputGroupName.value })
+        groupProfile.value.name = inputGroupName.value
+        inputGroupName.value = ''
+        Toast({
+          message: TUITranslateService.t('TUIGroup.群名称修改成功'),
+          type: TOAST_TYPE.SUCCESS
+        })
+      }
+      toggleEditStatus()
     }
-    toggleEditStatus();
   }
-};
 
-const toggleEditStatus = () => {
-  if (props.isAuthor) {
-    isEdit.value = !isEdit.value;
-  }
-  if (isEdit.value) {
-    inputGroupName.value = groupProfile.value.name;
-  }
-};
-
-watch(
-  () => isEdit.value,
-  (newVal: boolean) => {
-    if (newVal) {
-      nextTick(() => {
-        nameInputRef.value?.focus();
-      });
+  const toggleEditStatus = () => {
+    if (props.isAuthor) {
+      isEdit.value = !isEdit.value
     }
-  },
-);
+    if (isEdit.value) {
+      inputGroupName.value = groupProfile.value.name
+    }
+  }
+
+  watch(
+    () => isEdit.value,
+    (newVal: boolean) => {
+      if (newVal) {
+        nextTick().then(() => {
+          nameInputRef.value?.focus()
+        })
+      }
+    }
+  )
 </script>
 
 <style lang="scss" scoped>
-@import "../../../assets/styles/common";
+  @import '../../../assets/styles/common';
 
-.group-name {
-  padding: 14px 20px;
-  font-weight: 400;
-  font-size: 14px;
-  color: #000;
-  display: flex;
-  flex-direction: column;
-}
-
-.group-info {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
-
-.group-details {
-  min-width: 0;
-  flex: 1;
-  display: flex;
-  gap: 6px;
-  flex-direction: column;
-  .name {
-    font-size: 16px;
-    line-height: 18px;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1;
-  }
-  .ID {
-    font-size: 12px;
-    line-height: 14px;
-    font-weight: 400;
-    color: #888;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1;
-  }
-}
-
-.input-box {
-  display: flex;
-
-  .input {
-    flex: 1;
-    border: 1px solid #e8e8e9;
-    border-radius: 4px;
-    padding: 4px 16px;
+  .group-name {
+    padding: 14px 20px;
     font-weight: 400;
     font-size: 14px;
     color: #000;
-    opacity: 0.6;
-  }
-}
-
-.space-top {
-  border-top: 10px solid #f4f5f9;
-}
-
-.edit-h5 {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: flex-end;
-  z-index: 1;
-
-  .edit-h5-main {
-    background: #fff;
-    flex: 1;
-    padding: 18px;
-    border-radius: 12px 12px 0 0;
-    width: 80vw;
-
-    .input-box {
-      flex-direction: column;
-      padding: 18px 0;
-
-      .input {
-        background: #f8f8f8;
-        padding: 10px 12px;
-      }
-
-      .tip {
-        font-size: 12px;
-        color: #888;
-        padding-top: 8px;
-      }
-    }
-  }
-
-  &-header {
     display: flex;
+    flex-direction: column;
+  }
+
+  .group-info {
+    display: flex;
+    gap: 10px;
     align-items: center;
-    justify-content: space-between;
+  }
 
-    h1 {
-      font-family: PingFang SC;
+  .group-details {
+    min-width: 0;
+    flex: 1;
+    display: flex;
+    gap: 6px;
+    flex-direction: column;
+    .name {
+      font-size: 16px;
+      line-height: 18px;
       font-weight: 500;
-      font-size: 22px;
-      line-height: 26px;
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex: 1;
     }
-
-    .subtitle {
-      color: #888;
-    }
-
-    .close {
-      font-family: PingFangSC-Regular;
+    .ID {
+      font-size: 12px;
+      line-height: 14px;
       font-weight: 400;
-      font-size: 18px;
-      color: #3370ff;
-      letter-spacing: 0;
-      line-height: 27px;
+      color: #888;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex: 1;
     }
   }
 
-  &-footer {
+  .input-box {
     display: flex;
 
-    .btn {
+    .input {
       flex: 1;
-      border: none;
-      background: #147aff;
-      border-radius: 5px;
-      font-family: PingFangSC-Regular;
+      border: 1px solid #e8e8e9;
+      border-radius: 4px;
+      padding: 4px 16px;
       font-weight: 400;
-      font-size: 16px;
-      color: #fff;
-      letter-spacing: 0;
-      line-height: 27px;
-      padding: 8px 0;
+      font-size: 14px;
+      color: #000;
+      opacity: 0.6;
+    }
+  }
 
-      &:disabled {
-        opacity: 0.3;
+  .space-top {
+    border-top: 10px solid #f4f5f9;
+  }
+
+  .edit-h5 {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: flex-end;
+    z-index: 1;
+
+    .edit-h5-main {
+      background: #fff;
+      flex: 1;
+      padding: 18px;
+      border-radius: 12px 12px 0 0;
+      width: 80vw;
+
+      .input-box {
+        flex-direction: column;
+        padding: 18px 0;
+
+        .input {
+          background: #f8f8f8;
+          padding: 10px 12px;
+        }
+
+        .tip {
+          font-size: 12px;
+          color: #888;
+          padding-top: 8px;
+        }
+      }
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      h1 {
+        font-family: PingFang SC;
+        font-weight: 500;
+        font-size: 22px;
+        line-height: 26px;
+      }
+
+      .subtitle {
+        color: #888;
+      }
+
+      .close {
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        font-size: 18px;
+        color: #3370ff;
+        letter-spacing: 0;
+        line-height: 27px;
+      }
+    }
+
+    &-footer {
+      display: flex;
+
+      .btn {
+        flex: 1;
+        border: none;
+        background: #147aff;
+        border-radius: 5px;
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        font-size: 16px;
+        color: #fff;
+        letter-spacing: 0;
+        line-height: 27px;
+        padding: 8px 0;
+
+        &:disabled {
+          opacity: 0.3;
+        }
       }
     }
   }
-}
 </style>