xyy-m/src/pages/chat/create-group.vue

<template>
  <!-- 创建群聊 -->
  <div class="w-full h-[100vh] bg-[#F7F8FA] box-border pt-66">
    <ChatHeader title="创建群聊" />

    <van-cell-group style="margin-bottom: 12px" inset>
      <van-field
        v-model="formData.groupName"
        rows="1"
        autosize
        :rules="[{ required: true, message: '请输入群名称' }]"
        type="textarea"
        placeholder="请输入群名称"
        label-align="top"
        maxlength="30"
        show-word-limit
      >
        <template #label>
          <span class="text-xl text-black-3">
            群名称
            <span class="text-[#EE0C0C] m-0 p-0">*</span>
          </span>
        </template>
      </van-field>
    </van-cell-group>
    <van-cell-group style="margin-bottom: 12px" inset>
      <van-field
        v-model="formData.description"
        rows="3"
        autosize
        type="textarea"
        :rules="[{ required: true, message: '请输入群介绍' }]"
        placeholder="简单说说你想在群内讨论的话题、以及希望哪些人加入群聊"
        label-align="top"
        maxlength="200"
        show-word-limit
      >
        <template #label>
          <span class="text-xl text-black-3">
            群介绍
            <span class="text-[#EE0C0C] m-0 p-0">*</span>
          </span>
        </template>
      </van-field>
    </van-cell-group>

    <van-cell-group style="margin-bottom: 12px" inset>
      <!-- value="未选择" -->
      <van-cell @click="show = true" center is-link :value="groupTypeName">
        <template #title>
          <span class="text-xl text-black-3">群类型</span>
        </template>
        <template #label>
          <span class="text-base text-black/[0.4]">同城生活，聊天交友等</span>
        </template>
      </van-cell>
    </van-cell-group>

    <van-cell-group style="margin-bottom: 12px" inset>
      <van-cell center>
        <template #title>
          <span class="text-xl text-black-3">个人主页展示</span>
        </template>
        <template #label>
          <span class="text-base text-black/[0.4]">开启后，在群聊广场和个人主页</span>
        </template>
        <template #right-icon>
          <van-switch v-model="checked" active-color="#FF9300" inactive-color="#dcdee0" />
        </template>
      </van-cell>
    </van-cell-group>

    <!-- 弹窗 -->

    <van-dialog width="90%" v-model:show="show" show-cancel-button>
      <template #title>
        <div class="w-full flex justify-between items-center px-16 py-11 border-b-[1px]">
          <h1>群类型</h1>
          <div class="w-32 h-32 -mt-3 shrink-0" @click="show = false">
            <img
              @click="visible = false"
              class="w-full h-full object-cover"
              src="~/assets/img/note-create/close.svg"
              alt=""
            />
          </div>
        </div>
      </template>

      <!-- <div class="w-full px-16 py-20" >
        <van-row :gutter="[12, 16]">
          <template v-for="(subItem, subIndex) in groupTypeList" :key="subIndex">
            <van-col @click="handleTypeClick(subItem)" span="12" class="h-40 mb-16">
              <div
                :class="` relative ${showIndex == subItem.id ? ' border-[#FF9300] border-2  shadow-[0_4px_4px_0px_rgba(0,0,0,0.1)]' : ''} h-40 pl-22 flex justify-start items-center shrink-0 text-xl text-black-6 font-semibold bg-[#F7F8FA] rounded-md`"
              >
                <div class="w-24 h-24 border shrink-0 mr-6">
                  <img class="w-full h-full object-cover" :src="city" alt="" />
                </div>
                {{ subItem.typeName }}

                <div
                  v-if="showIndex == subItem.id"
                  class="absolute rounded-t-md square1 -top-2 left-0 z-1"
                ></div>
                <div v-if="showIndex == subItem.id" class="w-14 h-14 absolute top-2 left-2 z-2">
                  <img
                    class="w-full h-full object-cover"
                    alt=""
                    src="~/assets/img/chat/check.svg"
                  />
                </div>
              </div>
            </van-col>

            <div
              v-if="showIndex == subItem.id"
              class="w-full relative flex justify-start box-border flex-wrap pl-21 mb-18 pt-14 bg-[#F7F7F7] rounded-md"
            >
              <div
                :class="`w-32 h-8 absolute -top-[8px] ${subIndex % 2 != 0 ? 'right-[23px]' : 'left-[23px]'} `"
              >
                <img class="w-full h-full" src="~/assets/img/chat/polygon.svg" alt="" />
              </div>
              <template v-for="(el, index2) in subItem.children" :key="`ss${index2}`">
                <div
                  @click="childrenHandleTypeClick(el)"
                  :class="`${childrenIndex == el.id ? 'text-[#FF9300] border-[#FF9300]  border-[2px] bg-[#FF9300]/[0.08]' : 'bg-white border text-black-6'} py-5 mr-8 mb-12 rounded-[4px] text-sm  box-border px-12`"
                >
                  {{ el.typeName }}
                </div>
              </template>
            </div>
          </template>
        </van-row>
      </div> -->

      <div class="w-full px-16 py-20 card-list">
        <template v-for="(subItem, subIndex) in groupTypeList" :key="subItem?.id">
          <div
            :class="` h-40 mb-4  relative ${showIndex == subItem.id ? ' border-[#FF9300] border-2  shadow-[0_4px_4px_0px_rgba(0,0,0,0.1)]' : ''}  pl-22 flex justify-start items-center shrink-0 text-xl text-black-6 font-semibold bg-[#F7F8FA] rounded-md`"
            @click="handleTypeClick(subItem)"
          >
            <div class="w-24 h-24 border shrink-0 mr-6">
              <img
                class="w-full h-full object-cover"
                :src="item?.typeIcon ? item?.typeIcon : city"
                alt=""
              />
            </div>
            <span class="line-clamp-1">
              {{ subItem.typeName }}
            </span>

            <div
              v-if="showIndex == subItem.id"
              class="absolute rounded-t-md square1 -top-2 -left-2 z-1"
            ></div>
            <div v-if="showIndex == subItem.id" class="w-14 h-14 absolute top-0 left-0 z-2">
              <img class="w-full h-full object-cover" alt="" src="~/assets/img/chat/check.svg" />
            </div>
          </div>

          <div
            v-if="showIndex == subItem.id && subItem?.children.length > 0"
            class="item__child mb-4 w-full relative flex justify-start box-border flex-wrap pl-21 pt-14 bg-[#F7F7F7] rounded-md"
          >
            <div
              :class="`w-32 h-8 absolute -top-[8px] ${subIndex % 2 != 0 ? 'right-[23px]' : 'left-[23px]'} `"
            >
              <img class="w-full h-full" src="~/assets/img/chat/polygon.svg" alt="" />
            </div>
            <template v-for="el in subItem.children" :key="el?.id">
              <div
                @click="childrenHandleTypeClick(el)"
                :class="`${childrenIndex == el.id ? 'text-[#FF9300] border-[#FF9300]  border-[2px] bg-[#FF9300]/[0.08]' : 'bg-white border text-black-6'} py-5 mr-8 mb-12 rounded-[4px] text-sm  box-border px-12`"
              >
                {{ el.typeName }}
              </div>
            </template>
          </div>
        </template>
      </div>

      <template #footer>
        <div class="w-full px-40 pb-30">
          <van-button
            style="font-size: 16px"
            type="primary"
            color="#FF9300"
            round
            block
            @click="show = false"
          >
            确认
          </van-button>
        </div>
      </template>
    </van-dialog>

    <div class="w-full h-72 px-16 pb-24 fixed bottom-0 left-0 box-border">
      <van-button
        style="font-size: 16px"
        type="primary"
        native-type="submit"
        color="#FF9300"
        round
        block
        @click="handleCreateGroup"
        :loading="isSubmiting"
      >
        立即创建
      </van-button>
    </div>
  </div>
