📦 节庆日历相关修改

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@imengyu/js-request-transform": "^0.3.3",
         "@imengyu/vue-dynamic-form": "^0.1.1",
+        "@imengyu/vue-scroll-rect": "^0.1.3",
         "@vuemap/vue-amap": "^2.1.12",
         "ant-design-vue": "^4.2.6",
         "bootstrap": "^5.3.0",
@@ -1019,6 +1020,12 @@
         "compute-scroll-into-view": "^3.0.2"
       }
     },
+    "node_modules/@imengyu/vue-scroll-rect": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmmirror.com/@imengyu/vue-scroll-rect/-/vue-scroll-rect-0.1.3.tgz",
+      "integrity": "sha512-HlE5y6GoDWwfSCCWbR+/ehe4a3qiJlYb63Ak6tRN0wHykl92tMJJOdMDng5hQk4nLq7wUQpoluO43PmefuaFcQ==",
+      "license": "MIT"
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.8",
       "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@imengyu/js-request-transform": "^0.3.3",
     "@imengyu/vue-dynamic-form": "^0.1.1",
+    "@imengyu/vue-scroll-rect": "^0.1.3",
     "@vuemap/vue-amap": "^2.1.12",
     "ant-design-vue": "^4.2.6",
     "bootstrap": "^5.3.0",

src/api/fusion/CalendarContent.ts

@@ -1,9 +1,37 @@
-import { CommonContentApi } from '../CommonContent';
+import { CommonContentApi, GetContentListItem, GetContentListParams } from '../CommonContent';
+
+export class CalendarListItem extends GetContentListItem {
+  constructor() {
+    super();
+
+    this._nameMapperServer = {
+      lunar: 'date',
+      lunar_date: 'dateString',
+    }
+    const old = this._afterSolveServer;
+    this._afterSolveServer = (data) => {
+      old?.(data);
+      const date = new Date(this.date);
+      this.dateObj = date;
+      this.dateYear = date.getFullYear();
+      this.dateMonth = date.getMonth() + 1;
+    }
+  }
+  date = '';
+  dateString = '';
+  dateObj = new Date();
+  dateYear = 0;
+  dateMonth = 0;
+}
 
 export class CalendarContentApi extends CommonContentApi {
 
   constructor() {
-    super(4, "闽南节庆日历", 272);
+    super(18, "闽南节庆日历", 272);
+  }
+
+  getCalendarList(params: GetContentListParams, page: number, pageSize?: number) {
+    return super.getContentList<CalendarListItem>(params, page, pageSize, CalendarListItem);
   }
 }
 

src/main.ts

@@ -6,13 +6,16 @@ import './assets/scss/main.scss'
 import 'ant-design-vue/dist/reset.css';
 import 'vue3-carousel/carousel.css'
 import '@vuemap/vue-amap/dist/style.css'
+import '@imengyu/vue-scroll-rect/lib/vue-scroll-rect.css'
 
+createApp(App)
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 
 import App from './App.vue'
 import router from './router'
 import Antd from 'ant-design-vue';
+import ScrollRect from '@imengyu/vue-scroll-rect'
 import VueAMap, {initAMapApiLoader} from '@vuemap/vue-amap';
 import CommonListPage from './components/content/CommonListPage.vue';
 import { registryConvert } from './common/ConvertRgeistry'
@@ -30,6 +33,7 @@ app.use(createPinia());
 app.use(VueAMap);
 app.use(Antd);
 app.use(router);
+app.use(ScrollRect);
 app.component('CommonListPage', CommonListPage);
 
 app.mount('#app');

src/views/FusionView.vue

@@ -20,18 +20,21 @@
         </div>
         <div class="calandar row">
           <div class="col col-12 col-lg-6 col-xl-6 p-0">
-            <h3 class="month-title">1月</h3>
-            <ImageTitleDescBlock
-              v-for="(item, index) in daysData"
-              :key="index"
-              :title="item.title"
-              :image="item.image"
-              :desc="item.desc || item.title"
-              @click="goDetail(item.id)"
-            />
+            <scroll-rect class="left-list">
+              <h3 class="month-title">{{monthSelected}}月</h3>
+              <ImageTitleDescBlock
+                v-for="(item, index) in daysData"
+                :key="index"
+                :title="item.title"
+                :image="item.image"
+                :desc="item.desc || item.title"
+                @click="goDetail(item.id)"
+              />
+            </scroll-rect>
           </div>
           <div class="month-grid col-12 col-lg-6 col-xl-6 p-0">
-            <div 
+            <scroll-rect 
+              class="grid"
               v-for="(month, k) in monthData"
               :key="k"
               :class="[ monthSelected === month.month ? 'active' : '' ]"
@@ -46,7 +49,7 @@
                   {{ holiday.title }}
                 </span>
               </div>
-            </div>
+            </scroll-rect>
           </div>
         </div>
       </div>
@@ -79,6 +82,7 @@ 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';
+import CalendarContent from '@/api/fusion/CalendarContent';
 
 const carouselConfig = {
   itemsToShow: 1,
@@ -189,20 +193,19 @@ const monthData = ref<{
 ])
 
 onMounted(async () => {
-  const res = await CommonContent.getContentList(new GetContentListParams()
-    .setModelId(18)
-    .setMainBodyColumnId(272)
-  , 1, 50)
+  const res = await CalendarContent.getCalendarList(new GetContentListParams(), 1, 50)
+  const year = new Date().getFullYear();
 
-  res.list.forEach(item => {
-    item.month = Math.floor(Math.random() * 12 + 1);
+  res.list.filter(p => 
+    p.dateYear === year
+  ).forEach(item => {
     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)
+    monthData.value[item.dateMonth - 1].holidays.push(item)
   })
 
   daysData.value = monthData.value[0].holidays as GetContentListItem[];
@@ -226,6 +229,10 @@ const { navTo } = usePageAction();
 .calandar {
   background-color: $box-color;
 
+  .left-list {
+    height: 750px;
+  }
+
   .month-title {
     margin: 24px 24px 0 24px;
   }
@@ -233,13 +240,14 @@ const { navTo } = usePageAction();
     display: grid;
     grid-template-columns: repeat(4, 25%);
 
-    > div {
+    > .grid {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       background-color: $text-color-light;
       padding: 12px ;
       border: 1px solid $border-split-color;
+      height: 250px;
 
       h3 {
         font-size: 18px;
@@ -253,9 +261,17 @@ const { navTo } = usePageAction();
           font-size: 13px;
           margin-right: 8px;
           margin-top: 8px;
-          padding: 4px 8px;
+          padding: 0 8px;
           border-radius: 12px;
           background-color: rgba(#FF961B, 0.1);
+
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          word-break: break-all;
+          line-height: 28px;
         }
       }