mingnan/src/pages/article/list.vue

<template>
  <view class="article_list">
    <view class="search">
      <uni-search-bar 
        v-model="searchText"
        radius="100"
        bgColor="#fff"
        placeholder="搜一搜" 
        clearButton="auto"
        cancelButton="none"
        @confirm="search"
      />
    </view>
    <view class="complex-list-horizontal-1">
      <view 
        class="item" 
        hover-class="pressed"
        v-for="item in listLoader.list.value"
        :key="item.id" 
        @click="goDetail(item.id)"
      >
        <ImageWrapper :src="item.image" width="170rpx" height="190rpx" />
        <view class="info">
          <view class="name ellipsis-2">{{ item.title }}</view>
          <view class="desc">{{ item.date }}</view>
        </view>
      </view>
    </view>
    <SimplePageListLoader :loader="listLoader" />
  </view>
</template>

<script setup lang="ts">
import CommonContent, { GetContentListParams } from '@/api/CommonContent';
import SimplePageListLoader from '@/common/components/SimplePageListLoader.vue';
import ImageWrapper from '@/common/components/ImageWrapper.vue';
import { useSimplePageListLoader } from '@/common/composeabe/SimplePageListLoader';
import { ref } from 'vue';
import { DataDateUtils } from '@imengyu/js-request-transform';
import { navTo } from '@/common/utils/PageAction';
import { onLoad } from '@dcloudio/uni-app';

const searchText = ref('');
const listLoader = useSimplePageListLoader<{
  id: number,
  image: string,
  title: string,
  date: string
}, {
  modelId: number|undefined, 
  mainBodyColumnId: number|undefined,
}>(8, async (page, pageSize, params) => {
  if (!params || !params.modelId || !params.mainBodyColumnId)
    throw new Error("未传入参数，当前页面需要参数");
  const res = await CommonContent.getContentList(new GetContentListParams().setSelfValues({
    keywords: searchText.value,
    modelId: params.modelId, 
    mainBodyColumnId: params.mainBodyColumnId ,
  }), page, pageSize);
  return res.list.map((item) => {
    return {
      id: item.id,
      image: item.image,
      title: item.title,
      date: DataDateUtils.formatDate(item.publishAt, 'YYYY-MM-dd'),
    }
  })
});

function goDetail(id: number) {
  navTo('/pages/article/details', { id });
}
function search() {
  listLoader.loadData(undefined, true);
}

onLoad((query) => {
  if (query?.title) {
    uni.setNavigationBarTitle({
      title: query.title,
    });
  }
  listLoader.loadData({
    modelId: query?.modelId ? Number(query.modelId) : undefined, 
    mainBodyColumnId: query?.mainBodyColumnId? Number(query.mainBodyColumnId) : undefined ,
  })
})
</script>

<style lang="scss">
.article_list {
  padding: 20rpx;
}
</style>