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

<template>
  <div class="outer-layer">
    <div>
      <tm-navbar :hideBack="false" hideHome title="发起群聊" :leftWidth="320">
      </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="12"
              :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" 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 zu4992 from "@/static/image/chatList/zu4992@2x.png";
import zu4991 from "@/static/image/chatList/zu4991@2x.png";
import zu4989 from "@/static/image/chatList/zu4989@2x.png";
import { useGroupTypeStore } from "@/store/groupType";

const { groupName,groupActiveIndex,depCheckedKeys,groupAdmins,createDepGroup,resetGroupInfo } = 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 = zu4992;
      break;
    case 1:
      srcT = zu4989;
      break;
    case 2:
      srcT = zu4991;
      break;
    default:
      srcT = zu4992;
  }
  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 () => {
  if (groupActiveIndex.value === 0) {
    
  }else if(groupActiveIndex.value === 1){
    const res = await createDepGroup()
    if (res.code === 200) {
      resetGroupInfo()
      uni.navigateBack()
    }

  }else {

  }
}

const confirmBtnStatus = computed(() => {
  let disabledT = false;
  if (groupName.value === "" || !groupActiveIndex.value) {
    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">
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>