xyy-m/src/pages/chat/set-sub/index.vue

<template>
  <div class="w-full h-[100vh]">
    <ChatHeader :title="title" />
    <ChatSearch
      v-model:searchString="searchString"
      v-model:placeholder="placeholder"
      @search="search"
    />

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <div v-if="tab == 'records'" class="w-full min-h-400 pt-20">
        <!--  :title="`没有找到&quot;${searchString}&quot;相关的结果`"   v-if="!list?.length && !loading"-->
        <ChatEmpty
          v-if="!list?.length && !loading"
          image="search"
          title="输入关键词，搜索聊天记录"
        />

        <template v-if="searchString && list?.length > 0">
          <van-cell
            clickable
            v-for="(item, index) in list"
            :key="item?.id"
            :value="beforeTime(item?.createTime)"
          >
            <template #icon>
              <div class="w-40 h-40 rounded-full mr-12 overflow-hidden">
                <img class="w-full h-full object-cover" :src="item?.avatar" alt="" />
              </div>
            </template>
            <template :title>
              <p class="text-sm text-black-9">
                {{ item?.nickname }}
              </p>
            </template>
            <template :label>
              <van-highlight
                :keywords="searchString"
                :source-string="item?.nickname"
                class="text-xl text-black-3"
                highlight-class="custom-class"
              />
            </template>
          </van-cell>
        </template>

        <!-- <template v-if="!searchString && list?.length">
          <p class="text-bsae text-center">按以下条件查找</p>
          <div class="w-full flex justify-center mt-15">
            <van-button
              icon="contact-o"
              type="primary"
              color="#F6F6F6"
              round
              @click=""
              size="small"
              style="color: #333333; margin-right: 10px"
            >
              群成员
            </van-button>
            <van-button
              icon="notes-o"
              type="primary"
              color="#F6F6F6"
              color-text="#333333"
              size="small"
              round
              @click=""
              style="color: #333333"
            >
              日期
            </van-button>
          </div>
        </template> -->
      </div>
    </van-pull-refresh>
  </div>
</template>
<script setup>
import { beforeTime } from '~/utils/detalTime'

const route = useRoute()

const tab = useRouteQuery('tab')

const queryParams = reactive({
  groupId: computed(() => route.query.groupId ?? ''),
  pageNum: 1,
  pageSize: 20,
  searchMessage: ''
})

const loading = ref(false)
const refreshing = ref(false)
const searchString = ref('')

onMounted(() => {
  getList()
})

// 全部成员
const list = ref([])

const title = ref('聊天记录')

// 搜索
const search = () => {
  queryParams.searchMessage = searchString.value
  queryParams.pageNum = 1
  list.value = []
  getList()
}

// 下拉刷新
const onRefresh = () => {
  list.value ? queryParams.pageNum++ : (queryParams.pageNum = 1)

  getList()
}

// 获取聊天记录
const getList = async () => {
  try {
    loading.value = true
    if (tab == 'records') data.records = searchString.value
    let { data } = await request('/website/tourMessage/getMessageByGroupId', {
      query: {
        ...queryParams
      }
    })

    if (Array.isArray(data.data) && data?.data?.length) {
      list.value = list.value.concat(...data.data)
    } else {
      list.value = []
    }
    refreshing.value = false
    loading.value = false
  } catch (err) {
  } finally {
    refreshing.value = false
    loading.value = false
  }
}

// 是否是普通成员
// const isRankAndFiler = (role) => {
//   return role == 1 || role == 2 ? true : false
// }

definePageMeta({
  layout: false
})

useSeoMeta({
  title
})
</script>
<style lang="scss" scoped>
.custom-class {
  color: #ff9300;
}
</style>