mcwl-pc/app/pages/my-planet/index.vue

<script setup lang="ts">
import { User } from 'lucide-vue-next'

const emit = defineEmits(['refresh'])
// import CreatePlanet from '~/components/CreatePlanet.vue'

definePageMeta({
  layout: 'planet',
})
const userStore = useUserStore()
const communityTag = ref('myCreate')
const communityTagList = ref([
  {
    dictLabel: '我创建的',
    dictValue: 'myCreate',
  },
  {
    dictLabel: '我加入的',
    dictValue: 'myJoin',
  },
])

// 获取列表
const listParams = ref({
  communityTag: null as string | null,
  pageNum: 1,
  pageSize: 20,
  userId: userStore.userInfo?.userId,
  isMyCreate: 0,
})
interface CommunityItem {
  imageUrl: string
  publishNum: number
  communityName: string
  avatar: string
  createBy: string
  createDay: number
  description: string
  price: number | null
}
const listFinish = ref(false)
const loading = ref(false)
const dataList = ref<CommunityItem[]>([])

function refresh() {
  listFinish.value = false
  listParams.value.pageNum = 1
  getList()
  emit('refresh')
}

async function getList() {
  try {
    if (listFinish.value || loading.value) // 添加loading检查,避免重复请求
      return
    loading.value = listParams.value.pageNum === 1 // 只在第一页显示loading
    const url = communityTag.value === 'myCreate' ? '/community/list' : `/community/myJoin`
    const res = await request.post<ApiResponse<CommunityItem>>(url, listParams.value)
    if (res.code === 200) {
      if (listParams.value.pageNum === 1) {
        dataList.value = res.rows
      }
      else {
        dataList.value = [...dataList.value, ...res.rows]
      }

      if (dataList.value.length >= res.total) {
        listFinish.value = true
      }
      listParams.value.pageNum++
    }
  }
  catch (error) {
    dataList.value = []
    listFinish.value = true
    console.error(error)
  }
  finally {
    loading.value = false
  }
}
getList()

function changeTag(value: string) {
  communityTag.value = value
  listParams.value.pageNum = 1
  listFinish.value = false
  getList()
}

const isShowCreateModal = ref(false)
function showCreateModal() {
  isShowCreateModal.value = true
}

function handleCreateSuccess() {
  refresh()
}
</script>

<template>
  <div class="min-h-screen bg-[#F7F8FA]">
    <div class="px-10 bg-[#fff]">
      <div class="flex flex-wrap gap-2 py-4 ">
        <div
          v-for="(item, index) in communityTagList"
          :key="index"
          class="px-[12px] py-[9px] text-sm rounded-lg cursor-pointer"
          :class="{ 'bg-black text-white': communityTag === item.dictValue, 'bg-white text-[#878d95] hover:bg-gray-100': communityTag !== item.dictValue }"
          @click="changeTag(item.dictValue)"
        >
          {{ item.dictLabel }}
        </div>
      </div>
    </div>
    <article class="px-10 py-6">
      <n-infinite-scroll :distance="10" trigger="once" @load="getList">
        <!-- 添加trigger="once"属性 -->
        <div v-if="loading" class="grid grid-cols-3 gap-2">
          <div v-for="i in 9" :key="i" class="bg-white rounded-lg overflow-hidden shadow-sm flex p-4">
            <n-skeleton class="w-[161px] h-[161px] rounded-lg flex-shrink-0" />
            <div class="flex flex-col gap-2 px-4 flex-1">
              <div class="flex flex-col gap-2">
                <n-skeleton text :width="140" />
                <div class="flex items-center gap-2">
                  <n-skeleton circle width="20px" height="20px" />
                  <n-skeleton text :width="60" />
                  <n-skeleton text :width="80" />
                </div>
                <n-skeleton text :repeat="2" />
              </div>
              <n-skeleton text :width="60" />
            </div>
          </div>
        </div>
        <div v-else-if="dataList.length > 0" class="grid grid-cols-3 gap-2">
          <div v-if="communityTag === 'myCreate'" class="bg-black rounded-lg flex flex-col justify-center items-center p-4 hover:shadow-[0_4px_14px_0_rgba(0,0,0,0.1)] transition-all duration-300 cursor-pointer" @click="showCreateModal">
            <div class="text-white text-xl">
              魔创星球
            </div>
            <div class="text-xs text-[#878d95] mt-1 mb-4">
              加入星球发布优质的内容吧～
            </div>
            <div class="flex text-white bg-gradient-to-r from-[#197dff] to-[#2c4dff] rounded-[4px] px-8 py-3 text-sm cursor-pointer hover:from-[#3b8fff] hover:to-[#4465ff]">
              创建星球
            </div>
          </div>
          <PlanetItem v-for="(item, index) in dataList" :key="index" :item="item" :type="communityTag" @refresh="refresh" />
        </div>
        <div v-if="dataList.length === 0 && listFinish" class="flex flex-col items-center justify-center py-12">
          <div class="w-48 h-48 mb-4 flex items-center justify-center">
            <div class="relative">
              <div class="w-32 h-32 rounded-full border-4 border-gray-200" />
              <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-24 h-24 rounded-full border-4 border-gray-100" />
              <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-16 h-16 rounded-full bg-gray-50" />
            </div>
          </div>
          <p class="text-gray-500 mb-4">
            这里空空如也，什么都没有找到~
          </p>
          <!-- <n-button type="primary" size="small" class="px-6">
            去发现更多
          </n-button> -->
        </div>
      </n-infinite-scroll>
    </article>

    <CreatePlanet
      v-model:show="isShowCreateModal"
      @success="handleCreateSuccess"
      @refresh="refresh"
    />
  </div>
</template>

<style scoped>
body,
html {
  background-color: #f7f8fa;
}
</style>