minnan/src/pages/user/contribute/list.vue

<template>
  <view class="d-flex flex-column bg-base" style="min-height:100vh">
    <view class="p-3">
      <uni-search-bar 
        v-model="searchText"
        radius="100"
        bgColor="#fff"
        placeholder="搜一搜" 
        clearButton="auto"
        cancelButton="none"
        @confirm="search"
      />
    </view>
    <view class="d-flex flex-column p-3">
      <Box2LineImageRightShadow 
        v-for="item in listLoader.list.value"
        :key="item.id" 
        classNames="ml-2 mb-3"
        titleColor="title-text"
        :image="item.thumbnail || item.image"
        :title="item.title"
        :tags="item.keywords"
        :desc="item.desc"
        @click="goDetail(item.id)"
      />
    </view>
    <SimplePageListLoader :loader="listLoader" />
  </view>
</template>

<script setup lang="ts">
import { GetContentListItem } from '@/api/CommonContent';
import SimplePageListLoader from '@/common/components/SimplePageListLoader.vue';
import { useSimplePageListLoader } from '@/common/composeabe/SimplePageListLoader';
import { ref } from 'vue';
import { navTo } from '@/common/utils/PageAction';
import { onLoad } from '@dcloudio/uni-app';
import ContributeApi from '@/api/user/ContributeApi';
import Box2LineImageRightShadow from '@/pages/parts/Box2LineImageRightShadow.vue';

const searchText = ref('');
const listLoader = useSimplePageListLoader<GetContentListItem>(
  8, 
  async (page, pageSize, params) => {
  return await ContributeApi.getContributeList(page, pageSize);
});

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

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