mingnan/src/pages/travel/calendar.vue

<template>
  <view class="travel_calendar bg-base">
    <u-navbar title="节庆日历" autoBack bgColor="transparent" />
    <view class="banner">
      <swiper class="swiper right-indicator" circular :indicator-dots="true" :autoplay="true" :interval="2000"
        :duration="1000">
        <swiper-item v-for="item in bannerData" :key="item.id">
          <view class="item">
            <image class="w-100" :src="item.image" mode="aspectFill"></image>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="main m-3 radius-l p-3 bg-light">
      <view class="change-year">
        <view class="year">
          <text class="iconfont icon-arrow-left" @click="changeYear(currentYear - 1)"></text>
          <picker mode="date" :value="currentYear" @change="(e: any) => changeYear(e.detail.value)" fields="year">
            <view class="current-year">{{ currentYear }} 年</view>
          </picker>
          <text class="iconfont icon-arrow-right" @click="changeYear(currentYear + 1)"></text>
        </view>
        <text class="iconfont icon-calendar"></text>
      </view>
      <u-tabs 
        :current="activeTab" 
        :list="tabs" 
        lineWidth="30" 
        lineColor="#d9492e" 
        :activeStyle="{
          color: '#000',
          fontWeight: 'bold',
          transform: 'scale(1.05)'
        }" 
        :inactiveStyle="{
          color: '#606266',
          transform: 'scale(1)'
        }" 
        class="top-tab" 
        @click="tabClick" 
      />
      <view class="activity-wrap mt-3">
        <view class="month-list">
          <view 
            v-for="month in monthList"
            :key="month.value"
            :class="{ active: month.value === currentMonth }" 
            class="month" 
            @click="goMonth(month.value)"
          >
            {{ month.label }}
          </view>
        </view>
        <SimplePageContentLoader 
          :loader="listLoader"
          :showEmpty="!listLoader.content.value?.length"
        >
          <view 
            v-if="listLoader.content.value && listLoader.content.value.length" 
            class="activity-list"
          >
            <scroll-view scroll-y :scroll-into-view="'month' + currentMonth" scroll-with-animation>
              <view class="item" v-for="item in listLoader.content.value" :key="item.id">
                <view class="head" :id="'month' + item.month">
                  <view class="year-month">{{ item.year }}年{{ item.month }}月</view>
                  <view>本月活动 <text>{{ item.data.length }}</text></view>
                </view>
                <view class="activity" v-for="act in item.data" :key="act.id">
                  <view class="title">{{ act.title }}</view>
                  <view class="dot" :class="{ ing: act.status === 0 }"></view>
                  <view class="desc ellipsis-2">{{ act.desc }}</view>
                  <view class="place"><text class="iconfont icon-place"></text>{{ act.place }}</view>
                  <view class="time"><text class="iconfont icon-time"></text>{{ act.time }}</view>
                </view>
              </view>
            </scroll-view>
          </view>
        </SimplePageContentLoader>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { GetContentListParams } from '@/api/CommonContent';
import NewsIndexContent from '@/api/news/NewsIndexContent';
import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';
import { useSimplePageContentLoader } from '@/common/composeabe/SimplePageContentLoader';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';

const tabs = [
  {
    id: 1,
    name: '全部'
  },
  {
    id: 2,
    name: '节庆民俗'
  },
  {
    id: 3,
    name: '信仰祭祀'
  },
  {
    id: 4,
    name: '游艺竞技'
  },
  {
    id: 5,
    name: '民间艺术'
  },
  {
    id: 7,
    name: '其他'
  }
];
const activeTab = ref(0);
const bannerData = [
  {
    id: 1,
    image: 'https://lucheng.app4lh.cn/static/tmp/static/tmp/banner_act.png',
  },
  {
    id: 2,
    image: 'https://lucheng.app4lh.cn/static/tmp/static/tmp/banner_act.png',
  }
]

const currentMonth = ref(1);
const currentYear = ref(new Date().getFullYear());
const monthList = [
  {
    label: '1月',
    value: 1
  }, {
    label: '2月',
    value: 2
  }, {
    label: '3月',
    value: 3
  }, {
    label: '4月',
    value: 4
  }, {
    label: '5月',
    value: 5
  }, {
    label: '6月',
    value: 6
  }, {
    label: '7月',
    value: 7
  }, {
    label: '8月',
    value: 8
  }, {
    label: '9月',
    value: 9
  }, {
    label: '10月',
    value: 10
  }, {
    label: '11月',
    value: 11
  }, {
    label: '12月',
    value: 12
  }
];
 
