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 && 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 = !depsNoExpanded"
                class="w-[100rpx]"
              >
                {{ depsNoExpanded ? '展开' : '收起' }}
              </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
                  v-if="!groupAdmins.length"
                  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="
              groupActiveIndex == 0 || groupActiveIndex == 2 ? 13 : 15
            "
          ></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 && 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 = !depsNoExpanded"
                class="w-[100rpx]"
              >
                {{ depsNoExpanded ? '展开' : '收起' }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <template #bottom>
        <customBtn
          :isBottom="true"
          :btnText="$t('pageTitle.create.group')"
          @click="handleConfirm"
          :disabled="confirmBtnStatus"
        ></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 } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { useChatList } from '@/store/chatList/index.js'
import { useAuth } from '@/store/auth'
import { useTalkStore, useUserStore } 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'

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

const groupChatType = ref('')
const depsNoExpanded = ref(true)

//群类型
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/chooseGroupAdmin/index',
  })
}

const chooseMembers = () => {
  uni.navigateTo({
    url: '/pages/chooseMembers/index',
  })
}

//点击发起群聊
const handleConfirm = async () => {
  // console.log(allChooseMembers.value)
  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
      }
    })
  }
  if (groupActiveIndex.value === 0) {
    //普通群
    let params = {
      avatar: '',
      name: groupName.value,
      erp_ids: erp_ids,
      type: 1,
      profile: '',
    }
    console.log(params)
    const res = await ServeCreateGroup(params)
    if (res.code === 200) {
      resetGroupInfo()
      uni.navigateBack()
    }
  } else if (groupActiveIndex.value === 1) {
    //部门群
    const res = await createDepGroup()
    if (res.code === 200) {
      resetGroupInfo()
      uni.navigateBack()
    }
  } else if (groupActiveIndex.value === 2) {
    //项目群
    let params = {
      avatar: '',
      name: groupName.value,
      erp_ids: erp_ids,
      type: 3,
      profile: '',
    }
    console.log(params)
    const res = await ServeCreateGroup(params)
    if (res.code === 200) {
      resetGroupInfo()
      uni.navigateBack()
    }
  } else {
  }
}

//发起群聊按钮可点击状态
const confirmBtnStatus = computed(() => {
  let disabledT = false
  console.log(groupActiveIndex.value !== -1)
  if (
    groupName.value === '' ||
    (groupActiveIndex.value && groupActiveIndex.value === -1) ||
    (!groupActiveIndex.value && groupActiveIndex.value !== 0)
  ) {
    return true
  }
  switch (groupActiveIndex.value) {
    case 0:
      break
    case 1:
      if (!depCheckedKeys.value.length) {
        disabledT = true
      }
      if (!groupAdmins.value.length) {
        disabledT = true
      }
      break
    case 2:
      break
    default:
      break
  }
  return disabledT
})

onShow(() => {
  depsNoExpanded.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>