日历第一步

src/views/modules/communityParty/calendar/cpts/calendar.vue

@@ -1,151 +1,231 @@
 <template>
-  <div>
+  <div class="m-calendar">
-    <el-row>
+    <div class="top-list">
-      <el-col>
+      <div
-        <div class="top-con">
+        class="top"
-          <div class="top" v-for="item in top" :key="item">{{ item }}</div>
+        v-for="(item, index) in top"
-        </div>
+        :class="{ 'z-weekend': index > 4 }"
-        <!-- 日历号 -->
+        :key="item"
-        <div class="date-con">
+      >
-          <div
+        {{ item }}
-            class="date"
+      </div>
-            :class="[item.thisMonth, item.isToday, item.afterToday]"
+    </div>
-            v-for="(item, index) in visibleCalendar"
+    <!-- 日历号 -->
-            :key="index"
+    <div class="date-list">
-          >
+      <div
-            <div>{{ item.day }}</div>
+        class="date-item"
-            <div class="morning">张三，李四</div>
+        :class="{
-            <div class="evening">王五，赵六</div>
+          'z-on': item.format == currentDate,
-          </div>
+          'z-this-month': item.thisMonth,
-        </div>
+          'z-today': item.isToday,
-      </el-col>
+          'z-after-today': item.afterToday,
-    </el-row>
+          'z-weekend': item.day == 6 || item.day == 0,
+        }"
+        v-for="(item, index) in visibleCalendar"
+        :key="index"
+        @click="handleClickDate(item)"
+      >
+        <div class="date">{{ item.date }}</div>
+        <slot name="date-item" v-bind:info="item"></slot>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   props: {
-    time: {
+    currentYear: {
-      type: Object,
+      type: Number,
-      default: () => {
+      default: new Date().getFullYear(),
-        return {
+    },
-          year: new Date().getFullYear(),
+    currentMonth: {
-          month: new Date().getMonth(),
+      type: Number,
-        };
+      default: new Date().getMonth(),
-      },
     },
   },
   data() {
     return {
       top: ["一", "二", "三", "四", "五", "六", "日"],
+      currentDate: "",
     };
   },
-  created() {
-    console.log("123", this.time);
-  },
-  methods: {
-    // 获取
-  },
   computed: {
     // 获取当前月份显示日历,共42天
     visibleCalendar() {
       // 获取今天的年月日
+      const { currentYear, currentMonth } = this;
       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 currentFirstDay = new Date(currentYear, currentMonth, 1);
       // 获取第一天是周几
       const weekDay = currentFirstDay.getDay();
       // 用当前月份第一天减去周几前面几天，就是看见的日历的第一天
       const startDay = currentFirstDay - (weekDay - 1) * 24 * 3600 * 1000;
+
       // 我们统一用42天来显示当前显示日历
+      let calendarArr = [];
       for (let i = 0; i < 42; i++) {
-        const date = new Date(startDay + i * 24 * 3600 * 1000);
+        const dateObj = new Date(startDay + i * 24 * 3600 * 1000);
+        const year = dateObj.getFullYear();
+        const month = dateObj.getMonth();
+        const date = dateObj.getDate();
+        const day = dateObj.getDay();
+
         calendarArr.push({
-          date: new Date(startDay + i * 24 * 3600 * 1000),
+          date,
-          year: date.getFullYear(),
+          year,
-          month: date.getMonth(),
+          month,
-          day: date.getDate(),
+          day,
+          format: `${year}-${month + 1}-${date + 1}`,
           // 是否在当月
-          thisMonth:
+          thisMonth: year == currentYear && month == currentMonth,
-            date.getFullYear() === today.getFullYear() &&
-            date.getMonth() === today.getMonth()
-              ? "thisMonth"
-              : "",
           // 是否是今天
           isToday:
-            date.getFullYear() === today.getFullYear() &&
+            year === today.getFullYear() &&
-            date.getMonth() === today.getMonth() &&
+            month === today.getMonth() &&
-            date.getDate() === today.getDate()
+            date === today.getDate(),
-              ? "isToday"
-              : "",
           // 是否在今天之后
-          afterToday: date.getTime() >= today.getTime() ? "afterToday" : "",
+          afterToday: dateObj.getTime() >= today.getTime(),
         });
       }
       return calendarArr;
     },
   },
+  watch: {
+    visibleCalendar(val) {
+      if (!this.currentDate) {
+        this.handleClickDate(
+          val.find((item) => item.isToday) ||
+            val.filter((item) => item.thisMonth)[0]
+        );
+      }
+    },
+  },
+  mounted() {
+    console.log("123", this.time);
+  },
+  methods: {
+    handleClickDate(item) {
+      console.log("点击日历日期", item);
+      this.currentDate = item.format;
+
+      this.$emit("clickDate", item);
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
-.top-con {
+.m-calendar {
-  display: flex;
+  position: relative;
-  align-items: center;
+  color: #333333;
-  .top {
+
-    width: 14.285%;
+  &::after {
-    background-color: rgb(242, 242, 242);
+    content: "";
-    padding: 10px 0;
+    z-index: 1;
-    margin: 5px;
+    position: absolute;
-    text-align: center;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-left: 1px solid #eee;
+    border-top: 1px solid #eee;
+    pointer-events: none;
   }
-}
+
-.date-con {
+  .top-list {
-  display: flex;
+    display: flex;
-  flex-wrap: wrap;
+    align-items: center;
-  .date {
+    .top {
-    width: 14.285%;
+      position: relative;
-    text-align: center;
+      width: 14.285%;
-    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);
+      text-align: center;
-    }
+      background-color: #ffffff;
-  }
+
-  .thisMonth {
+      &::after {
-    .morning {
+        content: "";
-      background-color: rgb(220, 245, 253);
+        z-index: 1;
-    }
+        position: absolute;
-    .evening {
+        top: 0;
-      background-color: rgb(220, 244, 209);
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-right: 1px solid #eee;
+        pointer-events: none;
+        border-bottom: 1px solid #eee;
+      }
+
+      &.z-weekend {
+        color: #ff3333;
+      }
     }
   }
-  .isToday {
+  .date-list {
-    font-weight: 700;
+    display: flex;
-    .morning {
+    flex-wrap: wrap;
-      background-color: rgb(169, 225, 243);
+    align-items: center;
-    }
+
-    .evening {
+    .date-item {
-      background-color: rgb(193, 233, 175);
+      position: relative;
+      width: 14.285%;
+      text-align: center;
+      box-sizing: border-box;
+      padding: 8px 0;
+      height: 90px;
+      background-color: #ffffff;
+      opacity: 0.5;
+
+      &::after {
+        content: "";
+        position: absolute;
+        z-index: 1;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-right: 1px solid #eee;
+        border-bottom: 1px solid #eee;
+        pointer-events: none;
+      }
+
+      .date {
+        margin-bottom: 5px;
+        line-height: 30px;
+        font-size: 16px;
+      }
+
+      &.z-on {
+        z-index: 21;
+        box-shadow: 0 0 15px 5px #a8cee0;
+        .date {
+          font-size: 20px;
+          font-weight: bold;
+        }
+      }
+
+      &.z-this-month {
+        opacity: 1;
+      }
+
+      &.z-today {
+        .date {
+          font-weight: 700;
+        }
+      }
+
+      &.z-weekend {
+        .date {
+          color: #ff3333;
+        }
+      }
     }
   }
 }
-.tip-con {
-  margin-top: 51px;
-  .tip {
-    margin-top: 21px;
-    width: 100%;
-  }
-}
 </style>

src/views/modules/communityParty/calendar/index.vue

@@ -1,6 +1,52 @@
 <template>
   <div class="g-cnt">
-    <calendar></calendar>
+    <div class="m-cal">
+      <div class="sizer">
+        <div class="sizer-year">
+          <el-date-picker
+            v-model="currentYearStr"
+            value-format="yyyy"
+            type="year"
+            placeholder="选择年"
+            size="small"
+            style="width: 150px"
+          >
+          </el-date-picker>
+        </div>
+        <div class="sizer-month">
+          <div
+            class="month-item"
+            :class="{ 'z-on': m - 1 == currentMonth }"
+            :key="'month' + m"
+            @click="currentMonth = m - 1"
+            v-for="m in 12"
+          >
+            <el-badge :value="12" :hidden="m != 3" class="item">
+              <div class="month-text">{{ m }}月</div>
+            </el-badge>
+          </div>
+        </div>
+        <div class="sizer-btn"></div>
+      </div>
+      <calendar
+        :currentYear="currentYear"
+        :currentMonth="currentMonth"
+        @clickDate="handleChangeDate"
+      >
+        <template v-slot:date-item="{ info }">
+          <div class="tip">
+            <div class="tip-text">
+              <span class="z-on">主题当日</span> (已发布)
+            </div>
+            <div class="tip-cnt">巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉</div>
+          </div>
+          <div class="corn">
+            <div class="corn-num">8</div>
+            <div class="corn-text">日程</div>
+          </div>
+        </template>
+      </calendar>
+    </div>
   </div>
 </template>
 
@@ -15,12 +61,28 @@ export default {
     calendar,
   },
   data() {
-    return {};
+    let todayObj = new Date();
+
+    return {
+      currentYearStr: todayObj.getFullYear() + "",
+      currentMonth: todayObj.getMonth(),
+    };
+  },
+  computed: {
+    currentYear() {
+      return parseInt(this.currentYearStr);
+    },
   },
   async mounted() {
     // await this.getPartyOggList()
   },
   methods: {
+    handleChangeDate(item) {
+      console.log("handleChangeDate");
+      this.currentYearStr = item.year + "";
+      this.currentMonth = item.month;
+    },
+
     async getPartyOggList() {
       const url = "/resi/partymember/icPartyOrg/getSearchTreelist";
       let params = {
@@ -38,8 +100,133 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "@/assets/scss/c/config.scss";
+@import "@/assets/scss/c/function.scss";
+
 .g-cnt {
   background-color: #ffffff;
   padding: 20px;
 }
+.m-cal {
+  .sizer {
+    display: flex;
+    margin-bottom: 20px;
+
+    .sizer-month {
+      display: flex;
+
+      .month-item {
+        position: relative;
+        margin-left: 10px;
+
+        /deep/ .el-badge__content {
+          z-index: 1;
+        }
+
+        &.z-on {
+          .month-text {
+            background-color: #3e8ef7;
+            color: #ffffff;
+          }
+        }
+        .month-text {
+          position: relative;
+          z-index: 0;
+          width: 40px;
+          height: 30px;
+          text-align: center;
+          background-color: #eeeeee;
+          border-radius: 8px;
+          line-height: 30px;
+          font-size: 14px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  .tip {
+    position: relative;
+    margin: 0 3px;
+    padding: 3px 2px 3px 12px;
+    line-height: 16px;
+    box-shadow: 0 0 5px 1px #eee;
+    background-color: #ffffff;
+    font-size: 12px;
+    border-radius: 4px;
+    cursor: pointer;
+    color: #999999;
+    .z-on {
+      color: #ff3333;
+    }
+    .tip-text {
+      @include toe;
+      text-align: left;
+    }
+    .tip-cnt {
+      @include toe;
+      text-align: left;
+      font-size: 10px;
+    }
+
+    &::before {
+      position: absolute;
+      content: "";
+      left: 4px;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      display: block;
+      width: 4px;
+      height: 4px;
+      border-radius: 100%;
+      background-color: #ff3333;
+    }
+  }
+
+  .corn {
+    position: absolute;
+    right: 0;
+    top: 0;
+    color: #ffffff;
+    cursor: pointer;
+    .corn-num {
+      position: absolute;
+      z-index: 10;
+      top: -7px;
+      right: -7px;
+      border-radius: 100%;
+      width: 14px;
+      height: 14px;
+      line-height: 14px;
+      text-align: center;
+      font-size: 10px;
+      text-align: center;
+      color: #ffffff;
+      background-color: #f1ba06;
+    }
+    .corn-text {
+      position: relative;
+      z-index: 1;
+      font-size: 12px;
+      line-height: 18px;
+      padding-right: 3px;
+    }
+
+    &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      z-index: 0;
+      top: 0;
+      right: 0;
+      width: 0px;
+      height: 0;
+      border-top: 17px solid #f33;
+      border-right: 25px solid #f33;
+      border-bottom: 17px solid transparent;
+      border-left: 25px solid transparent;
+    }
+  }
+}
 </style>