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

<template>
  <div class="w-full h-full">
    <ChatHeaderBar title="群聊广场" />

    <ChatSearch
      placeholder="搜索你想找的群聊"
      v-model:searchString="groupName"
      image="search"
      @search="search"
    ></ChatSearch>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <div class="h-[80vh]">
        <van-tabs
          class="w-full pl-0"
          title-active-color="#FF9300"
          title-inactive-color="#333333"
          v-model:active="active"
          @click-tab="onClickTab"
          style="--van-tabs-bottom-bar-color: #ff9300; --van-tabs-bottom-bar-width: 16px"
          swipeable
        >
          <van-tab
            class="border-t-[1px]"
            v-for="(el, i) in squareTabList"
            :key="el.id"
            :title="el?.typeName"
          >
            <div class="w-full h-full pl-16 box-border">
              <Empty v-if="!groupSquareList?.length && !loading" title="暂无群聊" top="100" />

              <!-- <van-list
                v-else
                v-model:loading="loading"
                error-text="获取失败"
                finished-text=""
                :finished="finished"
                :immediate-check="false"
                @load="getLoadList"
              > -->
              <template v-if="queryParams.groupTypeId == el.id">
                <van-cell
                  v-for="(item, index) in groupSquareList"
                  :key="item.id"
                  style="--van-cell-horizontal-padding: 0; padding: 16px 16px 16px 0"
                  center
                  class="border-b-[1px] py-16 pl-0"
                >
                  <template #icon>
                    <div style="" class="h-48 w-48 border rounded-full mr-12 overflow-hidden">
                      <img class="w-full h-full object-cover" :src="item.groupAvatar" alt="" />
                    </div>
                  </template>
                  <template #title>
                    <div class="flex justify-start font-semibold text-xl text-black-3 mb-4">
                      <h1 class="shrink-0 max-w-180 line-clamp-1">
                        {{ item.groupName }}
                      </h1>
                      <span v-if="item?.memberCount" class="shrink-0">
                        ({{ item.memberCount }})
                      </span>
                    </div>

                    <van-tag
                      style="--van-tag-padding: 4px; --van-tag-radius: 6px"
                      color="#FEF4E6"
                      text-color="#FF9300"
                      type="primary"
                    >
                      {{ item?.belongTypeIdDictMap?.name }}
                    </van-tag>
                  </template>
                  <template #label>
                    <p class="w-212 line-clamp-1 text-black-6 text-base mt-5">
                      {{ item?.description }}
                    </p>
                  </template>
                  <template #value>
                    <!-- codeShowStatus  v-if="item.state == 0" -->
                    <van-button
                      size="small"
                      :color="chageState(item.codeShowStatus).color"
                      round
                      class="w-60 text-base font-semibold"
                      plain
                      style="--van-button-default-padding: 0"
                      @click="handleJoinGroup(item)"
                    >
                      {{ chageState(item.codeShowStatus).text }}
                    </van-button>
                    <!-- <van-button
                        v-if="item.codeShowStatus == 0"
                        size="small"
                        color="#fa8446"
                        round
                        class="w-60 text-base font-semibold"
                        plain
                        style="--van-button-default-padding: 0"
                        @click="handleJoinGroup(item)"
                      >
                        加入
                      </van-button>
                      <van-button
                        v-if="item.codeShowStatus == 1"
                        size="small"
                        color="#fa8446"
                        round
                        class="w-60 text-base font-semibold"
                        plain
                        style="--van-button-default-padding: 0"
                        @click="handleJoinGroup(item)"
                      >
                        去聊天
                      </van-button>
                      <van-button
                        v-if="item.codeShowStatus == 4"
                        size="small"
                        color="#999999"
                        round
                        class="w-60 text-base font-semibold"
                        plain
                        style="--van-button-default-padding: 0"
                        @click="handleJoinGroup(item)"
                      >
                        已申请
                      </van-button> -->
                  </template>
                </van-cell>
              </template>
              <!-- </van-list> -->
            </div>
          </van-tab>
        </van-tabs>
      </div>

      <!-- </div> -->
    </van-pull-refresh>

    <div class="fixed w-full p-16 pb-40 bottom-0 left-0 bg-white">
      <van-button
        size="large"
        style="background: #fa8446; margin-top: 30px"
        color="#fff"
        round
        block
        icon="plus"
        class="w-full"
        @click="navigateTo('/chat/create-group')"
      >
        创建群聊
      </van-button>
    </div>
  </div>
