frontend-uniapp/src/pages/pet-manual/components/CardList.vue

<script setup lang="ts">
import type { Paging } from '@/model/base'
import type { Article } from '@/model/pet-manual'
import titleBg from '@/static/image/feed-plan/bg.png'

interface ContentText {
  contentdown: string
  contentrefresh: string
  contentnomore: string
}
const props = withDefaults(defineProps<{
  cardList: Article[]
  pagination: Paging
}>(), {
  pagination: {
    page: 0,
    size: 10,
    total: 0,
  },
})
const emit = defineEmits(['loadMore'])
const loadMoreStatus = computed(() => {
  return props.pagination.size > props.pagination.total ? 'nomore' : 'more'
})
const contentText = ref<ContentText>({
  contentdown: '查看更多',
  contentrefresh: '加载中',
  contentnomore: '没有更多',
})

function handleLoadMore() {
  if (props.pagination.size > props.pagination.total) {
    return
  }
  emit('loadMore')
}
</script>

<template>
  <view class="flex flex-col gap-4 px-4">
    <view
      v-for="(item, index) in props.cardList" :key="index" class="bg-[white] rounded-md shadow-lg flex w-full h-[120px] overflow-hidden"
    >
      <image class="w-[120px] h-[120px] rounded-l-md shrink-0" :src="item?.imageUrl || titleBg" />
      <view class="p-4 flex flex-col">
        <view class="text-[14px]">
          {{ item.title }}
        </view>
        <view class="mt-2 flex-1 text-[11px] leading-3 text-[#999] whitespace-pre-line line-clamp-3 w-full overflow-hidden">
          {{ item.description }}
        </view>
        <view class="mt-3 text-[10px] text-[#D8D8D8]">
          {{ item.updatedTime }}
        </view>
      </view>
    </view>
    <uni-load-more :status="loadMoreStatus" :content-text="contentText" @click-load-more="handleLoadMore" />
  </view>
</template>

<style scoped>

</style>