chat-app/src/pages/creatGroupChat/index.vue

<template>
  <div class="create-group-chat-page">
    <zPaging ref="zPaging" :show-scrollbar="false">
      <template #top>
        <customNavbar :title="$t('pageTitle.create.group')"></customNavbar>
      </template>
      <div class="create-group-chat flex flex-col">
        <div class="group-avatar flex items-center justify-center">
          <div class="avatar-placeholder" v-if="groupActiveIndex === -1"></div>
          <div v-else>
            <avatarModule :mode="2" :avatar="avatarImg" :groupType="groupType"
              :customStyle="{ width: '192rpx', height: '192rpx' }"></avatarModule>
          </div>
        </div>
        <div class="input-group flex items-center justify-between">
          <div class="input-item">
            群名称
          </div>
          <div class="input-box">
            <tm-input v-model="groupName" :followTheme="false" fontColor="#747474" placeholderStyle="color: #B4B4B4"
              focusColor="#FFF" :fontSize="28" :maxlength="20" :height="40" :transprent="true"
              placeholder="请输入群名称（1~20个字）" :padding="[0, 0]" align="right"></tm-input>
          </div>
        </div>
        <div class="input-group w-full flex flex-col mt-[20rpx] leading-[40rpx]">
          <div class="flex items-center justify-between">
            <div class="input-item">
              群类型
            </div>
            <div @click="chooseGroupType" class="left-box">
              <div class="text-[#B4B4B4] text-[28rpx] font-bold">
                <span v-if="groupActiveIndex === -1">请选择群类型</span>
                <span v-else-if="groupActiveIndex === 0">普通群</span>
                <span v-else-if="groupActiveIndex === 1">部门群</span>
                <span v-else-if="groupActiveIndex === 2">项目群</span>
              </div>
              <div class="ml-[32rpx]">
                <tm-icon :font-size="22" color="#747474" name="tmicon-angle-right"></tm-icon>
              </div>
            </div>
          </div>
          <div v-if="depCheckedKeys.length && groupActiveIndex === 1" class="mt-[32rpx]">
            <div v-for="(item, index) in depCheckedKeys" class="text-[#747474] text-[28rpx] leading-[40rpx] font-bold"
              :class="[
                index !== 0 ? 'mt-[10rpx]' : '',
                depsNoExpanded_1 && index > 4 ? 'hidden' : '',
              ]">
              {{ item.name }}
            </div>
            <div class="text-[#46299D] text-[28rpx] mt-[20rpx] font-bold flex justify-center">
              <div v-if="depCheckedKeys.length > 5" @click="depsNoExpanded_1 = !depsNoExpanded_1" class="w-[100rpx]">
                {{ depsNoExpanded_1 ? '展开' : '收起' }}
              </div>
            </div>
          </div>
        </div>

        <div v-if="groupActiveIndex === 0 || groupActiveIndex === 2"
          class="input-group w-full flex flex-col mt-[20rpx] leading-[40rpx]">
          <div class="flex items-center justify-between">
            <div class="input-item">
              群成员
            </div>
            <div @click="chooseMembers" class="left-box">
              <div class="ml-[32rpx] flex items-center">
                <div class="text-[#B4B4B4] text-[28rpx] font-bold mr-[32rpx]">
                  全部({{ allChooseMembers?.length || 0 }})
                </div>
                <tm-icon :font-size="22" color="#747474" name="tmicon-angle-right"></tm-icon>
              </div>
            </div>
          </div>
          <groupMemberList :groupType="3" :is_manager="true" :memberList="allChooseMembers" :memberListsLimit="15"
            :hideAddRemoveBtns="true"></groupMemberList>
        </div>

        <div v-if="groupActiveIndex === 1" class="input-group w-full flex flex-col mt-[20rpx] leading-[40rpx]">
          <div class="flex items-center justify-between">
            <div class="input-item">
              群管理员
            </div>
            <div @click="chooseGroupAdmin" class="left-box">
              <div class="ml-[32rpx] flex items-center">
                <div v-if="!groupAdmins.length" class="text-[#B4B4B4] text-[28rpx] font-bold mr-[32rpx]">
                  请选择群管理员
                </div>
                <tm-icon :font-size="22" color="#747474" name="tmicon-angle-right"></tm-icon>
              </div>
            </div>
          </div>
          <div v-if="groupAdmins.length" class="mt-[32rpx]">
            <div v-for="(item, index) in groupAdmins" class="text-[#747474] text-[28rpx] leading-[40rpx] font-bold"
              :class="[
                index !== 0 ? 'mt-[10rpx]' : '',
                depsNoExpanded_2 && index > 4 ? 'hidden' : '',
              ]">
              {{ item.name }}
            </div>
            <div class="text-[#46299D] text-[28rpx] mt-[20rpx] font-bold flex justify-center">
              <div v-if="groupAdmins.length > 5" @click="depsNoExpanded_2 = !depsNoExpanded_2" class="w-[100rpx]">
                {{ depsNoExpanded_2 ? '展开' : '收起' }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <template #bottom>
        <customBtn :isBottom="true" :btnText="$t('pageTitle.create.group')" @click="handleConfirm"
          :isLoading="isLoading" :disabled="confirmBtnStatus || isLoading"></customBtn>
      </template>
    </zPaging>
  </div>
</template>
<script setup>
  import zPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
  import customBtn from '@/components/custom-btn/custom-btn.vue'
  import groupMemberList from '../chatSettings/components/groupMembersList.vue'
  import avatarModule from '@/components/avatar-module/index.vue'

  import {
    ref,
    watch,
    computed,
    onMounted
  } from 'vue'
  import {
    onShow,
    onLoad,
    onUnload
  } from '@dcloudio/uni-app'
  import {
    useChatList
  } from '@/store/chatList/index.js'
  import {
    useAuth
  } from '@/store/auth'
  import {
    useTalkStore,
    useUserStore,
    useGroupStore
  } from '@/store'
  import addCircle from '@/static/image/chatList/addCircle.png'
  import cahtPopover from '@/static/image/chatList/cahtPopover.png'
  import {
    ServeCreateGroup
  } from '@/api/group/index'
  import {
    useGroupTypeStore
  } from '@/store/groupType'
  import {
    handleSetWebviewStyle
  } from '@/utils/common'

  const {
    groupName,
    groupActiveIndex,
    depCheckedKeys,
    groupAdmins,
    createDepGroup,
    resetGroupInfo,
    allChooseMembers,
  } = useGroupTypeStore()
  const talkStore = useTalkStore()
  const userStore = useUserStore()
  const groupStore = useGroupStore()
  const {
    userInfo
  } = useAuth()

  const groupChatType = ref('')
  const depsNoExpanded_1 = ref(true)
  const depsNoExpanded_2 = ref(true)


  onLoad(() => {
    groupStore.$reset()
  })
  onUnload(() => {
    resetGroupInfo();
  })
  onMounted(() => {
    handleSetWebviewStyle()
  })

  //群类型
  const groupType = computed(() => {
    let group_type = ''
    switch (groupActiveIndex.value) {
      case 0:
        group_type = 1
        break
      case 1:
        group_type = 2
        break
      case 2:
        group_type = 3
        break
      default:
        group_type = ''
    }
    return group_type
  })

  //点击跳转到选择群类型页面
  const chooseGroupType = () => {
    uni.navigateTo({
      url: '/pages/chooseGroupType/index',
    })
  }

  const chooseGroupAdmin = () => {
    uni.navigateTo({
      url: '/pages/chatSettings/groupManage/selectMembers?manageType=admin&isCreateDepGroup=1',
    })
  }

  const chooseMembers = () => {
    uni.navigateTo({
      url: '/pages/chooseByDeps/index?chooseMode=2',
    })
  }
  const isLoading = ref(false)

  // 点击发起群聊
  const handleConfirm = async () => {
    if (isLoading.value) return
    isLoading.value = true

    try {
      let erp_ids = ''
      if (allChooseMembers?.value?.length > 0) {
        allChooseMembers.value.forEach((ele) => {
          if (!erp_ids) {
            erp_ids = String(ele.ID)
          } else {
            erp_ids += ',' + ele.ID
          }
        })
      }

      let res = null

      if (groupActiveIndex.value === 0) {
        // 普通群
        const params = {
          avatar: '',
          name: groupName.value,
          erp_ids: erp_ids,
          type: 1,
          profile: '',
        }
        console.log('普通群参数：', params)
        res = await ServeCreateGroup(params)
      } else if (groupActiveIndex.value === 1) {
        // 部门群
        res = await createDepGroup()
      } else if (groupActiveIndex.value === 2) {
        // 项目群
        const params = {
          avatar: '',
          name: groupName.value,
          erp_ids: erp_ids,
          type: 3,
          profile: '',
        }
        console.log('项目群参数：', params)
        res = await ServeCreateGroup(params)
      }

      if (res?.code === 200) {
        resetGroupInfo()
        uni.navigateBack()
      }
    } catch (err) {
      console.error(err)
    } finally {
      isLoading.value = false
    }
  }
  //发起群聊按钮可点击状态
  const confirmBtnStatus = computed(() => {
    return groupActiveIndex.value === -1;
  });

  onShow(() => {
    depsNoExpanded_1.value = true;
    depsNoExpanded_2.value = true;
  })
</script>
<style scoped lang="scss">
  ::v-deep .zp-paging-container-content {
    height: 100%;
    display: flex;
  }

  .create-group-chat {
    background-image: url('@/static/image/clockIn/z3280@3x.png');
    background-size: cover;
    background-position: center bottom;
    width: 100%;
    padding: 0 32rpx 20rpx;

    .group-avatar {
      padding: 60rpx 0;

      .avatar-placeholder {
        width: 192rpx;
        height: 192rpx;
        background-color: #e0e0e0;
        border-radius: 50%;
      }
    }
  }

  .divider {
    height: 1rpx;
    background-color: #7c7c7c;
    opacity: 0.6;
  }

  .input-group {
    background-color: #fff;
    padding: 38rpx 40rpx 32rpx 32rpx;
  }

  .input-item {
    line-height: 40rpx;
    font-size: 28rpx;
    color: #000;
    font-weight: bold;
  }

  .input-box {
    margin-left: 84rpx;
    line-height: 40rpx;
    width: 404rpx;
    font-weight: bold;
  }

  .left-box {
    display: flex;
    align-items: center;
  }
</style>