minnan/src/pages/introduction/news.vue

<template>
  <CommonRoot>
    <FlexCol :padding="30" innerClass="bg-base">
      <FlexRow>
        <Touchable
          direction="row"
          width="450"
          align="center"
          :activeOpacity="1"
          @click="($refs.pickerField as any).show()"
        >
          <Text>筛选日期：</Text>
          <PickerField 
            ref="pickerField"
            v-model="filterDate"
            placeholder="选择日期"
            title="筛选日期"
            :columns="[filterDates]" 
          />
          <Icon name="arrow-down" />
        </Touchable>
        <SearchBar
          v-model="searchText"
          inputBackgroundColor="transparent"
          leftIcon=""
          placeholder="搜索新闻"
          cancelState="hidden"
          searchState="show"
          @search="loadNews"
        />
      </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 ? `来源：${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 { useSimplePageListLoader } from '@/common/composeabe/SimplePageListLoader';
import { navCommonDetail } from '../article/common/CommonContent';
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 SearchBar from '@/components/form/SearchBar.vue';
import Box2LineImageRightShadow from '../parts/Box2LineImageRightShadow.vue';
import ApiCofig from '@/common/config/ApiCofig';
import FlexRow from '@/components/layout/FlexRow.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import PickerField from '@/components/form/PickerField.vue';
import Text from '@/components/basic/Text.vue';
import Icon from '@/components/basic/Icon.vue';
import type { PickerItem } from '@/components/form/Picker';

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

const newsLoader = useSimplePageListLoader(10, async (page, pageSize) => {
  return await NewsIndexContent.getContentList(new GetContentListParams()
    .setMainBodyColumnId([ 228,298,299 ])
    .setKeywords(searchText.value)
    .setSelfValues({
      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) {
  navCommonDetail({
    id,
    mainBodyColumnId: item.mainBodyColumnId,
    modelId: item.modelId,
  });
}

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