feat: rewrite calendar component

pages/appointment/appointment.js

@@ -9,35 +9,142 @@ Page({
   data: {
     hasAddress: false,
     address: '',
-    calendarcolor: '#45A6B5',
     timeActive: '0',
     appointmentSuccess: false, 
-    newDate: '',
     curYear: '-',
     curMonth: '-',
-    maxDate: '',
-    defaultDate: '',
-    formatter(day) {
-      const time = day.date.getTime();
-      const cDate = new Date()
-      const cyear = cDate.getFullYear()
-      const cmonth = cDate.getMonth() + 1;
-      const cdate = cDate.getDate();
-      const str = cyear + '-' + cmonth + '-' + cdate
-      if (time == new Date(str).getTime() || time == new Date(str).getTime() - 86400000) {
-        day.text = '约满'
-        day.type = 'disabled'
-        day.className = 'calendar-all-full'
-      }
-      return day;
-    }
+    weekList: [],
+    backupWeekList: [],
+    currentTime: '',
+    currentWeek: '',
+    currentYear: ''
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
+    this.initCalendar()
+  },
 
+  // 初始化日历
+  async initCalendar () {
+    var that = this
+    var currentDate = new Date()
+    this.setData({
+      currentTime: currentDate.getTime(),
+      currentWeek: currentDate.getDay(),
+      currentYear: currentDate.getFullYear(),
+      currentDay: currentDate.getDate()
+    })
+    await that.createCalendarGrild(33)
+    var _weekList = that.data.weekList
+    _weekList.map((item, index) => {
+      if (index == that.data.currentWeek) {
+        item.date = that.data.currentDay
+      }
+    })
+    that.setData({
+      weekList: _weekList
+    })
+    // 周一开始
+    if (that.data.currentWeek >= 1) { 
+      that.setData({
+        weekList: that.setCalendarItem()
+      })
+    }
+    // 周日
+    if (that.data.currentWeek < 1) {
+      let _bankupWeekList = []
+      for (let index = 0; index < 7; index++) {
+        const bDate = new Date(that.data.currentTime - (index + 1) * 86400000).getDate()
+        const _month = baseDate.getMonth() + 1
+        _bankupWeekList.unshift({
+          date: index == 0 ? '约满' : bDate.getDate(),
+          dateStr: bDate.getFullYear() + '-' + _month,
+          disabled: true,
+          status: ''
+        })
+      }
+      that.setData({
+        backupWeekList: _bankupWeekList,
+        weekList: that.setCalendarItem()
+      })
+    }
+  },
+  setCalendarItem () {
+    var that = this
+    var _mapWeekList = that.data.weekList
+    _mapWeekList.map((item, index) => {
+      const baseDate = new Date((index - that.data.currentWeek) * 86400000 + that.data.currentTime)
+      const _month = baseDate.getMonth() + 1
+      const _year = baseDate.getFullYear()
+      if (index > that.data.currentWeek) {
+        if (index == that.data.currentWeek + 1) {
+          item.active = true
+          that.setData({
+            curYear: _year,
+            curMonth: _month
+          })
+        }
+        item.date = baseDate.getDate()
+        item.dateStr = baseDate.getFullYear() + '-' + _month
+      } else {
+        item.disabled = true
+        item.dateStr = baseDate.getFullYear() + '-' + _month
+        if (index == that.data.currentWeek || index == that.data.currentWeek - 1) {
+          item.date = '约满'
+        } else {
+          item.date = baseDate.getDate()
+        }
+      }
+    })
+    return _mapWeekList
+  },
+  createCalendarGrild (count) {
+    return new Promise((resolve, reject) => {
+      var _list = []
+      for (let index = 0; index < count; index++) {
+        _list.push({
+          date: '-',
+          dateStr: '-',
+          disabled: false,
+          active: false,
+          status: '',
+        })
+      }
+      this.setData({
+        weekList: _list
+      })
+      resolve()
+    })
+  },
+
+  // 选择日期
+  handleSelectDate (e) {
+    const disabled = e.currentTarget.dataset.disabled
+    if (!disabled) {
+      const cDate = e.currentTarget.dataset.date
+      const index = e.currentTarget.dataset.index
+
+      console.log(index, 'cDate');
+      const _year = cDate.split('-')[0]
+      const _month = cDate.split('-')[1]
+      const _weeklist = this.data.weekList
+      _weeklist[index].active = true
+      _weeklist.map((item, i) => {
+        if (index == i ) {
+          item.active = true
+        } else {
+          item.active = false
+        }
+      })
+      this.setData({
+        curYear: _year,
+        curMonth: _month,
+        weekList: _weeklist
+      })
+    }
   },
   /**
    * 生命周期函数--监听页面显示
@@ -49,24 +156,9 @@ Page({
         address: app.globalData.navigateBackParams.address
       })
     }
-    this.handleDate()
   },
-  // 处理日期
-  handleDate () {
-    const date = new Date()
-    const time = date.getTime()
-    const year = date.getFullYear()
-    const month = date.getMonth() + 1
-    const day = date.getDate()
-    const str = year + '-' + month + '-' + day 
-    const _maxDate= 2592000000 + time
-    const _defaultDate = new Date(str).getTime() + 86400000
-    this.setData({
-      curYear: year,
-      curMonth: month,
-      maxDate: _maxDate,
-      defaultDate: _defaultDate
-    })
+  formatterFn (day) {
+    console.log(day);
   },
   /**
    * 选择地址
@@ -83,14 +175,6 @@ Page({
       })
     }
   },
-  handleSelect (val) {
-    var selectMonth = new Date(val.detail).getMonth() + 1
-    var selectYear = new Date(val.detail).getFullYear()
-    this.setData({
-      curYear: selectYear,
-      curMonth: selectMonth
-    })
-  },
   handleTime (e) {
     console.log(e);
     var timeActiveIndex = e.currentTarget.dataset.time

pages/appointment/appointment.json

@@ -1,6 +1,3 @@
 {
-  "usingComponents": {
-    "van-calendar": "@vant/weapp/calendar/index"
-  },
   "navigationBarTitleText": "预约时间"
 }

pages/appointment/appointment.wxml

@@ -36,29 +36,34 @@
     <view class="calendar-wy">
       <view class="sub-title ca-title">预约上门服务时间</view>
       <view class="calendar-card">
-      <view class="calendar-card-header">
-        <view class="curr-date">
-          <text>{{curYear}}年{{curMonth}}月</text>
+        <view class="calendar-card-header">
+          <view class="curr-date">
+            <text>{{curYear}}年{{curMonth}}月</text>
+          </view>
+          <view class="cal-tips ittflex">
+            <view class="warn-icon"></view>
+            <text class="warn-text">代表繁忙时间</text>
+          </view>
         </view>
-        <view class="cal-tips ittflex">
-          <view class="warn-icon"></view>
-          <text class="warn-text">代表繁忙时间</text>
+        <view class="calendar-card-body">
+          <view class="week-header ittflex-jcs">
+            <view class="week-item">日</view>
+            <view class="week-item">一</view>
+            <view class="week-item">二</view>
+            <view class="week-item">三</view>
+            <view class="week-item">四</view>
+            <view class="week-item">五</view>
+            <view class="week-item">六</view>
+          </view>
+          <view class="week-body">
+            <view class="week-body-item backup-week-body-item {{item.disabled ? 'week-body-item-disabled' : ''}}" wx:for="{{backupWeekList}}" wx:key="index">
+              <view class="date">{{item.date}}</view>
+            </view>
+            <view class="week-body-item {{item.disabled ? 'week-body-item-disabled' : ''}} {{item.active ? 'week-body-item-active' : ''}}" wx:for="{{weekList}}" wx:key="index">
+              <view class="date" data-date="{{item.dateStr}}" data-disabled="{{item.disabled}}" data-index="{{index}}" bindtap="handleSelectDate">{{item.date}}</view>
+            </view>
+          </view>
         </view>
-      </view>
-        <van-calendar title="日历" class="calendar"
-          poppable="{{ false }}" 
-          show-mark="{{false}}" 
-          show-title="{{false}}"
-          show-confirm="{{false}}"
-          first-day-of-week="{{ 1 }}"
-          show-subtitle="{{false}}"
-          color="{{calendarcolor}}"
-          max-date="{{maxDate}}"
-          default-date="{{defaultDate}}"
-          formatter="{{ formatter }}"
-          row-height="45"
-          bind:select="handleSelect"
-        />
       </view>
       <view class="time-list ittflex">
         <view class="time-a time-item time-nurse {{timeActive == '0' ? 'time-active' : ''}}" data-time="0" bindtap="handleTime">

pages/appointment/appointment.wxss

@@ -1,7 +1,7 @@
 /* pages/appointment/appointment.wxss */
 .appointment {
   width: 100%;
-  height: 100%;
+  min-height: 100%;
   background: #F7F7F7;
 }
 .main-con {
@@ -133,7 +133,7 @@
   width: 690rpx;
   min-height: 500rpx;
   background: #FFFFFF;
-  border-radius: 20rpx;
+  border-radius: 20rpx 20rpx 0 0;
   border-bottom: 1rpx solid #DDDDDD;
 }
 .calendar-card-header {
@@ -143,6 +143,50 @@
   justify-content: space-between;
   align-items: center;
 }
+.calendar-card-body {
+  width: 630rpx;
+  margin: 0 auto;
+  min-height: 70rpx;
+}
+.week-header {
+  width: 100%;
+  height: 90rpx;
+}
+.week-item {
+  width: 90rpx;
+  height: 90rpx;
+  text-align: center;
+  line-height: 90rpx;
+  font-size: 24rpx;
+  color: #999999;
+}
+.week-body {
+  width: 100%;
+  min-height: 450rpx;
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+.week-body-item {
+  width: 90rpx;
+  height: 90rpx;
+  color: #333333;
+}
+.week-body-item-disabled {
+  color: #999999;
+}
+.week-body-item-active {
+  color: #fff;
+  background-color: #45A6B5;
+  border-radius: 50%;
+}
+.date {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  line-height: 90rpx;
+  font-size: 28rpx;
+}
 .curr-date {
   font-size: 32rpx;
   font-weight: bold;