mingnan/src/pages/discover.vue

<template>
  <view class="home-container page-discover d-flex flex-col bg-base">
    <image 
      class="position-absolute title"
      src="https://mncdn.wenlvti.net/app_static/minnan/images/discover/Title.png"
      mode="widthFix"
    />
    <view class="content d-flex flex-col wing-l">
      
      <!-- 文化百科 -->
      <HomeTitle title="文化百科" />
      <scroll-view scroll-x>
        <view class="d-flex flex-row">
          <view 
            v-for="(item, i) in categories" 
            :key="i"
            class="width-150 d-flex flex-col align-center flex-shrink-0"
            @click="item.onClick"
          >
            <image :src="item.icon" class="width-100 height-100" />
            <text class="width-130 text-align-center mt-2 color-primary size-s">{{ item.name }}</text>
          </view>
        </view>
      </scroll-view>

      <!-- 闽南语猜猜猜 -->
      <!-- <view class="home-title">
        <text>闽南语猜猜猜</text>
      </view>
      <Box2LinePlayRightArrow 
        title="听语音猜词语"
        desc="每日更新，赢取积分"
        @click="navTo('/pages/article/web/ewebview', {
          url: 'https://mncdn.wenlvti.net/assets/addons/yunexamine/h5/#/pages/home/dashboard'
        })"
      /> -->

      <!-- 文化挑战 -->
      <HomeTitle title="文化挑战" />
      <!-- 
      方言配音大赛隐藏
      <Box2LineRightSlot 
        title="方言配音大赛"
        desc="参与人数：1,234"
        @click="navTo('/pages/answer/index')"
      >
        <image class="width-60 height-60 radius-base" src="https://mncdn.wenlvti.net/app_static/minnan/images/discover/IconCup.png" mode="aspectFill" />
      </Box2LineRightSlot> -->
      <Box2LineRightSlot
        title="非遗百科问答"
        desc="可获积分：500"
      >
        <view class="width-1-5">
          <u-button shape="circle" type="primary" @click="navTo('/pages/article/web/ewebview', {
            url: 'https://mncdn.wenlvti.net/assets/addons/yunexamine/h5/#/pages/home/dashboard'
          })">立即报名</u-button>
        </view>
      </Box2LineRightSlot>

      <!-- 文化社区 -->
      <!-- <HomeTitle title="文化社区" />
      <SimplePageContentLoader :loader="communityData">
        <view class="d-flex w-100 flex-row flex-wrap align-stretch justify-between">
          <Box2LineLargeImageUserShadow 
            v-for="(item, i) in communityData.content.value"
            :key="i"
            :title="item.title"
            :desc="item.desc"
            :image="item.thumbnail || item.image"
            :userName="item.userName"
            :userHead="item.userHead"
            :likes="item.likes"
            :comment="item.comment"
          />
        </view>
      </SimplePageContentLoader> -->

      <!-- 老照片 -->
      <HomeTitle title="老照片" showMore @clickMore="goImagesList" />
      <SimplePageContentLoader :loader="imagesData">
        <scroll-view scroll-x>
          <view class="d-flex flex-row">
            <view 
              v-for="(item, i) in imagesData.content.value"
              :key="i"
              class="mr-2"
              @click="goImagesDetail(item.id)"
            >
              <image 
                class="width-300 height-200 radius-base"
                :src="item.image"
                mode="aspectFill"
              />
            </view>
          </view>
        </scroll-view>
      </SimplePageContentLoader>

      
      <!-- 闽南文化资讯 -->
      <HomeTitle title="闽南文化资讯" />
      <SimplePageContentLoader :loader="cultureData">
        <view class="d-flex w-100 flex-row flex-wrap align-stretch justify-between">
          <Box2LineLargeImageUserShadow 
            v-for="(item, i) in cultureData.content.value"
            :key="i"
            :title="item.title"
            :desc="item.desc"
            :image="item.thumbnail || item.image"
            fixSize
            @click="goCultureDetail(item.id)"
          />
        </view>
      </SimplePageContentLoader> 

      <!-- 热门话题 -->
      <!-- <HomeTitle title="热门话题" />
      <SimplePageContentLoader :loader="topicsData">
        <view class="d-flex flex-col">
          <Box2LineRightShadow 
            v-for="(item, i) in topicsData.content.value" 
            :key="i" 
            :title="item.title"
            :desc="item.desc"
            :right="item.right"
          />
        </view>
      </SimplePageContentLoader> -->

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

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

