mingnan/src/pages/travel.vue

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

        <!-- 分栏 -->
        <view 
          class="position-relative d-grid mt-3"
          style="grid: repeat(2, 3fr) / auto-flow; grid-gap: 20rpx;"
        >
          <view  
            v-for="(tab, k) in subTabs" 
            :key="k"
            class="d-flex bg-light-light-primary radius-base p-2 flex-column align-center"
            @click="tab.onClick"
          >
            <image class="width-100" :src="tab.icon" mode="widthFix" />
            <text class="color-title-text mt-2">{{ tab.name }}</text>
          </view>
        </view>
      </view>

      <!-- 精品路线 -->
      <HomeTitle title="精品路线" showMore inWing @clickMore="goRouteList" />
      <SimplePageContentLoader :loader="routeData">
        <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 routeData.content.value"
              classNames="width-2-3 mr-2"
              titleColor="title-text"
              :key="i"
              :title="item.title"
              :desc="item.desc"
              :image="item.image"
              @click="goRouteDetail(item.id)"
            />
          </view>
        </scroll-view>
      </SimplePageContentLoader>

      <!-- 精选推荐 -->
      <HomeTitle title="精选推荐" showMore inWing @clickMore="goRecommendList" />
      <SimplePageContentLoader :loader="recommendData">
        <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 recommendData.content.value"
              classNames="width-2-3 mr-2"
              titleColor="title-text"
              :key="i"
              :title="item.title"
              title1
              :image="item.image"
              :bottomLocate="item.district"
              :bottomScore="'5.0'"
              @click="goRecommendDetail(item.id)"
            />
          </view>
        </scroll-view>
      </SimplePageContentLoader>

      <!-- 文创好物 -->
      <HomeTitle title="文创好物" showMore inWing @clickMore="goCreativeList" />
      <SimplePageContentLoader :loader="creativeData">
        <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 creativeData.content.value"
              classNames="width-2-3 mr-2"
              titleColor="title-text"
              :key="i"
              :title="item.title"
              :image="item.image"
              @click="goCreativeDetail(item.id)"
            />
          </view>
        </scroll-view>
      </SimplePageContentLoader>

      <!-- 近期活动 -->
      <!-- <view class="d-flex flex-col wing-l">
        <HomeTitle title="近期活动" showMore />
        <SimplePageContentLoader :loader="activityData">
          <Box2LineRightShadow
            v-for="(item, i) in activityData.content.value" 
            :key="i" 
            :title="item.title"
            :desc="item.desc"
            :right="item.right"
          >
            <template #left>
              <view class="d-flex flex-col justify-center align-center radius-base bg-light-light-primary p-25 pt-2 pb-2">
                <text class="color-primary size-s">12月</text>
                <text class="color-primary size-base text-bold">28</text>
              </view>
            </template>
          </Box2LineRightShadow>
        </SimplePageContentLoader>
      </view> -->
    </view>


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

<script setup lang="ts">
import Tabbar from '@/common/components/tabs/tabbar.vue';
import CategoryIcon1 from '@/static/images/travel/CategoryIcon1.png';
import CategoryIcon2 from '@/static/images/travel/CategoryIcon2.png';
import CategoryIcon3 from '@/static/images/travel/CategoryIcon3.png';
import CategoryIcon4 from '@/static/images/travel/CategoryIcon4.png';
import CategoryIcon5 from '@/static/images/travel/CategoryIcon5.png';
import CategoryIcon6 from '@/static/images/travel/CategoryIcon6.png';
import Box2LineLargeImageUserShadow from './parts/Box2LineLargeImageUserShadow.vue';
import HomeTitle from './parts/HomeTitle.vue';
import { useHomePageMiniCommonListGoMoreAndGoDetail } from './article/common/CommonContent';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import { navTo } from '@/common/utils/PageAction';
import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';

const subTabs = [
  { 
    name: '节庆日历', 
    icon: CategoryIcon1,
    onClick: () => navTo('/pages/travel/calendar'),
  },
  { 
    name: '文化景区', 
    icon: CategoryIcon2 , 
    onClick: () => navTo('/pages/article/common/list', {
      title: '文化景区',
      mainBodyColumnId: 273,
      modelId: 17,
      itemType: 'article-common',
      detailsPage: '/pages/article/details',
    }) 
  },
  { 
    name: '旅游路线', 
    icon: CategoryIcon3 , 
    onClick: () => navTo('/pages/article/common/list', {
      title: '旅游路线',
      mainBodyColumnId: '274,275,276,277',
      modelId: 17,
      itemType: 'article-common',
      detailsPage: '/pages/article/details',
    }) 
  },
  { 
    name: '文化产品', 
    icon: CategoryIcon4 , 
    onClick: () => navTo('/pages/article/common/list', {
      title: '文化产品',
      mainBodyColumnId: 48,
      modelId: 9,
      itemType: 'article-common',
      detailsPage: '/pages/article/details',
    }) 
  },
  { 
    name: '示范点', 
    icon: CategoryIcon5 , 
    onClick: () => navTo('/pages/article/common/list', {
      title: '示范点',
      mainBodyColumnId: 278,
      modelId: 17,
      itemType: 'article-common',
      detailsPage: '/pages/article/details',
    }) 
  },
  { 
    name: '闽南歌曲', 
    icon: CategoryIcon6 , 
    onClick: () => navTo('/pages/article/common/list', {
      title: '闽南歌曲',
      mainBodyColumnId: '189,190,191',
      modelId: 16,
      itemType: 'article-common',
      detailsPage: '/pages/video/details',
    }) 
  },
]

const {
  loader: routeData,
  goList: goRouteList,
  goDetail: goRouteDetail,
} = useHomePageMiniCommonListGoMoreAndGoDetail({
  title: '旅游路线',
  mainBodyColumnId: [274,275,276,277],
  modelId: 17,
  itemType: 'article-common',
  detailsPage: '/pages/article/details',
});

const {
  loader: recommendData,
  goList: goRecommendList,
  goDetail: goRecommendDetail,
} = useHomePageMiniCommonListGoMoreAndGoDetail({
  title: '文化景区',
  mainBodyColumnId: 273,
  modelId: 17,
  itemType: 'article-common',
  detailsPage: '/pages/article/details',
});

const {
  loader: creativeData,
  goList: goCreativeList,
  goDetail: goCreativeDetail,
} = useHomePageMiniCommonListGoMoreAndGoDetail({
  title: '文化产品',
  mainBodyColumnId: 48,
  modelId: 9,
  itemType: 'article-common',
  detailsPage: '/pages/article/details',
});

const activityData = useSimpleDataLoader(async () => [
  {
    title: '闽南文化节',
    desc: '泉州市区',
    right: '报名中',
  },
  {
    title: '泉州市区',
    desc: '泉州市区',
    right: '已截至',
  },
]);

</script>

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