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

<template>
  <div class="outer-layer">
    <div>
      <tm-navbar
        :hideBack="false"
        hideHome
        title="发起群聊"
        :leftWidth="220"
      ></tm-navbar>
    </div>
    <div class="root">
      <div class="w-full pl-[32rpx] pr-[32rpx] mb-[20rpx]">
        <div class="w-full mt-[60rpx] flex justify-center">
          <div v-if="groupActiveIndex === -1" class="avatar-placeholder"></div>
          <div class="mb-[40rpx]" v-else>
            <tm-image
              :width="192"
              :height="192"
              :round="24"
              :src="avatarImg"
            ></tm-image>
          </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" 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]"
                >
                  全部({{ 0 }})
                </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
          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>
      <div class="h-[162rpx] flex justify-center bg-[#FFFFFF]">
        <div class="mt-[14rpx] btnBox">
          <tm-button
            @click="handleConfirm"
            color="#46299D"
            :disabled="confirmBtnStatus"
            disabledColor="#E6E6E6"
            :margin="[0]"
            :shadow="0"
            :width="426"
            :height="76"
            size="large"
            label="发起群聊"
          ></tm-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
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 groupDepartment from '@/static/image/chatList/groupDepartment.png'
import groupProject from '@/static/image/chatList/groupProject.png'
import groupNormal from '@/static/image/chatList/groupNormal.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 avatarImg = computed(() => {
  let srcT = ''
  switch (groupActiveIndex.value) {
    case 0:
      srcT = groupNormal
      break
    case 1:
      srcT = groupDepartment
      break
    case 2:
      srcT = groupProject
      break
    default:
      srcT = groupNormal
  }
  return srcT
})

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 = 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:
      if (allChooseMembers?.value?.length < 3) {
        return true
      }
      break
    case 1:
      if (!depCheckedKeys.value.length) {
        disabledT = true
      }
      if (!groupAdmins.value.length) {
        disabledT = true
      }
      break
    case 2:
      if (allChooseMembers?.value?.length < 3) {
        return true
      }
      break
    default:
      break
  }
  return disabledT
})

onShow(() => {
  depsNoExpanded.value = true
})
</script>
<style scoped lang="scss">
uni-page-body,
page {
  height: 100%;
}
.outer-layer {
  overflow-y: auto;
  flex: 1;
  background-image: url('@/static/image/clockIn/z3280@3x.png');
  background-size: cover;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
}
.root {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.divider {
  height: 1rpx;
  background-color: #7c7c7c;
  opacity: 0.6;
}
.avatar-placeholder {
  width: 192rpx;
  height: 192rpx;
  background-color: #e0e0e0;
  border-radius: 50%;
  margin-bottom: 40rpx;
}
.input-group {
  background-color: #fff;
  padding-top: 38rpx;
  padding-bottom: 32rpx;
  padding-left: 32rpx;
  padding-right: 40rpx;
  // display: flex;
  // align-items: center;
  // justify-content: space-between;
}
.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;
}
.btnBox {
  :deep(uni-button[disabled='true']) {
    color: #bebebe !important;
  }
}
</style>