feat(Calendar): 新增日历组件

TaleLin · Dec 21, 2020 · d288161 · d288161
1 parent 21ca86f
commit d288161
Show file tree

Hide file tree

Showing 31 changed files with 1,293 additions and 2 deletions.
diff --git a/commitlint.config.js b/commitlint.config.js
@@ -73,7 +73,8 @@ module.exports = {
         'Circle',
         'ImageClipper',
         'TabBar',
-        'DynamicBuild'
+        'DynamicBuild',
+        'Calendar'
       ]
     ]
   }

diff --git a/examples/app.json b/examples/app.json
@@ -101,7 +101,8 @@
         "pages/image-clipper/index",
         "pages/rules/index",
         "pages/rate/index",
-        "pages/form/index"
+        "pages/form/index",
+        "pages/calendar/index"
       ]
     },
     {

diff --git a/examples/pages/components/form/pages/calendar/index.js b/examples/pages/components/form/pages/calendar/index.js
@@ -0,0 +1,190 @@
+
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    defaultDate: 1589524969397,
+    show: false,
+    minSelect: '',
+    maxSelect: '',
+    type: 'single',
+    title: '',
+    color: '',
+    maxDate: '',
+    minDate: '',
+    confirmText: '',
+    formatter: '',
+    base_single: {
+      defaultDate: 1589524969397,
+      minSelect: '',
+      maxSelect: '',
+      type: 'single',
+      title: '选择单个日期'
+    },
+    base_range: {
+      defaultDate: [],
+      minSelect: '',
+      maxSelect: '',
+      type: 'range',
+      title: '选择日期范围'
+    },
+    base_multiple: {
+      defaultDate: [],
+      minSelect: '',
+      maxSelect: '',
+      type: 'multiple',
+      title: '选择多个日期'
+    },
+    custom_color: {
+      defaultDate: [],
+      minSelect: '',
+      maxSelect: '',
+      color: '#ff7487',
+      type: 'range',
+      title: '自定义颜色'
+    },
+    custom_range: {
+      defaultDate: [],
+      minSelect: '',
+      maxSelect: '',
+      type: 'range',
+      title: '自定义日期范围',
+      maxDate: new Date().setDate(new Date().getDate() + 30),
+      minDate: new Date().setDate(new Date().getDate() - 30)
+    },
+    custom_confirmtext: {
+      defaultDate: [],
+      minSelect: '',
+      maxSelect: '',
+      type: 'range',
+      title: '自定按钮文字',
+      confirmText: '确认选中'
+    },
+    custom_date: {
+      defaultDate: [],
+      minSelect: '',
+      maxSelect: '',
+      type: 'range',
+      title: '自定义日期文案',
+      formatter: (day) => {
+        const item = new Date(day.date);
+        const current = new Date();
+
+        const month = item.getMonth() + 1;
+        const date = item.getDate();
+
+        if(current.getMonth() === item.getMonth() && current.getDate() === item.getDate()){
+          day.text = '今天';
+        }
+
+        if (month === 1) {
+          if (date === 1) {
+            day.topInfo = '元旦节';
+          }
+        }
+
+        if (month === 2) {
+          if (date === 14) {
+            day.topInfo = '情人节';
+          }
+        }
+
+        if (month === 3) {
+          if (date === 8) {
+            day.topInfo = '妇女节';
+          }
+        }
+
+        if (month === 4) {
+          if (date === 1) {
+            day.topInfo = '愚人节';
+          }
+        }
+
+        if (month === 5) {
+          if (date === 1) {
+            day.topInfo = '劳动节';
+          } else if (date === 4) {
+            day.topInfo = '青年节';
+          }
+        }
+
+        if (month === 6) {
+          if (date === 1) {
+            day.topInfo = '儿童节';
+          }
+        }
+
+        if (month === 8) {
+          if (date === 1) {
+            day.topInfo = '建军节';
+          }
+        }
+
+        if (month === 10) {
+          if (date === 1) {
+            day.topInfo = '国庆节';
+          }
+        }
+
+        if (day.type === 'start') {
+          day.bottomInfo = '入住';
+        } else if (day.type === 'end') {
+          day.bottomInfo = '离店';
+        }
+
+        return day;
+
+
+        // if (month === 5) {
+        //   if (date === 1) {
+        //     day.topInfo = '劳动节';
+        //   } else if (date === 4) {
+        //     day.topInfo = '青年节';
+        //   } else if (date === 11) {
+        //     day.text = '今天';
+        //   }
+        // }
+
+        // if (day.type === 'start') {
+        //   day.bottomInfo = '入住';
+        // } else if (day.type === 'end') {
+        //   day.bottomInfo = '离店';
+        // }
+
+        // return day;
+      }
+    },
+    custom_count: {
+      defaultDate: [],
+      minSelect: '4',
+      maxSelect: '10',
+      type: 'range',
+      title: '自定义可选数量',
+    },
+  },
+
+  changeType(e) {
+    const {defaultDate, minSelect, maxSelect, type, title, color = '', minDate = '', maxDate = '', confirmText='确定', formatter} = this.data[e.currentTarget.dataset.id];
+
+    this.setData({
+      show: true,
+      defaultDate,
+      minSelect,
+      maxSelect,
+      type,
+      title,
+      color,
+      maxDate,
+      minDate,
+      confirmText,
+      formatter
+    });
+  },
+
+  selectCalender(e){
+    console.info(e);
+  }
+});
diff --git a/examples/pages/components/form/pages/calendar/index.json b/examples/pages/components/form/pages/calendar/index.json
@@ -0,0 +1,6 @@
+{
+  "usingComponents": {
+    "l-calendar": "/dist/calendar/index",
+    "l-list": "/dist/list/index"
+  }
+}
diff --git a/examples/pages/components/form/pages/calendar/index.wxml b/examples/pages/components/form/pages/calendar/index.wxml
@@ -0,0 +1,35 @@
+<!--pages/view/pages/dialog/index.wxml-->
+<view class='container'>
+  <content-title name="Calendar" describe="日历">
+
+    <content-card class="content" name="基础用法">
+      <l-list title="选择单个日期" data-id="base_single" bind:lintap="changeType" />
+      <l-list title="选择多个日期" data-id="base_multiple" bind:lintap="changeType" />
+      <l-list title="选择日期范围" data-id="base_range" bind:lintap="changeType" />
+    </content-card>
+
+    <content-card class="content" name="自定义日历">
+      <l-list title="自定义颜色" data-id="custom_color" bind:lintap="changeType" />
+      <!-- <l-list title="自定义日期范围" data-id="custom_range" bind:lintap="changeType" /> -->
+      <l-list title="自定义按钮文字" data-id="custom_confirmtext" bind:lintap="changeType" />
+      <l-list title="自定义日期文案" data-id="custom_date" bind:lintap="changeType" />
+       <l-list title="自定义可选数量" data-id="custom_count" bind:lintap="changeType" />
+    </content-card>
+
+  </content-title>
+
+   <l-calendar 
+    bind:linselect="selectCalender"
+    title="{{ title }}" 
+    show="{{ show }}" 
+    minSelect="{{ minSelect }}" 
+    maxSelect="{{ maxSelect }}" 
+    defaultDate="{{ defaultDate }}" 
+    type="{{ type }}"
+    color="{{ color }}"
+    confirmText="{{ confirmText }}"
+    formatter="{{ formatter }}"
+  >
+  </l-calendar>
+
+</view>
diff --git a/examples/pages/components/form/pages/calendar/index.wxss b/examples/pages/components/form/pages/calendar/index.wxss
diff --git a/examples/pages/navigator/content/config/form-navi.js b/examples/pages/navigator/content/config/form-navi.js
@@ -41,6 +41,12 @@ const formNaviConfigs = [
     desc: '评分',
     componentsPath: '/pages/components/form/pages/rate/index'
   },
