mingnan/src/pages/home.vue

<template>
  <view class="home-container page-home d-flex flex-col bg-base">
    <image 
      class="w-100 position-absolute"
      src="/static/images/home/BackgroundBanner.jpg"
      mode="widthFix"
    />
    <image 
      class="w-60 position-absolute title"
      src="/static/images/home/Title.png"
      mode="widthFix"
    />
    <view class="content d-flex flex-col wing-l">

      <!-- 分栏 -->
      <view class="shadow-l radius-l bg-base p-3">
        <image 
          class="w-100"
          src="/static/images/home/MainBanner.jpg"
          mode="widthFix"
          @click="navTo('home/introduction')"
        />
        <view class="position-relative d-flex flex-row flex-wrap justify-between mt-3">
          <view  
            v-for="(tab, k) in subTabs1" 
            :key="k"
            class="d-flex flex-column align-center width-1-5 mt-2"
            @click="tab.onClick"
          >
            <image class="width-100" :src="tab.icon" mode="widthFix" />
            <text class="color-second-text mt-2">{{ tab.name }}</text>
          </view>

          <Box1AudioPlay class="w-100 mt-3 mb-3" title="里厚吖：你好呀" />

          <view  
            v-for="(tab, k) in subTabs2" 
            :key="k"
            class="d-flex flex-column align-center width-1-5 mt-2"
            @click="tab.onClick"
          >
            <image class="width-100" :src="tab.icon" mode="widthFix" />
            <text class="color-second-text mt-2">{{ tab.name }}</text>
          </view>
        </view>
      </view>

      <!-- 文化地图
      <HomeTitle title="文化地图" />
      <view class="position-relative radius-l overflow-hidden">
        <map 
          class="w-100 height-400"
        />
        <view class="position-absolute map-tags d-flex flex-row">
          <view class="active">
            <text class="iconfont icon-read" />
            文物
          </view>
          <view>
            <text class="iconfont icon-task-trip" />
            非遗
          </view>
          <view>
            <text class="iconfont icon-tougao-01" />
            传习所
          </view>
        </view>
      </view> -->

      <!-- 近期活动 -->
      <HomeTitle title="近期活动" />
      <SimplePageContentLoader :loader="activityLoader">
        <view 
          class="d-flex flex-col shadow-l radius-l bg-base p-3"
          v-for="(item, k) in activityLoader.content.value"
          :key="k"
        >
          <image 
            class="w-100 radius-base"
            :src="item.image"
            mode="widthFix"
          />
          <view class="d-flex flex-row justify-between mt-3">
            <text class="color-primary size-l">{{ item.title }}</text>
            <text class="color-primary">剩余名额：{{item.count}}</text>
          </view>
          <view class="d-flex flex-row justify-between align-center mt-3">
            <view class="d-flex flex-one flex-col">
              <view class="d-flex flex-row align-center">
                <image :src="IconLocation" class="width-30 height-30 mr-3" />
                <text class="color-second size-l">{{ item.location }}</text>
              </view>
              <text class="color-second">
                <text class="iconfont icon-time mr-2" />
                {{ item.time }}
              </text>
            </view>
            <view class="width-1-5">
              <u-button shape="circle" type="primary">立即报名</u-button>
            </view>
          </view>
        </view>
      </SimplePageContentLoader>

      <!-- 精彩推荐 -->
      <HomeTitle title="精彩推荐" />
      <SimplePageContentLoader :loader="recommendLoader">
        <view class="d-flex flex-row justify-between flex-wrap">
          <view 
            v-for="(tab, k) in recommendLoader.content.value"
            :key="k"
            class="grid4-item position-relative mb-3"
          >
            <text 
              class="tag bg-mask-white color-primary radius-l p-2 position-absolute size-s"
            >
              {{ tab.title }}
            </text> 
            <image
              class="w-100 radius-base"
              :src="tab.image"
              mode="widthFix"
            />
          </view>
        </view>
      </SimplePageContentLoader>
    </view>
  </view>
  <tabbar :current="0"></tabbar>
</template>

