mingnan/src/pages/discover.vue

<template>
  <view class="home-container page-discover d-flex flex-col bg-base">
    <image 
      class="position-absolute title"
      src="/static/images/discover/Title.png"
      mode="widthFix"
    />
    <view class="content d-flex flex-col wing-l">
      
      <!-- 文化百科 -->
      <HomeTitle title="文化百科" />
      <view class="d-flex flex-row justify-between">
        <view 
          v-for="(item, i) in categories" 
          :key="i"
          class="d-flex flex-col align-center"
          @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>

      <!-- 闽南语猜猜猜 -->
      <view class="home-title">
        <text>闽南语猜猜猜</text>
      </view>
      <Box2LinePlayRightArrow 
        title="听语音猜词语"
        desc="每日更新，赢取积分"
        @click="navTo('/pages/answer/words/index')"
      />

      <!-- 文化挑战 -->
      <HomeTitle title="文化挑战" />
      <!-- 
      方言配音大赛隐藏
      <Box2LineRightSlot 
        title="方言配音大赛"
        desc="参与人数：1,234"
        @click="navTo('/pages/answer/index')"
      >
        <image class="width-60 height-60 radius-base" src="/static/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/answer/index')">立即报名</u-button>
        </view>
      </Box2LineRightSlot>

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

      <!-- 老照片 -->
      <HomeTitle title="老照片" showMore />
      <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">
              <image class="width-300 radius-base" :src="item.image" mode="widthFix" />
            </view>
          </view>
        </scroll-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 CategoryIcon1 from '/static/images/discover/CategoryIcon1.png';
import CategoryIcon2 from '/static/images/discover/CategoryIcon2.png';
import CategoryIcon3 from '/static/images/discover/CategoryIcon3.png';
import CategoryIcon4 from '/static/images/discover/CategoryIcon4.png';
import CategoryIcon5 from '/static/images/discover/CategoryIcon5.png';
import ImageTest2 from '/static/images/home/ImageTest2.jpg';
import ImageTest3 from '/static/images/home/ImageTest3.jpg';
import ImageTest4 from '/static/images/home/ImageTest4.jpg';
import ImageTest5 from '/static/images/home/ImageTest5.jpg';
import UserHead from '/static/images/home/UserHead.png';
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';

const categories = [
  { 
    name: '民俗文化', 
    icon: CategoryIcon1  , 
    onClick: () => navTo('/pages/article/common/list', {
      title: '民俗文化',
      mainBodyColumnId: 0,
      modelId: 0,
      itemType: 'article-common',
      detailsPage: '/pages/article/details',
    }) 
  },
  { 
    name: '建筑遗产', 
    icon: CategoryIcon2  , 
    onClick: () => navTo('/pages/article/common/list', {
      title: '建筑遗产',
      mainBodyColumnId: 0,
      modelId: 0,
      itemType: 'article-common',
      detailsPage: '/pages/article/details',
    }) 
  },
  { 
    name: '戏曲艺术', 
    icon: CategoryIcon3  , 
    onClick: () => navTo('/pages/article/common/list', {
      title: '戏曲艺术',
      mainBodyColumnId: 0,
      modelId: 0,
      itemType: 'article-common',
      detailsPage: '/pages/article/details',
    }) 
  },
  { 
    name: '闽南美食', 
    icon: CategoryIcon4 , 
    onClick: () => navTo('/pages/article/common/list', {
      title: '闽南美食',
      mainBodyColumnId: 0,
      modelId: 0,
      itemType: 'article-common',
      detailsPage: '/pages/article/details',
    })  
  },
  { 
    name: '宗教信仰', 
    icon: CategoryIcon5  , 
    onClick: () => navTo('/pages/article/common/list', {
      title: '宗教信仰',
      mainBodyColumnId: 0,
      modelId: 0,
      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 imagesData = useSimpleDataLoader(async () => {
  return [
    {
      image: ImageTest2,
    },
    {
      image: ImageTest3, 
    },
    {
      image: ImageTest4,
    },
    {
      image: ImageTest5,  
    }
  ]
});
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>