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

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

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

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <ChatEmpty
        v-if="!list?.length && !loading"
        image="search"
        title="请输入关键词,没有找到关结果"
        top="100"
      />

      <van-list
        v-else-if="list.length"
        v-model:loading="loading"
        error-text="获取失败"
        finished-text="-- 没有更多了 --"
        :finished="finished"
        :immediate-check="false"
        @load="getLoadList"
      >
        <template v-for="(item, index) in list" :key="item?.userId">
          <van-cell center disabled>
            <template #icon>
              <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?.headImageUrl" alt="" />
              </div>
            </template>
            <template #title>
              <h1 class="text-xl line-clamp-1 text-black-3">{{ item?.tourUserVo?.showName }}</h1>

              <p class="line-clamp-1 text-black-3 text-sm">粉丝 {{ transNum(item?.fansCount) }}</p>
            </template>
            <template #value>
              <van-button
                v-if="item.fansStatus == '0'"
                style="width: 60px"
                size="mini"
                type="primary"
                color="#FF9300"
                round
                plain
                @click="handleFollow(item, index)"
              >
                关注
              </van-button>
              <van-button
                style="width: 60px"
                v-if="item.fansStatus == '1'"
                size="mini"
                type="primary"
                color="#999999"
                round
                plain
                @click="handleFollow(item, index)"
              >
                已关注
              </van-button>
              <van-button
                style="width: 72px"
                v-if="item.fansStatus == '2'"
                size="mini"
                type="primary"
                color="#999999"
                round
                plain
                @click="handleFollow(item, index)"
              >
                互相关注
              </van-button>
              <template v-if="item.fansStatus == '4'"></template>
              <van-button
                style="width: 60px"
                v-if="item.fansStatus == '4'"
                size="mini"
                type="primary"
                color="#FF9300"
                round
                plain
                @click="handleFollow(item, index)"
              >
                回关
              </van-button>
            </template>
          </van-cell>
        </template>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script setup>
definePageMeta({
  layout: false
})

onMounted(() => {})

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

const showName = ref('')

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

const list = ref([])

useSeoMeta({
  title: '我的消息'
})

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

// 关注
const handleFollow = async (item, i) => {
  try {
    const { data } = await request('/website/tourism/fans/saveConcern', {
      method: 'post',
      body: {
        attentionId: item.tourUserVo.userId
      }
    })

    list.value[i].fansStatus = data.fansStatus

    showSuccessToast('操作成功')
  } catch (e) {
  } finally {
  }
}

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

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

// 获取数据
const getList = async () => {
  try {
    let url = `/website/tourism/fans/getUserListByNickname`

    loading.value = true
    let {
      data: { dataList, totalCount }
    } = await request(url, {
      query: {
        ...queryParams
      }
    })

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

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

function transNum(num) {
  if (isNaN(num)) return 0
  if (num < 10000) return num
  return (num / 10000).toFixed(1) + 'w'
}
</script>
<style lang="scss" scoped></style>