<script setup lang="ts">
import Tabbar from '@/common/components/tabs/tabbar.vue';
import MainBoxIcon1 from '/static/images/home/MainBoxIcon1.png';
import MainBoxIcon2 from '/static/images/home/MainBoxIcon2.png';
import MainBoxIcon3 from '/static/images/home/MainBoxIcon3.png';
import MainBoxIcon4 from '/static/images/home/MainBoxIcon4.png';
import MainBoxIcon5 from '/static/images/home/MainBoxIcon5.png';
import MainBoxIcon6 from '/static/images/home/MainBoxIcon6.png';
import MainBoxIcon7 from '/static/images/home/MainBoxIcon7.png';
import MainBoxIcon8 from '/static/images/home/MainBoxIcon8.png';
import ImageTest  from '/static/images/home/ImageTest.jpg';
import HomeTitle from '@/pages/parts/HomeTitle.vue'; 
import IconLocation from '/static/images/inhert/IconLocation.png';
import Box1AudioPlay from '@/pages/parts/Box1AudioPlay.vue';
import SimplePageContentLoader from "@/common/components/SimplePageContentLoader.vue";
import { navTo } from '@/common/utils/PageAction';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import CommonContent, { GetContentListParams } from '@/api/CommonContent';

const subTabs1 = [
  { 
    name: '闽南语', 
    icon: MainBoxIcon1, 
    onClick: () => navTo('/pages/article/common/list', {
      title: '闽南语',
      mainBodyColumnId: 0,
      modelId: 0,
      itemType: 'article-common',
      detailsPage: '/pages/video/details',
    }) 
  },
  { 
    name: '古早味', 
    icon: MainBoxIcon2, 
    onClick: () => navTo('/pages/article/common/list', {
      title: '古早味',
      mainBodyColumnId: 0,
      modelId: 0,
      itemType: 'article-common',
      detailsPage: '/pages/article/details',
    }) 
  },
  { name: '先贤列传', icon: MainBoxIcon3, onClick: () => navTo('/pages/introduction/character') },
  { 
    name: '民俗活动', 
    icon: MainBoxIcon4, 
    onClick: () => navTo('/pages/article/common/list', {
      title: '民俗活动', 
      mainBodyColumnId: 0,
      modelId: 0,
      itemType: 'article-common',
      detailsPage: '/pages/article/details',
    }) 
  },
]
const subTabs2 = [
  { 
    name: '红砖厝韵', 
    icon: MainBoxIcon5 , 
    onClick: () => navTo('/pages/article/common/list', {
      title: '红砖厝韵',
      mainBodyColumnId: 0,
      modelId: 0,
      itemType: 'article-common',
      detailsPage: '/pages/article/details',
    }) 
  },
  { 
    name: '薪传匠艺', 
    icon: MainBoxIcon6 , 
    onClick: () => navTo('/pages/article/common/list', {
      title: '薪传匠艺',
      mainBodyColumnId: 0,
      modelId: 0,
      itemType: 'article-common',
      detailsPage: '/pages/article/details',
    }) 
  },
  { 
    name: '工夫茶道', 
    icon: MainBoxIcon7 , 
    onClick: () => navTo('/pages/article/common/list', {
      title: '工夫茶道',
      mainBodyColumnId: 0,
      modelId: 0,
      itemType: 'article-common',
      detailsPage: '/pages/article/details',
    }) 
  },
  { 
    name: '文化地图', 
    icon: MainBoxIcon8 , 
    onClick: () => navTo('/pages/article/common/list', {
      title: '文化地图',
      mainBodyColumnId: 0,
      modelId: 0,
      itemType: 'article-common',
      detailsPage: '/pages/article/details',
    }) 
  },
]

const activityLoader = useSimpleDataLoader(async () => {
  //TODO: 活动接口
  return [
    {
      title: '茶艺传承工坊',
      image: ImageTest,
      count: 8,
      content: '这是一个活动的内容',
      time: '2025年06月16日 12:00',
      location: '湖里创新园',
      link: '/pages/article/details',
    }
  ]
})
const recommendLoader = useSimpleDataLoader(async () => {
  return (await CommonContent.getContentList(new GetContentListParams().setSelfValues({
    flag: 'recommend',
  }), 1, 6)).list
});
</script>

<style lang="scss">
.page-home {
  .map-tags {
    left: 0;
    top: 0;
    padding: 20rpx;

    view {
      border-radius: 40rpx;
      padding: 10rpx 20rpx;
      background-color: #f7f3e8;
      color: #d9492e;
      margin-right: 10rpx;

      &.active {
        background-color: #d9492e;
        color: #f7f3e8;
      }
    }
  }
  .grid4-item {
    width: 320rpx;

    .tag {
      top: 2rpx; 
      right: 2rpx;
    }
  }
}
</style>