const listLoader = useSimplePageContentLoader<{
  id: number;
  month: number,
  year: number,
  data: {
    id: number,
    title: string,
    desc: string,
    place: string,
    time: string,
    status: number,
  }[]
}[]>(async () => {
  const res = await NewsIndexContent.getContentList(new GetContentListParams()
    .setModelId(18)
    .setMainBodyColumnId(272)
  , 1, 50);
  return [
    {
      id: 1,
      month: 1,
      year: 2025, 
      data: res.list.map(item => ({
        id: item.id,
        title: item.title,
        desc: item.desc,
        place: item.district,
        time: '2025-01-01',
        status: 1,
      }))
    }
  ];
});

function tabClick(e: { index: number }) {
  activeTab.value = e.index;
}
function goMonth(month: number) {
  currentMonth.value = month;
}
async function changeYear(year: number) {
  currentYear.value = year;
  listLoader.loadData(undefined, true);
}

onLoad(() => {
  listLoader.loadData(undefined, true);
});
</script>

<style lang="scss">
@use "sass:map";
@use "@/common/scss/define/colors.scss" as *;

$color-primary: map.get($colors, "primary");

.travel_calendar {
  .banner {
    margin-top: 0;

    .swiper {
      height: 400rpx;
      border-radius: 0 0 28rpx 28rpx;

      .item {
        image {
          border-radius: 0 0 28rpx 28rpx;
        }
      }
    }
  }

  .activity-wrap {
    display: flex;

    .activity-list {
      .head {
        background: #FFFFFF;
        border-radius: 28rpx;
        margin-bottom: 18rpx;
        color: #111111;
        padding: 12rpx 42rpx 12rpx 50rpx;
        display: flex;
        align-items: center;
        font-size: 24rpx;

        .year-month {
          font-weight: 600;
          font-size: 30rpx;
          flex: 1;
        }

        text {
          font-weight: 600;
          display: inline-block;
          margin-left: 12rpx;
        }
      }

      .activity {
        padding: 36rpx 32rpx 38rpx 48rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 12rpx 28rpx 0rpx rgba(215, 215, 215, 0.35);
        border-radius: 24rpx;
        position: relative;
        font-size: 24rpx;
        overflow: hidden;
        margin-bottom: 46rpx;

        .desc {
          text-align: justify;
          margin-bottom: 36rpx;
        }

        .dot {
          width: 12rpx;
          height: 12rpx;
          background: #E0E0E0;
          border-radius: 50%;
          position: absolute;
          left: 20rpx;
          top: 50rpx;

          &.ing {
            background: $color-primary;
          }
        }

        .title {
          font-weight: 600;
          font-size: 30rpx;
          color: #111111;
          margin-bottom: 25rpx;
        }

        .place {
          margin-bottom: 18rpx;
          align-items: center;
          display: flex;
          font-size: 28rpx;

        }

        .iconfont {
          display: inline-block;
          margin-right: 6rpx;
          font-size: 36rpx;
        }

        .time {
          display: flex;
          align-items: center;
          font-size: 28rpx;
        }

        .status {
          position: absolute;
          bottom: 0;
          right: 0;
          background: $color-primary;
          padding: 14rpx 26rpx;
          border-radius: 31rpx 0rpx 0rpx 0rpx;
          color: #fff;

          view {
            font-size: 24rpx;
          }

          &.ing {
            background: #24515D;
          }

          &.end {
            background: #C9C9C9;
          }
        }
      }
    }

    .month-list {
      text-align: center;
      flex-shrink: 0;
      margin-right: 28rpx;

      .month {
        border-radius: 10rpx;
        margin-bottom: 30rpx;
        padding: 12rpx 20rpx;

        &.active {
          border: 1px solid $color-primary;
          background: #FFFFFF;
        }
      }
    }
  }

  scroll-view {
    height: calc(100vh - 540rpx);
    padding-bottom: 50rpx;
  }

  .change-year {
    padding: 0 34rpx 34rpx 34rpx;
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .year {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .current-year {
      font-size: 36rpx;
      color: #333333;
    }

    text.icon-arrow-left {
      display: inline-block;
      margin-right: 100rpx;
      font-size: 32rpx;
    }

    text.icon-arrow-right {
      display: inline-block;
      margin-left: 100rpx;
      font-size: 32rpx;
    }

    text.icon-calendar {
      position: absolute;
      right: 0;
      top: 8rpx;
    }
  }
}
</style>