From 6480c021fa0805aec648ae9f0fcec356016c4ee2 Mon Sep 17 00:00:00 2001
From: dai <851733175@qq.com>
Date: Wed, 17 Aug 2022 09:39:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=B4=E6=97=B6=E5=AD=98=E4=B8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../communityParty/calendar/cpts/calendar.vue | 151 ++++++++++++++++++
 1 file changed, 151 insertions(+)
 create mode 100644 src/views/modules/communityParty/calendar/cpts/calendar.vue

diff --git a/src/views/modules/communityParty/calendar/cpts/calendar.vue b/src/views/modules/communityParty/calendar/cpts/calendar.vue
new file mode 100644
index 000000000..3143d80fe
--- /dev/null
+++ b/src/views/modules/communityParty/calendar/cpts/calendar.vue
@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <el-row>
+      <el-col>
+        <div class="top-con">
+          <div class="top" v-for="item in top" :key="item">{{ item }}</div>
+        </div>
+        <!-- 日历号 -->
+        <div class="date-con">
+          <div
+            class="date"
+            :class="[item.thisMonth, item.isToday, item.afterToday]"
+            v-for="(item, index) in visibleCalendar"
+            :key="index"
+          >
+            <div>{{ item.day }}</div>
+            <div class="morning">张三，李四</div>
+            <div class="evening">王五，赵六</div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    time: {
+      type: Object,
+      default: () => {
+        return {
+          year: new Date().getFullYear(),
+          month: new Date().getMonth(),
+        };
+      },
+    },
+  },
+  data() {
+    return {
+      top: ["一", "二", "三", "四", "五", "六", "日"],
+    };
+  },
+  created() {
+    console.log("123", this.time);
+  },
+  methods: {
+    // 获取
+  },
+  computed: {
+    // 获取当前月份显示日历,共42天
+    visibleCalendar() {
+      // 获取今天的年月日
+      const today = new Date();
+      today.setHours(0);
+      today.setMinutes(0);
+      today.setSeconds(0);
+      today.setMilliseconds(0);
+
+      const calendarArr = [];
+      // 获取当前月份第一天
+      const currentFirstDay = new Date(this.time.year, this.time.month, 1);
+      // 获取第一天是周几
+      const weekDay = currentFirstDay.getDay();
+      // 用当前月份第一天减去周几前面几天，就是看见的日历的第一天
+      const startDay = currentFirstDay - (weekDay - 1) * 24 * 3600 * 1000;
+      // 我们统一用42天来显示当前显示日历
+      for (let i = 0; i < 42; i++) {
+        const date = new Date(startDay + i * 24 * 3600 * 1000);
+        calendarArr.push({
+          date: new Date(startDay + i * 24 * 3600 * 1000),
+          year: date.getFullYear(),
+          month: date.getMonth(),
+          day: date.getDate(),
+          // 是否在当月
+          thisMonth:
+            date.getFullYear() === today.getFullYear() &&
+            date.getMonth() === today.getMonth()
+              ? "thisMonth"
+              : "",
+          // 是否是今天
+          isToday:
+            date.getFullYear() === today.getFullYear() &&
+            date.getMonth() === today.getMonth() &&
+            date.getDate() === today.getDate()
+              ? "isToday"
+              : "",
+          // 是否在今天之后
+          afterToday: date.getTime() >= today.getTime() ? "afterToday" : "",
+        });
+      }
+      return calendarArr;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.top-con {
+  display: flex;
+  align-items: center;
+  .top {
+    width: 14.285%;
+    background-color: rgb(242, 242, 242);
+    padding: 10px 0;
+    margin: 5px;
+    text-align: center;
+  }
+}
+.date-con {
+  display: flex;
+  flex-wrap: wrap;
+  .date {
+    width: 14.285%;
+    text-align: center;
+    padding: 5px;
+    .morning {
+      padding: 10px 0;
+      background-color: rgba(220, 245, 253, 0.3);
+    }
+    .evening {
+      padding: 10px 0;
+      background-color: rgba(220, 244, 209, 0.3);
+    }
+  }
+  .thisMonth {
+    .morning {
+      background-color: rgb(220, 245, 253);
+    }
+    .evening {
+      background-color: rgb(220, 244, 209);
+    }
+  }
+  .isToday {
+    font-weight: 700;
+    .morning {
+      background-color: rgb(169, 225, 243);
+    }
+    .evening {
+      background-color: rgb(193, 233, 175);
+    }
+  }
+}
+.tip-con {
+  margin-top: 51px;
+  .tip {
+    margin-top: 21px;
+    width: 100%;
+  }
+}
+</style>