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="https://mn.wenlvti.net/app_static/minnan/images/home/BackgroundBanner.jpg"
      mode="widthFix"
    />
    <view class="content d-flex flex-col wing-l">

      <!-- 分栏 -->
      <view class="shadow-l radius-l bg-base p-3">
        <view 
          class="main-banner-box"
          @click="navTo('home/introduction')"
        >
          <text class="title">闽南文化生态保护区(厦门市)</text>
          <text>世界闽南文化交流中心</text>
          <view class="more">
            <text>查看详情</text>
          </view>
          <image 
            class="footer"
            src="https://mn.wenlvti.net/app_static/minnan/images/home/MainBanner2.png"
            mode="widthFix"
          />
        </view>
        <view class="position-relative d-flex flex-row flex-wrap justify-between mt-3">

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

          <Box1AudioPlay
            class="w-100 mt-3" 
            :title="indexAudioPlayer.currentTitle.value"
            :image="indexAudioPlayer.currentItem?.value?.image"
            :playState="indexAudioPlayer.isPlaying.value"
            :playTime="indexAudioPlayer.timeString.value"
            @playPauseClick="indexAudioPlayer.playpause"
            @nextClick="indexAudioPlayer.next"
            @prevClick="indexAudioPlayer.prev"
            @arrowClick="handleGoAudioList"
          />
        </view>
      </view>

      <!-- 数据统计 -->
      <SimplePageContentLoader :loader="statsLoader">
        <view v-if="statsLoader.content.value" class="d-flex flex-col mt-3 pt-3 b-3 b-0order-all-light-light-primary">
          
          <view class="d-flex flex-row">
            <StatsText 
              class="border-right-forth"
              :title="statsLoader.content.value[0].title" 
              :data="statsLoader.content.value[0].datas" 
            />
            <StatsText 
              :title="statsLoader.content.value[1].title" 
              :data="statsLoader.content.value[1].datas" 
            />
          </view>
          <StatsText
            class="border-top-forth pt-2 mt-3"
            :data="statsLoader.content.value[2].datas" 
          />
        </view>
      </SimplePageContentLoader>

      <!-- 文化地图 -->
      <HomeTitle title="文化地图" />
      <view class="position-relative radius-l overflow-hidden">
        <map 
          id="map"
          class="w-100 height-400"
          :markers="mapLoader.content.value || []"
          :enable-zoom="false"
          :enable-scroll="false"
          :scale="15"
          @click="navTo('inhert/map/index', { tab: mapTab })"
        />
        <scroll-view class="map-tags position-absolute" :scroll-x="true">
          <view class="tag-bar d-flex flex-row flex-nowrap">
            <view :class="mapTab == 1 ? 'active' : ''" @click="mapTab=1">
              <text class="iconfont icon-read" />
              非遗项目
            </view>
            <view :class="mapTab == 2 ? 'active' : ''" @click="mapTab=2">
              <text class="iconfont icon-task-trip" />
              非遗传习所
            </view>
            <view :class="mapTab == 3 ? 'active' : ''" @click="mapTab=3">
              <text class="iconfont icon-task-buliding" />
              文物古迹
            </view>
            <view :class="mapTab == 4 ? 'active' : ''" @click="mapTab=4">
              <text class="iconfont icon-place" />
              传统村落
            </view>
            <view :class="mapTab == 5 ? 'active' : ''" @click="mapTab=5">
              <text class="iconfont icon-task-environment-3" />
              闽南文化景区
            </view>
          </view>
        </scroll-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.thumbnail || 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"
            @click="handleGoDetails(tab)"
          >
            <text 
              class="tag bg-mask-white color-primary radius-l p-1 position-absolute size-s text-lines-1"
            >
              {{ tab.title }}
            </text> 
            <image
              class="w-100 height-250 radius-base"
              :src="tab.thumbnail || tab.image || AppCofig.defaultImage"
              mode="aspectFill"
            />
          </view>
        </view>
      </SimplePageContentLoader>
    </view>
  </view>
  <tabbar :current="0"></tabbar>
</template>

<script setup lang="ts">
const MainBoxIcon1 = 'https://mn.wenlvti.net/app_static/minnan/images/home/MainBoxIcon1.png';
const MainBoxIcon2 = 'https://mn.wenlvti.net/app_static/minnan/images/home/MainBoxIcon2.png';
const MainBoxIcon3 = 'https://mn.wenlvti.net/app_static/minnan/images/home/MainBoxIcon3.png';
const MainBoxIcon4 = 'https://mn.wenlvti.net/app_static/minnan/images/home/MainBoxIcon4.png';
const MainBoxIcon5 = 'https://mn.wenlvti.net/app_static/minnan/images/home/MainBoxIcon5.png';
const MainBoxIcon6 = 'https://mn.wenlvti.net/app_static/minnan/images/home/MainBoxIcon6.png';
const MainBoxIcon7 = 'https://mn.wenlvti.net/app_static/minnan/images/home/MainBoxIcon7.png';
const MainBoxIcon8 = 'https://mn.wenlvti.net/app_static/minnan/images/home/MainBoxIcon8.png';
const ImageTest = 'https://mn.wenlvti.net/app_static/minnan/images/home/ImageTest.jpg';

