minnan/src/pages/introduction/travel.vue

<template>
  <FlexCol :padding="30" backgroundColor="background.page">
    
    <!-- 闽南节庆日历 -->
    <!-- <HomeTitle title="闽南节庆日历" showMore @clickMore="navTo('/pages/travel/calendar/index')" />
    <CalendarBlock /> -->

    <!-- 闽南文化景区、景点 -->
    <HomeTitle title="闽南文化景区、景点" showMore @clickMore="navTo('/pages/travel/scenic-spot/list')" />
    <SimplePageContentLoader :loader="spotData">
      <scroll-view scroll-x>
        <FlexCol>
          <Box2LineImageRightShadow
            v-for="(item, i) in spotData.content.value"
            titleColor="title-text"
            fixSize
            :key="i"
            :title="item.title"
            :desc="item.desc"
            :image="item.image"
            :tags="item.bottomTags"
            @click="navTo('/pages/inhert/intangible/details', { id: item.id })"
          />
        </FlexCol>
      </scroll-view>
    </SimplePageContentLoader>

    <!-- 闽南时尚 -->
    <HomeTitle title="闽南时尚" showMore @clickMore="navTo('/pages/travel/fashion/list')" />
    <SimplePageContentLoader :loader="songsData">
      <FlexRow wrap align="stretch" justify="space-between" overflow="visible">
        <Box2LineLargeImageUserShadow
          v-for="(item, i) in songsData.content.value"
          titleColor="title-text"
          width="calc(50% - 10rpx)"
          fixSize
          :key="i"
          :title="item.title"
          :desc="item.desc"
          :image="item.image"
          @click="goSongsDetail(item.id)"
        />
      </FlexRow>
    </SimplePageContentLoader>

    <!-- 文化旅游路线 -->
    <HomeTitle title="文化旅游路线" showMore @clickMore="goRouteList" />
    <SimplePageContentLoader :loader="routeData">
      <scroll-view scroll-x>
        <view class="pb-3 pt-3 d-flex flex-row overflow-visible align-stretch">
          <Box2LineLargeImageUserShadow
            v-for="(item, i) in routeData.content.value"
            classNames="width-2-3 mr-2"
            titleColor="title-text"
            fixSize
            :key="i"
            :title="item.title"
            :desc="item.desc"
            :image="item.thumbnail || item.image"
            @click="goRouteDetail(item.id)"
          />
        </view>
      </scroll-view>
    </SimplePageContentLoader>

    <!-- 文化产品 -->
    <HomeTitle title="文化产品" showMore @clickMore="goCreativeList" />
    <SimplePageContentLoader :loader="creativeData">
      <scroll-view scroll-x>
        <view class="pb-3 pt-3 d-flex flex-row overflow-visible align-stretch">
          <Box2LineLargeImageUserShadow
            v-for="(item, i) in creativeData.content.value"
            classNames="width-2-3 mr-2"
            titleColor="title-text"
            fixSize
            :key="i"
            :title="item.title"
            :image="item.thumbnail || item.image"
            @click="goCreativeDetail(item.id)"
          />
        </view>
      </scroll-view>
    </SimplePageContentLoader>

    <!-- 闽南语在线课程-->
    <HomeTitle title="闽南语在线课程" :showMore="false" @clickMore="goCourseList" />
    <SimplePageContentLoader :loader="corseData" >
      <scroll-view scroll-x>
        <view class="pb-3 pt-3 d-flex flex-row overflow-visible align-stretch">
          <Box2LineLargeImageUserShadow
            v-for="(item, i) in corseData.content.value"
            classNames="width-2-3 mr-2"
            titleColor="title-text"
            fixSize
            :key="i"
            :title="item.title"
            :desc="item.desc"
            :image="item.thumbnail || item.image"
            @click="goCourseDetail(item.id)"
          />
        </view>
      </scroll-view>
    </SimplePageContentLoader>

    <Footer text="我也是有底线的~" />
  </FlexCol>
</template>

<script setup lang="ts">
import { navTo } from '@/components/utils/PageAction';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import { useHomePageMiniCommonListGoMoreAndGoDetail } from '../article/common/CommonContent';
import { GetContentListParams } from '@/api/CommonContent';
import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import HomeTitle from '../parts/HomeTitle.vue';
import Box2LineLargeImageUserShadow from '../parts/Box2LineLargeImageUserShadow.vue';
import Box2LineImageRightShadow from '../parts/Box2LineImageRightShadow.vue';
import ScenicSpotContent from '@/api/fusion/ScenicSpotContent';
import FlexRow from '@/components/layout/FlexRow.vue';
import Footer from '@/components/display/Footer.vue';

const spotData = useSimpleDataLoader(async () => 
  (await ScenicSpotContent.getContentList(new GetContentListParams(), 1, 4)).list.map(p => ({
    id: p.id,
    title: p.title, 
    desc: p.desc, 
    image: p.thumbnail || p.image,
    bottomTags: [
      p.levelText, 
      p.ichTypeText, 
      p.batchText,
      p.regionText,
    ] as string[],
  }))
);

const {
  loader: songsData,
  goDetail: goSongsDetail,
} = useHomePageMiniCommonListGoMoreAndGoDetail({
  title: '闽南时尚',
  mainBodyColumnId: [315],
  modelId: 16,
  itemType: 'article-common',
  detailsPage: '/pages/video/details',
});

const {
  loader: corseData,
  goList: goCourseList,
  goDetail: goCourseDetail,
} = useHomePageMiniCommonListGoMoreAndGoDetail({
  title: '闽南语在线课程',
  mainBodyColumnId: [257/* ,235,237,210 */],
  modelId: 5,
  itemType: 'article-common',
  detailsPage: '/pages/video/details',
});

const {
  loader: routeData,
  goList: goRouteList,
  goDetail: goRouteDetail,
} = useHomePageMiniCommonListGoMoreAndGoDetail({
  title: '旅游路线',
  mainBodyColumnId: [274,275,276,277],
  modelId: 17,
  itemType: 'article-common',
  detailsPage: '/pages/article/details',
});

const {
  loader: recommendData,
  goList: goRecommendList,
  goDetail: goRecommendDetail,
} = useHomePageMiniCommonListGoMoreAndGoDetail({
  title: '文化景区',
  mainBodyColumnId: 273,
  modelId: 17,
  itemType: 'article-common',
  detailsPage: '/pages/article/details',
});

const {
  loader: creativeData,
  goList: goCreativeList,
  goDetail: goCreativeDetail,
} = useHomePageMiniCommonListGoMoreAndGoDetail({
  title: '文化产品',
  mainBodyColumnId: 48,
  modelId: 9,
  itemType: 'article-common',
  detailsPage: '/pages/article/details',
});
</script>