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

<template>
  <div class="w-full h-[100vh]">
    <ChatHeaderBar title="添加成员" />

    <ChatSearch v-model:searchString="searchString" @search="search" placeholder="请输入关键词" />

    <div class="h-118"></div>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <Empty v-if="!addDataList?.length && !loading" title="暂无数据" top="100" />
      <van-list
        v-else-if="addDataList.length"
        v-model:loading="loading"
        error-text="获取失败"
        finished-text="-- 没有更多了 --"
        :finished="finished"
        :immediate-check="false"
        @load="getLoadList"
      >
        <van-checkbox-group v-model="checked">
          <van-index-bar highlight-color="#FD9A00" index-list :sticky="false">
            <template v-for="(item, index) in addDataList" :key="item?.id">
              <van-index-anchor index="A" />
              <van-cell
                v-for="(item, index) in addDataList"
                :key="item?.id"
                center
                clickable
                @click="toggle(index)"
                disabled
              >
                <template #icon>
                  <div class="flex justify-start">
                    <van-checkbox
                      checked-color="#FD9A00"
                      :name="item.id"
                      :ref="(el) => (checkboxRefs[index] = el)"
                      @click.stop
                    />

                    <div class="w-40 h-40 ml-13 mr-12 rounded-full overflow-hidden">
                      <img class="w-full h-full shrink-0 object-cover" :src="item?.img" alt="" />
                    </div>
                  </div>
                </template>
                <template #title>
                  <div class="flex items-center">
                    <h1 class="text-xl text-black-3">{{ item?.visaTitle }}</h1>
                    <van-tag style="margin-left: 5px" color="#F7F8FA" text-color="#666666">
                      相互关注
                    </van-tag>
                  </div>
                </template>
              </van-cell>
            </template>
          </van-index-bar>
        </van-checkbox-group>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script setup>
import { pinyin } from 'pinyin-pro'

definePageMeta({
  layout: false
})

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

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

const checked = ref([])
const searchString = ref('')
const checkboxRefs = ref([])

// 字母的数组
const letterList = ref([])

const toggle = (index) => {
  checkboxRefs.value[index].toggle()
}

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

const addDataList = ref([])

useSeoMeta({
  title: '添加成员'
})

const search = () => {
  addDataList.value = []
  queryParams.pageNum = 1
  queryParams.searchString = searchString.value
  getList()
}

// 刷新
const onRefresh = () => {
  queryParams.pageNum = 1
  addDataList.value = []
  getList()
}

// 触底加载
const getLoadList = () => {
  queryParams.pageNum++
  finished.value = true
  getList()
}

// 获取数据
const getList = async () => {
  try {
    let url = `/website/tourism/visa/list/page`

    loading.value = true
    let {
      data: { dataList, totalCount }
    } = await request(url, {
      query: {
        ...queryParams
      }
    })
    let arr = []
    if (Array.isArray(dataList) && dataList?.length) {
      addDataList.value = addDataList.value.concat(dataList)
      arr = addDataList.value
      arr = arr.map((item, index) => {
        let letter = pinyin(item?.visaTitle, { pattern: 'first', toneType: 'none' })
        console.log(letter, '123')

        item.letter = letter
        return item
      })
      console.log(arr, 'addDataList.value .value')
    } else {
      addDataList.value = []
    }

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

// // 数据转化
// const changeInitials = (list) => {
//   console.log(list)

//   let letter = []
//   let listArr = []
// listArr = list.map((item, index) => {
//   item.letter = pinyin(item?.visaTitle, { pattern: 'first', toneType: 'none' })
//     .map((pinyin) => pinyin[0].toUpperCase()) // 获取拼音的首字母并转换为大写
//     .join('')

//     letter.push(item.letter)
//     return item
//   })
//   console.log(list, '21')
//   console.log(listArr, '444')

//   return {
//     letter,
//     listArr
//   }
// }
</script>
<style lang="scss" scoped></style>