|
@@ -26,7 +26,8 @@
|
|
|
:key="index"
|
|
|
:title="item.title"
|
|
|
:image="item.image"
|
|
|
- :desc="item.desc"
|
|
|
+ :desc="item.desc || item.title"
|
|
|
+ @click="goDetail(item.id)"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="month-grid col-12 col-lg-6 col-xl-6 p-0">
|
|
@@ -34,6 +35,7 @@
|
|
|
v-for="(month, k) in monthData"
|
|
|
:key="k"
|
|
|
:class="[ monthSelected === month.month ? 'active' : '' ]"
|
|
|
+ @click="monthChange(month.month)"
|
|
|
>
|
|
|
<h3>{{ month.month }}月</h3>
|
|
|
<div class="tags">
|
|
@@ -41,7 +43,7 @@
|
|
|
v-for="(holiday, index) in month.holidays"
|
|
|
:key="index"
|
|
|
>
|
|
|
- {{ holiday }}
|
|
|
+ {{ holiday.title }}
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -66,7 +68,7 @@
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
|
|
|
-import { onMounted, ref } from 'vue';
|
|
|
+import { onMounted, ref, type Ref } from 'vue';
|
|
|
import Image1 from '@/assets/images/fusion/Image1.jpg'
|
|
|
import Image2 from '@/assets/images/fusion/Image2.jpg'
|
|
|
import Image3 from '@/assets/images/fusion/Image3.jpg'
|
|
@@ -76,6 +78,7 @@ import LeftRightBox from '@/components/parts/LeftRightBox.vue';
|
|
|
import ImageTitleDescBlock from '@/components/parts/ImageTitleDescBlock.vue';
|
|
|
import ThreeImageList from '@/components/parts/ThreeImageList.vue';
|
|
|
import { usePageAction } from '@/composeable/PageAction';
|
|
|
+import CommonContent, { GetContentListItem, GetContentListParams } from '@/api/CommonContent';
|
|
|
|
|
|
const carouselConfig = {
|
|
|
itemsToShow: 1,
|
|
@@ -129,74 +132,89 @@ const list = [
|
|
|
image: '',
|
|
|
}
|
|
|
]
|
|
|
-const daysData = [
|
|
|
- {
|
|
|
- title: '除夕',
|
|
|
- desc: '闽南人视这一天为最高神天公的生日,非常重视。临近节日,家家户户都要打扫卫生、制作龟粿、发粿等,作为供品。红龟粿呈龟红色,打龟甲印,象征长寿。',
|
|
|
- image: Image1,
|
|
|
- },
|
|
|
- {
|
|
|
- title: '除夕',
|
|
|
- desc: '闽南人视这一天为最高神天公的生日,非常重视。临近节日,家家户户都要打扫卫生、制作龟粿、发粿等,作为供品。红龟粿呈龟红色,打龟甲印,象征长寿。',
|
|
|
- image: Image1,
|
|
|
- },
|
|
|
- {
|
|
|
- title: '除夕',
|
|
|
- desc: '闽南人视这一天为最高神天公的生日,非常重视。临近节日,家家户户都要打扫卫生、制作龟粿、发粿等,作为供品。红龟粿呈龟红色,打龟甲印,象征长寿。',
|
|
|
- image: Image1,
|
|
|
- },
|
|
|
-]
|
|
|
+const daysData = ref<GetContentListItem[]>([]) as Ref<GetContentListItem[]>
|
|
|
const monthSelected = ref(1)
|
|
|
-const monthData = [
|
|
|
+const monthData = ref<{
|
|
|
+ month: number;
|
|
|
+ holidays: GetContentListItem[];
|
|
|
+}[]>([
|
|
|
{
|
|
|
month: 1,
|
|
|
- holidays: [ '除夕', '元旦', '春节' ]
|
|
|
+ holidays: []
|
|
|
},
|
|
|
{
|
|
|
month: 2,
|
|
|
- holidays: [ '除夕', '元旦', '春节' ]
|
|
|
+ holidays: []
|
|
|
},
|
|
|
{
|
|
|
month: 3,
|
|
|
- holidays: [ '除夕', '元旦', '春节' ]
|
|
|
+ holidays: []
|
|
|
},
|
|
|
{
|
|
|
month: 4,
|
|
|
- holidays: [ '除夕', '元旦', '春节' ]
|
|
|
+ holidays: []
|
|
|
},
|
|
|
{
|
|
|
month: 5,
|
|
|
- holidays: [ '除夕', '元旦', '春节' ]
|
|
|
+ holidays: []
|
|
|
},
|
|
|
{
|
|
|
month: 6,
|
|
|
- holidays: [ '除夕', '元旦', '春节' ]
|
|
|
+ holidays: []
|
|
|
},
|
|
|
{
|
|
|
month: 7,
|
|
|
- holidays: [ '除夕', '元旦', '春节' ]
|
|
|
+ holidays: []
|
|
|
},
|
|
|
{
|
|
|
month: 8,
|
|
|
- holidays: [ '除夕', '元旦', '春节' ]
|
|
|
+ holidays: []
|
|
|
},
|
|
|
{
|
|
|
month: 9,
|
|
|
- holidays: [ '除夕', '元旦', '春节' ]
|
|
|
+ holidays: []
|
|
|
},
|
|
|
{
|
|
|
month: 10,
|
|
|
- holidays: [ '除夕', '元旦', '春节' ]
|
|
|
+ holidays: []
|
|
|
},
|
|
|
{
|
|
|
month: 11,
|
|
|
- holidays: [ '除夕', '元旦', '春节' ]
|
|
|
+ holidays: []
|
|
|
},
|
|
|
{
|
|
|
month: 12,
|
|
|
- holidays: [ '除夕', '元旦', '春节' ]
|
|
|
+ holidays: []
|
|
|
},
|
|
|
-]
|
|
|
+])
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ const res = await CommonContent.getContentList(new GetContentListParams()
|
|
|
+ .setModelId(18)
|
|
|
+ .setMainBodyColumnId(272)
|
|
|
+ , 1, 50)
|
|
|
+
|
|
|
+ res.list.forEach(item => {
|
|
|
+ item.month = Math.floor(Math.random() * 12 + 1);
|
|
|
+ if (!item.desc)
|
|
|
+ item.desc = item.title;
|
|
|
+ item.title = item.title.substring(0, 10);
|
|
|
+ });
|
|
|
+
|
|
|
+ res.list.forEach(item => {
|
|
|
+ monthData.value[item.month as number - 1].holidays.push(item)
|
|
|
+ })
|
|
|
+
|
|
|
+ daysData.value = monthData.value[0].holidays as GetContentListItem[];
|
|
|
+});
|
|
|
+
|
|
|
+function goDetail(id: number) {
|
|
|
+ navTo(`/news/detail`, { id, modelId: 18 });
|
|
|
+}
|
|
|
+function monthChange(month: number) {
|
|
|
+ monthSelected.value = month;
|
|
|
+ daysData.value = monthData.value[month - 1].holidays as GetContentListItem[];
|
|
|
+}
|
|
|
|
|
|
const { navTo } = usePageAction();
|
|
|
|