</template>

<script setup>
import city from '~/assets/img/chat/city-one.svg'

const userInfoStore = useUserInfoStore()
const { userInfo } = storeToRefs(userInfoStore)

const TYPE_TEXT = '未选择'

const groupTypeList = ref([])

const subTypeList = ref([])

definePageMeta({
  layout: false
})

const formData = reactive({
  createType: '1',
  groupName: '',
  creatUserId: computed(() => userInfo.value.userId),
  description: '',
  belongTypeId: ''
})

// 是否群类型的弹窗打开
const show = ref(false)
const showIndex = ref(null)
const groupTypeName = ref(TYPE_TEXT)

const childrenIndex = ref(null)

// 是否个人主页展示
const checked = ref(true)

// 获取群类型
async function getTreeType() {
  try {
    const { data } = await request('/website/tourGroupType/treeType')
    if (Array.isArray(data) && data.length) {
      groupTypeList.value = data
    } else {
      groupTypeList.value = []
    }
  } finally {
  }
}

//
const handleTypeClick = (item) => {
  if (showIndex.value == item?.id) {
    showIndex.value = null
    subTypeList.value = []
  } else {
    showIndex.value = item.id
    subTypeList.value = item.children
  }
}

//
const childrenHandleTypeClick = (item) => {
  if (childrenIndex.value == item?.id) {
    formData.belongTypeId = ''
    childrenIndex.value = null

    groupTypeName.value = TYPE_TEXT
  } else {
    formData.belongTypeId = item.id
    childrenIndex.value = item.id
    groupTypeName.value = item.typeName
  }
}

const isSubmiting = ref(false)
// 创建群聊
async function handleCreateGroup() {
  try {
    isSubmiting.value = true

    if (!formData.groupName) {
      showToast('请输入群名称')
      return
    }

    if (!formData.description) {
      showToast('请输入群描述')
      return
    }
    checked ? (formData.isPublic = 1) : (formData.isPublic = 0)
    const { data } = await request('/website/tourGroup/createGroup', {
      method: 'post',
      body: {
        ...formData
      }
    })

    if (data) {
      showSuccessToast('群聊创建成功')

      // navigateTo({
      //   path: '/profile/my-news',

      //   replace: true
      // })

      navigateTo({
        path: '/chat/group',
        query: {
          groupId: data
        },
        replace: true
      })
    }
  } finally {
    isSubmiting.value = false
  }
}

onMounted(() => {
  getTreeType()
})

useSeoMeta({
  title: '我的消息'
})
</script>

<style lang="scss" scoped>
::v-deep .van-dialog__header {
  padding-top: 0;
}

.card-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense; /* 确保项目会填充所有的网格单元 */
  grid-gap: 12px;

  .item__child {
    grid-column: span 2;
  }

  .square1 {
    width: 0;
    height: 0;
    border-bottom: 28px solid transparent; /* 创建三角形 */
    border-left: 28px solid #ff9300; /* 三角形的颜色 */
  }
}
</style>