import { ref, watch } from 'vue';
import { navTo } from '@/common/utils/PageAction';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import { useSimpleListAudioPlayer } from '@/common/composeabe/SimpleAudioPlayer';
import CommonContent, { GetContentListParams } from '@/api/CommonContent';
import UnmoveableContent from '@/api/inheritor/UnmoveableContent';
import SeminarContent from '@/api/inheritor/SeminarContent';
import ProjectsContent from '@/api/inheritor/ProjectsContent';
import ProductsContent from '@/api/inheritor/ProductsContent';
import AppCofig from '@/common/config/AppCofig';
import VillageApi from '@/api/inhert/VillageApi';
import ScenicSpotContent from '@/api/fusion/ScenicSpotContent';
import IndexContent from '@/api/introduction/IndexContent';
import StatsText from './parts/StatsText.vue';
import HomeTitle from '@/pages/parts/HomeTitle.vue'; 
import Tabbar from '@/common/components/tabs/tabbar.vue';
import Box1AudioPlay from '@/pages/parts/Box1AudioPlay.vue';
import SimplePageContentLoader from "@/common/components/SimplePageContentLoader.vue";

const subTabs = [
  { 
    name: '非遗项目', 
    icon: MainBoxIcon6 , 
    onClick: () => navTo('/pages/inhert/intangible/list')
  },
  { 
    name: '文物古迹', 
    icon: MainBoxIcon5 , 
    onClick: () => navTo('/pages/inhert/artifact/list') 
  },
  { 
    name: '老字号', 
    icon: MainBoxIcon7 , 
    onClick: () => navTo('/pages/inhert/old/list') 
  },
  { 
    name: '传统村落', 
    icon: MainBoxIcon8 , 
    onClick: () => navTo('/pages/inhert/village/list')
  },
  { 
    name: '闽南语', 
    icon: MainBoxIcon1, 
    onClick: () => navTo('/pages/article/common/list', {
      title: '闽南语',
      mainBodyColumnId: '257,235,237,210',
      modelId: 5,
      itemType: 'article-common',
      detailsPage: '/pages/video/details',
    }) 
  },
  { 
    name: '闽南美食', 
    icon: MainBoxIcon2, 
    onClick: () => navTo('/pages/introduction/food/list') 
  },
  { name: '历史人物', icon: MainBoxIcon3, onClick: () => navTo('/pages/introduction/character/list') },
  { 
    name: '民俗信俗', 
    icon: MainBoxIcon4, 
    onClick: () => navTo('/pages/article/common/list', {
      title: '民俗信俗', 
      mainBodyColumnId: 299,
      modelId: 18,
      itemType: 'article-common',
      detailsPage: '/pages/article/details',
    }) 
  },
];

const mapCtx = uni.createMapContext('map');
const mapTab = ref(1);
const mapLoader = useSimpleDataLoader(async () => {
  let list ;
  switch (mapTab.value) {
    default:
    case 1:
      list = (await ProjectsContent.getContentList(new GetContentListParams(), 1, 6)).list
      break;
    case 2:
      list = (await SeminarContent.getContentList(new GetContentListParams(), 1, 6)).list
      break;
    case 3:
      list = (await UnmoveableContent.getContentList(new GetContentListParams(), 1, 6)).list
      break;
    case 4:
      list = (await VillageApi.getVallageList()).slice(1, 10)
      break;
    case 5:
      list = (await ScenicSpotContent.getContentList(new GetContentListParams(), 1, 6)).list
      break;
  }  
  const res = list.map((p) => {
    return {
      ...p,
      id: p.id,
      longitude: Number(p.longitude),
      latitude: Number(p.latitude),
      iconPath: p.thumbnail,
      width: 40,
      height: 40,
    };
  });
  mapCtx.includePoints({
    points: res.map(p => {
      if (!p.longitude || !p.latitude) {
        p.longitude = AppCofig.defaultLonLat[0];
        p.latitude = AppCofig.defaultLonLat[1];
      }
      return {
        latitude: p.latitude,
        longitude: p.longitude,
      }
    }),
    padding: [20, 20, 20, 20],
  });
  return res;
}, true, undefined, true);

watch(mapTab, () => mapLoader.loadData(undefined, true));

