minnan/src/pages/inhert.vue

<template>
  <view class="home-container page-inhert d-flex flex-col bg-base">
    <image 
      class="position-absolute title"
      src="/static/images/inhert/Title.png"
      mode="widthFix"
    />
    <view class="content d-flex flex-col ">
      
      <!-- 文物 -->
      <HomeTitle title="文物" showMore inWing @clickMore="navTo('inhert/artifact/list')" />
      <SimplePageContentLoader :loader="artifactData">
        <scroll-view scroll-x>
          <view class="padding-wing-l pb-3 pt-3 d-flex flex-row overflow-visible align-stretch">
            <Box2LineLargeImageUserShadow
              v-for="(item, i) in artifactData.content.value"
              classNames="width-2-5 mr-2"
              titleColor="title-text"
              :key="i"
              :title="item.title"
              :image="item.image"
              :likes="item.likes"
              :comment="item.comment"
              title1
              @click="navTo('inhert/artifact/details', { id: item.id })"
            />
          </view>
        </scroll-view>
      </SimplePageContentLoader>

      <!-- 非遗 -->
      <HomeTitle title="非遗" showMore inWing @clickMore="navTo('inhert/intangible/list')" />
      <SimplePageContentLoader :loader="intangibleData" >
        <scroll-view scroll-x>
          <view class="padding-wing-l pb-3 pt-3 d-flex flex-row overflow-visible align-stretch">
            <Box2LineLargeImageUserShadow
              v-for="(item, i) in intangibleData.content.value"
              classNames="width-2-3 mr-2"
              titleColor="title-text"
              :key="i"
              :title="item.title"
              :desc="item.desc"
              :image="item.image"
              :bottomLocate="item.bottomLocate"
              :bottomScore="item.bottomScore"
              @click="navTo('inhert/intangible/details', { id: item.id })"
            />
          </view>
        </scroll-view>
      </SimplePageContentLoader>

      <!-- 闽南语在线课程 -->
      <HomeTitle title="闽南语在线课程" showMore inWing @clickMore="goCourseList" />
      <SimplePageContentLoader :loader="corseData" >
        <scroll-view scroll-x>
          <view class="padding-wing-l 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"
              :key="i"
              :title="item.title"
              :desc="item.desc"
              :image="item.image"
              :videoMark="true"
              @click="goCourseDetail(item.id)"
            />
          </view>
        </scroll-view>
      </SimplePageContentLoader>

      <view class="d-flex flex-col wing-l">
        <!-- 闽南语原创歌曲 -->
        <HomeTitle title="闽南语原创歌曲" showMore @clickMore="goSongsList" />

        <SimplePageContentLoader :loader="songsData" >
          <Box1AudioPlay 
            v-for="s in songsData.content.value" 
            :key="s.id"
            :title="s.title" 
            class="w-100 mt-3" 
            @click="goSongsDetail(s.id)"
          />
        </SimplePageContentLoader>

        <!-- 方言故事音频库 -->
        <HomeTitle title="方言故事音频库" showMore @clickMore="goStoryList" />
        <SimplePageContentLoader :loader="storyData" >
          <Box2LinePlayRightArrow 
            v-for="s in songsData.content.value" 
            :key="s.id"
            :title="s.title" 
            :desc="s.desc"
            @click="goStoryDetail(s.id)"
          />
        </SimplePageContentLoader>
      </view>

      <!-- 童趣记忆 -->
      <HomeTitle title="童趣记忆" showMore inWing @clickMore="goMemoryList" />
      <SimplePageContentLoader :loader="memoryData" >
        <scroll-view scroll-x>
          <view class="padding-wing-l pb-3 pt-3 d-flex flex-row overflow-visible align-stretch">
            <Box2LineLargeImageUserShadow
              v-for="(item, i) in memoryData.content.value"
              classNames="width-2-3 mr-2"
              titleColor="title-text"
              :key="i"
              :title="item.title"
              :desc="item.desc"
              :image="item.image"
              @click="goMemoryDetail(item.id)"
            />
          </view>
        </scroll-view>
      </SimplePageContentLoader>

      <!-- 老字号 -->
      <HomeTitle title="老字号" showMore inWing @clickMore="goOldList" />
      <SimplePageContentLoader :loader="oldData">
        <scroll-view scroll-x>
          <view class="padding-wing-l pb-3 pt-3 d-flex flex-row overflow-visible align-stretch">
            <Box2LineLargeImageUserShadow
              v-for="(item, i) in oldData.content.value"
              classNames="width-2-3 mr-2"
              titleColor="title-text"
              :key="i"
              :title="item.title"
              :desc="item.desc"
              :image="item.thumbnail"
              :bottomLocate="(item.regionText as string)"
              :bottomScore="''"
              @click="goOldDetail(item.id)"
            />
          </view>
        </scroll-view>
      </SimplePageContentLoader>

      <!-- 古早味知识百科 -->
      <view class="d-flex flex-col wing-l">
        <HomeTitle title="古早味知识百科" showMore @clickMore="goTopicsList" />
        <SimplePageContentLoader :loader="topicsData">
          <Box2LineRightShadow
            v-for="(item, i) in topicsData.content.value" 
            :key="i" 
            :title="item.title"
            :desc="item.desc"
            @click="goTopicsDetail(item.id)"
          />
        </SimplePageContentLoader>
      </view>

    </view>
  </view>
  <tabbar :current="2"></tabbar>
