lcw

src/views/home/model/calendar.vue

@@ -33,6 +33,14 @@
           <div class="jieqi-date-item">
             <span class="date-label">节气信息：</span>
             <span class="date-value jieqi-highlight">{{ getYearInGanjq(data) || '无' }}</span>
+          </div>
+             <div class="jieqi-date-item">
+            <span class="date-label">节日信息：</span>
+            <span class="date-value jieqi-highlight">
+              <span>
+                {{ getAllFestivals(data.date,true).join('、') || '无' }}
+              </span>
+            </span>
           </div>
         </div>
 
@@ -51,7 +59,8 @@
         <template #reference>
           <div @click="chooseDay(data)" class="dayonChage" :class="{
             'day': dateVal == data.day,
-            'special': dataIntegration.includes(data.day)
+  'special': dataIntegration.includes(data.day),
+            'model': getAllFestivals(data.date).length > 0
           }">
             <span> {{ data.day.split("-")[2] }}</span>
             <span style="font-size: 8px;"> {{ getLunarMonthDay(data.date) }}</span>
@@ -66,7 +75,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from "vue";
+import { ref, computed, onMounted, watch } from "vue";
 import { Solar, Lunar } from 'lunar-javascript'
 import { timeValidate } from "@/utils/tools";
 import { useRouter } from 'vue-router'
@@ -148,6 +157,16 @@ const currentDate = ref(new Date());
 onMounted(() => {
   initialize()
 })
+
+// 监听currentDate变化，同步更新下拉选择器的值
+watch(currentDate, (newDate) => {
+  const year = timeValidate(newDate, 'yd')
+  const month = timeValidate(newDate, 'ym')
+  selectedYear.value = parseFloat(year)
+  selectedMonth.value = parseFloat(month) - 1
+  dateVal.value = timeValidate(newDate, 'ymd')
+  gettingData()
+})
 const goToSelectedMonth = () => {
   if (selectedYear.value && selectedMonth.value !== '') {
     const newDate = new Date(selectedYear.value, selectedMonth.value, 1);
@@ -193,6 +212,49 @@ const gettingData = () => {
 //   const lunar = solar.getLunar()
 //   return `${lunar.getMonthInChinese()}${lunar.getDayInChinese()}`
 // }
+
+
+
+const getAllFestivals = (date,boolean=false) => {
+  console.log(date);
+
+  const time = new Date(date)
+  const solar = Solar.fromDate(time)
+  const lunar = solar.getLunar()
+  const result = []
+  // 获取农历节日
+  const lunarFestivals = lunar.getFestivals()
+  lunarFestivals.forEach(festival => {
+    result.push({
+      type: '农历节日',
+      name: festival,
+    })
+  })
+
+  // 获取公历节日
+  const solarFestivals = solar.getFestivals()
+  solarFestivals.forEach(festival => {
+    result.push({
+      type: '公历节日',
+      name: festival,
+    })
+  })
+
+  // 获取其他纪念日
+  const otherFestivals = solar.getOtherFestivals()
+  otherFestivals.forEach(festival => {
+    result.push({
+      type: '纪念日',
+      name: festival,
+    })
+  })
+  if (boolean) {
+  return result.filter(item => item.type != '纪念日').map(item => item.name)
+  } else {
+  return result.filter(item => item.type != '纪念日')
+
+}
+}
 const calendarPush = () => {
   router.push('/calendar')
 }
@@ -426,4 +488,8 @@ const calendarPush = () => {
   background-color: rgba(253, 112, 112, 0.856);
   color: #ffffff;
 }
+.model{
+  background-color: rgb(76, 243, 93);
+   color: #ffffff;
+}
 </style>