const CategoryIcon1 = 'https://mncdn.wenlvti.net/app_static/minnan/images/discover/CategoryIcon1.png';
const CategoryIcon2 = 'https://mncdn.wenlvti.net/app_static/minnan/images/discover/CategoryIcon2.png';
const CategoryIcon3 = 'https://mncdn.wenlvti.net/app_static/minnan/images/discover/CategoryIcon3.png';
const CategoryIcon4 = 'https://mncdn.wenlvti.net/app_static/minnan/images/discover/CategoryIcon4.png';
const CategoryIcon5 = 'https://mncdn.wenlvti.net/app_static/minnan/images/discover/CategoryIcon5.png';
const ImageTest2 = 'https://mncdn.wenlvti.net/app_static/minnan/images/home/ImageTest2.jpg';
const ImageTest3 = 'https://mncdn.wenlvti.net/app_static/minnan/images/home/ImageTest3.jpg';
const ImageTest4 = 'https://mncdn.wenlvti.net/app_static/minnan/images/home/ImageTest4.jpg';
const ImageTest5 = 'https://mncdn.wenlvti.net/app_static/minnan/images/home/ImageTest5.jpg';
const UserHead = 'https://mncdn.wenlvti.net/app_static/minnan/images/home/UserHead.png';
const categories = [
  { 
    name: '海洋文化', 
    icon: CategoryIcon5  , 
    onClick: () => navTo('/pages/article/common/list', {
      title: '海洋文化',
      mainBodyColumnId: 254,
      modelId: 3,
      itemType: 'article-common',
      detailsPage: '/pages/article/details',
    }) 
  },
  { 
    name: '建筑遗产', 
    icon: CategoryIcon2  , 
    onClick: () => navTo('/pages/article/common/list', {
      title: '建筑遗产',
      mainBodyColumnId: 252,
      modelId: 3,
      itemType: 'article-common',
      detailsPage: '/pages/article/details',
    }) 
  },
  { 
    name: '闽南美食', 
    icon: CategoryIcon4 , 
    onClick: () => navTo('/pages/article/common/list', {
      title: '闽南美食',
      mainBodyColumnId: 103,
      modelId: 8,
      itemType: 'article-common',
      detailsPage: '/pages/article/details',
    })  
  },
  { 
    name: '戏剧曲艺', 
    icon: CategoryIcon3  , 
    onClick: () => navTo('/pages/article/common/list', {
      title: '戏剧曲艺',
      mainBodyColumnId: '240,241',
      modelId: 3,
      itemType: 'article-common',
      detailsPage: '/pages/article/details',
    }) 
  },
  { 
    name: '音乐舞蹈', 
    icon: CategoryIcon3  , 
    onClick: () => navTo('/pages/article/common/list', {
      title: '音乐舞蹈',
      mainBodyColumnId: 239,
      modelId: 3,
      itemType: 'article-common',
      detailsPage: '/pages/article/details',
    }) 
  },
  { 
    name: '闽南民俗', 
    icon: CategoryIcon1  , 
    onClick: () => navTo('/pages/introduction/custom/list') 
  },
  { 
    name: '美术技艺', 
    icon: CategoryIcon1  , 
    onClick: () => navTo('/pages/article/common/list', {
      title: '美术技艺',
      mainBodyColumnId: 314,
      modelId: 3,
      itemType: 'article-common',
      detailsPage: '/pages/article/details',
    }) 
  },
  /* { 
    name: '宗教信俗', 
    icon: CategoryIcon5  , 
    onClick: () => navTo('/pages/article/common/list', {
      title: '宗教信俗',
      mainBodyColumnId: 248,
      modelId: 4,
      itemType: 'article-common',
      detailsPage: '/pages/article/details',
    }) 
  }, */
];
const communityData = useSimpleDataLoader(async () => {
  return [
    { 
      title: '茶艺传承作坊', 
      desc: '',
      image: ImageTest4,
      likes: 123,
      comment: 66,
      userHead: UserHead,
      userName: 'Regular',
    },
    { 
      title: '茶艺传承作坊', 
      desc: '', 
      image: ImageTest2,
      likes: 123,
      comment: 66,
      userHead: UserHead,
      userName: 'Regular',
    },
    { 
      title: '茶艺传承作坊',  
      desc: '',
      image: ImageTest3,
      likes: 123,
      comment: 66,
      userHead: UserHead,
      userName: 'Regular',
    },
    { 
      title: '茶艺传承作坊',  
      desc: '',
      image: ImageTest5,
      likes: 123,
      comment: 66,
      userHead: UserHead,
      userName: 'Regular',
    },
  ]
});

const {
  loader: cultureData,
  goList: goCultureList,
  goDetail: goCultureDetail,
} = useHomePageMiniCommonListGoMoreAndGoDetail({
  title: '闽南文化',
  mainBodyColumnId: [252,253,254],
  modelId: 3,
  itemType: 'article-common',
  detailsPage: '/pages/article/details',
});

const {
  loader: imagesData,
  goList: goImagesList,
  goDetail: goImagesDetail,
} = useHomePageMiniCommonListGoMoreAndGoDetail({
  title: '老照片',
  mainBodyColumnId: 102,
  modelId: 8,
  itemType: 'image-large-2',
  detailsPage: '/pages/article/details',
});

const topicsData = useSimpleDataLoader(async () => {
  return [
    {
      title: '宗族文化探讨',
      desc: '关于闽南宗教的传承与发展',
      right: '234 人参与讨论', 
    },
    {
      title: '宗族文化探讨',
      desc: '关于闽南宗教的传承与发展',
      right: '234 人参与讨论', 
    },
  ]
});
</script>

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

  .grid4-item {
    width: 330rpx;
  }
}
</style>