</template>

<script setup>
definePageMeta({
  layout: false
})

const groupName = ref('')
const refreshing = ref(false)
const loading = ref(false)
const finished = ref(false)

const groupSquareList = ref([])
const squareTabList = ref([])

const active = ref(0)

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  groupName: '',
  groupTypeId: ''
})

// 获取切换的数据
const onClickTab = ({ title }) => {
  // showToast(title)
  // groupSquareList.value = []
  queryParams.groupTypeId = squareTabList.value.find((item) => item.typeName == title).id
  // active.value = squareTabList.value.findIndex((item) => item.typeName == title)

  // getList()
}

// 加入群聊
const handleJoinGroup = (item) => {
  if (item.codeShowStatus == 0) {
    // navigateTo({
    //   path: '/chat/group',
    //   query: { groupId: item.id },
    //   replace: true
    // })
  }
  if (item.codeShowStatus == 1) {
    navigateTo({
      path: '/chat/group',
      query: { groupId: item.id },
      replace: true
    })
  }
  if (item.codeShowStatus == 2) {
    navigateTo('/chat/group', {
      query: { groupId: item.id },
      replace: true
    })
  }
}

// 获取群聊列表
function getLoadList() {
  squareTabList.value = []
  queryParams.pageNum++
  finished.value = true
  getList()
}

const getTabList = async () => {
  try {
    let url = `/website/tourGroup/getGroupTypeFirst`

    const { data } = await request(url)

    if (Array.isArray(data) && data?.length) {
      squareTabList.value = [
        {
          typeName: '推荐',
          id: ''
        },
        ...data
      ]
      getList()
    } else {
      groupSquareList.value = []
    }
  } catch (err) {
  } finally {
  }
}

function chageState(state) {
  let item = {}
  if (state == 0) {
    item.text = '加入'
    item.color = '#FF9300'
  }

  if (state == 1) {
    item.text = '去聊天'
    item.color = '#D9D9D9'
  }

  // if (state == 2) {
  //   item.text = '此群异常,暂不能加入'

  //   item.fn = () => {}
  // }
  // if (state == 3) {
  //   item.text = '此群已解散'
  // }
  if (state == 4) {
    item.text = '已申请'
    item.color = '#D9D9D9'
  }

  return item
}

// 获取数据
const getList = async () => {
  try {
    let url = `/website/tourGroup/list`
    loading.value = true
    let {
      data: { dataList, totalCount }
    } = await request(url, {
      method: 'post',
      body: {
        ...queryParams
      }
    })

    if (Array.isArray(dataList) && dataList?.length) {
      groupSquareList.value = groupSquareList.value.concat(dataList)
      // groupSquareList.value = dataList
    } else {
      groupSquareList.value = []
    }

    loading.value = false
    refreshing.value = false
    // if (groupSquareList.value.length >= totalCount) {
    //   finished.value = true
    // } else {
    finished.value = false
    // }
  } catch (err) {
  } finally {
    refreshing.value = false
    loading.value = false
  }
}

// watchEffect(
//   [() => queryParams.groupTypeId],
//   () => {
//     finished.value = false
//     groupSquareList.value = []
//     getList()
//   },
//   {
//     immediate: true
//   }
// )

onMounted(() => {
  getTabList()
})

// 搜索
const search = () => {
  queryParams.pageNum = 1
  groupSquareList.value = []
  queryParams.groupName = groupName.value
  getList()
}

// 下拉刷新
const onRefresh = () => {
  refreshing.value = true
  queryParams.pageNum = 1
  groupSquareList.value = []
  getList()
}

useSeoMeta({
  title: '群聊广场'
})
</script>

<style lang="scss" scoped>
::v-deep .van-tabs__nav--line.van-tabs__nav--complete {
  padding-left: 5px;
}
</style>