xyy-m/src/pages/profile/notes/index.vue

<template>
  <div ref="container" class="w-full box-border pb-16 px-20 bg-[#F8F8F8]">
    <van-sticky :offset-top="50" :container="container">
      <ProfileNotesTabs :tabs="tabs"></ProfileNotesTabs>
    </van-sticky>

    <div class="w-full h-[200vh]">
      <van-pull-refresh v-model="loading" @refresh="onRefresh">
        <div v-if="tab === 'published'">
          <ProfileNotesPublished />
        </div>
        <div v-else-if="tab === 'auditing'">
          <ProfileNotesAuditing />
        </div>
        <div v-else-if="tab === 'rejected'">
          <ProfileNotesRejected />
        </div>
        <div v-else-if="tab === 'draft'">
          <ProfileNotesDraft />
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script setup>
const tabs = [
  {
    lable: '已发布',
    name: 'published',
    to: ''
  },
  {
    lable: '审核中',
    name: 'auditing',
    to: ''
  },
  {
    lable: '未通过',
    name: 'rejected',
    to: ''
  },
  {
    lable: '草稿箱',
    name: 'draft',
    to: ''
  }
]

const route = useRoute()
const container = ref(null)
const tab = useRouteQuery('tab')
const { loading, setLoading } = useLoading()

const onRefresh = () => {
  setTimeout(() => {
    try {
      showToast('刷新成功')
      loading.value = false
    } catch (err) {
      showToast('刷新失败')
    }
  }, 1000)
}

watch(
  tab,
  (val) => {
    if (val) return
    navigateTo({
      path: route.fullPath,
      query: {
        tab: tabs[0].name
      },
      replace: true
    })
  },
  { immediate: true }
)
</script>

<style lang="scss" scoped></style>