</template>

<script setup lang="ts">
import { navTo } from '@/common/utils/PageAction';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import { GetContentListParams } from '@/api/CommonContent';
import Tabbar from '@/common/components/tabs/tabbar.vue';
import HomeTitle from './parts/HomeTitle.vue';
import Box2LineLargeImageUserShadow from './parts/Box2LineLargeImageUserShadow.vue';
import Box2LinePlayRightArrow from './parts/Box2LinePlayRightArrow.vue';
import Box1AudioPlay from './parts/Box1AudioPlay.vue';
import Box2LineRightShadow from './parts/Box2LineRightShadow.vue';
import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';
import ProjectsContent from '@/api/inheritor/ProjectsContent';
import UnmoveableContent from '@/api/inheritor/UnmoveableContent';
import { useHomePageMiniCommonListGoMoreAndGoDetail } from './article/common/CommonContent';

const artifactData = useSimpleDataLoader(async () => 
  (await UnmoveableContent.getContentList(new GetContentListParams().setSelfValues({
    type: GetContentListParams.TYPE_ARTICLE,
    flag: 'recommend',
  }), 1, 4)).list.map(p => ({
    id: p.id,
    title: p.title, 
    desc: '', 
    image: p.image,
    likes: p.likes,
    comment: p.comments,
  }))
);
const intangibleData = useSimpleDataLoader(async () => 
  (await ProjectsContent.getContentList(new GetContentListParams().setSelfValues({
    type: GetContentListParams.TYPE_ARTICLE,
    flag: 'recommend',
  }), 1, 4)).list.map(p => ({
    id: p.id,
    title: p.title, 
    desc: p.desc, 
    image: p.image,
    bottomLocate: p.area as string,
    bottomScore: '5.0',
  }))
);

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

const {
  loader: songsData,
  goList: goSongsList,
  goDetail: goSongsDetail,
} = useHomePageMiniCommonListGoMoreAndGoDetail({
  title: '闽南语原创歌曲',
  mainBodyColumnId: 189,
  modelId: 16,
  itemType: 'article-common',
  detailsPage: '/pages/video/details',
});

const {
  loader: storyData,
  goList: goStoryList,
  goDetail: goStoryDetail,
} = useHomePageMiniCommonListGoMoreAndGoDetail({
  title: '方言故事频率库',
  mainBodyColumnId: 235,
  modelId: 5,
  itemType: 'article-common',
  detailsPage: '/pages/video/details',
});

const {
  loader: memoryData,
  goList: goMemoryList,
  goDetail: goMemoryDetail,
} = useHomePageMiniCommonListGoMoreAndGoDetail({
  title: '童趣记忆',
  mainBodyColumnId: 96,
  modelId: 8,
  itemType: 'article-common',
  detailsPage: '/pages/article/details',
});

const {
  loader: oldData,
  goList: goOldList,
  goDetail: goOldDetail,
} = useHomePageMiniCommonListGoMoreAndGoDetail({
  title: '老字号',
  mainBodyColumnId: 312,
  modelId: 17,
  itemType: 'article-common',
  detailsPage: '/pages/article/details',
});

const {
  loader: topicsData,
  goList: goTopicsList,
  goDetail: goTopicsDetail,
} = useHomePageMiniCommonListGoMoreAndGoDetail({
  title: '古早味知识百科',
  mainBodyColumnId: 43,
  modelId: 8,
  itemType: 'article-common',
  detailsPage: '/pages/article/details',
});

</script>

<style lang="scss">
.page-inhert {
  > .content {
    margin-top: 10vh;
  }
  > .title {
    width: 100rpx;
  }
}
</style>