const indexAudioPlayer = useSimpleListAudioPlayer(async () => {
  return (await CommonContent.getContentList(new GetContentListParams()
    .setModelId(5)
    .setMainBodyColumnId(313)
  , 1, 6)).list.sort(() => Math.random()>0.5?-1:1).map((p) => {
    return {
      id: p.id,
      title: p.title,
      image: p.thumbnail || p.image,
      src: p.audio as string, 
    }
  });
})
function handleGoAudioList() {
  navTo('/pages/article/common/list', {
    title: '闽南语',
    mainBodyColumnId: 313,
    modelId: 5,
    itemType: 'article-common',
    detailsPage: '/pages/video/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 () => {
  const list = [];
  list.push(...(await ProjectsContent.getContentList(new GetContentListParams(), 1, 6)).list.map((p) => {
    p.itemType = 'intangible';
    return p;
  }));
  list.push(...(await CommonContent.getContentList(new GetContentListParams()
    .setModelId(1)
  , 1, 6)).list.map((p) => {
    p.itemType = 'artifact';
    return p;
  }));
  list.push(...(await ProductsContent.getContentList(new GetContentListParams(), 1, 6)).list.map((p) => {
    p.itemType = 'intangible';
    return p;
  }));
  return list;
});
const statsLoader = useSimpleDataLoader(async () => {
  const data = (await IndexContent.getStats());
  console.log(data);

  const semiCount = (await SeminarContent.getContentList(new GetContentListParams(), 1, 6)).total;
  const unmoveableCount = (await UnmoveableContent.getContentList(new GetContentListParams(), 1, 6)).total;
  
  return [
    {
      title: '非遗项目',
      type: '1',
      datas: data.ichData.map((item: any) => {
        return {
          title: item.level_text,
          value: item.total,
          onClick: () => navTo('/pages/inhert/intangible/list', { tab: 0, level: item.level_text }),
        }
      })
    },
    {
      title: '非遗传承人',
      type: '2',
      datas: data.inheritorData.map((item: any) => {
        return {
          title: item.title,
          value: item.total,
          onClick: () => navTo('/pages/inhert/inheritor/list', { level: item.title }),
        }
      })
    },
    {
      datas: [
        {
          title: '传习所',
          value: semiCount,
          onClick: () => navTo('/pages/inhert/map/index', { tab: 2 }),
        },
        {
          title: '传统村落',
          value: data.villageData[0].total,
          onClick: () => navTo('/pages/inhert/village/list'),
        },
        {
          title: '文物古迹',
          value: unmoveableCount,
          onClick: () => navTo('/pages/inhert/artifact/list'),
        },
      ],
    },
    {
      title: '不可移动文物',
      type: '3',
      datas: data.crData.map((item: any) => {
        return {
          title: item.title,
          value: item.total
        }
      })
    },
    {
      title: '闽南文化重要相关文物古迹',
      type: '2',
      datas: data.minnanCr.map((item: any) => {
        return {
          title: item.title,
          value: item.total
        }
      })
    },
    {
      title: '重要相关历史风貌区',
      type: '1',
      datas: data.historyData.map((item: any) => {
        return {
          title: item.title,
          value: item.total
        }
      })
    },
    {
      title: '传习中心',
      type: '3',
      datas: data.ichCenter.map((item: any) => {
        return {
          title: item.title,
          value: item.total
        }
      })
    },
  ]

});

function handleGoDetails(item: any) {
  switch (item.itemType) {
    case 'artifact': 
      navTo('/pages/inhert/artifact/details', { id: item.id });
      break;
    case 'intangible': 
      navTo('/pages/inhert/intangible/details', { id: item.id });
      break;
    default:
      navTo('/pages/article/details', { id: item.id });
      break;
  }
}

</script>

<style lang="scss">
.page-home {
  .content {
    margin-top: 470rpx;
  }

  .map-tags {
    left: 0;
    top: 0;
    padding: 15rpx 0;
    font-size: 25rpx;

    .tag-bar {
      padding: 0 20rpx;

      view {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-shrink: 0;
        border-radius: 40rpx;
        padding: 10rpx 15rpx;
        background-color: #f7f3e8;
        color: #d9492e;
        margin-right: 10rpx;

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

    .tag {
      top: 2rpx; 
      right: 2rpx;
    }
  }
  .main-banner-box {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 15rpx;
    background: linear-gradient(180deg, #E5CDAB 0%, #F0E3D6 100%), #F7F3E8;
    padding: 20rpx;
    font-family: "SongtiSCBlack";
    color: #432A04;

    .title {
      font-size: 40rpx;
    }
    text {
      font-size: 35rpx;
      margin-top: 10rpx;
    }
    .more {
      margin-top: 30rpx;
      padding: 10rpx 20rpx;
      width: 150rpx;
      background-image: url('https://mn.wenlvti.net/app_static/minnan/images/home/MainBanner.png');
      background-size: 100% auto;
      background-repeat: no-repeat;

      text {
        font-family: initial;
        font-size: 30rpx;
      }
    }
    .footer {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 370rpx;
      z-index: 2;
      height: auto;
    }
  }
}
</style>