minnan/src/pages/introduction/news.vue

<template>
  <CommonRoot>
    <FlexCol :padding="30" innerClass="bg-base">
      <FlexRow>
        <SearchBar
          v-model="searchText"
          placeholder="搜索新闻"
          @search="loadNews"
        />
        <FlexRow align="center">
          <Text>选择日期：</Text>
          <PickerField 
            v-model="filterDate"
            placeholder="选择日期"
            :columns="[filterDates]" 
          />
          <Icon name="arrow-down" />
        </FlexRow>
      </FlexRow>
      <Box2LineImageRightShadow 
        v-for="(item, i) in newsLoader.list.value"
        :key="item.id"
        :class="[
          'position-relative d-flex flex-grow-1',
        ]"
        class="w-100"
        titleColor="title-text"
        :image="item.thumbnail || item.image"
        :title="item.title"
        :desc="`来源：${item.from}`"
        :badge="item.badge"
        :wideImage="true"
        @click="goDetails(item, item.id)"
      />
      <SimplePageListLoader :loader="newsLoader" />
    </FlexCol>
  </CommonRoot>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { type GetContentListItem, GetContentListParams } from '@/api/CommonContent';
import { type PickerItem } from '@/components/form/Picker.vue';
import { useSimplePageListLoader } from '@/common/composeabe/SimplePageListLoader';
import NewsIndexContent from '@/api/news/NewsIndexContent';
import SimplePageListLoader from '@/common/components/SimplePageListLoader.vue';
import CommonRoot from '@/components/dialog/CommonRoot';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import SearchBar from '@/components/form/SearchBar.vue';
import PickerField from '@/components/form/PickerField.vue';
import Box2LineImageRightShadow from '../parts/Box2LineImageRightShadow.vue';
import Icon from '@/components/basic/Icon.vue';
import Text from '@/components/basic/Text.vue';

const searchText = ref('');
const filterDate = ref(['']);

const newsLoader = useSimplePageListLoader(10, async (page, pageSize) => {
  return await NewsIndexContent.getContentList(new GetContentListParams().setSelfValues({
    keywords: searchText.value,
    publishAt: filterDate.value[0],
  }), page, pageSize);
});

const nowYear = new Date().getFullYear();
const filterDates : PickerItem[] = [
  { text: '全部', value: 0 },
  ...(new Array(21).fill(0).map((_, index) => {
    return { 
      text: `${nowYear - index}`, 
      value: nowYear - index 
    }
  }))
];

function loadNews() {
  newsLoader.loadData(undefined, true);
}
function goDetails(item: GetContentListItem, id: number) {
  uni.navigateTo({
    url: '/pages/article/details?id=' + id,
  });
}

watch(filterDate, () => {
  loadNews();
});
onMounted(() => {
  loadNews();
});
</script>