+  {
+    icon: '/images/component/rate.png',
+    title: 'Calendar',
+    desc: '日历',
+    componentsPath: '/pages/components/form/pages/calendar/index'
+  },
   {
     icon: '/images/component/rules.png',
     title: 'Rules',

diff --git a/src/calendar/calendar.wxml b/src/calendar/calendar.wxml
@@ -0,0 +1,29 @@
+<wxs src="./index.wxs" module="computed"></wxs>
+
+<template name="calendar">
+  <view class="calendar-container">
+    <header showTitle="{{ showTitle }}" showSubtitle="{{ showSubtitle }}" title="{{ title }}" subTitle="{{ subTitle }}"></header>
+    <scroll-view class="calendar-body-wrap" scroll-y scroll-into-view="{{ scrollIntoViewIndex }}">
+      <mounth
+        wx:for="{{ computed.getMonths(minDate, maxDate) }}"
+        wx:key="index"
+        id="month{{ index }}"
+        class="month"
+        data-date="{{ item }}"
+        date="{{ item }}"
+        minDate="{{ minDate }}"
+        maxDate="{{ maxDate }}"
+        currentDate="{{ currentDate }}"
+        type="{{ type }}"
+        bind:clickDay="clickDay"
+        showMonthTitle="{{ index !== 0 }}"
+        formatter="{{ formatter }}"
+        color="{{ color }}"
+      >
+      </mounth>
+    </scroll-view>
+    <view>
+      <l-button type="default" size="long" bind:lintap="onClickConfirm" bg-color="{{ color }}">{{confirmText}}</l-button>
+    </view>
+  </view>
+</template>
diff --git a/src/calendar/components/day/index.js b/src/calendar/components/day/index.js
@@ -0,0 +1,16 @@
+Component({
+  data: {},
+  properties: {
+    text: null,
+    topInfo: null,
+    bottomInfo: null,
+    type: null,
+    color: {
+      type: String,
+      value: ''
+    }
+  },
+  methods: {
+
+  }
+});
diff --git a/src/calendar/components/day/index.json b/src/calendar/components/day/index.json
@@ -0,0 +1,3 @@
+{
+  "component": true
+}
diff --git a/src/calendar/components/day/index.less b/src/calendar/components/day/index.less
@@ -0,0 +1,58 @@
+@import "../../../../config/styles/_base.less";
+.calendar-day-container{
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  align-items: center;
+  position: relative;
+  color: #666;
+  &.selected{
+    background-color: @default-color;
+    color: #ffffff;
+    border-radius: 8rpx;
+  }
+  &.start{
+    background-color: @default-color;
+    color: #ffffff;
+    border-radius: 8rpx;
+  }
+  &.end{
+    background-color: @default-color;
+    color: #ffffff;
+    border-radius: 8rpx;
+  }
+  &.disabled{
+    color: #c8c9cc;
+    cursor: default;
+    background: #ffffff;
+  }
+  &.middle{
+    color: @default-color;
+    &::after{
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: currentColor;
+      opacity: 0.1;
+      content: '';
+    }
+  }
+  // background-color: red;
+  // color: #eff9f0;
+  .top{
+    height: 24rpx;
+    line-height: 24rpx;
+    font-size: 16rpx;
+  }
+  .text{
+    flex: 1;
+    font-size: 32rpx;
+  }
+  .bottom{
+    height: 24rpx;
+    line-height: 24rpx;
+    font-size: 16rpx;
+  }
+}
diff --git a/src/calendar/components/day/index.wxml b/src/calendar/components/day/index.wxml
@@ -0,0 +1,8 @@
+<wxs src="./index.wxs" module="computed"></wxs>
+<view class="calendar-day-container {{ type }}" 
+  style="{{ computed.getDayStyle(type, color) }}"
+>
+  <view class="top">{{ topInfo }}</view>
+  <view class="text">{{ text }}</view>
+  <view class="bottom">{{ bottomInfo }}</view>
+</view>