designer-hub/packages/merchant/src/components/page-helper-evo.vue

<script setup lang="ts" generic="T extends Object, R extends { list: T[] }, Q extends T">
import { ResPageData } from '@designer-hub/app/src/core/libs/models'
import { NetImages } from '../core/libs/net-images'
import { getRect, addUnit } from 'wot-design-uni/components/common/util'

const props = withDefaults(
  defineProps<{
    request: (query: any) => Promise<IResData<R>>
    query?: Partial<Q> & { [key: symbol]: any }
    automatic?: boolean
  }>(),
  { automatic: true, query: () => ({}) },
)
const slot = defineSlots<{
  default(props: { data?: R['list']; items?: T[]; source?: R }): any
  top: () => any
}>()
const { proxy } = getCurrentInstance() as any
const pageNo = ref(1)
const pageSize = ref(10)
const nomore = ref(false)
const topRef = ref()
const height = ref(0)
const windowInfo = ref<UniNamespace.GetWindowInfoResult>()
const { data, run: setData } = useRequest(
  () => props.request({ pageNo: pageNo.value, pageSize: pageSize.value, ...props.query }),
  { immediate: false },
)
const items = ref<T[]>([])

const setPlaceholderHeight = () => {
  getRect('.bottom-app-bar', false, proxy).then((res) => {
    height.value = res.height as number
  })
}
onMounted(async () => {
  nextTick(() => {
    setPlaceholderHeight()
  })
  windowInfo.value = await uni.getWindowInfo()
  if (props.automatic) {
    console.log('Page Helper Automatic')
    await setData()
    items.value = data.value?.list || data.value || []
  }
})
watch(
  () => props.query,
  async () => {
    console.log('Page Helper Query Change')
    pageNo.value = 1
    pageSize.value = 10
    await setData()
    items.value = data.value?.list || []
  },
)
onReachBottom(async () => {
  if (nomore.value) return
  console.log('Page Helper Reach Bottom')

  if (data.value?.list?.length < pageSize.value) {
    return (nomore.value = true)
  }
  pageNo.value++
  await setData()
  items.value = items.value.concat(data.value?.list || [])
})
defineExpose({
  reload: async () => {
    console.log('Page Helper Reload')
    pageNo.value = 1
    pageSize.value = 10
    await setData()
    items.value = data.value?.list || data.value || []
  },
  refresh: async () => {
    console.log('Page Helper Refresh')
    console.log(items.value.length)
    await setData()
    // 之前页的数据
    const prevItems = items.value.slice(0, pageSize.value * (pageNo.value - 1))
    console.log(prevItems.length)

    // 之后页的数据
    const nextItems = items.value.slice(pageSize.value * pageNo.value, items.value.length)
    console.log(nextItems.length)

    items.value = prevItems.concat(data.value?.list || [], nextItems)
    console.log(items.value.length)

    // console.log(items.value)
  },
})
</script>
<script lang="ts">
export default {
  options: {
    virtualHost: true,
    styleIsolation: 'shared',
  },
}
</script>
<template>
  <div
    class="flex-grow flex flex-col"
    :style="{ paddingBottom: addUnit(windowInfo?.safeAreaInsets.bottom || 0) }"
  >
    <div class="relative" :style="{ height: addUnit(height) }">
      <div
        ref="topRef"
        class="bottom-app-bar fixed absolute left-0 right-0 z-1"
        :style="{ top: addUnit(windowInfo?.windowTop || 0) }"
      >
        <!-- {{ topRef.offsetHeight }} -->
        <slot name="top"></slot>
      </div>
    </div>
    <div class="flex-grow flex flex-col">
      <template v-if="!items?.length">
        <div class="flex-grow flex flex-col justify-center">
          <wd-status-tip :image="NetImages.NotContent" tip="暂无内容"></wd-status-tip>
        </div>
      </template>
      <div v-if="items.length" class="flex-grow flex flex-col">
        <slot :source="{ list: items }"></slot>
      </div>
      <template v-if="nomore">
        <div class="my-4"><wd-divider>没有更多了</wd-divider></div>
      </template>
    </div>
  </div>
</template>