minnan/src/pages/home/introduction.vue

<template>
  <view class="home-container page-home-introduction d-flex flex-col bg-base" style="min-height:100vh">
    <StatusBarSpace />
    <NavBar leftButton="back" :iconProps="{ color: 'white' }" :innerStyle="{ zIndex: 1000 }" backgroundColor="transparent" />
    <image 
      class="w-100 position-absolute"
      src="https://mncdn.wenlvti.net/app_static/minnan/images/home/BackgroundBanner2.jpg"
      mode="widthFix"
    />
    <view class="content d-flex flex-col wing-l">

      <!-- 标题 -->
      <view class="font-songti color-title-text d-flex flex-col align-center justify-center p-3">
        <text class="size-lll">闽南文化生态保护区<text class="size-ll">(厦门市)</text></text>
        <text class="size-base mt-2">世界闽南文化交流中心</text>
      </view>

      <!-- 分栏 -->
      <view class="shadow-l radius-l bg-base p-3">
        <SimplePageContentLoader :loader="introdData">
          <Parse :content="introdData.content.value" :tag-style="commonParserStyle" />
        </SimplePageContentLoader>

        <!--保护区建设历程-->
        <view 
          class="mt-4 d-flex flex-row justify-center align-center p-25 radius-base border-all-primary color-primary"
          @click="navTo('./history')"
        >
          <text class="iconfont icon-task-history-4 size-lll mr-2"></text>
          <text>保护区建设历程</text>
        </view>
      </view>

      <view class="d-flex flex-col mt-3">
        <view
          v-for="item in listLoader.list.value"
          :key="item.id"
        >
          <Box2LineImageRightShadow 
            classNames="ml-2 mb-3"
            titleColor="title-text"
            :image="item.image"
            :title="item.title"
            :desc="item.desc"
            @click="goDetail(item.id)"
          />
        </view>
      </view>
      <SimplePageListLoader :loader="listLoader" />
    </view>
  </view>
  <tabbar :current="0"></tabbar>
</template>

<script setup lang="ts">
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import CommonContent, { GetColumListParams, GetContentListParams } from '@/api/CommonContent';
import SimplePageListLoader from '@/common/components/SimplePageListLoader.vue';
import Box2LineImageRightShadow from '@/pages/parts/Box2LineImageRightShadow.vue';
import NewsIndexContent from '@/api/news/NewsIndexContent';
import Tabbar from '@/common/components/tabs/tabbar.vue';
import commonParserStyle from '@/common/style/commonParserStyle';
import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';
import { useSimplePageListLoader } from '@/common/composeabe/SimplePageListLoader';
import { DataDateUtils } from '@imengyu/js-request-transform';
import { navTo } from '@/components/utils/PageAction';
import { onMounted } from 'vue';
import Parse from '@/components/display/parse/Parse.vue';
import NavBar from '@/components/nav/NavBar.vue';
import StatusBarSpace from '@/components/layout/space/StatusBarSpace.vue';

const introdData = useSimpleDataLoader(async () => {
  return (await NewsIndexContent.getColumList(new GetColumListParams()
    .setModelId(17)
    .setMainBodyColumnId(234)
  )).list[0]?.overview || '无内容！请添加内容！！';
}, true);

const listLoader = useSimplePageListLoader<{
  id: number,
  image: string,
  title: string,
  desc: string,
  date: string,
}, {
  modelId: number|undefined, 
  mainBodyColumnId: number|undefined,
}>(8, async (page, pageSize, params) => {
  const res = await CommonContent.getContentList(new GetContentListParams().setSelfValues({
    modelId: 17, 
    mainBodyColumnId: '255,256,283,284',
  }), page, pageSize);
  return { list: res.list.map((item) => {
    return {
      id: item.id,
      image: item.thumbnail || item.image,
      title: item.title,
      desc: '重点保护区域',
      date: DataDateUtils.formatDate(item.publishAt, 'YYYY-MM-dd'),
    }
  }), total: res.total }
});

function goDetail(id: number) {
  navTo('/pages/article/details', { id });
}

onMounted(() => {
  listLoader.loadData(); 
})
</script>

<style lang="scss">
.page-home-introduction {
  .content {
    margin-top: 15vh;
  }
}
</style>