app.js

@@ -13,6 +13,18 @@ App({
       }
     })
   },
+  onShow(opts) {
+    this.globalData.sceneData = {
+      path: opts.path,
+      query: opts.query
+    }
+    if (!wx.getStorageSync('token') || !wx.getStorageSync('userInfo')) {
+      wx.reLaunch({
+        url: '/pages/login/login',
+      })
+      // login(opts)
+    }
+  }, 
   globalData: {
     userInfo: null
   }

app.json

@@ -4,7 +4,21 @@
     "pages/index/index",
     "pages/logs/logs",
     "pages/member/member",
-    "pages/orderDetail/orderDetail"
+    "pages/orderDetail/orderDetail",
+    "pages/feedback/feedback",
+    "pages/clientInfo/clientInfo",
+    "pages/clientInfoEdit/clientInfoEdit",
+    "pages/tagsEdit/tagsEdit",
+    "pages/tagsAdd/tagsAdd",
+    "pages/tagsCustom/tagsCustom",
+    "pages/recordSheet/recordSheet",
+    "pages/contact/contact",
+    "pages/dossier/dossier",
+    "pages/name/name",
+    "pages/role/role",
+    "pages/recordList/recordList",
+    "pages/test/test",
+    "pages/login/login"
   ],
   "tabBar": {
     "color": "#666666",

components/dist/animation-group/index.js

@@ -0,0 +1,382 @@
+import baseComponent from '../helpers/baseComponent'
+import styleToCssString from '../helpers/styleToCssString'
+
+const ENTER = 'enter'
+const ENTERING = 'entering'
+const ENTERED = 'entered'
+const EXIT = 'exit'
+const EXITING = 'exiting'
+const EXITED = 'exited'
+const UNMOUNTED = 'unmounted'
+
+const TRANSITION = 'transition'
+const ANIMATION = 'animation'
+
+const TIMEOUT = 1000 / 60
+
+const defaultClassNames = {
+    enter: '', // 进入过渡的开始状态，在过渡过程完成之后移除
+    enterActive: '', // 进入过渡的结束状态，在过渡过程完成之后移除
+    enterDone: '', // 进入过渡的完成状态
+    exit: '', // 离开过渡的开始状态，在过渡过程完成之后移除
+    exitActive: '', // 离开过渡的结束状态，在过渡过程完成之后移除
+    exitDone: '', // 离开过渡的完成状态
+}
+
+baseComponent({
+    properties: {
+        // 触发组件进入或离开过渡的状态
+        in: {
+            type: Boolean,
+            value: false,
+            observer(newVal) {
+                if (this.data.isMounting) {
+                    this.updated(newVal)
+                }
+            },
+        },
+        // 过渡的类名
+        classNames: {
+            type: null,
+            value: defaultClassNames,
+        },
+        // 过渡持续时间
+        duration: {
+            type: null,
+            value: null,
+        },
+        // 过渡动效的类型
+        type: {
+            type: String,
+            value: TRANSITION,
+        },
+        // 首次挂载时是否触发进入过渡
+        appear: {
+            type: Boolean,
+            value: false,
+        },
+        // 是否启用进入过渡
+        enter: {
+            type: Boolean,
+            value: true,
+        },
+        // 是否启用离开过渡
+        exit: {
+            type: Boolean,
+            value: true,
+        },
+        // 首次进入过渡时是否懒挂载组件
+        mountOnEnter: {
+            type: Boolean,
+            value: true,
+        },
+        // 离开过渡完成时是否卸载组件
+        unmountOnExit: {
+            type: Boolean,
+            value: true,
+        },
+        // 自定义类名
+        wrapCls: {
+            type: String,
+            value: '',
+        },
+        // 自定义样式
+        wrapStyle: {
+            type: [String, Object],
+            value: '',
+            observer(newVal) {
+                this.setData({
+                    extStyle: styleToCssString(newVal),
+                })
+            },
+        },
+        disableScroll: {
+            type: Boolean,
+            value: false,
+        },
+    },
+    data: {
+        animateCss: '', // 动画样式
+        animateStatus: EXITED, // 动画状态，可选值 entering、entered、exiting、exited
+        isMounting: false, // 是否首次挂载
+        extStyle: '', // 组件样式
+    },
+    methods: {
+        /**
+         * 监听过渡或动画的回调函数
+         */
+        addEventListener() {
+            const { animateStatus } = this.data
+            const { enter, exit } = this.getTimeouts()
+
+            if (animateStatus === ENTERING && !enter && this.data.enter) {
+                this.performEntered()
+            }
+
+            if (animateStatus === EXITING && !exit && this.data.exit) {
+                this.performExited()
+            }
+        },
+        /**
+         * 会在 WXSS transition 或 wx.createAnimation 动画结束后触发
+         */
+        onTransitionEnd() {
+            if (this.data.type === TRANSITION) {
+                this.addEventListener()
+            }
+        },
+        /**
+         * 会在一个 WXSS animation 动画完成时触发
+         */
+        onAnimationEnd() {
+            if (this.data.type === ANIMATION) {
+                this.addEventListener()
+            }
+        },
+        /**
+         * 更新组件状态
+         * @param {String} nextStatus 下一状态，ENTERING 或 EXITING
+         * @param {Boolean} mounting 是否首次挂载
+         */
+        updateStatus(nextStatus, mounting = false) {
+            if (nextStatus !== null) {
+                this.cancelNextCallback()
+                this.isAppearing = mounting
+
+                if (nextStatus === ENTERING) {
+                    this.performEnter()
+                } else {
+                    this.performExit()
+                }
+            }
+        },
+        /**
+         * 进入过渡
+         */
+        performEnter() {
+            const { className, activeClassName } = this.getClassNames(ENTER)
+            const { enter } = this.getTimeouts()
+            const enterParams = {
+                animateStatus: ENTER,
+                animateCss: className,
+            }
+            const enteringParams = {
+                animateStatus: ENTERING,
+                animateCss: `${className} ${activeClassName}`,
+            }
+
+            // 若已禁用进入过渡，则更新状态至 ENTERED
+            if (!this.isAppearing && !this.data.enter) {
+                return this.performEntered()
+            }
+
+            // 第一阶段：设置进入过渡的开始状态，并触发 ENTER 事件
+            // 第二阶段：延迟一帧后，设置进入过渡的结束状态，并触发 ENTERING 事件
+            // 第三阶段：若已设置过渡的持续时间，则延迟指定时间后触发进入过渡完成 performEntered，否则等待触发 onTransitionEnd 或 onAnimationEnd
+            this.safeSetData(enterParams, () => {
+                this.triggerEvent('change', { animateStatus: ENTER })
+                this.triggerEvent(ENTER, { isAppearing: this.isAppearing })
+
+                // 由于有些时候不能正确的触发动画完成的回调，具体原因未知
+                // 所以采用延迟一帧的方式来确保可以触发回调
+                this.delayHandler(TIMEOUT, () => {
+                    this.safeSetData(enteringParams, () => {
+                        this.triggerEvent('change', { animateStatus: ENTERING })
+                        this.triggerEvent(ENTERING, { isAppearing: this.isAppearing })
+
+                        if (enter) {
+                            this.delayHandler(enter, this.performEntered)
+                        }
+                    })
+                })
+            })
+        },
+        /**
+         * 进入过渡完成
+         */
+        performEntered() {
+            const { doneClassName } = this.getClassNames(ENTER)
+            const enteredParams = {
+                animateStatus: ENTERED,
+                animateCss: doneClassName,
+            }
+
+            // 第三阶段：设置进入过渡的完成状态，并触发 ENTERED 事件
+            this.safeSetData(enteredParams, () => {
+                this.triggerEvent('change', { animateStatus: ENTERED })
+                this.triggerEvent(ENTERED, { isAppearing: this.isAppearing })
+            })
+        },
+        /**
+         * 离开过渡
+         */
+        performExit() {
+            const { className, activeClassName } = this.getClassNames(EXIT)
+            const { exit } = this.getTimeouts()
+            const exitParams = {
+                animateStatus: EXIT,
+                animateCss: className,
+            }
+            const exitingParams = {
+                animateStatus: EXITING,
+                animateCss: `${className} ${activeClassName}`,
+            }
+
+            // 若已禁用离开过渡，则更新状态至 EXITED
+            if (!this.data.exit) {
+                return this.performExited()
+            }
+
+            // 第一阶段：设置离开过渡的开始状态，并触发 EXIT 事件
+            // 第二阶段：延迟一帧后，设置离开过渡的结束状态，并触发 EXITING 事件
+            // 第三阶段：若已设置过渡的持续时间，则延迟指定时间后触发离开过渡完成 performExited，否则等待触发 onTransitionEnd 或 onAnimationEnd
+            this.safeSetData(exitParams, () => {
+                this.triggerEvent('change', { animateStatus: EXIT })
+                this.triggerEvent(EXIT)
+
+                this.delayHandler(TIMEOUT, () => {
+                    this.safeSetData(exitingParams, () => {
+                        this.triggerEvent('change', { animateStatus: EXITING })
+                        this.triggerEvent(EXITING)
+
+                        if (exit) {
+                            this.delayHandler(exit, this.performExited)
+                        }
+                    })
+                })
+            })
+        },
+        /**
+         * 离开过渡完成
+         */
+        performExited() {
+            const { doneClassName } = this.getClassNames(EXIT)
+            const exitedParams = {
+                animateStatus: EXITED,
+                animateCss: doneClassName,
+            }
+
+            // 第三阶段：设置离开过渡的完成状态，并触发 EXITED 事件
+            this.safeSetData(exitedParams, () => {
+                this.triggerEvent('change', { animateStatus: EXITED })
+                this.triggerEvent(EXITED)
+
+                // 判断离开过渡完成时是否卸载组件
+                if (this.data.unmountOnExit) {
+                    this.setData({ animateStatus: UNMOUNTED }, () => {
+                        this.triggerEvent('change', { animateStatus: UNMOUNTED })
+                    })
+                }
+            })
+        },
+        /**
+         * 获取指定状态下的类名
+         * @param {String} type 过渡类型，enter 或 exit
+         */
+        getClassNames(type) {
+            const { classNames } = this.data
+            const className = typeof classNames !== 'string' ? classNames[type] : `${classNames}-${type}`
+            const activeClassName = typeof classNames !== 'string' ? classNames[`${type}Active`] : `${classNames}-${type}-active`
+            const doneClassName = typeof classNames !== 'string' ? classNames[`${type}Done`] : `${classNames}-${type}-done`
+
+            return {
+                className,
+                activeClassName,
+                doneClassName,
+            }
+        },
+        /**
+         * 获取过渡持续时间
+         */
+        getTimeouts() {
+            const { duration } = this.data
+
+            if (duration !== null && typeof duration === 'object') {
+                return {
+                    enter: duration.enter,
+                    exit: duration.exit,
+                }
+            } else if (typeof duration === 'number') {
+                return {
+                    enter: duration,
+                    exit: duration,
+                }
+            }
+
+            return {}
+        },
+        /**
+         * 属性值 in 被更改时的响应函数
+         * @param {Boolean} newVal 触发组件进入或离开过渡的状态
+         */
+        updated(newVal) {
+            let { animateStatus } = this.pendingData || this.data
+            let nextStatus = null
+
+            if (newVal) {
+                if (animateStatus === UNMOUNTED) {
+                    animateStatus = EXITED
+                    this.setData({ animateStatus: EXITED }, () => {
+                        this.triggerEvent('change', { animateStatus: EXITED })
+                    })
+                }
+                if (animateStatus !== ENTER && animateStatus !== ENTERING && animateStatus !== ENTERED) {
+                    nextStatus = ENTERING
+                }
+            } else {
+                if (animateStatus === ENTER || animateStatus === ENTERING || animateStatus === ENTERED) {
+                    nextStatus = EXITING
+                }
+            }
+
+            this.updateStatus(nextStatus)
+        },
+        /**
+         * 延迟一段时间触发回调
+         * @param {Number} timeout 延迟时间
+         * @param {Function} handler 回调函数
+         */
+        delayHandler(timeout, handler) {
+            if (timeout) {
+                this.setNextCallback(handler)
+                setTimeout(this.nextCallback, timeout)
+            }
+        },
+        /**
+         * 点击事件
+         */
+        onTap() {
+            this.triggerEvent('click')
+        },
+        /**
+         * 阻止移动触摸
+         */
+        noop() {},
+    },
+    attached() {
+        let animateStatus = null
+        let appearStatus = null
+
+        if (this.data.in) {
+            if (this.data.appear) {
+                animateStatus = EXITED
+                appearStatus = ENTERING
+            } else {
+                animateStatus = ENTERED
+            }
+        } else {
+            if (this.data.unmountOnExit || this.data.mountOnEnter) {
+                animateStatus = UNMOUNTED
+            } else {
+                animateStatus = EXITED
+            }
+        }
+
+        // 由于小程序组件首次挂载时 observer 事件总是优先于 attached 事件
+        // 所以使用 isMounting 来强制优先触发 attached 事件
+        this.safeSetData({ animateStatus, isMounting: true }, () => {
+            this.triggerEvent('change', { animateStatus })
+            this.updateStatus(appearStatus, true)
+        })
+    },
+})

components/dist/animation-group/index.json

@@ -0,0 +1,3 @@
+{
+    "component": true
+}

components/dist/animation-group/index.wxml

@@ -0,0 +1,3 @@
+<view class="wux-class {{ wrapCls }} {{ animateCss }}" bindtap="onTap" catchtouchmove="{{ disableScroll ? 'noop' : '' }}" bindtransitionend="onTransitionEnd" bindanimationend="onAnimationEnd" wx:if="{{ animateStatus !== 'unmounted' }}" style="{{ extStyle }}">
+    <slot></slot>
+</view>

components/dist/animation-group/index.wxss

@@ -0,0 +1,206 @@
+.wux-animate--fadeIn-enter {
+  transition: opacity .3s;
+  opacity: 0
+}
+.wux-animate--fadeIn-enter-active,
+.wux-animate--fadeIn-enter-done {
+  opacity: 1
+}
+.wux-animate--fadeIn-exit {
+  transition: opacity .3s;
+  opacity: 1
+}
+.wux-animate--fadeIn-exit-active,
+.wux-animate--fadeIn-exit-done {
+  opacity: 0
+}
+.wux-animate--fadeInDown-enter {
+  transition: opacity .3s,transform .3s;
+  opacity: 0;
+  transform: translate3d(0,-100%,0)
+}
+.wux-animate--fadeInDown-enter-active,
+.wux-animate--fadeInDown-enter-done {
+  opacity: 1;
+  transform: none
+}
+.wux-animate--fadeInDown-exit {
+  transition: opacity .3s,transform .3s;
+  opacity: 1;
+  transform: none
+}
+.wux-animate--fadeInDown-exit-active,
+.wux-animate--fadeInDown-exit-done {
+  opacity: 0;
+  transform: translate3d(0,-100%,0)
+}
+.wux-animate--fadeInLeft-enter {
+  transition: opacity .3s,transform .3s;
+  opacity: 0;
+  transform: translate3d(-100%,0,0)
+}
+.wux-animate--fadeInLeft-enter-active,
+.wux-animate--fadeInLeft-enter-done {
+  opacity: 1;
+  transform: none
+}
+.wux-animate--fadeInLeft-exit {
+  transition: opacity .3s,transform .3s;
+  opacity: 1;
+  transform: none
+}
+.wux-animate--fadeInLeft-exit-active,
+.wux-animate--fadeInLeft-exit-done {
+  opacity: 0;
+  transform: translate3d(-100%,0,0)
+}
+.wux-animate--fadeInRight-enter {
+  transition: opacity .3s,transform .3s;
+  opacity: 0;
+  transform: translate3d(100%,0,0)
+}
+.wux-animate--fadeInRight-enter-active,
+.wux-animate--fadeInRight-enter-done {
+  opacity: 1;
+  transform: none
+}
+.wux-animate--fadeInRight-exit {
+  transition: opacity .3s,transform .3s;
+  opacity: 1;
+  transform: none
+}
+.wux-animate--fadeInRight-exit-active,
+.wux-animate--fadeInRight-exit-done {
+  opacity: 0;
+  transform: translate3d(100%,0,0)
+}
+.wux-animate--fadeInUp-enter {
+  transition: opacity .3s,transform .3s;
+  opacity: 0;
+  transform: translate3d(0,100%,0)
+}
+.wux-animate--fadeInUp-enter-active,
+.wux-animate--fadeInUp-enter-done {
+  opacity: 1;
+  transform: none
+}
+.wux-animate--fadeInUp-exit {
+  transition: opacity .3s,transform .3s;
+  opacity: 1;
+  transform: none
+}
+.wux-animate--fadeInUp-exit-active,
+.wux-animate--fadeInUp-exit-done {
+  opacity: 0;
+  transform: translate3d(0,100%,0)
+}
+.wux-animate--slideInUp-enter {
+  transition: transform .3s;
+  transform: translate3d(0,100%,0);
+  visibility: visible
+}
+.wux-animate--slideInUp-enter-active,
+.wux-animate--slideInUp-enter-done {
+  transform: translateZ(0)
+}
+.wux-animate--slideInUp-exit {
+  transition: transform .3s;
+  transform: translateZ(0)
+}
+.wux-animate--slideInUp-exit-active,
+.wux-animate--slideInUp-exit-done {
+  transform: translate3d(0,100%,0);
+  visibility: visible
+}
+.wux-animate--slideInDown-enter {
+  transition: transform .3s;
+  transform: translate3d(0,-100%,0);
+  visibility: visible
+}
+.wux-animate--slideInDown-enter-active,
+.wux-animate--slideInDown-enter-done {
+  transform: translateZ(0)
+}
+.wux-animate--slideInDown-exit {
+  transition: transform .3s;
+  transform: translateZ(0)
+}
+.wux-animate--slideInDown-exit-active,
+.wux-animate--slideInDown-exit-done {
+  transform: translate3d(0,-100%,0);
+  visibility: visible
+}
+.wux-animate--slideInLeft-enter {
+  transition: transform .3s;
+  transform: translate3d(-100%,0,0);
+  visibility: visible
+}
+.wux-animate--slideInLeft-enter-active,
+.wux-animate--slideInLeft-enter-done {
+  transform: translateZ(0)
+}
+.wux-animate--slideInLeft-exit {
+  transition: transform .3s;
+  transform: translateZ(0)
+}
+.wux-animate--slideInLeft-exit-active,
+.wux-animate--slideInLeft-exit-done {
+  transform: translate3d(-100%,0,0);
+  visibility: visible
+}
+.wux-animate--slideInRight-enter {
+  transition: transform .3s;
+  transform: translate3d(100%,0,0);
+  visibility: visible
+}
+.wux-animate--slideInRight-enter-active,
+.wux-animate--slideInRight-enter-done {
+  transform: none
+}
+.wux-animate--slideInRight-exit {
+  transition: transform .3s;
+  transform: none
+}
+.wux-animate--slideInRight-exit-active,
+.wux-animate--slideInRight-exit-done {
+  transform: translate3d(100%,0,0);
+  visibility: visible
+}
+.wux-animate--zoom-enter {
+  transition: all .3s cubic-bezier(.215,.61,.355,1);
+  opacity: .01;
+  transform: scale(.75)
+}
+.wux-animate--zoom-enter-active,
+.wux-animate--zoom-enter-done {
+  opacity: 1;
+  transform: none
+}
+.wux-animate--zoom-exit {
+  transition: all .25s linear;
+  transform: none
+}
+.wux-animate--zoom-exit-active,
+.wux-animate--zoom-exit-done {
+  opacity: .01;
+  transform: scale(.75)
+}
+.wux-animate--punch-enter {
+  transition: all .3s cubic-bezier(.215,.61,.355,1);
+  opacity: .01;
+  transform: scale(1.35)
+}
+.wux-animate--punch-enter-active,
+.wux-animate--punch-enter-done {
+  opacity: 1;
+  transform: none
+}
+.wux-animate--punch-exit {
+  transition: all .25s linear;
+  transform: none
+}
+.wux-animate--punch-exit-active,
+.wux-animate--punch-exit-done {
+  opacity: .01;
+  transform: scale(1.35)
+}

components/dist/backdrop/index.js

@@ -0,0 +1,62 @@
+import baseComponent from '../helpers/baseComponent'
+
+baseComponent({
+    properties: {
+        prefixCls: {
+            type: String,
+            value: 'wux-backdrop',
+        },
+        transparent: {
+            type: Boolean,
+            value: false,
+        },
+        zIndex: {
+            type: Number,
+            value: 1000,
+        },
+        classNames: {
+            type: null,
+            value: 'wux-animate--fadeIn',
+        },
+    },
+    computed: {
+        classes: ['prefixCls, transparent', function(prefixCls, transparent) {
+            const wrap = transparent ? `${prefixCls}--transparent` : prefixCls
+
+            return {
+                wrap,
+            }
+        }],
+    },
+    methods: {
+        /**
+         * 保持锁定
+         */
+        retain() {
+            if (typeof this.backdropHolds !== 'number' || !this.backdropHolds) {
+                this.backdropHolds = 0
+            }
+
+            this.backdropHolds = this.backdropHolds + 1
+
+            if (this.backdropHolds === 1) {
+                this.setData({ in: true })
+            }
+        },
+        /**
+         * 释放锁定
+         */
+        release() {
+            if (this.backdropHolds === 1) {
+                this.setData({ in: false })
+            }
+            this.backdropHolds = Math.max(0, this.backdropHolds - 1)
+        },
+        /**
+         * 点击事件
+         */
+        onClick() {
+            this.triggerEvent('click')
+        },
+    },
+})

components/dist/backdrop/index.json

@@ -0,0 +1,6 @@
+{
+    "component": true,
+    "usingComponents": {
+        "wux-animation-group": "../animation-group/index"
+    }
+}

components/dist/backdrop/index.wxml

@@ -0,0 +1 @@
+<wux-animation-group wux-class="{{ classes.wrap }}" in="{{ in }}" classNames="{{ classNames }}" bind:click="onClick" wrapStyle="{{ { zIndex } }}" disableScroll />

components/dist/backdrop/index.wxss

@@ -0,0 +1,15 @@
+.wux-backdrop {
+  background: rgba(0,0,0,.4)
+}
+.wux-backdrop,
+.wux-backdrop--transparent {
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0
+}
+.wux-backdrop--transparent {
+  background: 0 0
+}

components/dist/calendar/index.js

@@ -0,0 +1,755 @@
+import baseComponent from '../helpers/baseComponent'
+import classNames from '../helpers/classNames'
+
+const defaults = {
+    prefixCls: 'wux-calendar',
+    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+    monthNamesShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+    dayNames: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+    dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+    firstDay: 1, // First day of the week, Monday
+    weekendDays: [0, 6], // Sunday and Saturday
+    multiple: false,
+    dateFormat: 'yyyy-mm-dd',
+    direction: 'horizontal', // or 'vertical'
+    minDate: null,
+    maxDate: null,
+    touchMove: true,
+    animate: true,
+    closeOnSelect: true,
+    weekHeader: true,
+    toolbar: true,
+    value: [],
+    onMonthAdd() {},
+    onChange() {},
+    onOpen() {},
+    onClose() {},
+    onDayClick() {},
+    onMonthYearChangeStart() {},
+    onMonthYearChangeEnd() {},
+}
+
+// 获取手指触摸点坐标
+const getTouchPosition = (e) => {
+    const touches = e.touches[0] || e.changedTouches[0]
+    return {
+        x: touches.pageX,
+        y: touches.pageY,
+    }
+}
+
+// 获取元素旋转属性
+const getTransform = (translate, isH) => `transform: translate3d(${isH ? translate : 0}%, ${isH ? 0 : translate}%, 0)`
+
+// 判断两个日期是否在同一天
+const isSameDate = (a, b) => {
+    const prev = new Date(a)
+    const next = new Date(b)
+    return prev.getFullYear() === next.getFullYear() && prev.getMonth() === next.getMonth() && prev.getDate() === next.getDate()
+}
+
+baseComponent({
+    useFunc: true,
+    data: defaults,
+    computed: {
+        classes: ['prefixCls, direction', function(prefixCls, direction) {
+            const wrap = classNames(prefixCls, {
+                [`${prefixCls}--${direction}`]: direction,
+            })
+            const content = `${prefixCls}__content`
+            const hd = `${prefixCls}__hd`
+            const toolbar = `${prefixCls}__toolbar`
+            const picker = `${prefixCls}__picker`
+            const link = `${prefixCls}__link`
+            const prev = classNames(`${prefixCls}__icon`, {
+                [`${prefixCls}__icon--prev`]: true,
+            })
+            const next = classNames(`${prefixCls}__icon`, {
+                [`${prefixCls}__icon--next`]: true,
+            })
+            const value = `${prefixCls}__value`
+            const bd = `${prefixCls}__bd`
+            const weekdays = `${prefixCls}__weekdays`
+            const weekday = `${prefixCls}__weekday`
+            const months = `${prefixCls}__months`
+            const monthsContent = `${prefixCls}__months-content`
+            const month = `${prefixCls}__month`
+            const days = `${prefixCls}__days`
+            const day = `${prefixCls}__day`
+            const text = `${prefixCls}__text`
+
+            return {
+                wrap,
+                content,
+                hd,
+                toolbar,
+                picker,
+                link,
+                prev,
+                next,
+                value,
+                bd,
+                weekdays,
+                weekday,
+                months,
+                monthsContent,
+                month,
+                days,
+                day,
+                text,
+            }
+        }],
+    },
+    methods: {
+        /**
+         * 打开日历
+         * @param {Object} opts
+         */
+        open(opts = {}) {
+            const options = this.$$mergeOptionsAndBindMethods(Object.assign({}, defaults, opts))
+
+            this.monthsTranslate = 0
+            this.isH = options.direction === 'horizontal'
+
+            this.$$setData({ in: true, ...options }).then(() => this.init())
+            this.setValue(options.value)
+
+            if (typeof this.fns.onOpen === 'function') {
+                this.fns.onOpen.call(this)
+            }
+        },
+        /**
+         * 关闭日历
+         */
+        close() {
+            this.$$setData({ in: false })
+
+            if (typeof this.fns.onClose === 'function') {
+                this.fns.onClose.call(this)
+            }
+        },
+        /**
+         * 初始化
+         */
+        init() {
+            const weeks = this.setWeekHeader()
+            const months = this.setMonthsHTML()
+            const monthsTranslate = this.setMonthsTranslate()
+
+            if (typeof this.fns.onMonthAdd === 'function') {
+                months.forEach((month) => this.fns.onMonthAdd.call(this, month))
+            }
+
+            return this.$$setData({ weeks, months, monthsTranslate, wrapperTranslate: '' }).then(() => this.$$setData({...this.updateCurrentMonthYear() }))
+        },
+        /**
+         * 设置月份的位置信息
+         * @param {Number} translate
+         */
+        setMonthsTranslate(translate = this.monthsTranslate) {
+            const prevMonthTranslate = -(translate + 1) * 100
+            const currentMonthTranslate = -translate * 100
+            const nextMonthTranslate = -(translate - 1) * 100
+
+            return [
+                getTransform(prevMonthTranslate, this.isH),
+                getTransform(currentMonthTranslate, this.isH),
+                getTransform(nextMonthTranslate, this.isH),
+            ]
+        },
+        /**
+         * 更新当前年月
+         * @param {String} dir 方向
+         */
+        updateCurrentMonthYear(dir) {
+            const { months, monthNames } = this.data
+
+            if (typeof dir === 'undefined') {
+                const currentMonth = parseInt(months[1].month, 10)
+                const currentYear = parseInt(months[1].year, 10)
+                const currentMonthName = monthNames[currentMonth]
+
+                return {
+                    currentMonth,
+                    currentYear,
+                    currentMonthName,
+                }
+            }
+
+            const currentMonth = parseInt(months[dir === 'next' ? (months.length - 1) : 0].month, 10)
+            const currentYear = parseInt(months[dir === 'next' ? (months.length - 1) : 0].year, 10)
+            const currentMonthName = monthNames[currentMonth]
+
+            return {
+                currentMonth,
+                currentYear,
+                currentMonthName,
+            }
+        },
+        /**
+         * 手指触摸动作开始
+         * @param {Object} e 事件对象
+         */
+        onTouchStart(e) {
+            if (!this.data.touchMove || this.isMoved || this.isRendered) return
+
+            this.start = getTouchPosition(e)
+            this.move = {}
+            this.touchesDiff = 0
+            this.allowItemClick = true
+            this.isMoved = false
+        },
+        /**
+         * 手指触摸后移动
+         * @param {Object} e 事件对象
+         */
+        onTouchMove(e) {
+            if (!this.data.touchMove || this.isRendered) return
+
+            this.allowItemClick = false
+
+            if (!this.isMoved) {
+                this.isMoved = true
+            }
+
+            this.$$setData({ swiping: true })
+
+            const { prefixCls } = this.data
+            const query = wx.createSelectorQuery().in(this)
+            query.select(`.${prefixCls}__months-content`).boundingClientRect((rect) => {
+
+                // 由于 boundingClientRect 为异步方法，某些情况下其回调函数在 onTouchEnd 之后触发，导致 wrapperTranslate 计算错误
+                // 所以判断 this.isMoved = false 时阻止回调函数的执行
+                if (!rect || !this.isMoved) return
+
+                this.move = getTouchPosition(e)
+                this.touchesDiff = this.isH ? this.move.x - this.start.x : this.move.y - this.start.y
+
+                const { width, height } = rect
+                const percentage = this.touchesDiff / (this.isH ? width : height)
+                const currentTranslate = (this.monthsTranslate + percentage) * 100
+                const transform = getTransform(currentTranslate, this.isH)
+
+                this.$$setData({
+                    wrapperTranslate: `transition-duration: 0s; ${transform}`,
+                })
+            })
+            query.exec()
+        },
+        /**
+         * 手指触摸动作结束
+         */
+        onTouchEnd() {
+            if (!this.data.touchMove || !this.isMoved || this.isRendered) return
+
+            this.isMoved = false
+            this.$$setData({ swiping: false })
+
+            if (Math.abs(this.touchesDiff) < 30) {
+                this.resetMonth()
+            } else if (this.touchesDiff >= 30) {
+                this.prevMonth()
+            } else {
+                this.nextMonth()
+            }
+
+            // Allow click
+            setTimeout(() => (this.allowItemClick = true), 100)
+        },
+        /**
+         * 日期的点击事件
+         * @param {Object} e 事件对象
+         */
+        onDayClick(e) {
+            if (this.allowItemClick) {
+                const dataset = e.currentTarget.dataset
+                const dateYear = dataset.year
+                const dateMonth = dataset.month
+                const dateDay = dataset.day
+                const dateType = dataset.type
+
+                if (dateType.selected && !this.data.multiple) return
+                if (dateType.disabled) return
+                if (dateType.next) this.nextMonth()
+                if (dateType.prev) this.prevMonth()
+
+                if (typeof this.fns.onDayClick === 'function') {
+                    this.fns.onDayClick.call(this, dateYear, dateMonth, dateDay)
+                }
+
+                this.addValue(new Date(dateYear, dateMonth, dateDay).getTime())
+
+                if (this.data.closeOnSelect && !this.data.multiple) {
+                    this.close()
+                }
+            }
+        },
+        /**
+         * 重置月份的位置信息
+         */
+        resetMonth() {
+            const translate = this.monthsTranslate * 100
+            const transform = getTransform(translate, this.isH)
+
+            this.$$setData({
+                wrapperTranslate: `transition-duration: 0s; ${transform}`,
+            })
+        },
+        /**
+         * 设置年月
+         * @param {String} year 年份
+         * @param {String} month 月份
+         */
+        setYearMonth(year = this.data.currentYear, month = this.data.currentMonth) {
+            const { months, monthsTranslate, maxDate, minDate, currentYear, currentMonth } = this.data
+            const targetDate = year < currentYear ? new Date(year, month + 1, -1).getTime() : new Date(year, month).getTime()
+
+            // 判断是否存在最大日期
+            if (maxDate && targetDate > new Date(maxDate).getTime()) return
+
+            // 判断是否存在最小日期
+            if (minDate && targetDate < new Date(minDate).getTime()) return
+
+            const currentDate = new Date(currentYear, currentMonth).getTime()
+            const dir = targetDate > currentDate ? 'next' : 'prev'
+            const newMonthHTML = this.monthHTML(new Date(year, month))
+
+            const prevTranslate = this.monthsTranslate = this.monthsTranslate || 0
+
+            if (targetDate > currentDate) {
+                this.monthsTranslate = this.monthsTranslate - 1
+
+                const translate = -(prevTranslate - 1) * 100
+                const nextMonthTranslate = getTransform(translate, this.isH)
+
+                this.$$setData({
+                    months: [months[1], months[2], newMonthHTML],
+                    monthsTranslate: [monthsTranslate[1], monthsTranslate[2], nextMonthTranslate],
+                })
+            } else {
+                this.monthsTranslate = this.monthsTranslate + 1
+
+                const translate = -(prevTranslate + 1) * 100
+                const prevMonthTranslate = getTransform(translate, this.isH)
+
+                this.$$setData({
+                    months: [newMonthHTML, months[0], months[1]],
+                    monthsTranslate: [prevMonthTranslate, monthsTranslate[0], monthsTranslate[1]],
+                })
+            }
+
+            this.onMonthChangeStart(dir)
+
+            const transform = getTransform(this.monthsTranslate * 100, this.isH)
+            const duration = this.data.animate ? .3 : 0
+            const wrapperTranslate = `transition-duration: ${duration}s; ${transform}`
+
+            this.$$setData({
+                wrapperTranslate,
+            })
+
+            setTimeout(() => this.onMonthChangeEnd(dir, true), duration)
+        },
+        /**
+         * 下一年
+         */
+        nextYear() {
+            this.setYearMonth(this.data.currentYear + 1)
+        },
+        /**
+         * 上一年
+         */
+        prevYear() {
+            this.setYearMonth(this.data.currentYear - 1)
+        },
+        /**
+         * 下一月
+         */
+        nextMonth() {
+            const { months, monthsTranslate, maxDate, currentMonth } = this.data
+            const nextMonth = parseInt(months[months.length - 1].month, 10)
+            const nextYear = parseInt(months[months.length - 1].year, 10)
+            const nextDate = new Date(nextYear, nextMonth)
+            const nextDateTime = nextDate.getTime()
+
+            // 判断是否存在最大日期
+            if (maxDate && nextDateTime > new Date(maxDate).getTime()) {
+                return this.resetMonth()
+            }
+
+            this.monthsTranslate = this.monthsTranslate - 1
+
+            if (nextMonth === currentMonth) {
+                const translate = -(this.monthsTranslate) * 100
+                const nextMonthHTML = this.monthHTML(nextDateTime, 'next')
+                const nextMonthTranslate = getTransform(translate, this.isH)
+                const months = [this.data.months[1], this.data.months[2], nextMonthHTML]
+
+                this.$$setData({
+                    months,
+                    monthsTranslate: [monthsTranslate[1], monthsTranslate[2], nextMonthTranslate],
+                })
+
+                if (typeof this.fns.onMonthAdd === 'function') {
+                    this.fns.onMonthAdd.call(this, months[months.length - 1])
+                }
+            }
+
+            this.onMonthChangeStart('next')
+
+            const transform = getTransform(this.monthsTranslate * 100, this.isH)
+            const duration = this.data.animate ? .3 : 0
+            const wrapperTranslate = `transition-duration: ${duration}s; ${transform}`
+
+            this.$$setData({
+                wrapperTranslate,
+            })
+
+            setTimeout(() => this.onMonthChangeEnd('next'), duration)
+        },
+        /**
+         * 上一月
+         */
+        prevMonth() {
+            const { months, monthsTranslate, minDate, currentMonth } = this.data
+            const prevMonth = parseInt(months[0].month, 10)
+            const prevYear = parseInt(months[0].year, 10)
+            const prevDate = new Date(prevYear, prevMonth + 1, -1)
+            const prevDateTime = prevDate.getTime()
+
+            // 判断是否存在最小日期
+            if (minDate && prevDateTime < new Date(minDate).getTime()) {
+                return this.resetMonth()
+            }
+
+            this.monthsTranslate = this.monthsTranslate + 1
+
+            if (prevMonth === currentMonth) {
+                const translate = -(this.monthsTranslate) * 100
+                const prevMonthHTML = this.monthHTML(prevDateTime, 'prev')
+                const prevMonthTranslate = getTransform(translate, this.isH)
+                const months = [prevMonthHTML, this.data.months[0], this.data.months[1]]
+
+                this.$$setData({
+                    months,
+                    monthsTranslate: [prevMonthTranslate, monthsTranslate[0], monthsTranslate[1]],
+                })
+
+                if (typeof this.fns.onMonthAdd === 'function') {
+                    this.fns.onMonthAdd.call(this, months[0])
+                }
+            }
+
+            this.onMonthChangeStart('prev')
+
+            const transform = getTransform(this.monthsTranslate * 100, this.isH)
+            const duration = this.data.animate ? .3 : 0
+            const wrapperTranslate = `transition-duration: ${duration}s; ${transform}`
+
+            this.$$setData({
+                wrapperTranslate,
+            })
+
+            setTimeout(() => this.onMonthChangeEnd('prev'), duration)
+        },
+        /**
+         * 月份变化开始时的回调函数
+         * @param {String} dir 方向
+         */
+        onMonthChangeStart(dir) {
+            const params = this.updateCurrentMonthYear(dir)
+
+            this.$$setData(params)
+
+            if (typeof this.fns.onMonthYearChangeStart === 'function') {
+                this.fns.onMonthYearChangeStart.call(this, params.currentYear, params.currentMonth)
+            }
+        },
+        /**
+         * 月份变化完成时的回调函数
+         * @param {String} dir 方向
+         * @param {Boolean} rebuildBoth 重置
+         */
+        onMonthChangeEnd(dir = 'next', rebuildBoth = false) {
+            const { currentYear, currentMonth } = this.data
+            let nextMonthHTML, prevMonthHTML, newMonthHTML, months = [...this.data.months]
+
+            if (!rebuildBoth) {
+                newMonthHTML = this.monthHTML(new Date(currentYear, currentMonth), dir)
+                if (dir === 'next') {
+                    months = [months[1], months[2], newMonthHTML]
+                } else if (dir === 'prev') {
+                    months = [newMonthHTML, months[0], months[1]]
+                }
+            } else {
+                prevMonthHTML = this.monthHTML(new Date(currentYear, currentMonth), 'prev')
+                nextMonthHTML = this.monthHTML(new Date(currentYear, currentMonth), 'next')
+                months = [prevMonthHTML, months[dir === 'next' ? months.length - 1 : 0], nextMonthHTML]
+            }
+
+            const monthsTranslate = this.setMonthsTranslate(this.monthsTranslate)
+
+            this.isRendered = true
+            this.$$setData({ months, monthsTranslate }).then(() => (this.isRendered = false))
+
+            if (typeof this.fns.onMonthAdd === 'function') {
+                this.fns.onMonthAdd.call(this, dir === 'next' ? months[months.length - 1] : months[0])
+            }
+
+            if (typeof this.fns.onMonthYearChangeEnd === 'function') {
+                this.fns.onMonthYearChangeEnd.call(this, currentYear, currentMonth)
+            }
+        },
+        /**
+         * 设置星期
+         */
+        setWeekHeader() {
+            const { weekHeader, firstDay, dayNamesShort, weekendDays } = this.data
+            const weeks = []
+
+            if (weekHeader) {
+                for (let i = 0; i < 7; i++) {
+                    const weekDayIndex = (i + firstDay > 6) ? (i - 7 + firstDay) : (i + firstDay)
+                    const dayName = dayNamesShort[weekDayIndex]
+                    const weekend = weekendDays.indexOf(weekDayIndex) >= 0
+
+                    weeks.push({
+                        weekend,
+                        dayName,
+                    })
+                }
+            }
+
+            return weeks
+        },
+        /**
+         * 判断日期是否存在
+         */
+        daysInMonth(date) {
+            const d = new Date(date)
+            return new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate()
+        },
+        /**
+         * 设置月份数据
+         */
+        monthHTML(date, offset) {
+            date = new Date(date)
+            let year = date.getFullYear(),
+                month = date.getMonth(),
+                time = date.getTime()
+
+            const monthHTML = {
+                year,
+                month,
+                time,
+                items: [],
+            }
+
+            if (offset === 'next') {
+                if (month === 11) date = new Date(year + 1, 0)
+                else date = new Date(year, month + 1, 1)
+            }
+
+            if (offset === 'prev') {
+                if (month === 0) date = new Date(year - 1, 11)
+                else date = new Date(year, month - 1, 1)
+            }
+
+            if (offset === 'next' || offset === 'prev') {
+                month = date.getMonth()
+                year = date.getFullYear()
+                time = date.getTime()
+            }
+
+            let daysInPrevMonth = this.daysInMonth(new Date(date.getFullYear(), date.getMonth()).getTime() - 10 * 24 * 60 * 60 * 1000),
+                daysInMonth = this.daysInMonth(date),
+                firstDayOfMonthIndex = new Date(date.getFullYear(), date.getMonth()).getDay()
+            if (firstDayOfMonthIndex === 0) firstDayOfMonthIndex = 7
+
+            let dayDate, currentValues = [],
+                i, j,
+                rows = 6,
+                cols = 7,
+                dayIndex = 0 + (this.data.firstDay - 1),
+                today = new Date().setHours(0, 0, 0, 0),
+                minDate = this.data.minDate ? new Date(this.data.minDate).getTime() : null,
+                maxDate = this.data.maxDate ? new Date(this.data.maxDate).getTime() : null
+
+            if (this.data.value && this.data.value.length) {
+                for (let i = 0; i < this.data.value.length; i++) {
+                    currentValues.push(new Date(this.data.value[i]).setHours(0, 0, 0, 0))
+                }
+            }
+
+            for (let i = 1; i <= rows; i++) {
+                let rowHTML = []
+                let row = i
+
+                for (let j = 1; j <= cols; j++) {
+                    let col = j
+                    dayIndex++
+                    let dayNumber = dayIndex - firstDayOfMonthIndex
+                    let type = {}
+
+                    if (dayNumber < 0) {
+                        dayNumber = daysInPrevMonth + dayNumber + 1
+                        type.prev = true
+                        dayDate = new Date(month - 1 < 0 ? year - 1 : year, month - 1 < 0 ? 11 : month - 1, dayNumber).getTime()
+                    } else {
+                        dayNumber = dayNumber + 1
+                        if (dayNumber > daysInMonth) {
+                            dayNumber = dayNumber - daysInMonth
+                            type.next = true
+                            dayDate = new Date(month + 1 > 11 ? year + 1 : year, month + 1 > 11 ? 0 : month + 1, dayNumber).getTime()
+                        } else {
+                            dayDate = new Date(year, month, dayNumber).getTime()
+                        }
+                    }
+
+                    // Today
+                    if (dayDate === today) type.today = true
+
+                    // Selected
+                    if (currentValues.indexOf(dayDate) >= 0) type.selected = true
+
+                    // Weekend
+                    if (this.data.weekendDays.indexOf(col - 1) >= 0) {
+                        type.weekend = true
+                    }
+
+                    // Disabled
+                    if ((minDate && dayDate < minDate) || (maxDate && dayDate > maxDate)) {
+                        type.disabled = true
+                    }
+
+                    dayDate = new Date(dayDate)
+                    const dayYear = dayDate.getFullYear()
+                    const dayMonth = dayDate.getMonth()
+
+                    rowHTML.push({
+                        type,
+                        year: dayYear,
+                        month: dayMonth,
+                        day: dayNumber,
+                        date: `${dayYear}-${dayMonth + 1}-${dayNumber}`,
+                    })
+                }
+
+                monthHTML.year = year
+                monthHTML.month = month
+                monthHTML.time = time
+
+                monthHTML.items.push(rowHTML)
+            }
+
+            return monthHTML
+        },
+        /**
+         * 设置月份
+         */
+        setMonthsHTML() {
+            const layoutDate = this.data.value && this.data.value.length ? this.data.value[0] : new Date().setHours(0, 0, 0, 0)
+            const prevMonthHTML = this.monthHTML(layoutDate, 'prev')
+            const currentMonthHTML = this.monthHTML(layoutDate)
+            const nextMonthHTML = this.monthHTML(layoutDate, 'next')
+
+            return [prevMonthHTML, currentMonthHTML, nextMonthHTML]
+        },
+        /**
+         * 格式化日期
+         */
+        formatDate(date) {
+            date = new Date(date)
+            const year = date.getFullYear()
+            const month = date.getMonth()
+            const month1 = month + 1
+            const day = date.getDate()
+            const weekDay = date.getDay()
+
+            return this.data.dateFormat
+                .replace(/yyyy/g, year)
+                .replace(/yy/g, (year + '').substring(2))
+                .replace(/mm/g, month1 < 10 ? '0' + month1 : month1)
+                .replace(/m/g, month1)
+                .replace(/MM/g, this.data.monthNames[month])
+                .replace(/M/g, this.data.monthNamesShort[month])
+                .replace(/dd/g, day < 10 ? '0' + day : day)
+                .replace(/d/g, day)
+                .replace(/DD/g, this.data.dayNames[weekDay])
+                .replace(/D/g, this.data.dayNamesShort[weekDay])
+        },
+        /**
+         * 添加选中值
+         */
+        addValue(value) {
+            if (this.data.multiple) {
+                let arrValues = this.data.value || []
+                let inValuesIndex = -1
+
+                for (let i = 0; i < arrValues.length; i++) {
+                    if (isSameDate(value, arrValues[i])) {
+                        inValuesIndex = i
+                    }
+                }
+
+                if (inValuesIndex === -1) {
+                    arrValues.push(value)
+                } else {
+                    arrValues.splice(inValuesIndex, 1)
+                }
+
+                this.setValue(arrValues)
+            } else {
+                this.setValue([value])
+            }
+        },
+        /**
+         * 设置选择值
+         */
+        setValue(value) {
+            this.$$setData({ value }).then(() => this.updateValue())
+        },
+        /**
+         * 更新日历
+         */
+        updateValue() {
+            const changedPath = {}
+
+            this.data.months.forEach((n, i) => {
+                n.items.forEach((v, k) => {
+                    v.forEach((p, j) => {
+                        if (p.type.selected) {
+                            changedPath[`months[${i}].items[${k}][${j}].type.selected`] = false
+                        }
+                    })
+                })
+            })
+
+            for (let ii = 0; ii < this.data.value.length; ii++) {
+                const valueDate = new Date(this.data.value[ii])
+                const valueYear = valueDate.getFullYear()
+                const valueMonth = valueDate.getMonth()
+                const valueDay = valueDate.getDate()
+
+                this.data.months.forEach((n, i) => {
+                    if (n.year === valueYear && n.month === valueMonth) {
+                        n.items.forEach((v, k) => {
+                            v.forEach((p, j) => {
+                                if (p.year === valueYear && p.month === valueMonth && p.day === valueDay) {
+                                    changedPath[`months[${i}].items[${k}][${j}].type.selected`] = true
+                                }
+                            })
+                        })
+                    }
+                })
+            }
+
+            this.$$setData(changedPath)
+
+            if (typeof this.fns.onChange === 'function') {
+                this.fns.onChange.call(this, this.data.value, this.data.value.map((n) => this.formatDate(n)))
+            }
+        },
+        noop() {},
+    },
+})

components/dist/calendar/index.json

@@ -0,0 +1,6 @@
+{
+    "component": true,
+    "usingComponents": {
+        "wux-popup": "../popup/index"
+    }
+}

components/dist/calendar/index.wxml

@@ -0,0 +1,67 @@
+<wux-popup position="bottom" visible="{{ in }}" zIndex="1010" safeArea="bottom" bind:close="close">
+    <view class="wux-class {{ classes.wrap }}">
+        <view class="{{ classes.content }}">
+            <view class="{{ classes.hd }}" wx:if="{{ toolbar }}">
+                <view class="{{ classes.toolbar }}">
+                    <view class="{{ classes.picker }}">
+                        <view class="{{ classes.link }}" bindtap="prevMonth">
+                            <view class="{{ classes.prev }}"></view>
+                        </view>
+                        <view class="{{ classes.value }}">{{ currentMonthName }}</view>
+                        <view class="{{ classes.link }}" bindtap="nextMonth">
+                            <view class="{{ classes.next }}"></view>
+                        </view>
+                    </view>
+                    <view class="{{ classes.picker }}">
+                        <view class="{{ classes.link }}" bindtap="prevYear">
+                            <view class="{{ classes.prev }}"></view>
+                        </view>
+                        <text class="{{ classes.value }}">{{ currentYear }}</text>
+                        <view class="{{ classes.link }}" bindtap="nextYear">
+                            <view class="{{ classes.next }}"></view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <view class="{{ classes.bd }}">
+                <view class="{{ classes.weekdays }}" wx:if="{{ weekHeader }}">
+                    <block wx:for="{{ weeks }}" wx:for-item="week" wx:for-index="weekIndex" wx:key="weekIndex">
+                        <view class="{{ classes.weekday }} {{ week.weekend ? prefixCls + '__weekday--weekend' : '' }}">
+                            {{ week.dayName }}
+                        </view>
+                    </block>
+                </view>
+                <view class="{{ classes.months }}">
+                    <view class="{{ classes.monthsContent }}" bindtouchstart="onTouchStart" catchtouchmove="{{ swiping ? 'noop' : '' }}" capture-bind:touchmove="onTouchMove" bindtouchend="onTouchEnd" style="{{ wrapperTranslate }}">
+                        <block wx:for="{{ months }}" wx:for-item="month" wx:for-index="monthIndex" wx:key="monthIndex">
+                            <view
+                                data-year="{{ month.year }}"
+                                data-month="{{ month.month }}"
+                                class="{{ classes.month }} {{ monthIndex === 0 ? (prefixCls + '__month--prev') : monthIndex === 1 ? (prefixCls + '__month--current') : (prefixCls + '__month--next') }}"
+                                style="{{ monthsTranslate[monthIndex] }}"
+                            >
+                                <block wx:for="{{ month.items }}" wx:for-item="row" wx:for-index="rowIndex" wx:key="rowIndex">
+                                    <view class="{{ classes.days }}">
+                                        <block wx:for="{{ row }}" wx:for-item="col" wx:for-index="colIndex" wx:key="colIndex">
+                                            <view
+                                            data-year="{{ col.year }}"
+                                            data-month="{{ col.month }}"
+                                            data-day="{{ col.day }}"
+                                            data-date="{{ col.date }}"
+                                            data-type="{{ col.type }}"
+                                            class="{{ classes.day }} {{ col.type.prev ? prefixCls + '__day--prev' : '' }} {{ col.type.next ? prefixCls + '__day--next' : '' }} {{ col.type.today ? prefixCls + '__day--today' : '' }} {{ col.type.selected ? prefixCls + '__day--selected' : '' }} {{ col.type.weekend ? prefixCls + '__day--weekend' : '' }} {{ col.type.disabled ? prefixCls + '__day--disabled' : '' }}"
+                                            bindtap="onDayClick"
+                                            >
+                                                <text class="{{ classes.text }}">{{ col.day }}</text>
+                                            </view>
+                                        </block>
+                                    </view>
+                                </block>
+                            </view>
+                        </block>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</wux-popup>

components/dist/calendar/index.wxss

@@ -0,0 +1,215 @@
+.wux-calendar {
+  position: relative;
+  background: #fff;
+  height: 600rpx;
+  width: 100%;
+  overflow: hidden
+}
+.wux-calendar__content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform .3s
+}
+.wux-calendar__bd {
+  height: 100%;
+  position: relative;
+  overflow: hidden
+}
+.wux-calendar__hd {
+  position: relative;
+  width: 100%
+}
+.wux-calendar__hd::before {
+  content: " ";
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  height: 1PX;
+  border-top: 1PX solid #d9d9d9;
+  color: #d9d9d9;
+  transform-origin: 0 0;
+  transform: scaleY(.5)
+}
+.wux-calendar__hd + .wux-calendar__bd {
+  height: calc(97.8%)
+}
+.wux-calendar__toolbar {
+  height: 2.2rem;
+  display: -ms-flexbox;
+  display: flex;
+  text-align: center
+}
+.wux-calendar__picker {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+  align-items: center;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  width: 50%;
+  max-width: 400rpx;
+  -ms-flex-negative: 10;
+  flex-shrink: 10;
+  display: block;
+  line-height: 2.2rem
+}
+.wux-calendar__link {
+  float: left;
+  width: 25%;
+  height: 2.2rem;
+  line-height: 2rem;
+  min-width: 72rpx
+}
+.wux-calendar__icon {
+  display: inline-block;
+  vertical-align: middle;
+  background-size: 100% auto;
+  background-position: center
+}
+.wux-calendar__icon--next,
+.wux-calendar__icon--prev {
+  width: .75rem;
+  height: .75rem
+}
+.wux-calendar__icon--next {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2015%2015'%3E%3Cg%3E%3Cpath%20fill%3D'%23007aff'%20d%3D'M1%2C1.6l11.8%2C5.8L1%2C13.4V1.6%20M0%2C0v15l15-7.6L0%2C0L0%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
+}
+.wux-calendar__icon--prev {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2015%2015'%3E%3Cg%3E%3Cpath%20fill%3D'%23007aff'%20d%3D'M14%2C1.6v11.8L2.2%2C7.6L14%2C1.6%20M15%2C0L0%2C7.6L15%2C15V0L15%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
+}
+.wux-calendar__value {
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  float: left;
+  width: 50%;
+  height: 2.2rem
+}
+.wux-calendar__weekdays {
+  height: 36rpx;
+  background: #f7f7f8;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 22rpx;
+  box-sizing: border-box;
+  position: relative
+}
+.wux-calendar__weekdays::after {
+  content: " ";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  height: 1PX;
+  border-bottom: 1PX solid #d9d9d9;
+  color: #d9d9d9;
+  transform-origin: 0 100%;
+  transform: scaleY(.5)
+}
+.wux-calendar__weekdays + .wux-calendar__months {
+  height: calc(82%)
+}
+.wux-calendar__weekday {
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  width: 14.28571429%;
+  width: calc(14.28571429%);
+  line-height: 34rpx;
+  text-align: center
+}
+.wux-calendar__months {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative
+}
+.wux-calendar__months-content {
+  width: 100%;
+  height: 100%;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  -webkit-backface-visibility: hidden;
+  transform: translate3d(0,0,0)
+}
+.wux-calendar__month {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0
+}
+.wux-calendar__days {
+  height: 16.66666667%;
+  height: calc(16.66666667%);
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  width: 100%;
+  position: relative
+}
+.wux-calendar__days::after {
+  content: " ";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  height: 1PX;
+  border-bottom: 1PX solid #d9d9d9;
+  color: #d9d9d9;
+  transform-origin: 0 100%;
+  transform: scaleY(.5)
+}
+.wux-calendar__days:last-child::after {
+  display: none
+}
+.wux-calendar__day {
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -ms-flex-align: center;
+  align-items: center;
+  box-sizing: border-box;
+  width: 14.28571429%;
+  width: calc(14.28571429%);
+  text-align: center;
+  color: #3d4145;
+  font-size: 30rpx;
+  cursor: pointer
+}
+.wux-calendar__day--prev {
+  color: #ccc
+}
+.wux-calendar__day--next {
+  color: #ccc
+}
+.wux-calendar__day--disabled {
+  color: #d4d4d4;
+  cursor: auto
+}
+.wux-calendar__day--today .wux-calendar__text {
+  background: #e3e3e3
+}
+.wux-calendar__day--selected .wux-calendar__text {
+  background: #0894ec;
+  color: #fff
+}
+.wux-calendar__text {
+  display: inline-block;
+  border-radius: 100%;
+  width: 60rpx;
+  height: 60rpx;
+  line-height: 60rpx
+}

components/dist/countdown/index.js

@@ -0,0 +1,176 @@
+class Countdown {
+    constructor(options = {}, page = getCurrentPages()[getCurrentPages().length - 1]) {
+        Object.assign(this, {
+            page,
+            options,
+        })
+        this.__init()
+    }
+
+    /**
+     * 初始化
+     */
+    __init() {
+        this.setData = this.page.setData.bind(this.page)
+        this.restart(this.options)
+    }
+
+    /**
+     * 默认参数
+     */
+    setDefaults() {
+        return {
+            date: 'June 7, 2087 15:03:25',
+            refresh: 1000,
+            offset: 0,
+            onEnd() {},
+            render(date) {},
+        }
+    }
+
+    /**
+     * 合并参数
+     */
+    mergeOptions(options) {
+        const defaultOptions = this.setDefaults()
+
+        for (let i in defaultOptions) {
+            if (defaultOptions.hasOwnProperty(i)) {
+                this.options[i] = typeof options[i] !== 'undefined' ? options[i] : defaultOptions[i]
+
+                if (i === 'date' && typeof this.options.date !== 'object') {
+                    this.options.date = new Date(this.options.date)
+                }
+
+                if (typeof this.options[i] === 'function') {
+                    this.options[i] = this.options[i].bind(this)
+                }
+            }
+        }
+
+        if (typeof this.options.date !== 'object') {
+            this.options.date = new Date(this.options.date)
+        }
+    }
+
+    /**
+     * 计算日期差
+     */
+    getDiffDate() {
+        let diff = (this.options.date.getTime() - Date.now() + this.options.offset) / 1000
+
+        let dateData = {
+            years: 0,
+            days: 0,
+            hours: 0,
+            min: 0,
+            sec: 0,
+            millisec: 0,
+        }
+
+        if (diff <= 0) {
+            if (this.interval) {
+                this.stop()
+                this.options.onEnd()
+            }
+            return dateData
+        }
+
+        if (diff >= (365.25 * 86400)) {
+            dateData.years = Math.floor(diff / (365.25 * 86400))
+            diff -= dateData.years * 365.25 * 86400
+        }
+
+        if (diff >= 86400) {
+            dateData.days = Math.floor(diff / 86400)
+            diff -= dateData.days * 86400
+        }
+
+        if (diff >= 3600) {
+            dateData.hours = Math.floor(diff / 3600)
+            diff -= dateData.hours * 3600
+        }
+
+        if (diff >= 60) {
+            dateData.min = Math.floor(diff / 60)
+            diff -= dateData.min * 60
+        }
+
+        dateData.sec = Math.round(diff)
+
+        dateData.millisec = diff % 1 * 1000
+
+        return dateData
+    }
+
+    /**
+     * 补零
+     */
+    leadingZeros(num, length = 2) {
+        num = String(num)
+        if (num.length > length) return num
+        return (Array(length + 1).join('0') + num).substr(-length)
+    }
+
+    /**
+     * 更新组件
+     */
+    update(newDate) {
+        this.options.date = typeof newDate !== 'object' ? new Date(newDate) : newDate
+        this.render()
+        return this
+    }
+
+    /**
+     * 停止倒计时
+     */
+    stop() {
+        if (this.interval) {
+            clearInterval(this.interval)
+            this.interval = !1
+        }
+        return this
+    }
+
+    /**
+     * 渲染组件
+     */
+    render() {
+        this.options.render(this.getDiffDate())
+        return this
+    }
+
+    /**
+     * 启动倒计时
+     */
+    start() {
+        if (this.interval) return !1
+        this.render()
+        if (this.options.refresh) {
+            this.interval = setInterval(() => {
+                this.render()
+            }, this.options.refresh)
+        }
+        return this
+    }
+
+    /**
+     * 更新offset
+     */
+    updateOffset(offset) {
+        this.options.offset = offset
+        return this
+    }
+
+    /**
+     * 重启倒计时
+     */
+    restart(options = {}) {
+        this.mergeOptions(options)
+        this.interval = !1
+        this.start()
+        return this
+    }
+}
+
+export default Countdown

components/dist/countup/index.js

@@ -0,0 +1,220 @@
+class CountUp {
+    constructor(startVal, endVal, decimals, duration, options = {}, page = getCurrentPages()[getCurrentPages().length - 1]) {
+        Object.assign(this, {
+            page,
+            startVal,
+            endVal,
+            decimals,
+            duration,
+            options,
+        })
+        this.__init()
+    }
+
+    /**
+     * 初始化
+     */
+    __init() {
+        this.setData = this.page.setData.bind(this.page)
+
+        this.lastTime = 0
+
+        // merge options
+        this.mergeOptions(this.options)
+
+        this.startVal = Number(this.startVal)
+        this.cacheVal = this.startVal
+        this.endVal = Number(this.endVal)
+        this.countDown = (this.startVal > this.endVal)
+        this.frameVal = this.startVal
+        this.decimals = Math.max(0, this.decimals || 0)
+        this.dec = Math.pow(10, this.decimals)
+        this.duration = Number(this.duration) * 1000 || 2000
+
+        // format startVal on initialization
+        this.printValue(this.formattingFn(this.startVal))
+    }
+
+    /**
+     * 默认参数
+     */
+    setDefaultOptions() {
+        return {
+            useEasing: true, // toggle easing
+            useGrouping: true, // 1,000,000 vs 1000000
+            separator: ',', // character to use as a separator
+            decimal: '.', // character to use as a decimal
+            easingFn: null, // optional custom easing closure function, default is Robert Penner's easeOutExpo
+            formattingFn: null, // optional custom formatting function, default is this.formatNumber below
+            printValue(value) {}, // printValue
+        }
+    }
+
+    /**
+     * 合并参数
+     */
+    mergeOptions(options) {
+        const defaultOptions = this.setDefaultOptions()
+
+        // extend default options with passed options object
+        for (let key in defaultOptions) {
+            if (defaultOptions.hasOwnProperty(key)) {
+                this.options[key] = typeof options[key] !== 'undefined' ? options[key] : defaultOptions[key]
+                if (typeof this.options[key] === 'function') {
+                    this.options[key] = this.options[key].bind(this)
+                }
+            }
+        }
+
+        if (this.options.separator === '') { this.options.useGrouping = !1 }
+        if (!this.options.prefix) this.options.prefix = ''
+        if (!this.options.suffix) this.options.suffix = ''
+
+        this.easingFn = this.options.easingFn ? this.options.easingFn : this.easeOutExpo
+        this.formattingFn = this.options.formattingFn ? this.options.formattingFn : this.formatNumber
+        this.printValue = this.options.printValue ? this.options.printValue : function() {}
+    }
+
+    /**
+     * 创建定时器
+     */
+    requestAnimationFrame(callback) {
+        let currTime = new Date().getTime()
+        let timeToCall = Math.max(0, 16 - (currTime - this.lastTime))
+        let timeout = setTimeout(() => {
+            callback.bind(this)(currTime + timeToCall)
+        }, timeToCall)
+        this.lastTime = currTime + timeToCall
+        return timeout
+    }
+
+    /**
+     * 清空定时器
+     */
+    cancelAnimationFrame(timeout) {
+        clearTimeout(timeout)
+    }
+
+    /**
+     * 格式化数字
+     */
+    formatNumber(nStr) {
+        nStr = nStr.toFixed(this.decimals)
+        nStr += ''
+        let x, x1, x2, rgx
+        x = nStr.split('.')
+        x1 = x[0]
+        x2 = x.length > 1 ? this.options.decimal + x[1] : ''
+        rgx = /(\d+)(\d{3})/
+        if (this.options.useGrouping) {
+            while (rgx.test(x1)) {
+                x1 = x1.replace(rgx, '$1' + this.options.separator + '$2')
+            }
+        }
+        return this.options.prefix + x1 + x2 + this.options.suffix
+    }
+
+    /**
+     * 过渡效果
+     */
+    easeOutExpo(t, b, c, d) {
+        return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b
+    }
+
+    /**
+     * 计数函数
+     */
+    count(timestamp) {
+        if (!this.startTime) { this.startTime = timestamp }
+
+        this.timestamp = timestamp
+        const progress = timestamp - this.startTime
+        this.remaining = this.duration - progress
+
+        // to ease or not to ease
+        if (this.options.useEasing) {
+            if (this.countDown) {
+                this.frameVal = this.startVal - this.easingFn(progress, 0, this.startVal - this.endVal, this.duration)
+            } else {
+                this.frameVal = this.easingFn(progress, this.startVal, this.endVal - this.startVal, this.duration)
+            }
+        } else {
+            if (this.countDown) {
+                this.frameVal = this.startVal - ((this.startVal - this.endVal) * (progress / this.duration))
+            } else {
+                this.frameVal = this.startVal + (this.endVal - this.startVal) * (progress / this.duration)
+            }
+        }
+
+        // don't go past endVal since progress can exceed duration in the last frame
+        if (this.countDown) {
+            this.frameVal = (this.frameVal < this.endVal) ? this.endVal : this.frameVal
+        } else {
+            this.frameVal = (this.frameVal > this.endVal) ? this.endVal : this.frameVal
+        }
+
+        // decimal
+        this.frameVal = Math.round(this.frameVal * this.dec) / this.dec
+
+        // format and print value
+        this.printValue(this.formattingFn(this.frameVal))
+
+        // whether to continue
+        if (progress < this.duration) {
+            this.rAF = this.requestAnimationFrame(this.count)
+        } else {
+            if (this.callback) { this.callback() }
+        }
+    }
+
+    /**
+     * 启动计数器
+     */
+    start(callback) {
+        this.callback = callback
+        this.rAF = this.requestAnimationFrame(this.count)
+        return !1
+    }
+
+    /**
+     * 停止计数器
+     */
+    pauseResume() {
+        if (!this.paused) {
+            this.paused = !0
+            this.cancelAnimationFrame(this.rAF)
+        } else {
+            this.paused = !1
+            delete this.startTime
+            this.duration = this.remaining
+            this.startVal = this.frameVal
+            this.requestAnimationFrame(this.count)
+        }
+    }
+
+    /**
+     * 重置计数器
+     */
+    reset() {
+        this.paused = !1
+        delete this.startTime
+        this.startVal = this.cacheVal
+        this.cancelAnimationFrame(this.rAF)
+        this.printValue(this.formattingFn(this.startVal))
+    }
+
+    /**
+     * 更新计数器
+     */
+    update(newEndVal) {
+        this.cancelAnimationFrame(this.rAF)
+        this.paused = !1
+        delete this.startTime
+        this.startVal = this.frameVal
+        this.endVal = Number(newEndVal)
+        this.countDown = (this.startVal > this.endVal)
+        this.rAF = this.requestAnimationFrame(this.count)
+    }
+}
+
+export default CountUp

components/dist/helpers/arrayTreeFilter.js

@@ -0,0 +1,24 @@
+/**
+ * https://github.com/afc163/array-tree-filter
+ */
+function arrayTreeFilter(data, filterFn, options) {
+    options = options || {}
+    options.childrenKeyName = options.childrenKeyName || 'children'
+    let children = data || []
+    const result = []
+    let level = 0
+    do {
+        const foundItem = children.filter(function(item) {
+            return filterFn(item, level)
+        })[0]
+        if (!foundItem) {
+            break
+        }
+        result.push(foundItem)
+        children = foundItem[options.childrenKeyName] || []
+        level += 1
+    } while (children.length > 0)
+    return result
+}
+
+export default arrayTreeFilter

components/dist/helpers/baseComponent.js

@@ -0,0 +1,77 @@
+import computedBehavior from './computedBehavior'
+import relationsBehavior from './relationsBehavior'
+import safeAreaBehavior from './safeAreaBehavior'
+import safeSetDataBehavior from './safeSetDataBehavior'
+import funcBehavior from './funcBehavior'
+import compareVersion from './compareVersion'
+
+const { platform, SDKVersion } = wx.getSystemInfoSync()
+const libVersion = '2.6.6'
+
+// check SDKVersion
+if (platform === 'devtools' && compareVersion(SDKVersion, libVersion) < 0) {
+    if (wx && wx.showModal) {
+        wx.showModal({
+            title: '提示',
+            content: `当前基础库版本（${SDKVersion}）过低，无法使用 Wux Weapp 组件库，请更新基础库版本 >=${libVersion} 后重试。`,
+        })
+    }
+}
+
+const baseComponent = (options = {}) => {
+    // add default externalClasses
+    options.externalClasses = [
+        'wux-class',
+        'wux-hover-class',
+        ...(options.externalClasses = options.externalClasses || []),
+    ]
+
+    // add default behaviors
+    options.behaviors = [
+        relationsBehavior,
+        safeSetDataBehavior,
+        ...(options.behaviors = options.behaviors || []),
+        computedBehavior, // make sure it's triggered
+    ]
+
+    // use safeArea
+    if (options.useSafeArea) {
+        options.behaviors = [...options.behaviors, safeAreaBehavior]
+        delete options.useSafeArea
+    }
+
+    // use func
+    if (options.useFunc) {
+        options.behaviors = [...options.behaviors, funcBehavior]
+        delete options.useFunc
+    }
+
+    // use field
+    if (options.useField) {
+        options.behaviors = [...options.behaviors, 'wx://form-field']
+        delete options.useField
+    }
+
+    // use export
+    if (options.useExport) {
+        options.behaviors = [...options.behaviors, 'wx://component-export']
+        options.methods = {
+            export () {
+                return this
+            },
+            ...options.methods,
+        }
+        delete options.useExport
+    }
+
+    // add default options
+    options.options = {
+        multipleSlots: true,
+        addGlobalClass: true,
+        ...options.options,
+    }
+
+    return Component(options)
+}
+
+export default baseComponent

components/dist/helpers/checkIPhoneX.js

@@ -0,0 +1,29 @@
+/**
+ * 获取系统信息
+ */
+
+let systemInfo = null
+
+export const getSystemInfo = (isForce) => {
+    if (!systemInfo || isForce) {
+        try {
+            systemInfo = wx.getSystemInfoSync()
+        } catch(e) { /* Ignore */ }
+    }
+
+    return systemInfo
+}
+
+// iPhoneX 竖屏安全区域
+export const safeAreaInset = {
+    top: 88, // StatusBar & NavBar
+    left: 0,
+    right: 0,
+    bottom: 34, // Home Indicator
+}
+
+const isIPhoneX = ({ model, platform }) => {
+    return /iPhone X/.test(model) && platform === 'ios'
+}
+
+export const checkIPhoneX = (isForce) => isIPhoneX(getSystemInfo(isForce))

components/dist/helpers/classNames.js

@@ -0,0 +1,39 @@
+/*!
+  Copyright (c) 2018 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+/* global define */
+'use strict';
+
+var hasOwn = {}.hasOwnProperty;
+
+function classNames() {
+    var classes = [];
+
+    for (var i = 0; i < arguments.length; i++) {
+        var arg = arguments[i];
+        if (!arg) continue;
+
+        var argType = typeof arg;
+
+        if (argType === 'string' || argType === 'number') {
+            classes.push(arg);
+        } else if (Array.isArray(arg) && arg.length) {
+            var inner = classNames.apply(null, arg);
+            if (inner) {
+                classes.push(inner);
+            }
+        } else if (argType === 'object') {
+            for (var key in arg) {
+                if (hasOwn.call(arg, key) && arg[key]) {
+                    classes.push(key);
+                }
+            }
+        }
+    }
+
+    return classes.join(' ');
+}
+
+export default classNames

components/dist/helpers/colors.js

@@ -0,0 +1,27 @@
+/**
+ * Don't modify this file!
+ * Colors generated by themes!
+ */
+
+/* eslint-disable */
+
+export const colors = {
+    'light': '#ddd',
+    'stable': '#b2b2b2',
+    'positive': '#387ef5',
+    'calm': '#11c1f3',
+    'balanced': '#33cd5f',
+    'energized': '#ffc900',
+    'assertive': '#ef473a',
+    'royal': '#886aea',
+    'dark': '#444',
+}
+
+export const isPresetColor = (color) => {
+    if (!color) {
+        return false
+    }
+    return colors[color] ? colors[color] : color
+}
+
+/* eslint-enable */

components/dist/helpers/compareVersion.js

@@ -0,0 +1,27 @@
+function compareVersion(v1, v2) {
+    const $v1 = v1.split('.')
+    const $v2 = v2.split('.')
+    const len = Math.max($v1.length, $v2.length)
+
+    while ($v1.length < len) {
+        $v1.push('0')
+    }
+    while ($v2.length < len) {
+        $v2.push('0')
+    }
+
+    for (let i = 0; i < len; i++) {
+        const num1 = parseInt($v1[i])
+        const num2 = parseInt($v2[i])
+
+        if (num1 > num2) {
+            return 1
+        } else if (num1 < num2) {
+            return -1
+        }
+    }
+
+    return 0
+}
+
+export default compareVersion

components/dist/helpers/computedBehavior.js

@@ -0,0 +1,48 @@
+import isEmpty from './isEmpty'
+import shallowEqual from './shallowEqual'
+
+const ALL_DATA_KEY = '**'
+
+const trim = (str = '') => str.replace(/\s/g, '')
+
+export default Behavior({
+    lifetimes: {
+        attached() {
+            this.initComputed()
+        },
+    },
+    definitionFilter(defFields) {
+        const { computed = {} } = defFields
+        const observers = Object.keys(computed).reduce((acc, name) => {
+            const [field, getter] = Array.isArray(computed[name]) ? computed[name] : [ALL_DATA_KEY, computed[name]]
+            return {
+                ...acc,
+                [field]: function(...args) {
+                    if (typeof getter === 'function') {
+                        const newValue = getter.apply(this, args)
+                        const oldValue = this.data[name]
+                        if (!isEmpty(newValue) && !shallowEqual(newValue, oldValue)) {
+                            this.setData({ [name]: newValue })
+                        }
+                    }
+                },
+            }
+        }, {})
+
+        Object.assign(defFields.observers = (defFields.observers || {}), observers)
+        Object.assign(defFields.methods = (defFields.methods || {}), {
+            initComputed: function(data = {}, isForce = false) {
+                if (!this.runInitComputed || isForce) {
+                    this.runInitComputed = false
+                    const context = this
+                    const result = { ...this.data, ...data }
+                    Object.keys(observers).forEach((key) => {
+                        const values = trim(key).split(',').reduce((acc, name) => ([...acc, result[name]]), [])
+                        observers[key].apply(context, values)
+                    })
+                    this.runInitComputed = true
+                }
+            },
+        })
+    },
+})

components/dist/helpers/createFieldsStore.js

@@ -0,0 +1,75 @@
+class FieldsStore {
+    constructor(fields = {}) {
+        this.fields = fields
+    }
+
+    setFields(fields) {
+        Object.assign(this.fields, fields)
+    }
+
+    updateFields(fields) {
+        this.fields = fields
+    }
+
+    clearField(name) {
+        delete this.fields[name]
+    }
+
+    getValueFromFields(name, fields) {
+        const field = fields[name]
+        if (field && 'value' in field) {
+            return field.value
+        }
+        return field.initialValue
+    }
+
+    getAllFieldsName() {
+        const { fields } = this
+        return fields ? Object.keys(fields) : []
+    }
+
+    getField(name) {
+        return {
+            ...this.fields[name],
+            name,
+        }
+    }
+
+    getFieldValuePropValue(fieldOption) {
+        const { name, valuePropName } = fieldOption
+        const field = this.getField(name)
+        const fieldValue = 'value' in field ? field.value : field.initialValue
+
+        return {
+            [valuePropName]: fieldValue,
+        }
+    }
+
+    getFieldValue(name) {
+        return this.getValueFromFields(name, this.fields)
+    }
+
+    getFieldsValue(names) {
+        const fields = names || this.getAllFieldsName()
+        return fields.reduce((acc, name) => {
+            acc[name] = this.getFieldValue(name)
+            return acc
+        }, {})
+    }
+
+    resetFields(ns) {
+        const { fields } = this
+        const names = ns || this.getAllFieldsName()
+        return names.reduce((acc, name) => {
+            const field = fields[name]
+            if (field) {
+                acc[name] = field.initialValue
+            }
+            return acc
+        }, {})
+    }
+}
+
+export default function createFieldsStore(fields) {
+    return new FieldsStore(fields)
+}

components/dist/helpers/debounce.js

@@ -0,0 +1,56 @@
+export default function debounce(func, wait, immediate) {
+    let timeout,
+        args,
+        context,
+        timestamp,
+        result
+
+    function later() {
+        const last = +(new Date()) - timestamp
+        if (last < wait && last >= 0) {
+            timeout = setTimeout(later, wait - last)
+        } else {
+            timeout = undefined
+            if (!immediate) {
+                result = func.apply(context, args)
+                if (!timeout) {
+                    context = undefined
+                    args = undefined
+                }
+            }
+        }
+    }
+
+    function debounced() {
+        context = this
+        args = arguments
+        timestamp = +(new Date())
+
+        const callNow = immediate && !timeout
+        if (!timeout) {
+            timeout = setTimeout(later, wait)
+        }
+
+        if (callNow) {
+            result = func.apply(context, args)
+            context = undefined
+            args = undefined
+        }
+
+        return result
+    }
+
+    function cancel() {
+        if (timeout !== undefined) {
+            clearTimeout(timeout)
+            timeout = undefined
+        }
+
+        context = undefined
+        args = undefined
+    }
+
+    debounced.cancel = cancel
+
+    return debounced
+}

components/dist/helpers/eventsMixin.js

@@ -0,0 +1,53 @@
+const defaultEvents = {
+    onChange() {},
+}
+
+export default function eventsMixin(params = { defaultEvents }) {
+    return Behavior({
+        lifetimes: {
+            created () {
+                this._oriTriggerEvent = this.triggerEvent
+                this.triggerEvent = this._triggerEvent
+            },
+        },
+        properties: {
+            events: {
+                type: Object,
+                value: defaultEvents,
+            },
+        },
+        data: {
+            inputEvents: defaultEvents,
+        },
+        definitionFilter(defFields) {
+            // set default data
+            Object.assign(defFields.data = (defFields.data || {}), {
+                inputEvents: Object.assign({}, defaultEvents, defFields.inputEvents),
+            })
+
+            // set default methods
+            Object.assign(defFields.methods = (defFields.methods || {}), {
+                _triggerEvent(name, params, runCallbacks = true, option) {
+                    const { inputEvents } = this.data
+                    const method = `on${name[0].toUpperCase()}${name.slice(1)}`
+                    const func = inputEvents[method]
+
+                    if (runCallbacks && typeof func === 'function') {
+                        func.call(this, params)
+                    }
+
+                    this._oriTriggerEvent(name, params, option)
+                },
+            })
+
+            // set default observers
+            Object.assign(defFields.observers = (defFields.observers || {}), {
+                events(newVal) {
+                    this.setData({
+                        inputEvents: Object.assign({}, defaultEvents, this.data.inputEvents, newVal),
+                    })
+                },
+            })
+        },
+    })
+}

components/dist/helpers/funcBehavior.js

@@ -0,0 +1,97 @@
+/**
+ * 过滤对象的函数属性
+ * @param {Object} opts
+ */
+const mergeOptionsToData = (opts = {}) => {
+    const options = Object.assign({}, opts)
+
+    for (const key in options) {
+        if (options.hasOwnProperty(key) && typeof options[key] === 'function') {
+            delete options[key]
+        }
+    }
+
+    return options
+}
+
+/**
+ * Simple bind, faster than native
+ *
+ * @param {Function} fn
+ * @param {Object} ctx
+ * @return {Function}
+ */
+const bind = (fn, ctx) => {
+    return (...args) => {
+        return args.length ? fn.apply(ctx, args) : fn.call(ctx)
+    }
+}
+
+/**
+ * Object assign
+ */
+const assign = (...args) => Object.assign({}, ...args)
+
+export default Behavior({
+    definitionFilter(defFields) {
+        defFields.data = mergeOptionsToData(defFields.data)
+        defFields.data.in = false
+        defFields.data.visible = false
+    },
+    methods: {
+        /**
+         * 过滤对象的函数属性
+         * @param {Object} opts
+         */
+        $$mergeOptionsToData: mergeOptionsToData,
+        /**
+         * 合并参数并绑定方法
+         *
+         * @param {Object} opts 参数对象
+         * @param {Object} fns 方法挂载的属性
+         */
+        $$mergeOptionsAndBindMethods (opts = {}, fns = this.fns) {
+            const options = Object.assign({}, opts)
+
+            for (const key in options) {
+                if (options.hasOwnProperty(key) && typeof options[key] === 'function') {
+                    fns[key] = bind(options[key], this)
+                    delete options[key]
+                }
+            }
+
+            return options
+        },
+        /**
+         * Promise setData
+         * @param {Array} args 参数对象
+         */
+        $$setData (...args) {
+            const params = assign({}, ...args)
+
+            return new Promise((resolve) => {
+                this.setData(params, resolve)
+            })
+        },
+        /**
+         * 延迟指定时间执行回调函数
+         * @param {Function} callback 回调函数
+         * @param {Number} timeout 延迟时间
+         */
+        $$requestAnimationFrame (callback = () => {}, timeout = 1000 / 60) {
+            return new Promise((resolve) => setTimeout(resolve, timeout)).then(callback)
+        },
+    },
+    /**
+     * 组件生命周期函数，在组件实例进入页面节点树时执行
+     */
+    created () {
+        this.fns = {}
+    },
+    /**
+     * 组件生命周期函数，在组件实例被从页面节点树移除时执行
+     */
+    detached () {
+        this.fns = {}
+    },
+})

components/dist/helpers/gestures.js

@@ -0,0 +1,50 @@
+/**
+ * 获取触摸点位置信息
+ */
+export const getTouchPoints = (nativeEvent, index = 0) => {
+    const touches = nativeEvent.touches
+    const changedTouches = nativeEvent.changedTouches
+    const hasTouches = touches && touches.length > 0
+    const hasChangedTouches = changedTouches && changedTouches.length > 0
+    const points = !hasTouches && hasChangedTouches ? changedTouches[index] : hasTouches ? touches[index] : nativeEvent
+
+    return {
+        x: points.pageX,
+        y: points.pageY,
+    }
+}
+
+/**
+ * 获取触摸点个数
+ */
+export const getPointsNumber = (e) => e.touches && e.touches.length || e.changedTouches && e.changedTouches.length
+
+/**
+ * 判断是否为同一点
+ */
+export const isEqualPoints = (p1, p2) => p1.x === p2.x && p1.y === p2.y
+
+/**
+ * 判断是否为相近的两点
+ */
+export const isNearbyPoints = (p1, p2, DOUBLE_TAP_RADIUS = 25) => {
+    const xMove = Math.abs(p1.x - p2.x)
+    const yMove = Math.abs(p1.y - p2.y)
+    return xMove < DOUBLE_TAP_RADIUS & yMove < DOUBLE_TAP_RADIUS
+}
+
+/**
+ * 获取两点之间的距离
+ */
+export const getPointsDistance = (p1, p2) => {
+    const xMove = Math.abs(p1.x - p2.x)
+    const yMove = Math.abs(p1.y - p2.y)
+    return Math.sqrt(xMove * xMove + yMove * yMove)
+}
+
+/**
+ * 获取触摸移动方向
+ */
+export const getSwipeDirection = (x1, x2, y1, y2) => {
+    return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')
+}

components/dist/helpers/isEmpty.js

@@ -0,0 +1,19 @@
+/**
+ * Checks if a value is empty.
+ */
+function isEmpty(value) {
+    if (Array.isArray(value)) {
+        return value.length === 0
+    } else if (typeof value === 'object') {
+        if (value) {
+            for (const _ in value) {
+                return false
+            }
+        }
+        return true
+    } else {
+        return !value
+    }
+}
+
+export default isEmpty

components/dist/helpers/mergeOptionsToData.js

@@ -0,0 +1,17 @@
+/**
+ * 过滤对象的函数属性
+ * @param {Object} opts
+ */
+const mergeOptionsToData = (opts = {}) => {
+    const options = Object.assign({}, opts)
+
+    for (const key in options) {
+        if (options.hasOwnProperty(key) && typeof options[key] === 'function') {
+            delete options[key]
+        }
+    }
+
+    return options
+}
+
+export default mergeOptionsToData

components/dist/helpers/popupMixin.js

@@ -0,0 +1,314 @@
+import classNames from './classNames'
+import eventsMixin from './eventsMixin'
+
+const DEFAULT_TRIGGER = 'onClick'
+const CELL_NAME = '../cell/index'
+const FIELD_NAME = '../field/index'
+
+const defaultToolbar = {
+    title: '请选择',
+    cancelText: '取消',
+    confirmText: '确定',
+}
+
+const defaultEvents = {
+    onChange() {},
+    onConfirm() {},
+    onCancel() {},
+    onVisibleChange() {},
+    onValueChange() {},
+}
+
+const defaultPlatformProps = {
+    labelPropName: 'label',
+    format(values, props) {
+        return Array.isArray(values.displayValue) ? values.displayValue.join(',') : values.displayValue
+    },
+}
+
+const defaultFieldNames = {
+    label: 'label',
+    value: 'value',
+    children: 'children',
+}
+
+export default function popupMixin(selector = '#wux-picker', platformProps = defaultPlatformProps) {
+    return Behavior({
+        behaviors: [eventsMixin({ defaultEvents })],
+        properties: {
+            toolbar: {
+                type: Object,
+                value: defaultToolbar,
+            },
+            trigger: {
+                type: String,
+                value: DEFAULT_TRIGGER,
+            },
+            defaultVisible: {
+                type: Boolean,
+                value: false,
+            },
+            visible: {
+                type: Boolean,
+                value: false,
+            },
+            controlled: {
+                type: Boolean,
+                value: false,
+            },
+            disabled: {
+                type: Boolean,
+                value: false,
+            },
+        },
+        data: {
+            mounted: false,
+            popupVisible: false,
+            inputValue: [],
+        },
+        methods: {
+            /**
+             * 设置组件显示或隐藏
+             */
+            setVisibleState(popupVisible, callback = () => {}) {
+                if (this.data.popupVisible !== popupVisible) {
+                    const params = {
+                        mounted: true,
+                        inputValue: this.data.value, // forceUpdate
+                        popupVisible,
+                    }
+                    this.setData(popupVisible ? params : { popupVisible }, () => {
+                        // collect field component & forceUpdate
+                        if (popupVisible && this.hasFieldDecorator) {
+                            const field = this.getFieldElem()
+                            if (field) {
+                                field.changeValue(field.data.value)
+                            }
+                        }
+                        callback()
+                    })
+                }
+            },
+            /**
+             * 触发 visibleChange 事件
+             */
+            fireVisibleChange(popupVisible) {
+                if (this.data.popupVisible !== popupVisible) {
+                    if (!this.data.controlled) {
+                        this.setVisibleState(popupVisible)
+                    }
+                    this.setScrollValue(undefined)
+                    this.triggerEvent('visibleChange', { visible: popupVisible })
+                }
+            },
+            /**
+             * 打开
+             */
+            open() {
+                this.fireVisibleChange(true)
+            },
+            /**
+             * 关闭
+             */
+            close(callback) {
+                if (typeof callback === 'function') {
+                    const values = this.getPickerValue(this.scrollValue || this.data.inputValue)
+                    callback.call(this, this.formatPickerValue(values))
+                }
+                this.fireVisibleChange(false)
+            },
+            /**
+             * 组件关闭时重置其内部数据
+             */
+            onClosed() {
+                this.picker = null
+                this.setData({ mounted: false, inputValue: null })
+            },
+            /**
+             * 点击确定按钮时的回调函数
+             */
+            onConfirm() {
+                this.close((values) => {
+                    this.triggerEvent('change', values) // collect field component
+                    this.triggerEvent('confirm', values)
+                })
+            },
+            /**
+             * 点击取消按钮时的回调函数
+             */
+            onCancel() {
+                this.close((values) => this.triggerEvent('cancel', values))
+            },
+            /**
+             * 每列数据选择变化后的回调函数
+             */
+            onValueChange(e) {
+                if (!this.data.mounted) return
+                const { value } = e.detail
+                if (this.data.cascade) {
+                    this.setCasecadeScrollValue(value)
+                } else {
+                    this.setScrollValue(value)
+                }
+
+                this.updated(value, true)
+                this.triggerEvent('valueChange', this.formatPickerValue(e.detail))
+            },
+            /**
+             * 获取当前 picker 的值
+             */
+            getPickerValue(value = this.data.inputValue) {
+                this.picker = this.picker || this.selectComponent(selector)
+                return this.picker && this.picker.getValue(value)
+            },
+            /**
+             * 格式化 picker 返回值
+             */
+            formatPickerValue(values) {
+                return {
+                    ...values,
+                    [platformProps.labelPropName]: platformProps.format(values, this.data),
+                }
+            },
+            /**
+             * 获取 field 父元素
+             */
+            getFieldElem() {
+                return this.field = (this.field || this.getRelationNodes(FIELD_NAME)[0])
+            },
+            /**
+             * 设置子元素 props
+             */
+            setChildProps() {
+                if (this.data.disabled) return
+                const elements = this.getRelationNodes(CELL_NAME)
+                const { trigger = DEFAULT_TRIGGER } = this.data
+                if (elements.length > 0) {
+                    elements.forEach((inputElem) => {
+                        const { inputEvents } = inputElem.data
+                        const oriInputEvents = inputElem.data.oriInputEvents || { ...inputEvents }
+                        inputEvents[trigger] = (...args) => {
+                            if (oriInputEvents && oriInputEvents[trigger]) {
+                                oriInputEvents[trigger](...args)
+                            }
+                            this.onTriggerClick()
+                        }
+                        inputElem.setData({ oriInputEvents, inputEvents })
+                    })
+                }
+            },
+            /**
+             * 触发事件
+             */
+            onTriggerClick() {
+                this.fireVisibleChange(!this.data.popupVisible)
+            },
+            /**
+             * 阻止移动触摸
+             */
+            noop() {},
+            /**
+             * 更新值
+             */
+            updated(inputValue, isForce) {
+                if (!this.hasFieldDecorator || isForce) {
+                    if (this.data.inputValue !== inputValue) {
+                        this.setData({ inputValue })
+                    }
+                }
+            },
+            /**
+             * 记录每列数据的变化值
+             */
+            setScrollValue(value) {
+                this.scrollValue = value
+            },
+            /**
+             * 记录每列数据的变化值 - 针对于级联
+             */
+            setCasecadeScrollValue(value) {
+                if (value && this.scrollValue) {
+                    const length = this.scrollValue.length
+                    if (length === value.length && this.scrollValue[length - 1] === value[length - 1]) {
+                        return
+                    }
+                }
+                this.setScrollValue(value)
+            },
+        },
+        lifetimes: {
+            ready() {
+                const { defaultVisible, visible, controlled, value } = this.data
+                const popupVisible = controlled ? visible : defaultVisible
+
+                // 若 defaultFieldNames 存在，则缓存之，并传递给子组件，只生效一次
+                if ('defaultFieldNames' in this.data) {
+                    this.setData({
+                        fieldNames: Object.assign({}, defaultFieldNames, this.data.defaultFieldNames),
+                    })
+                }
+
+                this.mounted = true
+                this.scrollValue = undefined
+                this.setVisibleState(popupVisible)
+                this.setChildProps()
+            },
+            detached() {
+                this.mounted = false
+            },
+        },
+        definitionFilter(defFields) {
+            // set default child
+            Object.assign(defFields.relations = (defFields.relations || {}), {
+                [CELL_NAME]: {
+                    type: 'child',
+                    observer() {
+                        this.setChildProps()
+                    },
+                },
+                [FIELD_NAME]: {
+                    type: 'ancestor',
+                },
+            })
+
+            // set default classes
+            Object.assign(defFields.computed = (defFields.computed || {}), {
+                classes: ['prefixCls', function(prefixCls) {
+                    const wrap = classNames(prefixCls)
+                    const toolbar = `${prefixCls}__toolbar`
+                    const inner = `${prefixCls}__inner`
+                    const cancel = classNames(`${prefixCls}__button`, {
+                        [`${prefixCls}__button--cancel`]: true,
+                    })
+                    const confirm = classNames(`${prefixCls}__button`, {
+                        [`${prefixCls}__button--confirm`]: true,
+                    })
+                    const hover = `${prefixCls}__button--hover`
+                    const title = `${prefixCls}__title`
+
+                    return {
+                        wrap,
+                        toolbar,
+                        inner,
+                        cancel,
+                        confirm,
+                        hover,
+                        title,
+                    }
+                }],
+            })
+
+            // set default observers
+            Object.assign(defFields.observers = (defFields.observers || {}), {
+                visible(popupVisible) {
+                    if (this.data.controlled) {
+                        this.setVisibleState(popupVisible)
+                    }
+                },
+                value(value) {
+                    this.updated(value)
+                },
+            })
+        },
+    })
+}

components/dist/helpers/relationsBehavior.js

@@ -0,0 +1,67 @@
+import isEmpty from './isEmpty'
+import debounce from './debounce'
+
+/**
+ * bind func to obj
+ */
+function bindFunc(obj, method, observer) {
+    const oldFn = obj[method]
+    obj[method] = function(target) {
+        if (observer) {
+            observer.call(this, target, {
+                [method]: true,
+            })
+        }
+        if (oldFn) {
+            oldFn.call(this, target)
+        }
+    }
+}
+
+// default methods
+const methods = ['linked', 'linkChanged', 'unlinked']
+
+// extra props
+const extProps = ['observer']
+
+export default Behavior({
+    lifetimes: {
+        created() {
+            this._debounce = null
+        },
+        detached() {
+            if (this._debounce && this._debounce.cancel) {
+                this._debounce.cancel()
+            }
+        },
+    },
+    definitionFilter(defFields) {
+        const { relations } = defFields
+
+        if (!isEmpty(relations)) {
+            for (const key in relations) {
+                const relation = relations[key]
+
+                // bind func
+                methods.forEach((method) => bindFunc(relation, method, relation.observer))
+
+                // delete extProps
+                extProps.forEach((prop) => delete relation[prop])
+            }
+        }
+
+        Object.assign(defFields.methods = (defFields.methods || {}), {
+            getRelationsName: function(types = ['parent', 'child', 'ancestor', 'descendant']) {
+                return Object.keys(relations || {}).map((key) => {
+                    if (relations[key] && types.includes(relations[key].type)) {
+                        return key
+                    }
+                    return null
+                }).filter((v) => !!v)
+            },
+            debounce: function(func, wait = 0, immediate = false) {
+                return (this._debounce = this._debounce || debounce(func.bind(this), wait, immediate)).call(this)
+            },
+        })
+    },
+})

components/dist/helpers/safeAreaBehavior.js

@@ -0,0 +1,46 @@
+import { getSystemInfo, checkIPhoneX } from './checkIPhoneX'
+
+const defaultSafeArea = {
+    top: false,
+    bottom: false,
+}
+
+const setSafeArea = (params) => {
+    if (typeof params === 'boolean') {
+        return Object.assign({}, defaultSafeArea, {
+            top: params,
+            bottom: params,
+        })
+    } else if (params !== null && typeof params === 'object') {
+        return Object.assign({}, defaultSafeArea)
+    } else if (typeof params === 'string') {
+        return Object.assign({}, defaultSafeArea, {
+            [params]: true,
+        })
+    }
+    return defaultSafeArea
+}
+
+export default Behavior({
+    properties: {
+        safeArea: {
+            type: [Boolean, String, Object],
+            value: false,
+        },
+    },
+    observers: {
+        safeArea(newVal) {
+            this.setData({ safeAreaConfig: setSafeArea(newVal) })
+        },
+    },
+    definitionFilter(defFields) {
+        const { statusBarHeight } = getSystemInfo() || {}
+        const isIPhoneX = checkIPhoneX()
+
+        Object.assign(defFields.data = (defFields.data || {}), {
+            safeAreaConfig: defaultSafeArea,
+            statusBarHeight,
+            isIPhoneX,
+        })
+    },
+})

components/dist/helpers/safeSetDataBehavior.js

@@ -0,0 +1,57 @@
+export default Behavior({
+    lifetimes: {
+        created() {
+            this.nextCallback = null
+        },
+        detached() {
+            this.cancelNextCallback()
+        },
+    },
+    methods: {
+        /**
+         * safeSetData
+         * @param {Object} nextData 数据对象
+         * @param {Function} callback 回调函数
+         */
+        safeSetData(nextData, callback) {
+            this.pendingData = Object.assign({}, this.data, nextData)
+            callback = this.setNextCallback(callback)
+
+            this.setData(nextData, () => {
+                this.pendingData = null
+                callback()
+            })
+        },
+        /**
+         * 设置下一回调函数
+         * @param {Function} callback 回调函数
+         */
+        setNextCallback(callback) {
+            let active = true
+
+            this.nextCallback = (event) => {
+                if (active) {
+                    active = false
+                    this.nextCallback = null
+
+                    callback.call(this, event)
+                }
+            }
+
+            this.nextCallback.cancel = () => {
+                active = false
+            }
+
+            return this.nextCallback
+        },
+        /**
+         * 取消下一回调函数
+         */
+        cancelNextCallback() {
+            if (this.nextCallback !== null) {
+                this.nextCallback.cancel()
+                this.nextCallback = null
+            }
+        },
+    },
+})

components/dist/helpers/shallowEqual.js

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @typechecks
+ * 
+ */
+
+/*eslint-disable no-self-compare */
+
+'use strict';
+
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+
+/**
+ * inlined Object.is polyfill to avoid requiring consumers ship their own
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+ */
+function is(x, y) {
+    // SameValue algorithm
+    if (x === y) {
+        // Steps 1-5, 7-10
+        // Steps 6.b-6.e: +0 != -0
+        // Added the nonzero y check to make Flow happy, but it is redundant
+        return x !== 0 || y !== 0 || 1 / x === 1 / y;
+    } else {
+        // Step 6.a: NaN == NaN
+        return x !== x && y !== y;
+    }
+}
+
+/**
+ * Performs equality by iterating through keys on an object and returning false
+ * when any key has values which are not strictly equal between the arguments.
+ * Returns true when the values of all keys are strictly equal.
+ */
+function shallowEqual(objA, objB) {
+    if (is(objA, objB)) {
+        return true;
+    }
+
+    if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+        return false;
+    }
+
+    var keysA = Object.keys(objA);
+    var keysB = Object.keys(objB);
+
+    if (keysA.length !== keysB.length) {
+        return false;
+    }
+
+    // Test for A's keys different from B.
+    for (var i = 0; i < keysA.length; i++) {
+        if (!hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
+            return false;
+        }
+    }
+
+    return true;
+}
+
+export default shallowEqual

components/dist/helpers/styleToCssString.js

@@ -0,0 +1,139 @@
+'use strict';
+
+/**
+ * CSS properties which accept numbers but are not in units of "px".
+ */
+var isUnitlessNumber = {
+    boxFlex: true,
+    boxFlexGroup: true,
+    columnCount: true,
+    flex: true,
+    flexGrow: true,
+    flexPositive: true,
+    flexShrink: true,
+    flexNegative: true,
+    fontWeight: true,
+    lineClamp: true,
+    lineHeight: true,
+    opacity: true,
+    order: true,
+    orphans: true,
+    widows: true,
+    zIndex: true,
+    zoom: true,
+
+    // SVG-related properties
+    fillOpacity: true,
+    strokeDashoffset: true,
+    strokeOpacity: true,
+    strokeWidth: true
+};
+
+/**
+ * @param {string} prefix vendor-specific prefix, eg: Webkit
+ * @param {string} key style name, eg: transitionDuration
+ * @return {string} style name prefixed with `prefix`, properly camelCased, eg:
+ * WebkitTransitionDuration
+ */
+function prefixKey(prefix, key) {
+    return prefix + key.charAt(0).toUpperCase() + key.substring(1);
+}
+
+/**
+ * Support style names that may come passed in prefixed by adding permutations
+ * of vendor prefixes.
+ */
+var prefixes = ['Webkit', 'ms', 'Moz', 'O'];
+
+// Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an
+// infinite loop, because it iterates over the newly added props too.
+Object.keys(isUnitlessNumber).forEach(function(prop) {
+    prefixes.forEach(function(prefix) {
+        isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];
+    });
+});
+
+var msPattern = /^ms-/;
+
+var _uppercasePattern = /([A-Z])/g;
+
+/**
+ * Hyphenates a camelcased string, for example:
+ *
+ *   > hyphenate('backgroundColor')
+ *   < "background-color"
+ *
+ * For CSS style names, use `hyphenateStyleName` instead which works properly
+ * with all vendor prefixes, including `ms`.
+ *
+ * @param {string} string
+ * @return {string}
+ */
+function hyphenate(string) {
+    return string.replace(_uppercasePattern, '-$1').toLowerCase();
+}
+
+/**
+ * Hyphenates a camelcased CSS property name, for example:
+ *
+ *   > hyphenateStyleName('backgroundColor')
+ *   < "background-color"
+ *   > hyphenateStyleName('MozTransition')
+ *   < "-moz-transition"
+ *   > hyphenateStyleName('msTransition')
+ *   < "-ms-transition"
+ *
+ * As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix
+ * is converted to `-ms-`.
+ *
+ * @param {string} string
+ * @return {string}
+ */
+function hyphenateStyleName(string) {
+    return hyphenate(string).replace(msPattern, '-ms-');
+}
+
+var isArray = Array.isArray;
+var keys = Object.keys;
+
+var counter = 1;
+// Follows syntax at https://developer.mozilla.org/en-US/docs/Web/CSS/content,
+// including multiple space separated values.
+var unquotedContentValueRegex = /^(normal|none|(\b(url\([^)]*\)|chapter_counter|attr\([^)]*\)|(no-)?(open|close)-quote|inherit)((\b\s*)|$|\s+))+)$/;
+
+function buildRule(key, value) {
+    if (!isUnitlessNumber[key] && typeof value === 'number') {
+        value = '' + value + 'px';
+    } else if (key === 'content' && !unquotedContentValueRegex.test(value)) {
+        value = "'" + value.replace(/'/g, "\\'") + "'";
+    }
+
+    return hyphenateStyleName(key) + ': ' + value + ';  ';
+}
+
+function styleToCssString(rules) {
+    var result = ''
+    if (typeof rules === 'string') {
+        rules = rules.trim()
+        return rules.slice(-1) === ";" ? `${rules} ` : `${rules}; `
+    }
+    if (!rules || keys(rules).length === 0) {
+        return result;
+    }
+    var styleKeys = keys(rules);
+    for (var j = 0, l = styleKeys.length; j < l; j++) {
+        var styleKey = styleKeys[j];
+        var value = rules[styleKey];
+
+        if (isArray(value)) {
+            for (var i = 0, len = value.length; i < len; i++) {
+                result += buildRule(styleKey, value[i]);
+            }
+        } else {
+            result += buildRule(styleKey, value);
+        }
+    }
+    return result;
+}
+
+export default styleToCssString

components/dist/icon/index.js

@@ -0,0 +1,47 @@
+Component({
+    externalClasses: ['wux-class'],
+    properties: {
+        type: {
+            type: String,
+            value: '',
+        },
+        size: {
+            type: [String, Number],
+            value: 32,
+            observer: 'updated',
+        },
+        color: {
+            type: String,
+            value: '',
+        },
+        hidden: {
+            type: Boolean,
+            value: false,
+        },
+    },
+    data: {
+        fontSize: '',
+    },
+    methods: {
+        updated(size = this.data.size) {
+            let fontSize = size
+
+            if (typeof size === 'number') {
+                fontSize = `${size}px`
+            } else if (typeof size === 'string') {
+                if (!isNaN(Number(size))) {
+                    fontSize = `${size}px`
+                }
+            }
+
+            if (this.data.fontSize !== fontSize) {
+                this.setData({
+                    fontSize,
+                })
+            }
+        },
+    },
+    attached() {
+        this.updated()
+    },
+})

components/dist/icon/index.json

@@ -0,0 +1,3 @@
+{
+    "component": true
+}

components/dist/icon/index.wxml

@@ -0,0 +1 @@
+<view class="wux-class ion {{ type ? 'ion-' + type : '' }}" style="font-size: {{ fontSize }}; {{ color ? 'color: ' + color : '' }}" hidden="{{ hidden }}"></view>

components/dist/index.js

@@ -0,0 +1,67 @@
+/**
+ * Wux Weapp 3.8.7
+ * 一套组件化、可复用、易扩展的微信小程序 UI 组件库
+ * https://github.com/wux-weapp/wux-weapp#readme
+ *
+ * Copyright 2017-2021 skyvow
+ *
+ * Released under the MIT License
+ *
+ * Released on: 2021-4-12
+ */
+
+import $wuxCountDown from './countdown/index'
+import $wuxCountUp from './countup/index'
+
+/**
+ * 使用选择器选择组件实例节点，返回匹配到的第一个组件实例对象
+ * @param {String} selector 节点选择器
+ * @param {Object} ctx 页面栈或组件的实例，默认为当前页面栈实例
+ */
+export const getCtx = (selector, ctx = getCurrentPages()[getCurrentPages().length - 1]) => {
+    const componentCtx = ctx.selectComponent(selector)
+
+    if (!componentCtx) {
+        throw new Error('无法找到对应的组件，请按文档说明使用组件')
+    }
+
+    return componentCtx
+}
+
+const version = '3.8.7'
+const $wuxActionSheet = (selector = '#wux-actionsheet', ctx) => getCtx(selector, ctx)
+const $wuxBackdrop = (selector = '#wux-backdrop', ctx) => getCtx(selector, ctx)
+const $wuxCalendar = (selector = '#wux-calendar', ctx) => getCtx(selector, ctx)
+const $wuxDialog = (selector = '#wux-dialog', ctx) => getCtx(selector, ctx)
+const $wuxForm = (selector = '#wux-form', ctx) => getCtx(selector, ctx)
+const $wuxGallery = (selector = '#wux-gallery', ctx) => getCtx(selector, ctx)
+const $wuxKeyBoard = (selector = '#wux-keyboard', ctx) => getCtx(selector, ctx)
+const $wuxLoading = (selector = '#wux-loading', ctx) => getCtx(selector, ctx)
+const $wuxNotification = (selector = '#wux-notification', ctx) => getCtx(selector, ctx)
+const $startWuxRefresher = (selector = '#wux-refresher', ctx) => getCtx(selector, ctx).triggerRefresh()
+const $stopWuxRefresher = (selector = '#wux-refresher', ctx) => getCtx(selector, ctx).finishPullToRefresh()
+const $stopWuxLoader = (selector = '#wux-refresher', ctx, isEnd) => getCtx(selector, ctx).finishLoadmore(isEnd)
+const $wuxSelect = (selector = '#wux-select', ctx) => getCtx(selector, ctx)
+const $wuxToast = (selector = '#wux-toast', ctx) => getCtx(selector, ctx)
+const $wuxToptips = (selector = '#wux-toptips', ctx) => getCtx(selector, ctx)
+
+export {
+    version,
+	$wuxCountDown,
+	$wuxCountUp,
+	$wuxActionSheet,
+	$wuxBackdrop,
+	$wuxCalendar,
+	$wuxDialog,
+	$wuxForm,
+	$wuxGallery,
+	$wuxKeyBoard,
+	$wuxLoading,
+	$wuxNotification,
+	$startWuxRefresher,
+	$stopWuxRefresher,
+	$stopWuxLoader,
+	$wuxSelect,
+	$wuxToast,
+	$wuxToptips
+}

components/dist/landscape/index.js

@@ -0,0 +1,66 @@
+import baseComponent from '../helpers/baseComponent'
+import classNames from '../helpers/classNames'
+
+baseComponent({
+    properties: {
+        prefixCls: {
+            type: String,
+            value: 'wux-landscape',
+        },
+        newPrefixCls: {
+            type: String,
+            value: '',
+        },
+        visible: {
+            type: Boolean,
+            value: false,
+        },
+        mask: {
+            type: Boolean,
+            value: true,
+            observer(newVal) {
+                this.setData({ showMask: newVal })
+            },
+        },
+        maskClosable: {
+            type: Boolean,
+            value: false,
+        },
+        closable: {
+            type: Boolean,
+            value: true,
+        },
+    },
+    data: {
+        showMask: true,
+    },
+    computed: {
+        classes: ['prefixCls, showMask', function(prefixCls, showMask) {
+            const wrap = classNames(prefixCls, {
+                [`${prefixCls}--has-mask`]: showMask,
+            })
+            const popup = `${prefixCls}__popup`
+            const popupBody = `${prefixCls}__popup-body`
+            const popupClose = `${prefixCls}__popup-close`
+            const inner = `${prefixCls}__inner`
+            const close = `${prefixCls}__close`
+            const x = `${prefixCls}__close-x`
+
+            return {
+                wrap,
+                popup,
+                popupBody,
+                popupClose,
+                inner,
+                close,
+                x,
+            }
+        }],
+    },
+    methods: {
+        onClose() {
+            this.triggerEvent('close', { visible: !this.data.visible })
+        },
+    },
+    attached() {},
+})

components/dist/landscape/index.json

@@ -0,0 +1,6 @@
+{
+    "component": true,
+    "usingComponents": {
+        "wux-popup": "../popup/index"
+    }
+}

components/dist/landscape/index.wxml

@@ -0,0 +1,22 @@
+<wux-popup
+    wux-content-class="{{ classes.popup }}"
+    wux-body-class="{{ classes.popupBody }}"
+    wux-close-class="{{ classes.popupClose }}"
+    visible="{{ visible }}"
+    hasHeader="{{ false }}"
+    hasFooter="{{ false }}"
+    mask="{{ showMask }}"
+    maskClosable="{{ maskClosable }}"
+    bind:close="onClose"
+    newPrefixCls="{{ newPrefixCls }}"
+>
+	<view class="wux-class {{ classes.wrap }}">
+	    <view class="{{ classes.inner }}">
+	    	<slot></slot>
+	    </view>
+        <view class="{{ classes.close }}" wx:if="{{ closable }}" bindtap="onClose">
+            <!-- <text class="{{ classes.x }}"></text> -->
+            <image class="close" src="/images/home_popup_close.png"></image>
+        </view>
+	</view>
+</wux-popup>

components/dist/landscape/index.wxss

@@ -0,0 +1,36 @@
+.wux-landscape__popup {
+  background-color: transparent!important
+}
+.wux-landscape__popup-body {
+  padding: 0!important
+}
+.wux-landscape__inner {
+  padding: 30rpx;
+  font-size: 30rpx;
+  line-height: 1.5;
+  color: rgba(0,0,0,.65)
+}
+.wux-landscape__inner > image {
+  width: 100%;
+  max-width: 100%
+}
+.wux-landscape__close {
+  position: relative;
+  display: inline-block;
+  margin-top: 10rpx
+}
+.wux-landscape__close image {
+  width: 96rpx;
+  height: 96rpx;
+}
+.wux-landscape__close-x {
+  display: inline-block;
+  width: 48rpx;
+  height: 48rpx;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22%23888%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M1.414%200l28.284%2028.284-1.414%201.414L0%201.414z%22%2F%3E%3Cpath%20d%3D%22M28.284%200L0%2028.284l1.414%201.414L29.698%201.414z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
+}
+.wux-landscape--has-mask .wux-landscape__close-x {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M1.414%200l28.284%2028.284-1.414%201.414L0%201.414z%22%2F%3E%3Cpath%20d%3D%22M28.284%200L0%2028.284l1.414%201.414L29.698%201.414z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
+}

components/dist/popup/index.js

@@ -0,0 +1,194 @@
+import baseComponent from '../helpers/baseComponent'
+import classNames from '../helpers/classNames'
+import styleToCssString from '../helpers/styleToCssString'
+import { $wuxBackdrop } from '../index'
+
+baseComponent({
+    useSafeArea: true,
+    externalClasses: ['wux-content-class', 'wux-header-class', 'wux-body-class', 'wux-footer-class', 'wux-close-class'],
+    properties: {
+        prefixCls: {
+            type: String,
+            value: 'wux-popup',
+        },
+        newPrefixCls: {
+            type: String,
+            value: '',
+        },
+        animationPrefixCls: {
+            type: String,
+            value: 'wux-animate',
+        },
+        title: {
+            type: String,
+            value: '',
+        },
+        content: {
+            type: String,
+            value: '',
+        },
+        extra: {
+            type: String,
+            value: '',
+        },
+        position: {
+            type: String,
+            value: 'center',
+            observer: 'getTransitionName',
+        },
+        wrapStyle: {
+            type: [String, Object],
+            value: '',
+            observer(newVal) {
+                this.setData({
+                    extStyle: styleToCssString(newVal),
+                })
+            },
+        },
+        closable: {
+            type: Boolean,
+            value: false,
+        },
+        mask: {
+            type: Boolean,
+            value: true,
+        },
+        maskClosable: {
+            type: Boolean,
+            value: true,
+        },
+        visible: {
+            type: Boolean,
+            value: false,
+            observer: 'setPopupVisible',
+        },
+        zIndex: {
+            type: Number,
+            value: 1000,
+        },
+        hasHeader: {
+            type: Boolean,
+            value: true,
+        },
+        hasFooter: {
+            type: Boolean,
+            value: true,
+        },
+        mountOnEnter: {
+            type: Boolean,
+            value: true,
+        },
+        unmountOnExit: {
+            type: Boolean,
+            value: true,
+        },
+    },
+    data: {
+        transitionName: '',
+        popupVisible: false,
+        extStyle: '',
+    },
+    computed: {
+        classes: ['prefixCls, position, safeAreaConfig, isIPhoneX', function(prefixCls, position, safeAreaConfig, isIPhoneX) {
+            const wrap = classNames(`${prefixCls}-position`, {
+                [`${prefixCls}-position--${position}`]: position,
+                [`${prefixCls}-position--is-iphonex`]: safeAreaConfig.bottom && isIPhoneX,
+            })
+            const content = `${prefixCls}__content`
+            const hd = `${prefixCls}__hd`
+            const title = `${prefixCls}__title`
+            const bd = `${prefixCls}__bd`
+            const ft = `${prefixCls}__ft`
+            const extra = `${prefixCls}__extra`
+            const close = `${prefixCls}__close`
+            const x = `${prefixCls}__close-x`
+
+            return {
+                wrap,
+                content,
+                hd,
+                title,
+                bd,
+                ft,
+                extra,
+                close,
+                x,
+            }
+        }],
+    },
+    methods: {
+        /**
+         * 点击关闭按钮事件
+         */
+        close() {
+            this.triggerEvent('close')
+        },
+        /**
+         * 点击蒙层事件
+         */
+        onMaskClick() {
+            if (this.data.maskClosable) {
+                this.close()
+            }
+        },
+        /**
+         * 组件关闭后的回调函数
+         */
+        onExited() {
+            this.triggerEvent('closed')
+        },
+        /**
+         * 获取过渡的类名
+         */
+        getTransitionName(value = this.data.position) {
+            const { animationPrefixCls } = this.data
+            let transitionName = ''
+
+            switch (value) {
+                    case 'top':
+                        transitionName = `${animationPrefixCls}--slideInDown`
+                        break
+                    case 'right':
+                        transitionName = `${animationPrefixCls}--slideInRight`
+                        break
+                    case 'bottom':
+                        transitionName = `${animationPrefixCls}--slideInUp`
+                        break
+                    case 'left':
+                        transitionName = `${animationPrefixCls}--slideInLeft`
+                        break
+                    default:
+                        transitionName = `${animationPrefixCls}--fadeIn`
+                        break
+            }
+
+            this.setData({ transitionName })
+        },
+        /**
+         * 设置 popup 组件的显示隐藏
+         */
+        setPopupVisible(popupVisible) {
+            if (this.data.popupVisible !== popupVisible) {
+                this.setData({ popupVisible })
+                this.setBackdropVisible(popupVisible)
+            }
+        },
+        /**
+         * 设置 backdrop 组件的显示隐藏
+         */
+        setBackdropVisible(visible) {
+            if (this.data.mask && this.$wuxBackdrop) {
+                this.$wuxBackdrop[visible ? 'retain' : 'release']()
+            }
+        },
+    },
+    created() {
+        if (this.data.mask) {
+            this.$wuxBackdrop = $wuxBackdrop('#wux-backdrop', this)
+        }
+    },
+    attached() {
+        this.setPopupVisible(this.data.visible)
+        this.getTransitionName()
+    },
+})

components/dist/popup/index.json

@@ -0,0 +1,7 @@
+{
+    "component": true,
+    "usingComponents": {
+        "wux-animation-group": "../animation-group/index",
+        "wux-backdrop": "../backdrop/index"
+    }
+}

components/dist/popup/index.wxml

@@ -0,0 +1,26 @@
+<wux-backdrop id="wux-backdrop" wx:if="{{ mask }}" bind:click="onMaskClick" zIndex="{{ zIndex }}" />
+<view class="wux-class {{ classes.wrap }}" style="{{ extStyle }}">
+    <wux-animation-group wux-class="{{ prefixCls }} {{ newPrefixCls }}" in="{{ popupVisible }}" classNames="{{ transitionName }}" bind:exited="onExited" wrapStyle="{{ { zIndex } }}" mountOnEnter="{{ mountOnEnter }}" unmountOnExit="{{ unmountOnExit }}">
+        <view class="wux-content-class {{ classes.content }}">
+            <view class="wux-header-class {{ classes.hd }}" wx:if="{{ hasHeader }}">
+                <view class="{{ classes.title }}" wx:if="{{ title }}">{{ title }}</view>
+                <block wx:else>
+                    <slot name="header"></slot>
+                </block>
+            </view>
+            <view class="wux-body-class {{ classes.bd }}">
+                <view wx:if="{{ content }}">{{ content }}</view>
+                <slot></slot>
+            </view>
+            <view class="wux-footer-class {{ classes.ft }}" wx:if="{{ hasFooter }}">
+                <view class="{{ classes.extra }}" wx:if="{{ extra }}">{{ extra }}</view>
+                <block wx:else>
+                    <slot name="footer"></slot>
+                </block>
+            </view>
+            <view class="wux-close-class {{ classes.close }}" wx:if="{{ closable }}" bindtap="close">
+                <text class="{{ classes.x }}"></text>
+            </view>
+        </view>
+    </wux-animation-group>
+</view>

components/dist/popup/index.wxss

@@ -0,0 +1,121 @@
+.wux-popup {
+  position: fixed;
+  z-index: 1000;
+  width: 80%;
+  max-width: 600rpx
+}
+
+.wux-popup-widtn {
+  width: 100%;
+  max-width: 100%
+}
+
+.wux-popup-position.wux-popup-position--center .wux-popup {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%)
+}
+.wux-popup-position.wux-popup-position--center .wux-popup__content {
+  border-radius: 8rpx
+}
+.wux-popup-position.wux-popup-position--center .wux-popup__hd {
+  padding: 1.3em 1.6em .5em
+}
+.wux-popup-position.wux-popup-position--center .wux-popup__bd {
+  padding: 0 1.6em .8em
+}
+.wux-popup-position.wux-popup-position--center .wux-popup__ft::after {
+  content: " ";
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  height: 1PX;
+  border-top: 1PX solid #d9d9d9;
+  color: #d9d9d9;
+  transform-origin: 0 0;
+  transform: scaleY(.5)
+}
+.wux-popup-position.wux-popup-position--top .wux-popup {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  max-width: 100%
+}
+.wux-popup-position.wux-popup-position--right .wux-popup {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 80%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%
+}
+.wux-popup-position.wux-popup-position--bottom .wux-popup {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  max-width: 100%
+}
+.wux-popup-position.wux-popup-position--left .wux-popup {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 80%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%
+}
+.wux-popup-position.wux-popup-position--is-iphonex .wux-popup__content {
+  padding-bottom: 68rpx
+}
+.wux-popup__content {
+  position: relative;
+  background-color: #fff;
+  border: 0;
+  background-clip: padding-box;
+  height: 100%;
+  text-align: center;
+  overflow: hidden
+}
+.wux-popup__title {
+  font-weight: 400;
+  font-size: 36rpx;
+  color: rgba(0,0,0,.85)
+}
+.wux-popup__bd {
+  min-height: 80rpx;
+  font-size: 30rpx;
+  line-height: 1.3;
+  word-wrap: break-word;
+  word-break: break-all;
+  color: rgba(0,0,0,.45)
+}
+.wux-popup__ft {
+  position: relative;
+  line-height: 96rpx;
+  font-size: 36rpx;
+  display: -ms-flexbox;
+  display: flex
+}
+.wux-popup__close {
+  border: 0;
+  padding: 6rpx;
+  background-color: transparent;
+  outline: 0;
+  position: absolute;
+  top: 12rpx;
+  right: 12rpx;
+  height: 42rpx;
+  width: 42rpx
+}
+.wux-popup__close-x {
+  display: inline-block;
+  width: 30rpx;
+  height: 30rpx;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22%23888%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M1.414%200l28.284%2028.284-1.414%201.414L0%201.414z%22%2F%3E%3Cpath%20d%3D%22M28.284%200L0%2028.284l1.414%201.414L29.698%201.414z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
+}

components/dist/rater/index.js

@@ -0,0 +1,202 @@
+import baseComponent from '../helpers/baseComponent'
+import classNames from '../helpers/classNames'
+import eventsMixin from '../helpers/eventsMixin'
+
+baseComponent({
+    behaviors: [eventsMixin()],
+    relations: {
+        '../field/index': {
+            type: 'ancestor',
+        },
+    },
+    properties: {
+        prefixCls: {
+            type: String,
+            value: 'wux-rater',
+        },
+        max: {
+            type: Number,
+            value: 5,
+            observer() {
+                this.setValue(this.data.inputValue)
+            },
+        },
+        icon: {
+            type: String,
+            value: '',
+        },
+        star: {
+            type: String,
+            value: '★',
+        },
+        defaultValue: {
+            type: Number,
+            value: 0,
+        },
+        value: {
+            type: Number,
+            value: 0,
+            observer(newVal) {
+                if (this.data.controlled) {
+                    this.setValue(newVal)
+                }
+            },
+        },
+        activeColor: {
+            type: String,
+            value: '#ffc900',
+        },
+        margin: {
+            type: Number,
+            value: 2,
+        },
+        fontSize: {
+            type: Number,
+            value: 25,
+        },
+        disabled: {
+            type: Boolean,
+            value: false,
+        },
+        allowHalf: {
+            type: Boolean,
+            value: false,
+        },
+        allowClear: {
+            type: Boolean,
+            value: false,
+        },
+        allowTouchMove: {
+            type: Boolean,
+            value: false,
+        },
+        controlled: {
+            type: Boolean,
+            value: false,
+        },
+    },
+    data: {
+        inputValue: 0,
+    },
+    computed: {
+        classes: ['prefixCls, disabled', function(prefixCls, disabled) {
+            const wrap = classNames(prefixCls, {
+                [`${prefixCls}--disabled`]: disabled,
+            })
+            const star = `${prefixCls}__star`
+            const box = `${prefixCls}__box`
+            const inner = `${prefixCls}__inner`
+            const outer = `${prefixCls}__outer`
+            const icon = `${prefixCls}__icon`
+
+            return {
+                wrap,
+                star,
+                box,
+                inner,
+                outer,
+                icon,
+            }
+        }],
+    },
+    observers: {
+        ['inputValue, max, activeColor'](inputValue, max, activeColor) {
+            const stars = [...new Array(max)].map((_, i) => i)
+            const colors = stars.reduce((a, _, i) => ([...a, i <= inputValue - 1 ? activeColor : '#ccc']), [])
+            const _val = inputValue.toString().split('.')
+            const sliceValue = _val.length === 1 ? [_val[0], 0] : _val
+
+            this.setData({
+                stars,
+                colors,
+                cutIndex: sliceValue[0] * 1,
+                cutPercent: sliceValue[1] * 10,
+            })
+        },
+    },
+    methods: {
+        updated(inputValue) {
+            if (this.hasFieldDecorator) return
+            if (this.data.inputValue !== inputValue) {
+                this.setData({ inputValue })
+            }
+        },
+        setValue(value) {
+            const { max } = this.data
+            const inputValue = value <= 0 ? 0 : value > max ? max : value
+
+            this.updated(inputValue)
+        },
+        updateHalfStarValue(index, x, cb) {
+            const { prefixCls } = this.data
+            const query = wx.createSelectorQuery().in(this)
+            query.selectAll(`.${prefixCls}__star`).boundingClientRect((rects) => {
+                if (rects.filter((n) => !n).length) return
+                const { left, width } = rects[index]
+                const has = (x - left) < width / 2
+                const value = has ? index + .5 : index + 1
+                cb.call(this, value, index)
+            }).exec()
+        },
+        onTap(e) {
+            const { index } = e.currentTarget.dataset
+            const { inputValue, disabled, allowHalf, allowClear } = this.data
+
+            // 判断是否禁用
+            if (!disabled) {
+                // 判断是否支持选中半星
+                if (!allowHalf) {
+                    const value = index + 1
+                    const isReset = allowClear && value === inputValue
+
+                    this.onChange(isReset ? 0 : value, index)
+                } else {
+                    this.updateHalfStarValue(index, e.detail.x, (value, index) => {
+                        const isReset = allowClear && value === inputValue
+
+                        this.onChange(isReset ? 0 : value, index)
+                    })
+                }
+            }
+        },
+        onChange(value, index) {
+            if (!this.data.controlled) {
+                this.setValue(value)
+            }
+
+            this.triggerEvent('change', { value, index })
+        },
+        onTouchMove(e) {
+            const { disabled, allowHalf, allowTouchMove } = this.data
+            if (!disabled && allowTouchMove) {
+                const x = e.changedTouches[0].pageX
+                const { prefixCls } = this.data
+                const query = wx.createSelectorQuery().in(this)
+                query.selectAll(`.${prefixCls}__star`).boundingClientRect((rects) => {
+                    if (rects.filter((n) => !n).length) return
+                    const { left, width } = rects[0]
+                    const maxWidth = rects.map((n) => n.width).reduce((a, b) => a + b)
+                    const diff = x - left
+                    let value = Math.ceil(diff / width)
+
+                    // 判断是否在组件宽度范围内
+                    if (diff > 0 && diff < maxWidth) {
+                        const index = value - 1
+                        if (allowHalf) {
+                            const star = rects[index]
+                            const has = (x - star.left) < star.width / 2
+                            value = has ? value - .5 : value
+                        }
+                        this.onChange(value, index)
+                    }
+                }).exec()
+            }
+        },
+    },
+    attached() {
+        const { defaultValue, value, controlled } = this.data
+        const inputValue = controlled ? value : defaultValue
+
+        this.setValue(inputValue)
+    },
+})

components/dist/rater/index.json

@@ -0,0 +1,6 @@
+{
+    "component": true,
+    "usingComponents": {
+        "wux-icon": "../icon/index"
+    }
+}

components/dist/rater/index.wxml

@@ -0,0 +1,16 @@
+<view class="wux-class {{ classes.wrap }}" bindtouchmove="onTouchMove">
+    <block wx:for="{{ stars }}" wx:key="index">
+        <view class="{{ classes.star }}" bindtap="onTap" data-index="{{ index }}">
+            <view class="{{ classes.box }} {{ inputValue > index ? prefixCls + '__box--active' : '' }}" style="color: {{ colors && colors[index] ? colors[index]: '#ccc' }}; margin-right: {{ margin + 'px' }}; font-size: {{ fontSize + 'px' }}; width: {{ fontSize + 'px' }}; height: {{ fontSize + 'px' }}; line-height: {{ fontSize + 'px' }}">
+                <view class="{{ classes.inner }}">
+                    <wux-icon wx:if="{{ icon }}" wux-class="{{ classes.icon }}" type="{{ icon }}" size="{{ fontSize }}" color="{{ colors && colors[index] ? colors[index]: '#ccc' }}" />
+                    <block wx:else>{{ star }}</block>
+                    <view class="{{ classes.outer }}" style="color: {{ activeColor }}; width: {{ cutPercent + '%' }}" wx:if="{{ cutPercent > 0 && cutIndex === index }}">
+                        <wux-icon wx:if="{{ icon }}" wux-class="{{ classes.icon }}" type="{{ icon }}" size="{{ fontSize }}" color="{{ activeColor }}" />
+                        <block wx:else>{{ star }}</block>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </block>
+</view>

components/dist/rater/index.wxss

@@ -0,0 +1,52 @@
+.wux-rater {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  line-height: normal;
+  vertical-align: middle;
+  font-weight: 400;
+  font-style: normal;
+  text-align: left
+}
+.wux-rater::after,
+.wux-rater::before {
+  display: table;
+  content: " "
+}
+.wux-rater::after {
+  clear: both
+}
+.wux-rater__star {
+  position: relative;
+  display: inline-block
+}
+.wux-rater__star:last-child .wux-rater__box {
+  padding-right: 4rpx!important;
+  margin-right: 0!important
+}
+.wux-rater__box {
+  position: relative;
+  display: inline-block;
+  text-align: center;
+  cursor: pointer;
+  color: #ccc;
+  transition: color .3s ease
+}
+.wux-rater__box--disabled {
+  color: #ccc!important;
+  cursor: not-allowed
+}
+.wux-rater__icon {
+  transition: color .3s ease
+}
+.wux-rater__inner {
+  position: relative;
+  display: inline-block
+}
+.wux-rater__outer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: inline-block;
+  overflow: hidden
+}

components/local/calendar/func/config.js

@@ -0,0 +1,33 @@
+import WxData from './wxData'
+
+class Config extends WxData {
+  constructor(component) {
+    super(component)
+    this.Component = component
+  }
+  getCalendarConfig() {
+    if (!this.Component || !this.Component.config) return {}
+    return this.Component.config
+  }
+  setCalendarConfig(config) {
+    return new Promise((resolve, reject) => {
+      if (!this.Component || !this.Component.config) {
+        reject('异常：未找到组件配置信息')
+        return
+      }
+      let conf = { ...this.Component.config, ...config }
+
+      this.Component.config = conf
+      this.setData(
+        {
+          calendarConfig: conf
+        },
+        () => {
+          resolve(conf)
+        }
+      )
+    })
+  }
+}
+
+export default component => new Config(component)

components/local/calendar/func/day.js

@@ -0,0 +1,543 @@
+import WxData from './wxData'
+import CalendarConfig from './config'
+import convertSolarLunar from './convertSolarLunar'
+import {
+  Logger,
+  GetDate,
+  getDateTimeStamp,
+  uniqueArrayByDate,
+  delRepeatedEnableDay,
+  convertEnableAreaToTimestamp,
+  converEnableDaysToTimestamp
+} from './utils'
+
+const logger = new Logger()
+const getDate = new GetDate()
+const toString = Object.prototype.toString
+
+class Day extends WxData {
+  constructor(component) {
+    super(component)
+    this.Component = component
+  }
+  getCalendarConfig() {
+    return this.Component.config
+  }
+  /**
+   *
+   * @param {number} year
+   * @param {number} month
+   */
+  buildDate(year, month) {
+    const today = getDate.todayDate()
+    const thisMonthDays = getDate.thisMonthDays(year, month)
+    const dates = []
+    for (let i = 1; i <= thisMonthDays; i++) {
+      const isToday =
+        +today.year === +year && +today.month === +month && i === +today.date
+      const config = this.getCalendarConfig()
+      const date = {
+        year,
+        month,
+        day: i,
+        choosed: false,
+        week: getDate.dayOfWeek(year, month, i),
+        isToday: isToday && config.highlightToday,
+        lunar: convertSolarLunar.solar2lunar(+year, +month, +i)
+      }
+      dates.push(date)
+    }
+    return dates
+  }
+  /**
+   * 指定可选日期范围
+   * @param {array} area 日期访问数组
+   */
+  enableArea(dateArea = []) {
+    if (dateArea.length === 2) {
+      const isRight = this.__judgeParam(dateArea)
+      if (isRight) {
+        let { days = [], selectedDay = [] } = this.getData('calendar')
+        const { startTimestamp, endTimestamp } = convertEnableAreaToTimestamp(
+          dateArea
+        )
+        const dataAfterHandle = this.__handleEnableArea(
+          {
+            dateArea,
+            days,
+            startTimestamp,
+            endTimestamp
+          },
+          selectedDay
+        )
+        this.setData({
+          'calendar.enableArea': dateArea,
+          'calendar.days': dataAfterHandle.dates,
+          'calendar.selectedDay': dataAfterHandle.selectedDay,
+          'calendar.enableAreaTimestamp': [startTimestamp, endTimestamp]
+        })
+      }
+    } else {
+      logger.warn(
+        'enableArea()参数需为时间范围数组，形如：["2018-8-4" , "2018-8-24"]'
+      )
+    }
+  }
+  /**
+   * 指定特定日期可选
+   * @param {array} days 指定日期数组
+   */
+  enableDays(dates = []) {
+    const { enableArea = [] } = this.getData('calendar')
+    let expectEnableDaysTimestamp = []
+    if (enableArea.length) {
+      expectEnableDaysTimestamp = delRepeatedEnableDay(dates, enableArea)
+    } else {
+      expectEnableDaysTimestamp = converEnableDaysToTimestamp(dates)
+    }
+    let { days = [], selectedDay = [] } = this.getData('calendar')
+    const dataAfterHandle = this.__handleEnableDays(
+      {
+        days,
+        expectEnableDaysTimestamp
+      },
+      selectedDay
+    )
+    this.setData({
+      'calendar.days': dataAfterHandle.dates,
+      'calendar.selectedDay': dataAfterHandle.selectedDay,
+      'calendar.enableDays': dates,
+      'calendar.enableDaysTimestamp': expectEnableDaysTimestamp
+    })
+  }
+  /**
+   * 设置多个日期选中
+   * @param {array} selected 需选中日期
+   */
+  setSelectedDays(selected) {
+    const config = CalendarConfig(this.Component).getCalendarConfig()
+    if (!config.multi) {
+      return logger.warn('单选模式下不能设置多日期选中，请配置 multi')
+    }
+    let { days } = this.getData('calendar')
+    let newSelectedDay = []
+    if (!selected) {
+      days.map(item => {
+        item.choosed = true
+        item.showTodoLabel = false
+      })
+      newSelectedDay = days
+    } else if (selected && selected.length) {
+      const { dates, selectedDates } = this.__handleSelectedDays(
+        days,
+        newSelectedDay,
+        selected
+      )
+      days = dates
+      newSelectedDay = selectedDates
+    }
+    CalendarConfig(this.Component).setCalendarConfig('multi', true)
+    this.setData({
+      'calendar.days': days,
+      'calendar.selectedDay': newSelectedDay
+    })
+  }
+  /**
+   * 禁用指定日期
+   * @param {array} dates  禁用
+   */
+  disableDays(dates) {
+    const { disableDays = [], days } = this.getData('calendar')
+    if (Object.prototype.toString.call(dates) !== '[object Array]') {
+      return logger.warn('disableDays 参数为数组')
+    }
+    let _disableDays = []
+    if (dates.length) {
+      _disableDays = uniqueArrayByDate(dates.concat(disableDays))
+      const disableDaysCol = _disableDays.map(d => getDate.toTimeStr(d))
+      days.forEach(item => {
+        const cur = getDate.toTimeStr(item)
+        if (disableDaysCol.includes(cur)) item.disable = true
+      })
+    } else {
+      days.forEach(item => {
+        item.disable = false
+      })
+    }
+    this.setData({
+      'calendar.days': days,
+      'calendar.disableDays': _disableDays
+    })
+  }
+  /**
+   * 设置连续日期选择区域
+   * @param {array} dateArea 区域开始结束日期数组
+   */
+  chooseArea(dateArea = []) {
+    return new Promise((resolve, reject) => {
+      if (dateArea.length === 1) {
+        dateArea = dateArea.concat(dateArea)
+      }
+      if (dateArea.length === 2) {
+        const isRight = this.__judgeParam(dateArea)
+        if (isRight) {
+          const config = CalendarConfig(this.Component).getCalendarConfig()
+          const { startTimestamp, endTimestamp } = convertEnableAreaToTimestamp(
+            dateArea
+          )
+          this.setData(
+            {
+              calendarConfig: {
+                ...config,
+                chooseAreaMode: true,
+                mulit: true
+              },
+              'calendar.chooseAreaTimestamp': [startTimestamp, endTimestamp]
+            },
+            () => {
+              this.__chooseContinuousDates(startTimestamp, endTimestamp)
+                .then(resolve)
+                .catch(reject)
+            }
+          )
+        }
+      }
+    })
+  }
+  __pusheNextMonthDateArea(item, startTimestamp, endTimestamp, selectedDates) {
+    const days = this.buildDate(item.year, item.month)
+    let daysLen = days.length
+    for (let i = 0; i < daysLen; i++) {
+      const item = days[i]
+      const timeStamp = getDateTimeStamp(item)
+      if (timeStamp <= endTimestamp && timeStamp >= startTimestamp) {
+        selectedDates.push({
+          ...item,
+          choosed: true
+        })
+      }
+      if (i === daysLen - 1 && timeStamp < endTimestamp) {
+        this.__pusheNextMonthDateArea(
+          getDate.nextMonth(item),
+          startTimestamp,
+          endTimestamp,
+          selectedDates
+        )
+      }
+    }
+  }
+  __pushPrevMonthDateArea(item, startTimestamp, endTimestamp, selectedDates) {
+    const days = getDate.sortDates(
+      this.buildDate(item.year, item.month),
+      'desc'
+    )
+    let daysLen = days.length
+    let firstDate = getDateTimeStamp(days[0])
+    for (let i = 0; i < daysLen; i++) {
+      const item = days[i]
+      const timeStamp = getDateTimeStamp(item)
+      if (timeStamp >= startTimestamp && timeStamp <= endTimestamp) {
+        selectedDates.push({
+          ...item,
+          choosed: true
+        })
+      }
+      if (i === daysLen - 1 && firstDate > startTimestamp) {
+        this.__pushPrevMonthDateArea(
+          getDate.prevMonth(item),
+          startTimestamp,
+          endTimestamp,
+          selectedDates
+        )
+      }
+    }
+  }
+  /**
+   * 当设置日期区域非当前时保存其他月份的日期至已选日期数组
+   * @param {object} info
+   */
+  __calcDateWhenNotInOneMonth(info) {
+    const {
+      firstDate,
+      lastDate,
+      startTimestamp,
+      endTimestamp,
+      filterSelectedDate
+    } = info
+    if (getDateTimeStamp(firstDate) > startTimestamp) {
+      this.__pushPrevMonthDateArea(
+        getDate.prevMonth(firstDate),
+        startTimestamp,
+        endTimestamp,
+        filterSelectedDate
+      )
+    }
+    if (getDateTimeStamp(lastDate) < endTimestamp) {
+      this.__pusheNextMonthDateArea(
+        getDate.nextMonth(lastDate),
+        startTimestamp,
+        endTimestamp,
+        filterSelectedDate
+      )
+    }
+    const newSelectedDates = [...getDate.sortDates(filterSelectedDate)]
+    return newSelectedDates
+  }
+  /**
+   * 设置连续日期段
+   * @param {number} startTimestamp 连续日期段开始日期时间戳
+   * @param {number} endTimestamp 连续日期段结束日期时间戳
+   */
+  __chooseContinuousDates(startTimestamp, endTimestamp) {
+    return new Promise((resolve, reject) => {
+      const { days, selectedDay = [] } = this.getData('calendar')
+      const selectedDateStr = []
+      let filterSelectedDate = []
+      selectedDay.forEach(item => {
+        const timeStamp = getDateTimeStamp(item)
+        if (timeStamp >= startTimestamp && timeStamp <= endTimestamp) {
+          filterSelectedDate.push(item)
+          selectedDateStr.push(getDate.toTimeStr(item))
+        }
+      })
+      days.forEach(item => {
+        const timeStamp = getDateTimeStamp(item)
+        const dateInSelecedArray = selectedDateStr.includes(
+          getDate.toTimeStr(item)
+        )
+        if (timeStamp >= startTimestamp && timeStamp <= endTimestamp) {
+          if (dateInSelecedArray) {
+            return
+          }
+          item.choosed = true
+          filterSelectedDate.push(item)
+        } else {
+          item.choosed = false
+          if (dateInSelecedArray) {
+            const idx = filterSelectedDate.findIndex(
+              selectedDate =>
+                getDate.toTimeStr(selectedDate) === getDate.toTimeStr(item)
+            )
+            if (idx > -1) {
+              filterSelectedDate.splice(idx, 1)
+            }
+          }
+        }
+      })
+      const firstDate = days[0]
+      const lastDate = days[days.length - 1]
+      const newSelectedDates = this.__calcDateWhenNotInOneMonth({
+        firstDate,
+        lastDate,
+        startTimestamp,
+        endTimestamp,
+        filterSelectedDate
+      })
+      try {
+        this.setData(
+          {
+            'calendar.days': [...days],
+            'calendar.selectedDay': newSelectedDates
+          },
+          () => {
+            resolve(newSelectedDates)
+          }
+        )
+      } catch (err) {
+        reject(err)
+      }
+    })
+  }
+  /**
+   * 设置指定日期样式
+   * @param {array} dates 待设置特殊样式的日期
+   */
+  setDateStyle(dates) {
+    if (toString.call(dates) !== '[object Array]') return
+    const { days, specialStyleDates } = this.getData('calendar')
+    if (toString.call(specialStyleDates) === '[object Array]') {
+      dates = uniqueArrayByDate([...specialStyleDates, ...dates])
+    }
+    const _specialStyleDates = dates.map(
+      item => `${item.year}_${item.month}_${item.day}`
+    )
+    const _days = days.map(item => {
+      const idx = _specialStyleDates.indexOf(
+        `${item.year}_${item.month}_${item.day}`
+      )
+      if (idx > -1) {
+        return {
+          ...item,
+          class: dates[idx].class
+        }
+      } else {
+        return { ...item }
+      }
+    })
+    this.setData({
+      'calendar.days': _days,
+      'calendar.specialStyleDates': dates
+    })
+  }
+  __judgeParam(dateArea) {
+    const {
+      start,
+      end,
+      startTimestamp,
+      endTimestamp
+    } = convertEnableAreaToTimestamp(dateArea)
+    if (!start || !end) return
+    const startMonthDays = getDate.thisMonthDays(start[0], start[1])
+    const endMonthDays = getDate.thisMonthDays(end[0], end[1])
+    if (start[2] > startMonthDays || start[2] < 1) {
+      logger.warn('enableArea() 开始日期错误，指定日期不在当前月份天数范围内')
+      return false
+    } else if (start[1] > 12 || start[1] < 1) {
+      logger.warn('enableArea() 开始日期错误，月份超出1-12月份')
+      return false
+    } else if (end[2] > endMonthDays || end[2] < 1) {
+      logger.warn('enableArea() 截止日期错误，指定日期不在当前月份天数范围内')
+      return false
+    } else if (end[1] > 12 || end[1] < 1) {
+      logger.warn('enableArea() 截止日期错误，月份超出1-12月份')
+      return false
+    } else if (startTimestamp > endTimestamp) {
+      logger.warn('enableArea()参数最小日期大于了最大日期')
+      return false
+    } else {
+      return true
+    }
+  }
+  __getDisableDateTimestamp() {
+    let disableDateTimestamp
+    const { date, type } = this.getCalendarConfig().disableMode || {}
+    if (date) {
+      const t = date.split('-')
+      if (t.length < 3) {
+        logger.warn('配置 disableMode.date 格式错误')
+        return {}
+      }
+      disableDateTimestamp = getDateTimeStamp({
+        year: +t[0],
+        month: +t[1],
+        day: +t[2]
+      })
+    }
+    return {
+      disableDateTimestamp,
+      disableType: type
+    }
+  }
+  __handleEnableArea(data = {}, selectedDay = []) {
+    const { area, days, startTimestamp, endTimestamp } = data
+    const enableDays = this.getData('calendar.enableDays') || []
+    let expectEnableDaysTimestamp = []
+    if (enableDays.length) {
+      expectEnableDaysTimestamp = delRepeatedEnableDay(enableDays, area)
+    }
+    const {
+      disableDateTimestamp,
+      disableType
+    } = this.__getDisableDateTimestamp()
+    const dates = [...days]
+    dates.forEach(item => {
+      const timestamp = +getDate
+        .newDate(item.year, item.month, item.day)
+        .getTime()
+      const ifOutofArea =
+        (+startTimestamp > timestamp || timestamp > +endTimestamp) &&
+        !expectEnableDaysTimestamp.includes(timestamp)
+      if (
+        ifOutofArea ||
+        (disableType === 'before' &&
+          disableDateTimestamp &&
+          timestamp < disableDateTimestamp) ||
+        (disableType === 'after' &&
+          disableDateTimestamp &&
+          timestamp > disableDateTimestamp)
+      ) {
+        item.disable = true
+        if (item.choosed) {
+          item.choosed = false
+          selectedDay = selectedDay.filter(
+            d => getDate.toTimeStr(item) !== getDate.toTimeStr(d)
+          )
+        }
+      } else if (item.disable) {
+        item.disable = false
+      }
+    })
+    return {
+      dates,
+      selectedDay
+    }
+  }
+  __handleEnableDays(data = {}, selectedDay = []) {
+    const { days, expectEnableDaysTimestamp } = data
+    const { enableAreaTimestamp = [] } = this.getData('calendar')
+    const dates = [...days]
+    dates.forEach(item => {
+      const timestamp = getDate
+        .newDate(item.year, item.month, item.day)
+        .getTime()
+      let setDisable = false
+      if (enableAreaTimestamp.length) {
+        if (
+          (+enableAreaTimestamp[0] > +timestamp ||
+            +timestamp > +enableAreaTimestamp[1]) &&
+          !expectEnableDaysTimestamp.includes(+timestamp)
+        ) {
+          setDisable = true
+        }
+      } else if (!expectEnableDaysTimestamp.includes(+timestamp)) {
+        setDisable = true
+      }
+      if (setDisable) {
+        item.disable = true
+        if (item.choosed) {
+          item.choosed = false
+          selectedDay = selectedDay.filter(
+            d => getDate.toTimeStr(item) !== getDate.toTimeStr(d)
+          )
+        }
+      } else {
+        item.disable = false
+      }
+    })
+    return {
+      dates,
+      selectedDay
+    }
+  }
+  __handleSelectedDays(days = [], newSelectedDay = [], selected) {
+    const { selectedDay, showLabelAlways } = this.getData('calendar')
+    if (selectedDay && selectedDay.length) {
+      newSelectedDay = uniqueArrayByDate(selectedDay.concat(selected))
+    } else {
+      newSelectedDay = selected
+    }
+    const { year: curYear, month: curMonth } = days[0]
+    const currentSelectedDays = []
+    newSelectedDay.forEach(item => {
+      if (+item.year === +curYear && +item.month === +curMonth) {
+        currentSelectedDays.push(getDate.toTimeStr(item))
+      }
+    })
+    ;[...days].map(item => {
+      if (currentSelectedDays.includes(getDate.toTimeStr(item))) {
+        item.choosed = true
+        if (showLabelAlways && item.showTodoLabel) {
+          item.showTodoLabel = true
+        } else {
+          item.showTodoLabel = false
+        }
+      }
+    })
+    return {
+      dates: days,
+      selectedDates: newSelectedDay
+    }
+  }
+}
+
+export default component => new Day(component)

components/local/calendar/func/render.js

@@ -0,0 +1,375 @@
+import Day from './day'
+import Todo from './todo'
+import WxData from './wxData'
+import convertSolarLunar from './convertSolarLunar'
+import {
+  Logger,
+  GetDate,
+  delRepeatedEnableDay,
+  getDateTimeStamp,
+  converEnableDaysToTimestamp
+} from './utils'
+
+const getDate = new GetDate()
+const logger = new Logger()
+
+class Calendar extends WxData {
+  constructor(component) {
+    super(component)
+    this.Component = component
+  }
+  getCalendarConfig() {
+    return this.Component.config
+  }
+  /**
+   * 渲染日历
+   * @param {number} curYear 年份
+   * @param {number} curMonth  月份
+   * @param {number} curDate  日期
+   * @param {boolean} disableSelect 是否禁用选中
+   */
+  renderCalendar(curYear, curMonth, curDate, disableSelect) {
+    return new Promise(resolve => {
+      const config = this.getCalendarConfig()
+      this.calculateEmptyGrids(curYear, curMonth)
+      this.calculateDays(curYear, curMonth, curDate, disableSelect).then(() => {
+        const { todoLabels, specialStyleDates, enableDays, selectedDay } =
+          this.getData('calendar') || {}
+        if (
+          todoLabels &&
+          todoLabels.find(
+            item => +item.month === +curMonth && +item.year === +curYear
+          )
+        ) {
+          Todo(this.Component).setTodoLabels()
+        }
+        if (
+          specialStyleDates &&
+          specialStyleDates.length &&
+          specialStyleDates.find(
+            item => +item.month === +curMonth && +item.year === +curYear
+          )
+        ) {
+          Day(this.Component).setDateStyle(specialStyleDates)
+        }
+
+        if (
+          enableDays &&
+          enableDays.length &&
+          enableDays.find(item => {
+            let ymd = item.split('-')
+            return +ymd[1] === +curMonth && +ymd[0] === +curYear
+          })
+        ) {
+          Day(this.Component).enableDays(enableDays)
+        }
+
+        if (
+          selectedDay &&
+          selectedDay.length &&
+          selectedDay.find(
+            item => +item.month === +curMonth && +item.year === +curYear
+          ) &&
+          config.mulit
+        ) {
+          Day(this.Component).setSelectedDays(selectedDay)
+        }
+
+        if (!this.Component.firstRender) {
+          resolve({
+            firstRender: true
+          })
+        } else {
+          resolve({
+            firstRender: false
+          })
+        }
+      })
+    })
+  }
+  /**
+   * 计算当前月份前后两月应占的格子
+   * @param {number} year 年份
+   * @param {number} month 月份
+   */
+  calculateEmptyGrids(year, month) {
+    this.calculatePrevMonthGrids(year, month)
+    this.calculateNextMonthGrids(year, month)
+  }
+  /**
+   * 计算上月应占的格子
+   * @param {number} year 年份
+   * @param {number} month 月份
+   */
+  calculatePrevMonthGrids(year, month) {
+    let empytGrids = []
+    const prevMonthDays = getDate.thisMonthDays(year, month - 1)
+    let firstDayOfWeek = getDate.firstDayOfWeek(year, month)
+    const config = this.getCalendarConfig() || {}
+    if (config.firstDayOfWeek === 'Mon') {
+      if (firstDayOfWeek === 0) {
+        firstDayOfWeek = 6
+      } else {
+        firstDayOfWeek -= 1
+      }
+    }
+    if (firstDayOfWeek > 0) {
+      const len = prevMonthDays - firstDayOfWeek
+      const { onlyShowCurrentMonth } = config
+      const { showLunar } = this.getCalendarConfig()
+      for (let i = prevMonthDays; i > len; i--) {
+        if (onlyShowCurrentMonth) {
+          empytGrids.push('')
+        } else {
+          empytGrids.push({
+            day: i,
+            lunar: showLunar
+              ? convertSolarLunar.solar2lunar(year, month - 1, i)
+              : null
+          })
+        }
+      }
+      this.setData({
+        'calendar.empytGrids': empytGrids.reverse()
+      })
+    } else {
+      this.setData({
+        'calendar.empytGrids': null
+      })
+    }
+  }
+  /**
+   * 计算下一月日期是否需要多展示的日期
+   * 某些月份日期为5排，某些月份6排，统一为6排
+   * @param {number} year
+   * @param {number} month
+   * @param {object} config
+   */
+  calculateExtraEmptyDate(year, month, config) {
+    let extDate = 0
+    if (+month === 2) {
+      extDate += 7
+      let firstDayofMonth = getDate.dayOfWeek(year, month, 1)
+      if (config.firstDayOfWeek === 'Mon') {
+        if (+firstDayofMonth === 1) extDate += 7
+      } else {
+        if (+firstDayofMonth === 0) extDate += 7
+      }
+    } else {
+      let firstDayofMonth = getDate.dayOfWeek(year, month, 1)
+      if (config.firstDayOfWeek === 'Mon') {
+        if (firstDayofMonth !== 0 && firstDayofMonth < 6) {
+          extDate += 7
+        }
+      } else {
+        if (firstDayofMonth <= 5) {
+          extDate += 7
+        }
+      }
+    }
+    return extDate
+  }
+  /**
+   * 计算下月应占的格子
+   * @param {number} year 年份
+   * @param {number} month  月份
+   */
+  calculateNextMonthGrids(year, month) {
+    let lastEmptyGrids = []
+    const thisMonthDays = getDate.thisMonthDays(year, month)
+    let lastDayWeek = getDate.dayOfWeek(year, month, thisMonthDays)
+    const config = this.getCalendarConfig() || {}
+    if (config.firstDayOfWeek === 'Mon') {
+      if (lastDayWeek === 0) {
+        lastDayWeek = 6
+      } else {
+        lastDayWeek -= 1
+      }
+    }
+    let len = 7 - (lastDayWeek + 1)
+    const { onlyShowCurrentMonth, showLunar } = config
+    if (!onlyShowCurrentMonth) {
+      len = len + this.calculateExtraEmptyDate(year, month, config)
+    }
+    for (let i = 1; i <= len; i++) {
+      if (onlyShowCurrentMonth) {
+        lastEmptyGrids.push('')
+      } else {
+        lastEmptyGrids.push({
+          day: i,
+          lunar: showLunar
+            ? convertSolarLunar.solar2lunar(year, month + 1, i)
+            : null
+        })
+      }
+    }
+    this.setData({
+      'calendar.lastEmptyGrids': lastEmptyGrids
+    })
+  }
+  /**
+   * 日历初始化将默认值写入 selectDay
+   * @param {number} year
+   * @param {number} month
+   * @param {number} curDate
+   */
+  setSelectedDay(year, month, curDate) {
+    let selectedDay = []
+    const config = this.getCalendarConfig()
+    if (config.noDefault) {
+      selectedDay = []
+      config.noDefault = false
+    } else {
+      const data = this.getData('calendar') || {}
+      const { showLunar } = this.getCalendarConfig()
+      selectedDay = curDate
+        ? [
+            {
+              year,
+              month,
+              day: curDate,
+              choosed: true,
+              week: getDate.dayOfWeek(year, month, curDate),
+              lunar: showLunar
+                ? convertSolarLunar.solar2lunar(year, month, curDate)
+                : null
+            }
+          ]
+        : data.selectedDay
+    }
+    return selectedDay
+  }
+  __getDisableDateTimestamp() {
+    let disableDateTimestamp
+    const { date, type } = this.getCalendarConfig().disableMode || {}
+    if (date) {
+      const t = date.split('-')
+      if (t.length < 3) {
+        logger.warn('配置 disableMode.date 格式错误')
+        return {}
+      }
+      disableDateTimestamp = getDateTimeStamp({
+        year: +t[0],
+        month: +t[1],
+        day: +t[2]
+      })
+    }
+    return {
+      disableDateTimestamp,
+      disableType: type
+    }
+  }
+  resetDates() {
+    this.setData({
+      'calendar.days': []
+    })
+  }
+  /**
+   * 设置日历面板数据
+   * @param {number} year 年份
+   * @param {number} month  月份
+   * @param {number} curDate  日期
+   * @param {boolean} disableSelect 是否禁用选中
+   */
+  calculateDays(year, month, curDate, disableSelect) {
+    return new Promise(resolve => {
+      // 避免切换日期时样式残影
+      this.resetDates()
+      let days = []
+      const {
+        disableDays = [],
+        chooseAreaTimestamp = [],
+        selectedDay: selectedDates = []
+      } = this.getData('calendar')
+      days = Day(this.Component).buildDate(year, month)
+      let selectedDay = selectedDates
+      if (!disableSelect) {
+        selectedDay = this.setSelectedDay(year, month, curDate)
+      }
+      const selectedDayStr = selectedDay.map(d => getDate.toTimeStr(d))
+      const disableDaysStr = disableDays.map(d => getDate.toTimeStr(d))
+      const [areaStart, areaEnd] = chooseAreaTimestamp
+      days.forEach(item => {
+        const cur = getDate.toTimeStr(item)
+        const timestamp = getDateTimeStamp(item)
+        if (selectedDayStr.includes(cur) && !disableSelect) {
+          item.choosed = true
+          if (timestamp > areaEnd || timestamp < areaStart) {
+            const idx = selectedDay.findIndex(
+              selectedDate =>
+                getDate.toTimeStr(selectedDate) === getDate.toTimeStr(item)
+            )
+            selectedDay.splice(idx, 1)
+          }
+        } else if (
+          areaStart &&
+          areaEnd &&
+          timestamp >= areaStart &&
+          timestamp <= areaEnd &&
+          !disableSelect
+        ) {
+          item.choosed = true
+          selectedDay.push(item)
+        }
+        if (disableDaysStr.includes(cur)) item.disable = true
+
+        const {
+          disableDateTimestamp,
+          disableType
+        } = this.__getDisableDateTimestamp()
+        let disabelByConfig = false
+        if (disableDateTimestamp) {
+          if (
+            (disableType === 'before' && timestamp < disableDateTimestamp) ||
+            (disableType === 'after' && timestamp > disableDateTimestamp)
+          ) {
+            disabelByConfig = true
+          }
+        }
+        const isDisable = disabelByConfig || this.__isDisable(timestamp)
+        if (isDisable) {
+          item.disable = true
+          item.choosed = false
+        }
+      })
+      this.setData(
+        {
+          'calendar.days': days,
+          'calendar.selectedDay': [...selectedDay] || []
+        },
+        () => {
+          resolve()
+        }
+      )
+    })
+  }
+  __isDisable(timestamp) {
+    const {
+      enableArea = [],
+      enableDays = [],
+      enableAreaTimestamp = []
+    } = this.getData('calendar')
+    let setDisable = false
+    let expectEnableDaysTimestamp = converEnableDaysToTimestamp(enableDays)
+    if (enableArea.length) {
+      expectEnableDaysTimestamp = delRepeatedEnableDay(enableDays, enableArea)
+    }
+    if (enableAreaTimestamp.length) {
+      if (
+        (+enableAreaTimestamp[0] > +timestamp ||
+          +timestamp > +enableAreaTimestamp[1]) &&
+        !expectEnableDaysTimestamp.includes(+timestamp)
+      ) {
+        setDisable = true
+      }
+    } else if (
+      expectEnableDaysTimestamp.length &&
+      !expectEnableDaysTimestamp.includes(+timestamp)
+    ) {
+      setDisable = true
+    }
+    return setDisable
+  }
+}
+
+export default component => new Calendar(component)

components/local/calendar/func/todo.js

@@ -0,0 +1,182 @@
+import WxData from './wxData'
+import { Logger, uniqueArrayByDate, GetDate } from './utils'
+
+const logger = new Logger()
+const getDate = new GetDate()
+
+class Todo extends WxData {
+  constructor(component) {
+    super(component)
+    this.Component = component
+  }
+  /**
+   * 设置待办事项标志
+   * @param {object} options 待办事项配置
+   */
+  setTodoLabels(options) {
+    if (options) this.Component.todoConfig = options
+    const calendar = this.getData('calendar')
+    if (!calendar || !calendar.days) {
+      return logger.warn('请等待日历初始化完成后再调用该方法')
+    }
+    const dates = [...calendar.days]
+    const { curYear, curMonth } = calendar
+    const {
+      circle,
+      dotColor = '',
+      pos = 'bottom',
+      showLabelAlways,
+      days: todoDays = []
+    } = options || this.Component.todoConfig || {}
+    const { todoLabels = [] } = calendar
+    const currentMonthTodoLabels = this.getTodoLabels({
+      year: curYear,
+      month: curMonth
+    })
+    let newTodoLabels = todoDays.filter(
+      item => +item.year === +curYear && +item.month === +curMonth
+    )
+    if (this.Component.weekMode) {
+      newTodoLabels = todoDays
+    }
+    const allTodos = currentMonthTodoLabels.concat(newTodoLabels)
+    for (let todo of allTodos) {
+      let target
+      if (this.Component.weekMode) {
+        target = dates.find(
+          date =>
+            +todo.year === +date.year &&
+            +todo.month === +date.month &&
+            +todo.day === +date.day
+        )
+      } else {
+        target = dates[todo.day - 1]
+      }
+      if (!target) continue
+      if (showLabelAlways) {
+        target.showTodoLabel = true
+      } else {
+        target.showTodoLabel = !target.choosed
+      }
+      if (target.showTodoLabel) {
+        target.todoText = todo.todoText
+      }
+      target.color = todo.color
+    }
+    const o = {
+      'calendar.days': dates,
+      'calendar.todoLabels': uniqueArrayByDate(todoLabels.concat(todoDays))
+    }
+    if (!circle) {
+      o['calendar.todoLabelPos'] = pos
+      o['calendar.todoLabelColor'] = dotColor
+    }
+    o['calendar.todoLabelCircle'] = circle || false
+    o['calendar.showLabelAlways'] = showLabelAlways || false
+    this.setData(o)
+  }
+  /**
+   *  删除指定日期的待办事项
+   * @param {array} todos 需要删除待办事项的日期
+   */
+  deleteTodoLabels(todos) {
+    if (!(todos instanceof Array) || !todos.length) return
+    const todoLabels = this.filterTodos(todos)
+    const { days: dates, curYear, curMonth } = this.getData('calendar')
+    const currentMonthTodoLabels = todoLabels.filter(
+      item => curYear === +item.year && curMonth === +item.month
+    )
+    dates.forEach(item => {
+      item.showTodoLabel = false
+    })
+    currentMonthTodoLabels.forEach(item => {
+      dates[item.day - 1].showTodoLabel = !dates[item.day - 1].choosed
+    })
+    this.setData({
+      'calendar.days': dates,
+      'calendar.todoLabels': todoLabels
+    })
+  }
+  /**
+   * 清空所有待办事项
+   */
+  clearTodoLabels() {
+    const { days = [] } = this.getData('calendar')
+    const dates = [].concat(days)
+    dates.forEach(item => {
+      item.showTodoLabel = false
+    })
+    this.setData({
+      'calendar.days': dates,
+      'calendar.todoLabels': []
+    })
+  }
+  /**
+   * 获取所有待办事项
+   * @param {object} target 指定年月
+   * @param {number} [target.year] 年
+   * @param {number} [target.month] 月
+   */
+  getTodoLabels(target) {
+    const { todoLabels = [] } = this.getData('calendar')
+    if (target) {
+      const { year, month } = target
+      const _todoLabels = todoLabels.filter(
+        item => +item.year === +year && +item.month === +month
+      )
+      return _todoLabels
+    }
+    return todoLabels
+  }
+  /**
+   * 过滤将删除的待办事项
+   * @param {array} todos 需要删除待办事项
+   */
+  filterTodos(todos) {
+    const todoLabels = this.getData('calendar.todoLabels') || []
+    const deleteTodo = todos.map(item => getDate.toTimeStr(item))
+    return todoLabels.filter(
+      item => !deleteTodo.includes(getDate.toTimeStr(item))
+    )
+  }
+  /**
+   * 单选时显示待办事项
+   * @param {array} todoDays
+   * @param {array} days
+   * @param {array} selectedDays
+   */
+  showTodoLabels(todoDays, days, selectedDays) {
+    todoDays.forEach(item => {
+      if (this.Component.weekMode) {
+        days.forEach((_item, idx) => {
+          if (+_item.day === +item.day) {
+            const day = days[idx]
+            day.hasTodo = true
+            day.todoText = item.todoText
+            if (
+              selectedDays &&
+              selectedDays.length &&
+              +selectedDays[0].day === +item.day
+            ) {
+              day.showTodoLabel = true
+            }
+          }
+        })
+      } else {
+        const day = days[item.day - 1]
+        if (!day) return
+        day.hasTodo = true
+        day.todoText = item.todoText
+        if (
+          selectedDays &&
+          selectedDays.length &&
+          +selectedDays[0].day === +item.day
+        ) {
+          days[selectedDays[0].day - 1].showTodoLabel = true
+        }
+      }
+    })
+  }
+}
+
+export default component => new Todo(component)

components/local/calendar/func/utils.js

@@ -0,0 +1,367 @@
+import convertSolarLunar from './convertSolarLunar'
+
+let systemInfo
+export function getSystemInfo() {
+  if (systemInfo) return systemInfo
+  systemInfo = wx.getSystemInfoSync()
+  return systemInfo
+}
+
+export function isComponent(target) {
+  return (
+    target &&
+    target.__wxExparserNodeId__ !== void 0 &&
+    typeof target.setData === 'function'
+  )
+}
+
+export class Logger {
+  info(msg) {
+    console.log(
+      '%cInfo: %c' + msg,
+      'color:#FF0080;font-weight:bold',
+      'color: #FF509B'
+    )
+  }
+  warn(msg) {
+    console.log(
+      '%cWarn: %c' + msg,
+      'color:#FF6600;font-weight:bold',
+      'color: #FF9933'
+    )
+  }
+  tips(msg) {
+    console.log(
+      '%cTips: %c' + msg,
+      'color:#00B200;font-weight:bold',
+      'color: #00CC33'
+    )
+  }
+}
+
+export class Slide {
+  /**
+   * 上滑
+   * @param {object} e 事件对象
+   * @returns {boolean} 布尔值
+   */
+  isUp(gesture = {}, touche = {}) {
+    const { startX, startY } = gesture
+    const deltaX = touche.clientX - startX
+    const deltaY = touche.clientY - startY
+    if (deltaY < -60 && deltaX < 20 && deltaX > -20) {
+      this.slideLock = false
+      return true
+    } else {
+      return false
+    }
+  }
+  /**
+   * 下滑
+   * @param {object} e 事件对象
+   * @returns {boolean} 布尔值
+   */
+  isDown(gesture = {}, touche = {}) {
+    const { startX, startY } = gesture
+    const deltaX = touche.clientX - startX
+    const deltaY = touche.clientY - startY
+    if (deltaY > 60 && deltaX < 20 && deltaX > -20) {
+      return true
+    } else {
+      return false
+    }
+  }
+  /**
+   * 左滑
+   * @param {object} e 事件对象
+   * @returns {boolean} 布尔值
+   */
+  isLeft(gesture = {}, touche = {}) {
+    const { startX, startY } = gesture
+    const deltaX = touche.clientX - startX
+    const deltaY = touche.clientY - startY
+    if (deltaX < -60 && deltaY < 20 && deltaY > -20) {
+      return true
+    } else {
+      return false
+    }
+  }
+  /**
+   * 右滑
+   * @param {object} e 事件对象
+   * @returns {boolean} 布尔值
+   */
+  isRight(gesture = {}, touche = {}) {
+    const { startX, startY } = gesture
+    const deltaX = touche.clientX - startX
+    const deltaY = touche.clientY - startY
+
+    if (deltaX > 60 && deltaY < 20 && deltaY > -20) {
+      return true
+    } else {
+      return false
+    }
+  }
+}
+
+export class GetDate {
+  /**
+   * new Date 区分平台
+   * @param {number} year
+   * @param {number} month
+   * @param {number} day
+   */
+  newDate(year, month, day) {
+    let cur = `${+year}-${+month}-${+day}`
+    if (isIos()) {
+      cur = `${+year}/${+month}/${+day}`
+    }
+    return new Date(cur)
+  }
+  /**
+   * 计算指定月份共多少天
+   * @param {number} year 年份
+   * @param {number} month  月份
+   */
+  thisMonthDays(year, month) {
+    return new Date(Date.UTC(year, month, 0)).getUTCDate()
+  }
+  /**
+   * 计算指定月份第一天星期几
+   * @param {number} year 年份
+   * @param {number} month  月份
+   */
+  firstDayOfWeek(year, month) {
+    return new Date(Date.UTC(year, month - 1, 1)).getUTCDay()
+  }
+  /**
+   * 计算指定日期星期几
+   * @param {number} year 年份
+   * @param {number} month  月份
+   * @param {number} date 日期
+   */
+  dayOfWeek(year, month, date) {
+    return new Date(Date.UTC(year, month - 1, date)).getUTCDay()
+  }
+  todayDate() {
+    const _date = new Date()
+    const year = _date.getFullYear()
+    const month = _date.getMonth() + 1
+    const date = _date.getDate()
+    return {
+      year,
+      month,
+      date
+    }
+  }
+  todayTimestamp() {
+    const { year, month, date } = this.todayDate()
+    const timestamp = this.newDate(year, month, date).getTime()
+    return timestamp
+  }
+  toTimeStr(dateInfo) {
+    if (dateInfo.day) {
+      dateInfo.date = dateInfo.day
+    }
+    return `${+dateInfo.year}-${+dateInfo.month}-${+dateInfo.date}`
+  }
+  sortDates(dates, sortType) {
+    return dates.sort(function(a, b) {
+      const at = getDateTimeStamp(a)
+      const bt = getDateTimeStamp(b)
+      if (at < bt && sortType !== 'desc') {
+        return -1
+      } else {
+        return 1
+      }
+    })
+  }
+  prevMonth(dataInfo) {
+    const prevMonthInfo =
+      +dataInfo.month > 1
+        ? {
+            year: dataInfo.year,
+            month: dataInfo.month - 1
+          }
+        : {
+            year: dataInfo.year - 1,
+            month: 12
+          }
+    return prevMonthInfo
+  }
+  nextMonth(dataInfo) {
+    const nextMonthInfo =
+      +dataInfo.month < 12
+        ? {
+            year: dataInfo.year,
+            month: dataInfo.month + 1
+          }
+        : {
+            year: dataInfo.year + 1,
+            month: 1
+          }
+    return nextMonthInfo
+  }
+  convertLunar(dates = []) {
+    const datesWithLunar = dates.map(date => {
+      if (date) {
+        date.lunar = convertSolarLunar.solar2lunar(
+          +date.year,
+          +date.month,
+          +date.day
+        )
+      }
+      return date
+    })
+    return datesWithLunar
+  }
+}
+
+export function isIos() {
+  const sys = getSystemInfo()
+  return /iphone|ios/i.test(sys.platform)
+}
+
+/**
+ * 浅比较对象是否相等
+ * @param {Object} origin 对比源
+ * @param {Object} target 对比目标
+ * @return {Boolean} true 为相等，false 为不等
+ */
+export function shallowEqual(origin, target) {
+  if (origin === target) {
+    return true
+  } else if (
+    typeof origin === 'object' &&
+    origin != null &&
+    typeof target === 'object' &&
+    target != null
+  ) {
+    if (Object.keys(origin).length !== Object.keys(target).length) return false
+    for (var prop in origin) {
+      if (target.hasOwnProperty(prop)) {
+        if (!shallowEqual(origin[prop], target[prop])) return false
+      } else return false
+    }
+    return true
+  } else return false
+}
+
+/**
+ * 获取当前页面实例
+ */
+export function getCurrentPage() {
+  const pages = getCurrentPages()
+  const last = pages.length - 1
+  return pages[last]
+}
+
+export function getComponent(componentId) {
+  const logger = new Logger()
+  let page = getCurrentPage() || {}
+  if (page.selectComponent && typeof page.selectComponent === 'function') {
+    if (componentId) {
+      return page.selectComponent(componentId)
+    } else {
+      logger.warn('请传入组件ID')
+    }
+  } else {
+    logger.warn('该基础库暂不支持多个小程序日历组件')
+  }
+}
+
+/**
+ * 日期数组根据日期去重
+ * @param {array} array 数组
+ */
+export function uniqueArrayByDate(array = []) {
+  let uniqueObject = {}
+  let uniqueArray = []
+  array.forEach(item => {
+    uniqueObject[`${item.year}-${item.month}-${item.day}`] = item
+  })
+  for (let i in uniqueObject) {
+    uniqueArray.push(uniqueObject[i])
+  }
+  return uniqueArray
+}
+
+/**
+ * 指定可选日期及可选日期数组去重
+ * @param {array} enableDays 特定可选日期数组
+ * @param {array} enableArea 可选日期区域数组
+ */
+export function delRepeatedEnableDay(enableDays = [], enableArea = []) {
+  let _startTimestamp
+  let _endTimestamp
+  if (enableArea.length === 2) {
+    const { startTimestamp, endTimestamp } = convertEnableAreaToTimestamp(
+      enableArea
+    )
+    _startTimestamp = startTimestamp
+    _endTimestamp = endTimestamp
+  }
+  const enableDaysTimestamp = converEnableDaysToTimestamp(enableDays)
+  const tmp = enableDaysTimestamp.filter(
+    item => item < _startTimestamp || item > _endTimestamp
+  )
+  return tmp
+}
+
+/**
+ *  指定日期区域转时间戳
+ * @param {array} timearea 时间区域
+ */
+export function convertEnableAreaToTimestamp(timearea = []) {
+  const getDate = new GetDate()
+  const start = timearea[0].split('-')
+  const end = timearea[1].split('-')
+  const logger = new Logger()
+  if (start.length !== 3 || end.length !== 3) {
+    logger.warn('enableArea() 参数格式为: ["2018-2-1", "2018-3-1"]')
+    return {}
+  }
+  const startTimestamp = getDate.newDate(start[0], start[1], start[2]).getTime()
+  const endTimestamp = getDate.newDate(end[0], end[1], end[2]).getTime()
+  return {
+    start,
+    end,
+    startTimestamp,
+    endTimestamp
+  }
+}
+
+/**
+ * 计算指定日期时间戳
+ * @param {object} dateInfo
+ */
+export function getDateTimeStamp(dateInfo) {
+  if (Object.prototype.toString.call(dateInfo) !== '[object Object]') return
+  const getDate = new GetDate()
+  return getDate.newDate(dateInfo.year, dateInfo.month, dateInfo.day).getTime()
+}
+
+/**
+ *  指定特定日期数组转时间戳
+ * @param {array} enableDays 指定时间数组
+ */
+export function converEnableDaysToTimestamp(enableDays = []) {
+  const logger = new Logger()
+  const getDate = new GetDate()
+  const enableDaysTimestamp = []
+  enableDays.forEach(item => {
+    if (typeof item !== 'string')
+      return logger.warn('enableDays()入参日期格式错误')
+    const tmp = item.split('-')
+    if (tmp.length !== 3) return logger.warn('enableDays()入参日期格式错误')
+    const timestamp = getDate.newDate(tmp[0], tmp[1], tmp[2]).getTime()
+    enableDaysTimestamp.push(timestamp)
+  })
+  return enableDaysTimestamp
+}
+
+// 同一页面多个日历组件按先后顺序渲染
+export const initialTasks = {
+  flag: 'finished', // process 处理中，finished 处理完成
+  tasks: []
+}

components/local/calendar/func/week.js

@@ -0,0 +1,601 @@
+import Day from './day'
+import WxData from './wxData'
+import Render from './render'
+import CalendarConfig from './config'
+import convertSolarLunar from './convertSolarLunar'
+import { GetDate, Logger, getDateTimeStamp } from './utils'
+
+const getDate = new GetDate()
+const logger = new Logger()
+
+class WeekMode extends WxData {
+  constructor(component) {
+    super(component)
+    this.Component = component
+    this.getCalendarConfig = CalendarConfig(this.Component).getCalendarConfig
+  }
+  /**
+   * 周、月视图切换
+   * @param {string} view  视图 [week, month]
+   * @param {object} date  {year: 2017, month: 11, day: 1}
+   */
+  switchWeek(view, date) {
+    return new Promise((resolve, reject) => {
+      const config = CalendarConfig(this.Component).getCalendarConfig()
+      if (config.multi) return logger.warn('多选模式不能切换周月视图')
+      const { selectedDay = [], curYear, curMonth } = this.getData('calendar')
+      let currentDate = []
+      let disableSelected = false
+      if (!selectedDay.length) {
+        currentDate = getDate.todayDate()
+        currentDate.day = currentDate.date
+        disableSelected = true
+        // return this.__tipsWhenCanNotSwtich();
+      } else {
+        currentDate = selectedDay[0]
+      }
+      let selectedDate = date || currentDate
+      const { year, month } = selectedDate
+      const notInCurrentMonth = curYear !== year || curMonth !== month
+      if (view === 'week') {
+        if (this.Component.weekMode) return
+        if ((selectedDay.length && notInCurrentMonth) || !selectedDay.length) {
+          // return this.__tipsWhenCanNotSwtich();
+          disableSelected = true
+          selectedDate = {
+            year: curYear,
+            month: curMonth,
+            day: selectedDate.day
+          }
+        }
+        this.Component.weekMode = true
+        this.setData({
+          'calendarConfig.weekMode': true
+        })
+        this.jump(selectedDate, disableSelected)
+          .then(resolve)
+          .catch(reject)
+      } else {
+        this.Component.weekMode = false
+        this.setData({
+          'calendarConfig.weekMode': false
+        })
+        const disableSelected =
+          (selectedDay.length && notInCurrentMonth) || !selectedDay.length
+        Render(this.Component)
+          .renderCalendar(curYear, curMonth, selectedDate.day, disableSelected)
+          .then(resolve)
+          .catch(reject)
+      }
+    })
+  }
+  /**
+   * 更新当前年月
+   */
+  updateCurrYearAndMonth(type) {
+    let { days, curYear, curMonth } = this.getData('calendar')
+    const { month: firstMonth } = days[0]
+    const { month: lastMonth } = days[days.length - 1]
+    const lastDayOfThisMonth = getDate.thisMonthDays(curYear, curMonth)
+    const lastDayOfThisWeek = days[days.length - 1]
+    const firstDayOfThisWeek = days[0]
+    if (
+      (lastDayOfThisWeek.day + 7 > lastDayOfThisMonth ||
+        (curMonth === firstMonth && firstMonth !== lastMonth)) &&
+      type === 'next'
+    ) {
+      curMonth = curMonth + 1
+      if (curMonth > 12) {
+        curYear = curYear + 1
+        curMonth = 1
+      }
+    } else if (
+      (+firstDayOfThisWeek.day <= 7 ||
+        (curMonth === lastMonth && firstMonth !== lastMonth)) &&
+      type === 'prev'
+    ) {
+      curMonth = curMonth - 1
+      if (curMonth <= 0) {
+        curYear = curYear - 1
+        curMonth = 12
+      }
+    }
+    return {
+      Uyear: curYear,
+      Umonth: curMonth
+    }
+  }
+  /**
+   * 计算周视图下当前这一周和当月的最后一天
+   */
+  calculateLastDay() {
+    const { days = [], curYear, curMonth } = this.getData('calendar')
+    const lastDayInThisWeek = days[days.length - 1].day
+    const lastDayInThisMonth = getDate.thisMonthDays(curYear, curMonth)
+    return { lastDayInThisWeek, lastDayInThisMonth }
+  }
+  /**
+   * 计算周视图下当前这一周第一天
+   */
+  calculateFirstDay() {
+    const { days } = this.getData('calendar')
+    const firstDayInThisWeek = days[0].day
+    return { firstDayInThisWeek }
+  }
+  /**
+   * 当月第一周所有日期范围
+   * @param {number} year
+   * @param {number} month
+   * @param {boolean} firstDayOfWeekIsMon 每周是否配置为以周一开始
+   */
+  firstWeekInMonth(year, month, firstDayOfWeekIsMon) {
+    let firstDay = getDate.dayOfWeek(year, month, 1)
+    if (firstDayOfWeekIsMon && firstDay === 0) {
+      firstDay = 7
+    }
+    const [, end] = [0, 7 - firstDay]
+    let days = this.getData('calendar.days') || []
+    if (this.Component.weekMode) {
+      days = Day(this.Component).buildDate(year, month)
+    }
+    const daysCut = days.slice(0, firstDayOfWeekIsMon ? end + 1 : end)
+    return daysCut
+  }
+  /**
+   * 当月最后一周所有日期范围
+   * @param {number} year
+   * @param {number} month
+   * @param {boolean} firstDayOfWeekIsMon 每周是否配置为以周一开始
+   */
+  lastWeekInMonth(year, month, firstDayOfWeekIsMon) {
+    const lastDay = getDate.thisMonthDays(year, month)
+    const lastDayWeek = getDate.dayOfWeek(year, month, lastDay)
+    const [start, end] = [lastDay - lastDayWeek, lastDay]
+    let days = this.getData('calendar.days') || []
+    if (this.Component.weekMode) {
+      days = Day(this.Component).buildDate(year, month)
+    }
+    const daysCut = days.slice(firstDayOfWeekIsMon ? start : start - 1, end)
+    return daysCut
+  }
+  __getDisableDateTimestamp(config) {
+    const { date, type } = config.disableMode || {}
+    let disableDateTimestamp
+    if (date) {
+      const t = date.split('-')
+      if (t.length < 3) {
+        logger.warn('配置 disableMode.date 格式错误')
+        return {}
+      }
+      disableDateTimestamp = getDateTimeStamp({
+        year: +t[0],
+        month: +t[1],
+        day: +t[2]
+      })
+    }
+    return {
+      disableDateTimestamp,
+      disableType: type
+    }
+  }
+  /**
+   * 渲染日期之前初始化已选日期
+   * @param {array} dates 当前日期数组
+   */
+  initSelectedDay(dates) {
+    let datesCopy = [...dates]
+    const { selectedDay = [] } = this.getData('calendar')
+    const selectedDayStr = selectedDay.map(
+      item => `${+item.year}-${+item.month}-${+item.day}`
+    )
+    const config = this.getCalendarConfig()
+    const {
+      disableDateTimestamp,
+      disableType
+    } = this.__getDisableDateTimestamp(config)
+    datesCopy = datesCopy.map(item => {
+      if (!item) return {}
+      const dateTimestamp = getDateTimeStamp(item)
+      let date = { ...item }
+      if (
+        selectedDayStr.includes(`${+date.year}-${+date.month}-${+date.day}`)
+      ) {
+        date.choosed = true
+      } else {
+        date.choosed = false
+      }
+      if (
+        (disableType === 'after' && dateTimestamp > disableDateTimestamp) ||
+        (disableType === 'before' && dateTimestamp < disableDateTimestamp)
+      ) {
+        date.disable = true
+      }
+      date = this.__setTodoWhenJump(date, config)
+      if (config.showLunar) {
+        date = this.__setSolarLunar(date)
+      }
+      if (config.highlightToday) {
+        date = this.__highlightToday(date)
+      }
+      return date
+    })
+    return datesCopy
+  }
+  /**
+   * 周视图下设置可选日期范围
+   * @param {object} days 当前展示的日期
+   */
+  setEnableAreaOnWeekMode(dates = []) {
+    let { enableAreaTimestamp = [], enableDaysTimestamp = [] } = this.getData(
+      'calendar'
+    )
+    dates.forEach(item => {
+      const timestamp = getDate
+        .newDate(item.year, item.month, item.day)
+        .getTime()
+
+      let setDisable = false
+      if (enableAreaTimestamp.length) {
+        if (
+          (+enableAreaTimestamp[0] > +timestamp ||
+            +timestamp > +enableAreaTimestamp[1]) &&
+          !enableDaysTimestamp.includes(+timestamp)
+        ) {
+          setDisable = true
+        }
+      } else if (
+        enableDaysTimestamp.length &&
+        !enableDaysTimestamp.includes(+timestamp)
+      ) {
+        setDisable = true
+      }
+      if (setDisable) {
+        item.disable = true
+        item.choosed = false
+      }
+      const config = CalendarConfig(this.Component).getCalendarConfig()
+      const {
+        disableDateTimestamp,
+        disableType
+      } = this.__getDisableDateTimestamp(config)
+      if (
+        (disableType === 'before' && timestamp < disableDateTimestamp) ||
+        (disableType === 'after' && timestamp > disableDateTimestamp)
+      ) {
+        item.disable = true
+      }
+    })
+  }
+  updateYMWhenSwipeCalendarHasSelected(dates) {
+    const hasSelectedDate = dates.filter(date => date.choosed)
+    if (hasSelectedDate && hasSelectedDate.length) {
+      const { year, month } = hasSelectedDate[0]
+      return {
+        year,
+        month
+      }
+    }
+    return {}
+  }
+  /**
+   * 计算下一周的日期
+   */
+  calculateNextWeekDays() {
+    let { lastDayInThisWeek, lastDayInThisMonth } = this.calculateLastDay()
+    let { curYear, curMonth } = this.getData('calendar')
+    let days = []
+    if (lastDayInThisMonth - lastDayInThisWeek >= 7) {
+      const { Uyear, Umonth } = this.updateCurrYearAndMonth('next')
+      curYear = Uyear
+      curMonth = Umonth
+      for (let i = lastDayInThisWeek + 1; i <= lastDayInThisWeek + 7; i++) {
+        days.push({
+          year: curYear,
+          month: curMonth,
+          day: i,
+          week: getDate.dayOfWeek(curYear, curMonth, i)
+        })
+      }
+    } else {
+      for (let i = lastDayInThisWeek + 1; i <= lastDayInThisMonth; i++) {
+        days.push({
+          year: curYear,
+          month: curMonth,
+          day: i,
+          week: getDate.dayOfWeek(curYear, curMonth, i)
+        })
+      }
+      const { Uyear, Umonth } = this.updateCurrYearAndMonth('next')
+      curYear = Uyear
+      curMonth = Umonth
+      for (let i = 1; i <= 7 - (lastDayInThisMonth - lastDayInThisWeek); i++) {
+        days.push({
+          year: curYear,
+          month: curMonth,
+          day: i,
+          week: getDate.dayOfWeek(curYear, curMonth, i)
+        })
+      }
+    }
+    days = this.initSelectedDay(days)
+    const {
+      year: updateYear,
+      month: updateMonth
+    } = this.updateYMWhenSwipeCalendarHasSelected(days)
+    if (updateYear && updateMonth) {
+      curYear = updateYear
+      curMonth = updateMonth
+    }
+    this.setEnableAreaOnWeekMode(days)
+    this.setData(
+      {
+        'calendar.curYear': curYear,
+        'calendar.curMonth': curMonth,
+        'calendar.days': days
+      },
+      () => {
+        Day(this.Component).setDateStyle()
+      }
+    )
+  }
+  /**
+   * 计算上一周的日期
+   */
+  calculatePrevWeekDays() {
+    let { firstDayInThisWeek } = this.calculateFirstDay()
+    let { curYear, curMonth } = this.getData('calendar')
+    let days = []
+
+    if (firstDayInThisWeek - 7 > 0) {
+      const { Uyear, Umonth } = this.updateCurrYearAndMonth('prev')
+      curYear = Uyear
+      curMonth = Umonth
+      for (let i = firstDayInThisWeek - 7; i < firstDayInThisWeek; i++) {
+        days.push({
+          year: curYear,
+          month: curMonth,
+          day: i,
+          week: getDate.dayOfWeek(curYear, curMonth, i)
+        })
+      }
+    } else {
+      let temp = []
+      for (let i = 1; i < firstDayInThisWeek; i++) {
+        temp.push({
+          year: curYear,
+          month: curMonth,
+          day: i,
+          week: getDate.dayOfWeek(curYear, curMonth, i)
+        })
+      }
+      const { Uyear, Umonth } = this.updateCurrYearAndMonth('prev')
+      curYear = Uyear
+      curMonth = Umonth
+      const prevMonthDays = getDate.thisMonthDays(curYear, curMonth)
+      for (
+        let i = prevMonthDays - Math.abs(firstDayInThisWeek - 7);
+        i <= prevMonthDays;
+        i++
+      ) {
+        days.push({
+          year: curYear,
+          month: curMonth,
+          day: i,
+          week: getDate.dayOfWeek(curYear, curMonth, i)
+        })
+      }
+      days = days.concat(temp)
+    }
+    days = this.initSelectedDay(days)
+    const {
+      year: updateYear,
+      month: updateMonth
+    } = this.updateYMWhenSwipeCalendarHasSelected(days)
+    if (updateYear && updateMonth) {
+      curYear = updateYear
+      curMonth = updateMonth
+    }
+    this.setEnableAreaOnWeekMode(days)
+    this.setData(
+      {
+        'calendar.curYear': curYear,
+        'calendar.curMonth': curMonth,
+        'calendar.days': days
+      },
+      () => {
+        Day(this.Component).setDateStyle()
+      }
+    )
+  }
+  calculateDatesWhenJump(
+    { year, month, day },
+    { firstWeekDays, lastWeekDays },
+    firstDayOfWeekIsMon
+  ) {
+    const inFirstWeek = this.__dateIsInWeek({ year, month, day }, firstWeekDays)
+    const inLastWeek = this.__dateIsInWeek({ year, month, day }, lastWeekDays)
+    let dates = []
+    if (inFirstWeek) {
+      dates = this.__calculateDatesWhenInFirstWeek(
+        firstWeekDays,
+        firstDayOfWeekIsMon
+      )
+    } else if (inLastWeek) {
+      dates = this.__calculateDatesWhenInLastWeek(
+        lastWeekDays,
+        firstDayOfWeekIsMon
+      )
+    } else {
+      dates = this.__calculateDates({ year, month, day }, firstDayOfWeekIsMon)
+    }
+    return dates
+  }
+  jump({ year, month, day }, disableSelected) {
+    return new Promise(resolve => {
+      if (!day) return
+      const config = this.getCalendarConfig()
+      const firstDayOfWeekIsMon = config.firstDayOfWeek === 'Mon'
+      const firstWeekDays = this.firstWeekInMonth(
+        year,
+        month,
+        firstDayOfWeekIsMon
+      )
+      let lastWeekDays = this.lastWeekInMonth(year, month, firstDayOfWeekIsMon)
+      let dates = this.calculateDatesWhenJump(
+        { year, month, day },
+        {
+          firstWeekDays,
+          lastWeekDays
+        },
+        firstDayOfWeekIsMon
+      )
+      dates = dates.map(d => {
+        let date = { ...d }
+        if (
+          +date.year === +year &&
+          +date.month === +month &&
+          +date.day === +day &&
+          !disableSelected
+        ) {
+          date.choosed = true
+        }
+        date = this.__setTodoWhenJump(date, config)
+        if (config.showLunar) {
+          date = this.__setSolarLunar(date)
+        }
+        if (config.highlightToday) {
+          date = this.__highlightToday(date)
+        }
+        return date
+      })
+      this.setEnableAreaOnWeekMode(dates)
+      const tmpData = {
+        'calendar.days': dates,
+        'calendar.curYear': year,
+        'calendar.curMonth': month,
+        'calendar.empytGrids': [],
+        'calendar.lastEmptyGrids': []
+      }
+      if (!disableSelected) {
+        tmpData['calendar.selectedDay'] = dates.filter(item => item.choosed)
+      }
+      this.setData(tmpData, () => {
+        Day(this.Component).setDateStyle()
+        resolve({ year, month, date: day })
+      })
+    })
+  }
+  __setTodoWhenJump(dateInfo) {
+    const date = { ...dateInfo }
+    const { todoLabels = [], showLabelAlways } = this.getData('calendar')
+    const todosStr = todoLabels.map(d => `${+d.year}-${+d.month}-${+d.day}`)
+    const idx = todosStr.indexOf(`${+date.year}-${+date.month}-${+date.day}`)
+    if (idx !== -1) {
+      if (showLabelAlways) {
+        date.showTodoLabel = true
+      } else {
+        date.showTodoLabel = !date.choosed
+      }
+      const todo = todoLabels[idx] || {}
+      if (date.showTodoLabel && todo.todoText) date.todoText = todo.todoText
+      if (todo.color) date.color = todo.color
+    }
+    return date
+  }
+  __setSolarLunar(dateInfo) {
+    const date = { ...dateInfo }
+    date.lunar = convertSolarLunar.solar2lunar(
+      +date.year,
+      +date.month,
+      +date.day
+    )
+    return date
+  }
+  __highlightToday(dateInfo) {
+    const date = { ...dateInfo }
+    const today = getDate.todayDate()
+    const isToday =
+      +today.year === +date.year &&
+      +today.month === +date.month &&
+      +date.day === +today.date
+    date.isToday = isToday
+    return date
+  }
+  __calculateDatesWhenInFirstWeek(firstWeekDays) {
+    const dates = [...firstWeekDays]
+    if (dates.length < 7) {
+      let { year, month } = dates[0]
+      let len = 7 - dates.length
+      let lastDate
+      if (month > 1) {
+        month -= 1
+        lastDate = getDate.thisMonthDays(year, month)
+      } else {
+        month = 12
+        year -= 1
+        lastDate = getDate.thisMonthDays(year, month)
+      }
+      while (len) {
+        dates.unshift({
+          year,
+          month,
+          day: lastDate,
+          week: getDate.dayOfWeek(year, month, lastDate)
+        })
+        lastDate -= 1
+        len -= 1
+      }
+    }
+    return dates
+  }
+  __calculateDatesWhenInLastWeek(lastWeekDays) {
+    const dates = [...lastWeekDays]
+    if (dates.length < 7) {
+      let { year, month } = dates[0]
+      let len = 7 - dates.length
+      let firstDate = 1
+      if (month > 11) {
+        month = 1
+        year += 1
+      } else {
+        month += 1
+      }
+      while (len) {
+        dates.push({
+          year,
+          month,
+          day: firstDate,
+          week: getDate.dayOfWeek(year, month, firstDate)
+        })
+        firstDate += 1
+        len -= 1
+      }
+    }
+    return dates
+  }
+  __calculateDates({ year, month, day }, firstDayOfWeekIsMon) {
+    const week = getDate.dayOfWeek(year, month, day)
+    let range = [day - week, day + (6 - week)]
+    if (firstDayOfWeekIsMon) {
+      range = [day + 1 - week, day + (7 - week)]
+    }
+    const dates = Day(this.Component).buildDate(year, month)
+    const weekDates = dates.slice(range[0] - 1, range[1])
+    return weekDates
+  }
+  __dateIsInWeek(date, week) {
+    return week.find(
+      item =>
+        +item.year === +date.year &&
+        +item.month === +date.month &&
+        +item.day === +date.day
+    )
+  }
+  __tipsWhenCanNotSwtich() {
+    logger.info(
+      '当前月份未选中日期下切换为周视图，不能明确该展示哪一周的日期，故此情况不允许切换'
+    )
+  }
+}
+
+export default component => new WeekMode(component)

components/local/calendar/func/wxData.js

@@ -0,0 +1,26 @@
+class WxData {
+  constructor(component) {
+    this.Component = component
+  }
+  getData(key) {
+    const data = this.Component.data
+    if (!key) return data
+    if (key.includes('.')) {
+      let keys = key.split('.')
+      const tmp = keys.reduce((prev, next) => {
+        return prev[next]
+      }, data)
+      return tmp
+    } else {
+      return this.Component.data[key]
+    }
+  }
+  setData(data, cb = () => {}) {
+    if (!data) return
+    if (typeof data === 'object') {
+      this.Component.setData(data, cb)
+    }
+  }
+}
+
+export default WxData

components/local/calendar/index.js

@@ -0,0 +1,254 @@
+import Week from './func/week'
+import { Logger, Slide, GetDate, initialTasks } from './func/utils'
+import initCalendar, {
+  jump,
+  getCurrentYM,
+  whenChangeDate,
+  renderCalendar,
+  whenMulitSelect,
+  whenSingleSelect,
+  whenChooseArea,
+  getCalendarDates
+} from './main.js'
+
+const slide = new Slide()
+const logger = new Logger()
+const getDate = new GetDate()
+
+Component({
+  options: {
+    styleIsolation: 'apply-shared',
+    multipleSlots: true // 在组件定义时的选项中启用多slot支持
+  },
+  properties: {
+    calendarConfig: {
+      type: Object,
+      value: {}
+    }
+  },
+  data: {
+    handleMap: {
+      prev_year: 'chooseYear',
+      prev_month: 'chooseMonth',
+      next_month: 'chooseMonth',
+      next_year: 'chooseYear'
+    }
+  },
+  lifetimes: {
+    attached: function() {
+      this.initComp()
+    },
+    detached: function() {
+      initialTasks.flag = 'finished'
+      initialTasks.tasks.length = 0
+    }
+  },
+  methods: {
+    initComp() {
+      const calendarConfig = this.setDefaultDisableDate()
+      this.setConfig(calendarConfig)
+    },
+    setDefaultDisableDate() {
+      const calendarConfig = this.properties.calendarConfig || {}
+      if (calendarConfig.disableMode && !calendarConfig.disableMode.date) {
+        calendarConfig.disableMode.date = getDate.toTimeStr(getDate.todayDate())
+      }
+      return calendarConfig
+    },
+    setConfig(config) {
+      if (config.markToday && typeof config.markToday === 'string') {
+        config.highlightToday = true
+      }
+      config.theme = config.theme || 'default'
+      this.weekMode = config.weekMode
+      this.setData(
+        {
+          calendarConfig: config
+        },
+        () => {
+          initCalendar(this, config)
+        }
+      )
+    },
+    chooseDate(e) {
+      const { type } = e.currentTarget.dataset
+      if (!type) return
+      const methodName = this.data.handleMap[type]
+      this[methodName](type)
+    },
+    chooseYear(type) {
+      const { curYear, curMonth } = this.data.calendar
+      if (!curYear || !curMonth) return logger.warn('异常：未获取到当前年月')
+      if (this.weekMode) {
+        return console.warn('周视图下不支持点击切换年月')
+      }
+      let newYear = +curYear
+      let newMonth = +curMonth
+      if (type === 'prev_year') {
+        newYear -= 1
+      } else if (type === 'next_year') {
+        newYear += 1
+      }
+      this.render(curYear, curMonth, newYear, newMonth)
+    },
+    chooseMonth(type) {
+      const { curYear, curMonth } = this.data.calendar
+      if (!curYear || !curMonth) return logger.warn('异常：未获取到当前年月')
+      if (this.weekMode) return console.warn('周视图下不支持点击切换年月')
+      let newYear = +curYear
+      let newMonth = +curMonth
+      if (type === 'prev_month') {
+        newMonth = newMonth - 1
+        if (newMonth < 1) {
+          newYear -= 1
+          newMonth = 12
+        }
+      } else if (type === 'next_month') {
+        newMonth += 1
+        if (newMonth > 12) {
+          newYear += 1
+          newMonth = 1
+        }
+      }
+      this.render(curYear, curMonth, newYear, newMonth)
+    },
+    render(curYear, curMonth, newYear, newMonth) {
+      whenChangeDate.call(this, {
+        curYear,
+        curMonth,
+        newYear,
+        newMonth
+      })
+      this.setData({
+        'calendar.curYear': newYear,
+        'calendar.curMonth': newMonth
+      })
+      renderCalendar.call(this, newYear, newMonth)
+    },
+    /**
+     * 日期点击事件
+     * @param {!object} e 事件对象
+     */
+    tapDayItem(e) {
+      const { idx, date = {} } = e.currentTarget.dataset
+      const { day, disable } = date
+      if (disable || !day) return
+      const config = this.data.calendarConfig || this.config || {}
+      const { multi, chooseAreaMode } = config
+      if (multi) {
+        whenMulitSelect.call(this, idx)
+      } else if (chooseAreaMode) {
+        whenChooseArea.call(this, idx)
+      } else {
+        whenSingleSelect.call(this, idx)
+      }
+      this.setData({
+        'calendar.noDefault': false
+      })
+    },
+    doubleClickToToday() {
+      if (this.config.multi || this.weekMode) return
+      if (this.count === undefined) {
+        this.count = 1
+      } else {
+        this.count += 1
+      }
+      if (this.lastClick) {
+        const difference = new Date().getTime() - this.lastClick
+        if (difference < 500 && this.count >= 2) {
+          jump.call(this)
+        }
+        this.count = undefined
+        this.lastClick = undefined
+      } else {
+        this.lastClick = new Date().getTime()
+      }
+    },
+    /**
+     * 日历滑动开始
+     * @param {object} e
+     */
+    calendarTouchstart(e) {
+      const t = e.touches[0]
+      const startX = t.clientX
+      const startY = t.clientY
+      this.slideLock = true // 滑动事件加锁
+      this.setData({
+        'gesture.startX': startX,
+        'gesture.startY': startY
+      })
+    },
+    /**
+     * 日历滑动中
+     * @param {object} e
+     */
+    calendarTouchmove(e) {
+      const { gesture } = this.data
+      const { preventSwipe } = this.properties.calendarConfig
+      if (!this.slideLock || preventSwipe) return
+      if (slide.isLeft(gesture, e.touches[0])) {
+        this.handleSwipe('left')
+        this.slideLock = false
+      }
+      if (slide.isRight(gesture, e.touches[0])) {
+        this.handleSwipe('right')
+        this.slideLock = false
+      }
+    },
+    calendarTouchend(e) {
+      this.setData({
+        'calendar.leftSwipe': 0,
+        'calendar.rightSwipe': 0
+      })
+    },
+    handleSwipe(direction) {
+      let swipeKey = 'calendar.leftSwipe'
+      let swipeCalendarType = 'next_month'
+      let weekChangeType = 'next_week'
+      if (direction === 'right') {
+        swipeKey = 'calendar.rightSwipe'
+        swipeCalendarType = 'prev_month'
+        weekChangeType = 'prev_week'
+      }
+      this.setData({
+        [swipeKey]: 1
+      })
+      this.currentYM = getCurrentYM()
+      if (this.weekMode) {
+        this.slideLock = false
+        this.currentDates = getCalendarDates()
+        if (weekChangeType === 'prev_week') {
+          Week(this).calculatePrevWeekDays()
+        } else if (weekChangeType === 'next_week') {
+          Week(this).calculateNextWeekDays()
+        }
+        this.onSwipeCalendar(weekChangeType)
+        this.onWeekChange(weekChangeType)
+        return
+      }
+      this.chooseMonth(swipeCalendarType)
+      this.onSwipeCalendar(swipeCalendarType)
+    },
+    onSwipeCalendar(direction) {
+      this.triggerEvent('onSwipe', {
+        directionType: direction,
+        currentYM: this.currentYM
+      })
+    },
+    onWeekChange(direction) {
+      this.triggerEvent('whenChangeWeek', {
+        current: {
+          currentYM: this.currentYM,
+          dates: [...this.currentDates]
+        },
+        next: {
+          currentYM: getCurrentYM(),
+          dates: getCalendarDates()
+        },
+        directionType: direction
+      })
+      this.currentDates = null
+      this.currentYM = null
+    }
+  }
+})

components/local/calendar/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

components/local/calendar/index.wxss

@@ -0,0 +1,214 @@
+@import './theme/iconfont.wxss';
+@import './theme/theme-default.wxss';
+@import './theme/theme-elegant.wxss';
+
+.b {
+    display: flex;
+}
+
+.lr {
+    flex-direction: row;
+}
+
+.tb {
+    flex-direction: column;
+}
+
+.pc {
+    justify-content: center;
+}
+
+.ac {
+    align-items: center;
+}
+
+.cc {
+    align-items: center;
+    justify-content: center;
+}
+
+.wrap {
+    flex-wrap: wrap;
+}
+
+.flex {
+    flex-grow: 1;
+}
+
+.bg {
+    background-image: linear-gradient(to bottom, #faefe7, #ffcbd7);
+    overflow: hidden;
+}
+
+.white-color {
+    color: #fff;
+}
+
+.fs24 {
+    font-size: 24rpx;
+}
+
+.fs28 {
+    font-size: 28rpx;
+}
+
+.fs32 {
+    font-size: 32rpx;
+}
+
+.fs36 {
+    font-size: 36rpx;
+}
+
+.calendar {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+/* 日历操作栏 */
+
+.handle {
+    height: 80rpx;
+}
+
+.prev-handle,
+.next-handle {
+    padding: 20rpx;
+}
+
+.date-in-handle {
+    height: 80rpx;
+}
+
+/* 星期栏 */
+
+.weeks {
+    height: 50rpx;
+    line-height: 50rpx;
+    opacity: 0.5;
+}
+
+.week {
+    text-align: center;
+}
+
+.grid,
+.week {
+    width: 14.286014285714286%;
+}
+
+.date-wrap {
+    width: 100%;
+    height: 80rpx;
+    position: relative;
+    left: 0;
+    top: 0;
+}
+
+.date {
+    position: relative;
+    left: 0;
+    top: 0;
+    width: 55rpx;
+    height: 55rpx;
+    text-align: center;
+    line-height: 55rpx;
+    font-size: 26rpx;
+    font-weight: 200;
+    border-radius: 50%;
+    transition: all 0.3s;
+    animation-name: choosed;
+    animation-duration: 0.5s;
+    animation-timing-function: linear;
+    animation-iteration-count: 1;
+}
+
+.date-area-mode {
+    width: 100%;
+    border-radius: 0;
+}
+
+.date-desc {
+    width: 150%;
+    height: 32rpx;
+    font-size: 20rpx;
+    line-height: 32rpx;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+    word-break: break-all;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    -webkit-line-clamp: 1;
+    text-align: center;
+}
+
+@keyframes choosed {
+    from {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(0.9);
+    }
+
+    to {
+        transform: scale(1);
+    }
+}
+
+/* 日期圆圈标记 */
+.todo-circle {
+    border-width: 1rpx;
+    border-style: solid;
+    box-sizing: border-box;
+}
+
+/* 待办点标记相关样式 */
+.todo-dot {
+    width: 10rpx;
+    height: 10rpx;
+    border-radius: 50%;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.todo-dot-top {
+    top: 3rpx;
+}
+
+.todo-dot.todo-dot-top-always {
+    top: -8rpx;
+}
+
+.todo-dot.todo-dot-bottom {
+    bottom: 0;
+}
+
+.todo-dot.todo-dot-bottom-always {
+    bottom: -10rpx;
+}
+
+/* 日期描述文字（待办文字/农历）相关样式 */
+
+.date-desc.date-desc-top {
+    top: -6rpx;
+}
+
+.date-desc.date-desc-top-always {
+    top: -20rpx;
+}
+
+.date-desc.date-desc-bottom {
+    bottom: -14rpx;
+}
+
+.todo-circle .date-desc.date-desc-bottom {
+    bottom: -30rpx;
+}
+
+.date-desc.date-desc-bottom-always {
+    bottom: -28rpx;
+}

components/local/calendar/main.js

@@ -0,0 +1,877 @@
+import Day from './func/day'
+import Week from './func/week'
+import Todo from './func/todo'
+import WxData from './func/wxData'
+import Calendar from './func/render'
+import CalendarConfig from './func/config'
+import convertSolarLunar from './func/convertSolarLunar'
+import {
+  Logger,
+  GetDate,
+  isComponent,
+  initialTasks,
+  getCurrentPage,
+  getComponent,
+  getDateTimeStamp
+} from './func/utils'
+
+let Component = {}
+let logger = new Logger()
+let getDate = new GetDate()
+let dataInstance = null
+
+/**
+ * 全局赋值正在操作的组件实例，方便读/写各自的 data
+ * @param {string} componentId 要操作的日历组件ID
+ */
+function bindCurrentComponent(componentId) {
+  if (componentId) {
+    Component = getComponent(componentId)
+  }
+  return Component
+}
+/**
+ * 获取日历内部数据
+ * @param {string} key 获取值的键名
+ * @param {string} componentId 要操作的日历组件ID
+ */
+function getData(key, componentId) {
+  bindCurrentComponent(componentId)
+  dataInstance = new WxData(Component)
+  return dataInstance.getData(key)
+}
+/**
+ * 设置日历内部数据
+ * @param {object}} data 待设置的数据
+ * @param {function} callback 设置成功回调函数
+ */
+function setData(data, callback = () => {}) {
+  const dataInstance = new WxData(Component)
+  return dataInstance.setData(data, callback)
+}
+
+const conf = {
+  /**
+   * 渲染日历
+   * @param {number} curYear
+   * @param {number} curMonth
+   * @param {number} curDate
+   */
+  renderCalendar(curYear, curMonth, curDate) {
+    if (isComponent(this)) Component = this
+    return new Promise((resolve, reject) => {
+      Calendar(Component)
+        .renderCalendar(curYear, curMonth, curDate)
+        .then((info = {}) => {
+          if (!info.firstRender) {
+            return resolve({
+              year: curYear,
+              month: curMonth,
+              date: curDate
+            })
+          }
+          mountEventsOnPage(getCurrentPage())
+          Component.triggerEvent('afterCalendarRender', Component)
+          Component.firstRender = true
+          initialTasks.flag = 'finished'
+          if (initialTasks.tasks.length) {
+            initialTasks.tasks.shift()()
+          }
+          resolve({
+            year: curYear,
+            month: curMonth,
+            date: curDate
+          })
+        })
+        .catch(err => {
+          reject(err)
+        })
+    })
+  },
+  /**
+   * 当改变月份时触发
+   * @param {object} param
+   */
+  whenChangeDate({ curYear, curMonth, newYear, newMonth }) {
+    Component.triggerEvent('whenChangeMonth', {
+      current: {
+        year: curYear,
+        month: curMonth
+      },
+      next: {
+        year: newYear,
+        month: newMonth
+      }
+    })
+  },
+  /**
+   * 多选
+   * @param {number} dateIdx 当前选中日期索引值
+   */
+  whenMulitSelect(dateIdx) {
+    if (isComponent(this)) Component = this
+    const { calendar = {} } = getData()
+    const { days, todoLabels } = calendar
+    const config = CalendarConfig(Component).getCalendarConfig()
+    let { selectedDay: selectedDays = [] } = calendar
+    const currentDay = days[dateIdx]
+    if (!currentDay) return
+    currentDay.choosed = !currentDay.choosed
+    if (!currentDay.choosed) {
+      currentDay.cancel = true // 该次点击是否为取消日期操作
+      const currentDayStr = getDate.toTimeStr(currentDay)
+      selectedDays = selectedDays.filter(
+        item => currentDayStr !== getDate.toTimeStr(item)
+      )
+      if (todoLabels) {
+        todoLabels.forEach(item => {
+          if (currentDayStr === getDate.toTimeStr(item)) {
+            currentDay.showTodoLabel = true
+          }
+        })
+      }
+    } else {
+      currentDay.cancel = false
+      const { showLabelAlways } = getData('calendar')
+      if (showLabelAlways && currentDay.showTodoLabel) {
+        currentDay.showTodoLabel = true
+      } else {
+        currentDay.showTodoLabel = false
+      }
+      if (!config.takeoverTap) {
+        selectedDays.push(currentDay)
+      }
+    }
+    if (config.takeoverTap) {
+      return Component.triggerEvent('onTapDay', currentDay)
+    }
+    setData({
+      'calendar.days': days,
+      'calendar.selectedDay': selectedDays
+    })
+    conf.afterTapDay(currentDay, selectedDays)
+  },
+  /**
+   * 单选
+   * @param {number} dateIdx 当前选中日期索引值
+   */
+  whenSingleSelect(dateIdx) {
+    if (isComponent(this)) Component = this
+    const { calendar = {} } = getData()
+    const { days, selectedDay: selectedDays = [], todoLabels } = calendar
+    let shouldMarkerTodoDay = []
+    const currentDay = days[dateIdx]
+    if (!currentDay) return
+    const preSelectedDate = [...selectedDays].pop() || {}
+    const { month: dMonth, year: dYear } = days[0] || {}
+    const config = CalendarConfig(Component).getCalendarConfig()
+    if (config.takeoverTap) {
+      return Component.triggerEvent('onTapDay', currentDay)
+    }
+    conf.afterTapDay(currentDay)
+    if (!config.inverse && preSelectedDate.day === currentDay.day) return
+    days.forEach((item, idx) => {
+      if (+item.day === +preSelectedDate.day) days[idx].choosed = false
+    })
+    if (todoLabels) {
+      // 筛选当月待办事项的日期
+      shouldMarkerTodoDay = todoLabels.filter(
+        item => +item.year === dYear && +item.month === dMonth
+      )
+    }
+    Todo(Component).showTodoLabels(shouldMarkerTodoDay, days, selectedDays)
+    const tmp = {
+      'calendar.days': days
+    }
+    if (preSelectedDate.day !== currentDay.day) {
+      preSelectedDate.choosed = false
+      currentDay.choosed = true
+      if (!calendar.showLabelAlways || !currentDay.showTodoLabel) {
+        currentDay.showTodoLabel = false
+      }
+      tmp['calendar.selectedDay'] = [currentDay]
+    } else if (config.inverse) {
+      if (currentDay.choosed) {
+        if (currentDay.showTodoLabel && calendar.showLabelAlways) {
+          currentDay.showTodoLabel = true
+        } else {
+          currentDay.showTodoLabel = false
+        }
+      }
+      tmp['calendar.selectedDay'] = []
+    }
+    if (config.weekMode) {
+      tmp['calendar.curYear'] = currentDay.year
+      tmp['calendar.curMonth'] = currentDay.month
+    }
+    setData(tmp)
+  },
+  gotoSetContinuousDates(start, end) {
+    return chooseDateArea([
+      `${getDate.toTimeStr(start)}`,
+      `${getDate.toTimeStr(end)}`
+    ])
+  },
+  timeRangeHelper(currentDate, selectedDay) {
+    const currentDateTimestamp = getDateTimeStamp(currentDate)
+    const startDate = selectedDay[0]
+    let endDate
+    let endDateTimestamp
+    let selectedLen = selectedDay.length
+    if (selectedLen > 1) {
+      endDate = selectedDay[selectedLen - 1]
+      endDateTimestamp = getDateTimeStamp(endDate)
+    }
+    const startTimestamp = getDateTimeStamp(startDate)
+    return {
+      endDate,
+      startDate,
+      currentDateTimestamp,
+      endDateTimestamp,
+      startTimestamp
+    }
+  },
+  /**
+   * 计算连续日期选择的开始及结束日期
+   * @param {object} currentDate 当前选择日期
+   * @param {array} selectedDay 已选择的的日期
+   */
+  calculateDateRange(currentDate, selectedDay) {
+    const {
+      endDate,
+      startDate,
+      currentDateTimestamp,
+      endDateTimestamp,
+      startTimestamp
+    } = this.timeRangeHelper(currentDate, selectedDay)
+    let range = []
+    let selectedLen = selectedDay.length
+    const isWantToChooseOneDate = selectedDay.filter(
+      item => getDate.toTimeStr(item) === getDate.toTimeStr(currentDate)
+    )
+    if (selectedLen === 2 && isWantToChooseOneDate.length) {
+      range = [currentDate, currentDate]
+      return range
+    }
+    if (
+      currentDateTimestamp >= startTimestamp &&
+      endDateTimestamp &&
+      currentDateTimestamp <= endDateTimestamp
+    ) {
+      const currentDateIdxInChoosedDateArea = selectedDay.findIndex(
+        item => getDate.toTimeStr(item) === getDate.toTimeStr(currentDate)
+      )
+      if (selectedLen / 2 > currentDateIdxInChoosedDateArea) {
+        range = [currentDate, endDate]
+      } else {
+        range = [startDate, currentDate]
+      }
+    } else if (currentDateTimestamp < startTimestamp) {
+      range = [currentDate, endDate]
+    } else if (currentDateTimestamp > startTimestamp) {
+      range = [startDate, currentDate]
+    }
+    return range
+  },
+  chooseAreaWhenExistArea(currentDate, selectedDay) {
+    return new Promise((resolve, reject) => {
+      const range = conf.calculateDateRange(
+        currentDate,
+        getDate.sortDates(selectedDay)
+      )
+      conf
+        .gotoSetContinuousDates(...range)
+        .then(data => {
+          resolve(data)
+          conf.afterTapDay(currentDate)
+        })
+        .catch(err => {
+          reject(err)
+          conf.afterTapDay(currentDate)
+        })
+    })
+  },
+  chooseAreaWhenHasOneDate(currentDate, selectedDay, lastChoosedDate) {
+    return new Promise((resolve, reject) => {
+      const startDate = lastChoosedDate || selectedDay[0]
+      let range = [startDate, currentDate]
+      const currentDateTimestamp = getDateTimeStamp(currentDate)
+      const lastChoosedDateTimestamp = getDateTimeStamp(startDate)
+      if (lastChoosedDateTimestamp > currentDateTimestamp) {
+        range = [currentDate, startDate]
+      }
+      conf
+        .gotoSetContinuousDates(...range)
+        .then(data => {
+          resolve(data)
+          conf.afterTapDay(currentDate)
+        })
+        .catch(err => {
+          reject(err)
+          conf.afterTapDay(currentDate)
+        })
+    })
+  },
+  /**
+   * 日期范围选择模式
+   * @param {number} dateIdx 当前选中日期索引值
+   */
+  whenChooseArea(dateIdx) {
+    return new Promise((resolve, reject) => {
+      if (isComponent(this)) Component = this
+      if (Component.weekMode) return
+      const { days = [], selectedDay, lastChoosedDate } = getData('calendar')
+      const currentDate = days[dateIdx]
+      if (currentDate.disable) return
+      const config = CalendarConfig(Component).getCalendarConfig()
+      if (config.takeoverTap) {
+        return Component.triggerEvent('onTapDay', currentDate)
+      }
+      if (selectedDay && selectedDay.length > 1) {
+        conf
+          .chooseAreaWhenExistArea(currentDate, selectedDay)
+          .then(dates => {
+            resolve(dates)
+          })
+          .catch(err => {
+            reject(err)
+          })
+      } else if (lastChoosedDate || (selectedDay && selectedDay.length === 1)) {
+        conf
+          .chooseAreaWhenHasOneDate(currentDate, selectedDay, lastChoosedDate)
+          .then(dates => {
+            resolve(dates)
+          })
+          .catch(err => {
+            reject(err)
+          })
+      } else {
+        days.forEach(date => {
+          if (+date.day === +currentDate.day) {
+            date.choosed = true
+          } else {
+            date.choosed = false
+          }
+        })
+
+        const dataInstance = new WxData(Component)
+        dataInstance.setData({
+          'calendar.days': [...days],
+          'calendar.lastChoosedDate': currentDate
+        })
+      }
+    })
+  },
+  /**
+   * 点击日期后触发事件
+   * @param {object} currentSelected 当前选择的日期
+   * @param {array} selectedDates  多选状态下选中的日期
+   */
+  afterTapDay(currentSelected, selectedDates) {
+    const config = CalendarConfig(Component).getCalendarConfig()
+    const { multi } = config
+    if (!multi) {
+      Component.triggerEvent('afterTapDay', currentSelected)
+    } else {
+      Component.triggerEvent('afterTapDay', {
+        currentSelected,
+        selectedDates
+      })
+    }
+  },
+  /**
+   * 跳转至今天
+   */
+  jumpToToday() {
+    return new Promise((resolve, reject) => {
+      const { year, month, date } = getDate.todayDate()
+      const timestamp = getDate.todayTimestamp()
+      const config = CalendarConfig(Component).getCalendarConfig()
+      setData({
+        'calendar.curYear': year,
+        'calendar.curMonth': month,
+        'calendar.selectedDay': [
+          {
+            year: year,
+            day: date,
+            month: month,
+            choosed: true,
+            lunar: config.showLunar
+              ? convertSolarLunar.solar2lunar(year, month, date)
+              : null
+          }
+        ],
+        'calendar.todayTimestamp': timestamp
+      })
+      conf
+        .renderCalendar(year, month, date)
+        .then(() => {
+          resolve({ year, month, date })
+        })
+        .catch(() => {
+          reject('jump failed')
+        })
+    })
+  }
+}
+
+export const whenChangeDate = conf.whenChangeDate
+export const renderCalendar = conf.renderCalendar
+export const whenSingleSelect = conf.whenSingleSelect
+export const whenChooseArea = conf.whenChooseArea
+export const whenMulitSelect = conf.whenMulitSelect
+export const calculatePrevWeekDays = conf.calculatePrevWeekDays
+export const calculateNextWeekDays = conf.calculateNextWeekDays
+
+/**
+ * 获取当前年月
+ * @param {string} componentId 要操作的日历组件ID
+ */
+export function getCurrentYM(componentId) {
+  bindCurrentComponent(componentId)
+  return {
+    year: getData('calendar.curYear'),
+    month: getData('calendar.curMonth')
+  }
+}
+
+/**
+ * 获取已选择的日期
+ * @param {object } options 日期配置选项 {lunar} 是否返回农历信息
+ * @param {string} componentId 要操作的日历组件ID
+ */
+export function getSelectedDay(options = {}, componentId) {
+  bindCurrentComponent(componentId)
+  const config = getCalendarConfig()
+  const dates = getData('calendar.selectedDay') || []
+  if (options.lunar && !config.showLunar) {
+    const datesWithLunar = getDate.convertLunar(dates)
+    return datesWithLunar
+  } else {
+    return dates
+  }
+}
+
+/**
+ * 取消选中日期
+ * @param {array} dates 需要取消的日期，不传则取消所有已选择的日期
+ * @param {string} componentId 要操作的日历组件ID
+ */
+export function cancelSelectedDates(dates, componentId) {
+  bindCurrentComponent(componentId)
+  const { days = [], selectedDay = [] } = getData('calendar') || {}
+  if (!dates || !dates.length) {
+    days.forEach(item => {
+      item.choosed = false
+    })
+    setData({
+      'calendar.days': days,
+      'calendar.selectedDay': []
+    })
+  } else {
+    const cancelDatesStr = dates.map(
+      date => `${+date.year}-${+date.month}-${+date.day}`
+    )
+    const filterSelectedDates = selectedDay.filter(
+      date =>
+        !cancelDatesStr.includes(`${+date.year}-${+date.month}-${+date.day}`)
+    )
+    days.forEach(date => {
+      if (
+        cancelDatesStr.includes(`${+date.year}-${+date.month}-${+date.day}`)
+      ) {
+        date.choosed = false
+      }
+    })
+    setData({
+      'calendar.days': days,
+      'calendar.selectedDay': filterSelectedDates
+    })
+  }
+}
+/**
+ * 周视图跳转
+ * @param {object} date info
+ * @param {boolean} disableSelected 跳转时是否需要选中，周视图切换调用该方法，如未选择日期时不选中日期
+ */
+function jumpWhenWeekMode({ year, month, day }, disableSelected) {
+  return new Promise((resolve, reject) => {
+    Week(Component)
+      .jump(
+        {
+          year: +year,
+          month: +month,
+          day: +day
+        },
+        disableSelected
+      )
+      .then(date => {
+        resolve(date)
+        Component.triggerEvent('afterCalendarRender', Component)
+      })
+      .catch(err => {
+        reject(err)
+        Component.triggerEvent('afterCalendarRender', Component)
+      })
+  })
+}
+
+/**
+ * 月视图跳转
+ * @param {object} date info
+ */
+function jumpWhenNormalMode({ year, month, day }) {
+  return new Promise((resolve, reject) => {
+    if (typeof +year !== 'number' || typeof +month !== 'number') {
+      return logger.warn('jump 函数年月日参数必须为数字')
+    }
+    const timestamp = getDate.todayTimestamp()
+    let tmp = {
+      'calendar.curYear': +year,
+      'calendar.curMonth': +month,
+      'calendar.todayTimestamp': timestamp
+    }
+    setData(tmp, () => {
+      conf
+        .renderCalendar(+year, +month, +day)
+        .then(date => {
+          resolve(date)
+        })
+        .catch(err => {
+          reject(err)
+        })
+    })
+  })
+}
+
+/**
+ * 跳转至指定日期
+ * @param {number} year
+ * @param {number} month
+ * @param {number} day
+ * @param {string} componentId 要操作的日历组件ID
+ */
+export function jump(year, month, day, componentId) {
+  return new Promise((resolve, reject) => {
+    bindCurrentComponent(componentId)
+    const { selectedDay = [] } = getData('calendar') || {}
+    const { weekMode } = getData('calendarConfig') || {}
+    const { year: y, month: m, day: d } = selectedDay[0] || {}
+    if (+y === +year && +m === +month && +d === +day) {
+      return
+    }
+    if (weekMode) {
+      let disableSelected = false
+      if (!year || !month || !day) {
+        const today = getDate.todayDate()
+        year = today.year
+        month = today.month
+        day = today.date
+        disableSelected = true
+      }
+      jumpWhenWeekMode({ year, month, day }, disableSelected)
+        .then(date => {
+          resolve(date)
+        })
+        .catch(err => {
+          reject(err)
+        })
+      mountEventsOnPage(getCurrentPage())
+      return
+    }
+    if (year && month) {
+      jumpWhenNormalMode({ year, month, day })
+        .then(date => {
+          resolve(date)
+        })
+        .catch(err => {
+          reject(err)
+        })
+    } else {
+      conf
+        .jumpToToday()
+        .then(date => {
+          resolve(date)
+        })
+        .catch(err => {
+          reject(err)
+        })
+    }
+  })
+}
+
+/**
+ * 设置待办事项日期标记
+ * @param {object} todos  待办事项配置
+ * @param {string} [todos.pos] 标记显示位置，默认值'bottom' ['bottom', 'top']
+ * @param {string} [todos.dotColor] 标记点颜色，backgroundColor 支持的值都行
+ * @param {object[]} [todos.days] 需要标记的所有日期，如：[{year: 2015, month: 5, day: 12}]，其中年月日字段必填
+ * @param {string} componentId 要操作的日历组件ID
+ */
+export function setTodoLabels(todos, componentId) {
+  bindCurrentComponent(componentId)
+  Todo(Component).setTodoLabels(todos)
+}
+
+/**
+ * 删除指定日期待办事项
+ * @param {array} todos 需要删除的待办日期数组
+ * @param {string} componentId 要操作的日历组件ID
+ */
+export function deleteTodoLabels(todos, componentId) {
+  bindCurrentComponent(componentId)
+  Todo(Component).deleteTodoLabels(todos)
+}
+
+/**
+ * 清空所有待办事项
+ * @param {string} componentId 要操作的日历组件ID
+ */
+export function clearTodoLabels(componentId) {
+  bindCurrentComponent(componentId)
+  Todo(Component).clearTodoLabels()
+}
+
+/**
+ * 获取所有待办事项
+ * @param {object } options 日期配置选项 {lunar} 是否返回农历信息
+ * @param {string} componentId 要操作的日历组件ID
+ */
+export function getTodoLabels(options = {}, componentId) {
+  bindCurrentComponent(componentId)
+  const config = getCalendarConfig()
+  const todoDates = Todo(Component).getTodoLabels() || []
+  if (options.lunar && !config.showLunar) {
+    const todoDatesWithLunar = getDate.convertLunar(todoDates)
+    return todoDatesWithLunar
+  } else {
+    return todoDates
+  }
+}
+
+/**
+ * 禁用指定日期
+ * @param {array} days 日期
+ * @param {number} [days.year]
+ * @param {number} [days.month]
+ * @param {number} [days.day]
+ * @param {string} componentId 要操作的日历组件ID
+ */
+export function disableDay(days = [], componentId) {
+  bindCurrentComponent(componentId)
+  Day(Component).disableDays(days)
+}
+
+/**
+ * 指定可选日期范围
+ * @param {array} area 日期访问数组
+ * @param {string} componentId 要操作的日历组件ID
+ */
+export function enableArea(area = [], componentId) {
+  bindCurrentComponent(componentId)
+  Day(Component).enableArea(area)
+}
+
+/**
+ * 指定特定日期可选
+ * @param {array} days 指定日期数组
+ * @param {string} componentId 要操作的日历组件ID
+ */
+export function enableDays(days = [], componentId) {
+  bindCurrentComponent(componentId)
+  Day(Component).enableDays(days)
+}
+
+/**
+ * 设置选中日期（多选模式下）
+ * @param {array} selected 需选中日期
+ * @param {string} componentId 要操作的日历组件ID
+ */
+export function setSelectedDays(selected, componentId) {
+  bindCurrentComponent(componentId)
+  Day(Component).setSelectedDays(selected)
+}
+
+/**
+ * 获取当前日历配置
+ * @param {string} componentId 要操作的日历组件ID
+ */
+export function getCalendarConfig(componentId) {
+  bindCurrentComponent(componentId)
+  return CalendarConfig(Component).getCalendarConfig()
+}
+
+/**
+ * 设置日历配置
+ * @param {object} config
+ * @param {string} componentId 要操作的日历组件ID
+ */
+export function setCalendarConfig(config, componentId) {
+  bindCurrentComponent(componentId)
+  if (!config || Object.keys(config).length === 0) {
+    return logger.warn('setCalendarConfig 参数必须为非空对象')
+  }
+  const existConfig = getCalendarConfig()
+  return new Promise((resolve, reject) => {
+    CalendarConfig(Component)
+      .setCalendarConfig(config)
+      .then(conf => {
+        resolve(conf)
+        const { date, type } = existConfig.disableMode || {}
+        const { _date, _type } = config.disableMode || {}
+        if (type !== _type || date !== _date) {
+          const { year, month } = getCurrentYM()
+          jump(year, month)
+        }
+      })
+      .catch(err => {
+        reject(err)
+      })
+  })
+}
+
+/**
+ * 获取当前日历面板日期
+ * @param {object } options 日期配置选项 {lunar} 是否返回农历信息
+ * @param {string} componentId 要操作的日历组件ID
+ */
+export function getCalendarDates(options = {}, componentId) {
+  bindCurrentComponent(componentId)
+  const config = getCalendarConfig()
+  const dates = getData('calendar.days', componentId) || []
+  if (options.lunar && !config.showLunar) {
+    const datesWithLunar = getDate.convertLunar(dates)
+    return datesWithLunar
+  } else {
+    return dates
+  }
+}
+
+/**
+ * 选择连续日期范围
+ * @param {string} componentId 要操作的日历组件ID
+ */
+export function chooseDateArea(dateArea, componentId) {
+  bindCurrentComponent(componentId)
+  return Day(Component).chooseArea(dateArea)
+}
+
+/**
+ * 设置指定日期样式
+ * @param {array} dates 待设置特殊样式的日期
+ * @param {string} componentId 要操作的日历组件ID
+ */
+export function setDateStyle(dates, componentId) {
+  if (!dates) return
+  bindCurrentComponent(componentId)
+  Day(Component).setDateStyle(dates)
+}
+
+/**
+ * 切换周月视图
+ * 切换视图时可传入指定日期，如: {year: 2019, month: 1, day: 3}
+ * args[0] view 视图模式[week, month]
+ * args[1]|args[2]为day object或者 componentId
+ */
+export function switchView(...args) {
+  return new Promise((resolve, reject) => {
+    const view = args[0]
+    if (!args[1]) {
+      return Week(Component)
+        .switchWeek(view)
+        .then(resolve)
+        .catch(reject)
+    }
+    if (typeof args[1] === 'string') {
+      bindCurrentComponent(args[1], this)
+      Week(Component)
+        .switchWeek(view, args[2])
+        .then(resolve)
+        .catch(reject)
+    } else if (typeof args[1] === 'object') {
+      if (typeof args[2] === 'string') {
+        bindCurrentComponent(args[1], this)
+      }
+      Week(Component)
+        .switchWeek(view, args[1])
+        .then(resolve)
+        .catch(reject)
+    }
+  })
+}
+
+/**
+ * 绑定日历事件至当前页面实例
+ * @param {object} page 当前页面实例
+ */
+function mountEventsOnPage(page) {
+  page.calendar = {
+    jump,
+    switchView,
+    disableDay,
+    enableArea,
+    enableDays,
+    chooseDateArea,
+    getCurrentYM,
+    getSelectedDay,
+    cancelSelectedDates,
+    setDateStyle,
+    setTodoLabels,
+    getTodoLabels,
+    deleteTodoLabels,
+    clearTodoLabels,
+    setSelectedDays,
+    getCalendarConfig,
+    setCalendarConfig,
+    getCalendarDates
+  }
+}
+
+function setWeekHeader(firstDayOfWeek) {
+  let weeksCh = ['日', '一', '二', '三', '四', '五', '六']
+  if (firstDayOfWeek === 'Mon') {
+    weeksCh = ['一', '二', '三', '四', '五', '六', '日']
+  }
+  setData({
+    'calendar.weeksCh': weeksCh
+  })
+}
+
+function autoSelectDay(defaultDay) {
+  Component.firstRenderWeekMode = true
+  if (defaultDay && typeof defaultDay === 'string') {
+    const day = defaultDay.split('-')
+    if (day.length < 3) {
+      return logger.warn('配置 jumpTo 格式应为: 2018-4-2 或 2018-04-02')
+    }
+    jump(+day[0], +day[1], +day[2])
+  } else {
+    if (!defaultDay) {
+      Component.config.noDefault = true
+      setData({
+        'config.noDefault': true
+      })
+    }
+    jump()
+  }
+}
+
+function init(component, config) {
+  initialTasks.flag = 'process'
+  Component = component
+  Component.config = config
+  setWeekHeader(config.firstDayOfWeek)
+  autoSelectDay(config.defaultDay)
+  logger.tips(
+    '使用中若遇问题请反馈至 https://github.com/treadpit/wx_calendar/issues ✍️'
+  )
+}
+
+export default (component, config = {}) => {
+  if (initialTasks.flag === 'process') {
+    return initialTasks.tasks.push(function() {
+      init(component, config)
+    })
+  }
+  init(component, config)
+}

components/local/calendar/theme/theme-default.wxss

@@ -0,0 +1,52 @@
+
+/* 日历主要颜色相关样式 */
+
+.default_color,
+.default_weekend-color,
+.default_handle-color,
+.default_week-color {
+    color: #ff629a;
+}
+
+.default_today {
+    color: #fff;
+    background-color: #874fb4;
+}
+
+.default_choosed {
+    color: #fff;
+    background-color: #ff629a;
+}
+
+.default_date-disable {
+    color: #c7c7c7;
+}
+
+.default_prev-month-date,
+.default_next-month-date {
+    color: #e2e2e2;
+}
+
+.default_normal-date {
+    color: #88d2ac;
+}
+
+.default_todo-circle {
+    border-color: #88d2ac;
+}
+
+.default_todo-dot {
+    background-color: #e54d42;
+}
+
+.default_date-desc {
+    color: #c2c2c2;
+}
+
+.default_date-desc-lunar {
+    color: #e54d42;
+}
+
+.default_date-desc-disable {
+    color: #e2e2e2;
+}

components/local/calendar/theme/theme-elegant.wxss

@@ -0,0 +1,49 @@
+.elegant_color,
+.elegant_weekend-color,
+.elegant_handle-color,
+.elegant_week-color {
+    color: #333;
+}
+
+.elegant_today {
+    color: #000;
+    background-color: #e1e7f5;
+}
+
+.elegant_choosed {
+    color: #000;
+    background-color: #e2e2e2;
+}
+
+.elegant_date-disable {
+    color: #c7c7c7;
+}
+
+.elegant_prev-month-date,
+.elegant_next-month-date {
+    color: #e2e2e2;
+}
+
+.elegant_normal-date {
+    color: #333;
+}
+
+.elegant_todo-circle {
+    border-color: #161035;
+}
+
+.elegant_todo-dot {
+    background-color: #161035;
+}
+
+.elegant_date-desc {
+    color: #c2c2c2;
+}
+
+.elegant_date-desc-lunar {
+    color: #161035;
+}
+
+.elegant_date-desc-disable {
+    color: #e2e2e2;
+}

components/local/v2/core.js

@@ -0,0 +1,144 @@
+import { dateUtil, getCalendarConfig } from './utils/index'
+
+/**
+ * 计算当前月份前后两月应占的格子
+ * @param {number} year 年份
+ * @param {number} month 月份
+ */
+function calculateEmptyGrids(year, month, config) {
+  const prevMonthGrids = calculatePrevMonthGrids(year, month, config)
+  const nextMonthGrids = calculateNextMonthGrids(year, month, config)
+  return {
+    prevMonthGrids,
+    nextMonthGrids
+  }
+}
+
+/**
+ * 计算上月应占的格子
+ * @param {number} year 年份
+ * @param {number} month 月份
+ */
+function calculatePrevMonthGrids(year, month, config) {
+  let emptyGrids = []
+  const prevMonthDays = dateUtil.getDatesCountOfMonth(year, month - 1)
+  let firstDayOfWeek = dateUtil.firstDayOfWeek(year, month)
+  if (config.firstDayOfWeek === 'Mon') {
+    if (firstDayOfWeek === 0) {
+      firstDayOfWeek = 6
+    } else {
+      firstDayOfWeek -= 1
+    }
+  }
+  if (firstDayOfWeek > 0) {
+    const len = prevMonthDays - firstDayOfWeek
+    const { onlyShowCurrentMonth } = config
+    const YMInfo = dateUtil.getPrevMonthInfo({ year, month })
+    for (let i = prevMonthDays; i > len; i--) {
+      if (onlyShowCurrentMonth) {
+        emptyGrids.push('')
+      } else {
+        const week = dateUtil.getDayOfWeek(+year, +month, i)
+        emptyGrids.push({
+          ...YMInfo,
+          date: i,
+          week
+        })
+      }
+    }
+    emptyGrids.reverse()
+  }
+  return emptyGrids
+}
+/**
+ * 计算下一月日期是否需要多展示的日期
+ * 某些月份日期为5排，某些月份6排，统一为6排
+ * @param {number} year
+ * @param {number} month
+ * @param {object} config
+ */
+function calculateExtraEmptyDate(year, month, config) {
+  let extDate = 0
+  if (+month === 2) {
+    extDate += 7
+    let firstDayofMonth = dateUtil.getDayOfWeek(year, month, 1)
+    if (config.firstDayOfWeek === 'Mon') {
+      if (+firstDayofMonth === 1) extDate += 7
+    } else {
+      if (+firstDayofMonth === 0) extDate += 7
+    }
+  } else {
+    let firstDayofMonth = dateUtil.getDayOfWeek(year, month, 1)
+    if (config.firstDayOfWeek === 'Mon') {
+      if (firstDayofMonth !== 0 && firstDayofMonth < 6) {
+        extDate += 7
+      }
+    } else {
+      if (firstDayofMonth <= 5) {
+        extDate += 7
+      }
+    }
+  }
+  return extDate
+}
+/**
+ * 计算下月应占的格子
+ * @param {number} year 年份
+ * @param {number} month  月份
+ */
+function calculateNextMonthGrids(year, month, config) {
+  let emptyGrids = []
+  const datesCount = dateUtil.getDatesCountOfMonth(year, month)
+  let lastDayWeek = dateUtil.getDayOfWeek(year, month, datesCount)
+  if (config.firstDayOfWeek === 'Mon') {
+    if (lastDayWeek === 0) {
+      lastDayWeek = 6
+    } else {
+      lastDayWeek -= 1
+    }
+  }
+  let len = 7 - (lastDayWeek + 1)
+  const { onlyShowCurrentMonth } = config
+  if (!onlyShowCurrentMonth) {
+    len = len + calculateExtraEmptyDate(year, month, config)
+  }
+  const YMInfo = dateUtil.getNextMonthInfo({ year, month })
+  for (let i = 1; i <= len; i++) {
+    const week = dateUtil.getDayOfWeek(+year, +month, i)
+    if (onlyShowCurrentMonth) {
+      emptyGrids.push('')
+    } else {
+      emptyGrids.push({
+        id: i - 1,
+        ...YMInfo,
+        date: i,
+        week: week || 7
+      })
+    }
+  }
+  return emptyGrids
+}
+/**
+ * 设置日历面板数据
+ * @param {number} year 年份
+ * @param {number} month  月份
+ * @param {number} curDate  日期
+ */
+function calculateCurrentMonthDates(year, month) {
+  return dateUtil.calcDates(year, month)
+}
+
+export function calcJumpData({ dateInfo, config, component }) {
+  dateInfo = dateInfo || dateUtil.todayFMD()
+  const { year, month, date } = dateInfo
+  const calendarConfig = config || getCalendarConfig(component)
+  const emptyGrids = calculateEmptyGrids(year, month, calendarConfig)
+  const calendar = {
+    curYear: year,
+    curMonth: month,
+    curDate: date,
+    dates: calculateCurrentMonthDates(year, month),
+    ...emptyGrids
+  }
+  return calendar
+}

components/local/v2/helper.js

@@ -0,0 +1,12 @@
+import { dateUtil } from './utils/index'
+
+export function calcTargetYMInfo() {
+  return {
+    right: dateUtil.getPrevMonthInfo,
+    left: dateUtil.getNextMonthInfo,
+    prev_month: dateUtil.getPrevMonthInfo,
+    next_month: dateUtil.getNextMonthInfo,
+    prev_year: dateUtil.getPrevYearInfo,
+    next_year: dateUtil.getNextYearInfo
+  }
+}

components/local/v2/index.js

@@ -0,0 +1,257 @@
+import plugins from './plugins/index'
+import { calcJumpData } from './core'
+import { renderCalendar } from './render'
+import { calcTargetYMInfo } from './helper'
+import { dateUtil, calendarGesture, logger } from './utils/index'
+
+Component({
+  options: {
+    styleIsolation: 'apply-shared',
+    multipleSlots: true // 在组件定义时的选项中启用多slot支持
+  },
+  properties: {
+    config: {
+      type: Object,
+      value: {}
+    }
+  },
+  lifetimes: {
+    attached: function() {
+      this.initComp()
+    }
+  },
+  methods: {
+    initComp() {
+      const calendarConfig = this.setDefaultDisableDate()
+      this.setConfig(calendarConfig)
+    },
+    // 禁用某天日期配置默认为今天
+    setDefaultDisableDate() {
+      const calendarConfig = this.properties.config || {}
+      if (calendarConfig.disableMode && !calendarConfig.disableMode.date) {
+        calendarConfig.disableMode.date = dateUtil.toTimeStr(
+          dateUtil.todayFMD()
+        )
+      }
+      return calendarConfig
+    },
+    initCalendar(config) {
+      const { defaultDate } = config
+      let date = dateUtil.todayFMD()
+      if (defaultDate && typeof defaultDate === 'string') {
+        const dateInfo = defaultDate.split('-')
+        if (dateInfo.length < 3) {
+          return logger.warn('defaultDate配置格式应为: 2018-4-2 或 2018-04-02')
+        } else {
+          date = {
+            year: +dateInfo[0],
+            month: +dateInfo[1],
+            date: +dateInfo[2]
+          }
+        }
+      }
+      const waitRenderData = calcJumpData({
+        dateInfo: date,
+        config
+      })
+      const timestamp = dateUtil.todayTimestamp()
+      if (config.autoChoosedWhenJump) {
+        const target = waitRenderData.dates.filter(
+          item => dateUtil.toTimeStr(item) === dateUtil.toTimeStr(date)
+        )
+        if (target && target.length) {
+          if (!waitRenderData.selectedDates) {
+            waitRenderData.selectedDates = target
+          } else {
+            waitRenderData.selectedDates.push(target[0])
+          }
+        }
+      }
+      return {
+        ...waitRenderData,
+        todayTimestamp: timestamp,
+        weeksCh: dateUtil.getWeekHeader(config.firstDayOfWeek)
+      }
+    },
+    setConfig(config) {
+      if (config.markToday && typeof config.markToday === 'string') {
+        config.highlightToday = true
+      }
+      config.theme = config.theme || 'default'
+      this.setData(
+        {
+          config
+        },
+        () => {
+          for (let plugin of plugins.installed) {
+            const [, p] = plugin
+            if (typeof p.install === 'function') {
+              p.install(this)
+            }
+            if (typeof p.methods === 'function') {
+              const methods = p.methods(this)
+              for (let fnName in methods) {
+                if (fnName.startsWith('__')) continue
+                const fn = methods[fnName]
+                if (typeof fn === 'function') {
+                  if (!this.calendar) this.calendar = {}
+                  this.calendar[fnName] = fn
+                }
+              }
+            }
+          }
+          const initData = this.initCalendar(config)
+          renderCalendar.call(this, initData, config)
+        }
+      )
+    },
+    tapDate(e) {
+      const { info } = e.currentTarget.dataset
+      const { date, disable } = info || {}
+      if (disable || !date) return
+      const { calendar, config } = this.data
+      let calendarData = calendar
+      let calendarConfig = config
+      if (config.takeoverTap) {
+        return this.triggerEvent('takeoverTap', info)
+      }
+      for (let plugin of plugins.installed) {
+        const [, p] = plugin
+        if (typeof p.onTapDate === 'function') {
+          const {
+            calendarData: __calendarData,
+            calendarConfig: __calendarConfig
+          } = p.onTapDate(info, calendarData, calendarConfig)
+          calendarData = __calendarData
+          calendarConfig = __calendarConfig
+        }
+      }
+      renderCalendar.call(this, calendarData, calendarConfig).then(() => {
+        this.triggerEvent('afterTapDate', info)
+      })
+    },
+    /**
+     * 日历滑动开始
+     * @param {object} e
+     */
+    calendarTouchstart(e) {
+      const t = e.touches[0]
+      const startX = t.clientX
+      const startY = t.clientY
+      this.swipeLock = true
+      this.setData({
+        'gesture.startX': startX,
+        'gesture.startY': startY
+      })
+    },
+    /**
+     * 日历滑动中
+     * @param {object} e
+     */
+    calendarTouchmove(e) {
+      const { gesture } = this.data
+      const { preventSwipe } = this.properties.config
+      if (!this.swipeLock || preventSwipe) return
+      if (calendarGesture.isLeft(gesture, e.touches[0])) {
+        this.handleSwipe('left')
+        this.swipeLock = false
+      }
+      if (calendarGesture.isRight(gesture, e.touches[0])) {
+        this.handleSwipe('right')
+        this.swipeLock = false
+      }
+    },
+    calendarTouchend(e) {
+      this.setData({
+        'calendar.leftSwipe': 0,
+        'calendar.rightSwipe': 0
+      })
+    },
+    handleSwipe(direction) {
+      let swipeKey = 'calendar.leftSwipe'
+      if (direction === 'right') {
+        swipeKey = 'calendar.rightSwipe'
+      }
+      this.setData({
+        [swipeKey]: 1
+      })
+      const { calendar } = this.data
+      let calendarData = calendar
+      const { curYear, curMonth } = calendarData
+      const getMonthInfo = calcTargetYMInfo()[direction]
+      const target = getMonthInfo({
+        year: +curYear,
+        month: +curMonth
+      })
+      target.direction = direction
+      this.renderCalendar(target)
+    },
+    changeDate(e) {
+      const { type } = e.currentTarget.dataset
+      const { calendar: calendarData } = this.data
+      const { curYear, curMonth } = calendarData
+      const getMonthInfo = calcTargetYMInfo()[type]
+      const target = getMonthInfo({
+        year: +curYear,
+        month: +curMonth
+      })
+      target.direction = type
+      this.renderCalendar(target)
+    },
+    renderCalendar(target) {
+      let { calendar: calendarData, config } = this.data
+      const { curYear, curMonth } = calendarData || {}
+      for (let plugin of plugins.installed) {
+        const [, p] = plugin
+        if (typeof p.onSwitchCalendar === 'function') {
+          calendarData = p.onSwitchCalendar(target, calendarData, this)
+        }
+      }
+      return renderCalendar.call(this, calendarData, config).then(() => {
+        let triggerEventName = 'whenChangeMonth'
+        if (config.weekMode) {
+          triggerEventName = 'whenChangeWeek'
+        }
+        this.triggerEvent(triggerEventName, {
+          current: {
+            year: +curYear,
+            month: +curMonth
+          },
+          next: target
+        })
+        this.triggerEvent('onSwipe', {
+          current: {
+            year: +curYear,
+            month: +curMonth
+          },
+          next: target,
+          type: triggerEventName
+        })
+      })
+    },
+    doubleClickJumpToToday() {
+      const { multi, weekMode } = this.calendar.getCalendarConfig() || {}
+      if (multi || weekMode) return
+      if (this.count === undefined) {
+        this.count = 1
+      } else {
+        this.count += 1
+      }
+      if (this.lastClick) {
+        const difference = new Date().getTime() - this.lastClick
+        if (
+          difference < 500 &&
+          this.count >= 2 &&
+          typeof this.calendar.jump === 'function'
+        ) {
+          const today = dateUtil.todayFMD()
+          this.calendar.jump(today)
+        }
+        this.count = undefined
+        this.lastClick = undefined
+      } else {
+        this.lastClick = new Date().getTime()
+      }
+    }
+  }
+})

components/local/v2/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

components/local/v2/index.wxss

@@ -0,0 +1,214 @@
+@import './theme/iconfont.wxss';
+@import './theme/theme-default.wxss';
+@import './theme/theme-elegant.wxss';
+
+.b {
+    display: flex;
+}
+
+.lr {
+    flex-direction: row;
+}
+
+.tb {
+    flex-direction: column;
+}
+
+.pc {
+    justify-content: center;
+}
+
+.ac {
+    align-items: center;
+}
+
+.cc {
+    align-items: center;
+    justify-content: center;
+}
+
+.wrap {
+    flex-wrap: wrap;
+}
+
+.flex {
+    flex-grow: 1;
+}
+
+.bg {
+    background-image: linear-gradient(to bottom, #faefe7, #ffcbd7);
+    overflow: hidden;
+}
+
+.white-color {
+    color: #fff;
+}
+
+.fs24 {
+    font-size: 24rpx;
+}
+
+.fs28 {
+    font-size: 28rpx;
+}
+
+.fs32 {
+    font-size: 32rpx;
+}
+
+.fs36 {
+    font-size: 36rpx;
+}
+
+.calendar {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+/* 日历操作栏 */
+
+.handle {
+    height: 80rpx;
+}
+
+.prev-handle,
+.next-handle {
+    padding: 20rpx;
+}
+
+.date-in-handle {
+    height: 80rpx;
+}
+
+/* 星期栏 */
+
+.weeks {
+    height: 50rpx;
+    line-height: 50rpx;
+    opacity: 0.5;
+}
+
+.week {
+    text-align: center;
+}
+
+.grid,
+.week {
+    width: 14.286014285714286%;
+}
+
+.date-wrap {
+    width: 100%;
+    height: 80rpx;
+    position: relative;
+    left: 0;
+    top: 0;
+}
+
+.date {
+    position: relative;
+    left: 0;
+    top: 0;
+    width: 55rpx;
+    height: 55rpx;
+    text-align: center;
+    line-height: 55rpx;
+    font-size: 26rpx;
+    font-weight: 200;
+    border-radius: 50%;
+    transition: all 0.3s;
+    animation-name: choosed;
+    animation-duration: 0.5s;
+    animation-timing-function: linear;
+    animation-iteration-count: 1;
+}
+
+.date-area-mode {
+    width: 100%;
+    border-radius: 0;
+}
+
+.date-desc {
+    width: 150%;
+    height: 32rpx;
+    font-size: 20rpx;
+    line-height: 32rpx;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+    word-break: break-all;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    -webkit-line-clamp: 1;
+    text-align: center;
+}
+
+@keyframes choosed {
+    from {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(0.9);
+    }
+
+    to {
+        transform: scale(1);
+    }
+}
+
+/* 日期圆圈标记 */
+.todo-circle {
+    border-width: 1rpx;
+    border-style: solid;
+    box-sizing: border-box;
+}
+
+/* 待办点标记相关样式 */
+.todo-dot {
+    width: 10rpx;
+    height: 10rpx;
+    border-radius: 50%;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.todo-dot-top {
+    top: 3rpx;
+}
+
+.todo-dot.todo-dot-top-always {
+    top: -8rpx;
+}
+
+.todo-dot.todo-dot-bottom {
+    bottom: 0;
+}
+
+.todo-dot.todo-dot-bottom-always {
+    bottom: -10rpx;
+}
+
+/* 日期描述文字（待办文字/农历）相关样式 */
+
+.date-desc.date-desc-top {
+    top: -6rpx;
+}
+
+.date-desc.date-desc-top-always {
+    top: -20rpx;
+}
+
+.date-desc.date-desc-bottom {
+    bottom: -14rpx;
+}
+
+.todo-circle .date-desc.date-desc-bottom {
+    bottom: -30rpx;
+}
+
+.date-desc.date-desc-bottom-always {
+    bottom: -28rpx;
+}

components/local/v2/plugins/holidays/holidays-map.js

@@ -0,0 +1,212 @@
+/* *
+  @Author: drfu*
+  @Description: 数据来源于国务院办公厅关于2020年部分节假日安排的通知（国办发明电〔2019〕16号）_政府信息公开专栏，http://www.gov.cn/zhengce/content/2019-11/21/content_5454164.htm
+  @Date: 2020-10-12 14:29:45*
+ * @Last Modified by: drfu
+ * @Last Modified time: 2020-10-16 17:38:08
+*/
+
+// 节日列表
+export const festival = {
+  // 农历固定日期节日
+  lunar: {
+    1: {
+      1: {
+        type: 'festival',
+        name: '春节',
+        label: '春节'
+      },
+      8: {
+        type: 'festival',
+        name: '腊八节',
+        label: '腊八'
+      },
+      15: {
+        type: 'festival',
+        name: '元宵节',
+        label: '元宵'
+      }
+    },
+    7: {
+      7: {
+        type: 'festival',
+        name: '七夕节',
+        label: '七夕'
+      },
+      15: {
+        type: 'festival',
+        name: '中元节',
+        label: '中元节'
+      }
+    },
+    9: {
+      9: {
+        type: 'festival',
+        name: '重阳节',
+        label: '重阳节'
+      }
+    }
+  },
+  // 阳历固定日期节日
+  solar: {
+    2: {
+      14: {
+        type: 'festival',
+        name: '情人节',
+        label: '情人节'
+      }
+    },
+    3: {
+      12: {
+        type: 'festival',
+        name: '植树节',
+        label: '植树节'
+      }
+    },
+    4: {
+      1: {
+        type: 'festival',
+        name: '愚人节',
+        label: '愚人节'
+      },
+      5: {
+        type: 'festival',
+        name: '清明节',
+        label: '清明节'
+      }
+    },
+    5: {
+      1: {
+        type: 'festival',
+        name: '劳动节',
+        label: '劳动节'
+      }
+    },
+    6: {
+      1: {
+        type: 'festival',
+        name: '儿童节',
+        label: '儿童节'
+      }
+    },
+    7: {
+      1: {
+        type: 'festival',
+        name: '建党节',
+        label: '建党节'
+      }
+    },
+    8: {
+      1: {
+        type: 'festival',
+        name: '建军节',
+        label: '建军节'
+      }
+    },
+    9: {
+      10: {
+        type: 'festival',
+        name: '教师节',
+        label: '教师节'
+      }
+    },
+    10: {
+      1: {
+        type: 'festival',
+        name: '国庆节',
+        label: '国庆节'
+      }
+    },
+    12: {
+      25: {
+        type: 'festival',
+        name: '圣诞节',
+        label: '圣诞节'
+      }
+    }
+  }
+}
+
+export const holidays = {
+  2020: {
+    1: {
+      1: {
+        type: 'holiday',
+        name: '元旦',
+        label: '休'
+      },
+      19: {
+        type: 'work',
+        name: '调班',
+        label: '班'
+      },
+      '24-30': {
+        type: 'holiday',
+        name: '春节',
+        label: '休'
+      }
+    },
+    2: {
+      1: {
+        type: 'work',
+        name: '调班',
+        label: '班'
+      }
+    },
+    4: {
+      '4-6': {
+        type: 'holiday',
+        name: '清明节',
+        label: '休'
+      },
+      26: {
+        type: 'work',
+        name: '调班',
+        label: '班'
+      }
+    },
+    5: {
+      '1-5': {
+        type: 'holiday',
+        name: '劳动节',
+        label: '休'
+      },
+      9: {
+        type: 'work',
+        name: '调班',
+        label: '班'
+      }
+    },
+    6: {
+      '25-27': {
+        type: 'holiday',
+        name: '端午节',
+        label: '休'
+      },
+      28: {
+        type: 'work',
+        name: '调班',
+        label: '班'
+      }
+    },
+    9: {
+      27: {
+        type: 'work',
+        name: '调班',
+        label: '班'
+      }
+    },
+    10: {
+      '1-8': {
+        type: 'holiday',
+        name: '国庆节/中秋节',
+        label: '休'
+      },
+      10: {
+        type: 'work',
+        name: '调班',
+        label: '班'
+      }
+    }
+  }
+}

components/local/v2/plugins/holidays/index.js

@@ -0,0 +1,201 @@
+/* *
+  @Author: drfu*
+  @Description: 显示法定节假日班/休情况
+  @Date: 2020-10-12 14:29:45*
+ * @Last Modified by: drfu
+ * @Last Modified time: 2020-10-16 17:34:13
+*/
+
+import { holidays, festival } from './holidays-map'
+import { dateUtil, getCalendarData, logger } from '../../utils/index'
+
+/**
+ * 当前是否在休假期内
+ * @param {object} { year, month }
+ * @param {object} { start, end, current }
+ * @returns
+ */
+function inHolidays({ year, month }, { start, end, current }) {
+  const getTimeStamp = dateUtil.getTimeStamp
+  const startTimestamp = getTimeStamp({
+    year,
+    month,
+    date: start
+  })
+  const endTimestamp = getTimeStamp({
+    year,
+    month,
+    date: end
+  })
+  const currentDateTimestamp = getTimeStamp({
+    year,
+    month,
+    date: current
+  })
+  if (
+    currentDateTimestamp >= startTimestamp &&
+    currentDateTimestamp <= endTimestamp
+  ) {
+    return true
+  }
+  return false
+}
+
+function addSpecialFestival(date, component) {
+  const { convertlLunar2Solar, convertSolarLunar } = component.calendar || {}
+  const lunarDateInfo = convertSolarLunar(date)
+  const { lYear, lMonth } = lunarDateInfo || {}
+  // 春节
+  const info = {
+    type: 'festival',
+    name: '除夕',
+    label: '除夕'
+  }
+  if (lMonth === 12) {
+    if (!festival.lunar['12']) festival.lunar['12'] = {}
+    if (convertlLunar2Solar(`${lYear}-12-30`) === -1) {
+      festival.lunar['12']['29'] = info
+    } else {
+      festival.lunar['12']['30'] = info
+    }
+  }
+}
+
+/**
+ * 是否匹配到节日
+ * @param {object} [dateInfo={}]
+ * @param {object} [component={}]
+ * @returns {object|boolean} 匹配到的节日数据或者false
+ */
+function hasFestivalDate(dateInfo = {}, component = {}) {
+  const { month, date } = dateInfo
+  let festivalDate = festival.solar[month] && festival.solar[month][date]
+  if (!festivalDate) {
+    const { convertSolarLunar } = component.calendar || {}
+    const lunarDateInfo = convertSolarLunar(dateInfo)
+    const { lMonth, lDay } = lunarDateInfo
+    festivalDate = festival.lunar[lMonth] && festival.lunar[lMonth][lDay]
+    if (!festivalDate) {
+      const festivalOfMonth = festival.lunar[lMonth] || {}
+      const festivalDateKey = Object.keys(festivalOfMonth).find(item =>
+        item.match(new RegExp(`\\b${lDay}\\b`))
+      )
+      if (!festivalDateKey) {
+        festivalDate = false
+      } else {
+        const festivalInfo = festival.lunar[lMonth][festivalDateKey]
+        if (!festivalInfo) {
+          festivalDate = false
+        } else {
+          const { condition } = festivalInfo
+          if (typeof condition === 'function') {
+            festivalDate = condition(lunarDateInfo)
+          } else {
+            festivalDate = false
+          }
+        }
+      }
+    }
+  }
+  return festivalDate
+}
+
+export default () => {
+  return {
+    name: 'holidays',
+    beforeRender(calendarData = {}, calendarConfig = {}, component) {
+      let { dates = [] } = calendarData
+      if (calendarConfig.showHolidays || calendarConfig.showFestival) {
+        dates = dates.map(d => {
+          let item = { ...d }
+          const { year, month, date } = item
+          const holidaysOfMonth =
+            (holidays[year] && holidays[year][month]) || {}
+          const holidayDate = holidaysOfMonth[date]
+          if (holidayDate) {
+            item = {
+              ...item,
+              ...holidayDate
+            }
+          } else {
+            const holidayKeys = Object.keys(holidaysOfMonth).filter(item =>
+              item.includes('-')
+            )
+            let target = ''
+            for (let v of holidayKeys) {
+              const [start, end] = v.split('-')
+              if (+d.date >= +start && +d.date <= +end) {
+                target = v
+                break
+              }
+            }
+            const [start, end] = target.split('-')
+            const isInHolidays = inHolidays(
+              {
+                year,
+                month
+              },
+              {
+                start,
+                end,
+                current: date
+              }
+            )
+            if (isInHolidays) {
+              item = {
+                ...item,
+                ...holidaysOfMonth[target]
+              }
+            } else if (calendarConfig.showFestival) {
+              const { convertSolarLunar, convertlLunar2Solar } =
+                component.calendar || {}
+              if (
+                typeof convertSolarLunar !== 'function' ||
+                typeof convertlLunar2Solar !== 'function'
+              ) {
+                return logger.warn(
+                  '农历节日显示需要引入农历插件(/component/v2/plugins/solarLunar)'
+                )
+              }
+              addSpecialFestival(item, component)
+              const festivalDate = hasFestivalDate(item, component)
+              if (festivalDate) {
+                item = {
+                  ...item,
+                  ...festivalDate
+                }
+              }
+            }
+          }
+          return item
+        })
+      }
+      return {
+        calendarData: {
+          ...calendarData,
+          dates: dates
+        },
+        calendarConfig
+      }
+    },
+    methods(component) {
+      return {
+        getHolidaysOfCurrentYear() {
+          const calendar = getCalendarData('calendar', component)
+          const { curYear } = calendar
+          return this.methods(component).getHolidaysOfYear(curYear)
+        },
+        getHolidaysOfYear(year) {
+          if (!year) return logger.warn('getHolidaysOfCurrentYear() 入参错误')
+          if (!holidays[year]) {
+            logger.warn('未匹配到当前年份节假日信息，请自行补充')
+            return {
+              err: 'not match'
+            }
+          }
+          return holidays[year]
+        }
+      }
+    }
+  }
+}

components/local/v2/plugins/index.js

@@ -0,0 +1,18 @@
+import preset from './preset/index'
+
+export default {
+  installed: [...preset],
+  use(plugin) {
+    if (typeof plugin !== 'function') return
+    const info = plugin() || {}
+    const { name } = info
+    if (
+      name &&
+      name !== 'methods' &&
+      !this.installed.some(p => p[0] === name)
+    ) {
+      this.installed.unshift([name, info])
+    }
+    return this
+  }
+}

components/local/v2/plugins/preset/base.js

@@ -0,0 +1,277 @@
+/**
+ * @Author: drfu*
+ * @Description: 基础功能
+ * @Date: 2020-10-08 21:22:09*
+ * @Last Modified by: drfu
+ * @Last Modified time: 2020-10-11 13:28:52
+ * */
+
+import { calcJumpData } from '../../core'
+import { renderCalendar } from '../../render'
+import {
+  dateUtil,
+  getCalendarData,
+  setCalendarData,
+  getCalendarConfig
+} from '../../utils/index'
+
+export default () => {
+  return {
+    name: 'base',
+    beforeRender(calendarData = {}, calendarConfig) {
+      const calendar = calendarData
+      const { selectedDates = [], dates } = calendar
+      let _dates = [...dates]
+      if (selectedDates.length) {
+        const selectedDatesStr = selectedDates.map(date =>
+          dateUtil.toTimeStr(date)
+        )
+        _dates.forEach(date => {
+          const dateStr = dateUtil.toTimeStr(date)
+          if (selectedDatesStr.includes(dateStr)) {
+            date.choosed = true
+          }
+        })
+      }
+      return {
+        calendarData: {
+          ...calendarData,
+          dates: _dates
+        },
+        calendarConfig
+      }
+    },
+    onTapDate(tapedDate, calendarData = {}, calendarConfig = {}) {
+      const calendar = {
+        ...calendarData
+      }
+      const dateIndex = dateUtil.findDateIndexInArray(
+        tapedDate,
+        calendarData.dates
+      )
+      const { multi, inverse } = calendarConfig
+      let dates = [...calendar.dates]
+      const { selectedDates = [] } = calendar
+      if (!multi) {
+        let preSelectedDate = {}
+        if (selectedDates.length) {
+          preSelectedDate = [...selectedDates].pop() || {}
+        }
+        const timeStr = dateUtil.toTimeStr
+        if (!inverse && timeStr(preSelectedDate) === timeStr(tapedDate)) {
+          return calendar
+        }
+        let _tapedDate = { ...tapedDate, choosed: !tapedDate.choosed }
+
+        dates[dateIndex] = _tapedDate
+        if (preSelectedDate.date) {
+          const idx = dateUtil.findDateIndexInArray(preSelectedDate, dates)
+          const date = dates[idx]
+          if (date) {
+            date.choosed = false
+          }
+        }
+        if (dates[dateIndex].choosed) {
+          calendar.selectedDates = [dates[dateIndex]]
+        } else {
+          calendar.selectedDates = []
+        }
+      } else {
+        dates[dateIndex] = {
+          ...dates[dateIndex],
+          choosed: !dates[dateIndex].choosed
+        }
+        if (!calendar.selectedDates) {
+          calendar.selectedDates = []
+        }
+        if (dates[dateIndex].choosed) {
+          calendar.selectedDates.push(dates[dateIndex])
+        } else {
+          calendar.selectedDates = calendar.selectedDates.filter(
+            date =>
+              dateUtil.toTimeStr(date) !== dateUtil.toTimeStr(dates[dateIndex])
+          )
+        }
+      }
+      return {
+        calendarData: {
+          ...calendar,
+          dates
+        },
+        calendarConfig
+      }
+    },
+    onSwitchCalendar(date, calendarData = {}, component) {
+      const calendarConfig = getCalendarConfig(component)
+      if (calendarConfig.weekMode) {
+        return calendarData
+      }
+      const updatedRenderData = calcJumpData({
+        dateInfo: date,
+        config: calendarConfig
+      })
+      return {
+        ...calendarData,
+        ...updatedRenderData
+      }
+    },
+    methods(component) {
+      return {
+        jump: dateInfo => {
+          if (Object.prototype.toString.call(dateInfo) !== '[object Object]')
+            return
+          const updatedRenderData = calcJumpData({
+            dateInfo,
+            component
+          })
+          const existCalendarData = getCalendarData('calendar', component)
+          const config = getCalendarConfig(component)
+          if (config.autoChoosedWhenJump) {
+            const target = updatedRenderData.dates[dateInfo.date - 1]
+            if (!updatedRenderData.selectedDates) {
+              updatedRenderData.selectedDates = [target]
+            } else {
+              updatedRenderData.selectedDates.push(target)
+            }
+          }
+          return renderCalendar.call(component, {
+            ...existCalendarData,
+            ...updatedRenderData
+          })
+        },
+        getCalendarConfig() {
+          return getCalendarConfig(component)
+        },
+        setCalendarConfig(config) {
+          return new Promise((resolve, reject) => {
+            if (!component || !component.data.config) {
+              reject('异常：未找到组件配置信息')
+              return
+            }
+            let conf = { ...component.config, ...config }
+            component.config = conf
+            setCalendarData({ config: conf }, component)
+              .then(resolve)
+              .catch(reject)
+          })
+        },
+        cancelSelectedDates(cancelDates = []) {
+          const existCalendarData = getCalendarData('calendar', component) || {}
+          const { dates = [], selectedDates = [] } = existCalendarData
+          let updatedRenderData = {}
+          const config = getCalendarConfig(component)
+          let chooseAreaData = {}
+          if (config.chooseAreaMode) {
+            chooseAreaData = {
+              chooseAreaTimestamp: [],
+              tempChooseAreaTimestamp: []
+            }
+          }
+          if (!cancelDates.length) {
+            dates.forEach(item => {
+              item.choosed = false
+            })
+            updatedRenderData = {
+              dates,
+              selectedDates: []
+            }
+          } else {
+            const cancelDatesStr = cancelDates.map(date =>
+              dateUtil.toTimeStr(date)
+            )
+            const filterSelectedDates = selectedDates.filter(
+              date => !cancelDatesStr.includes(dateUtil.toTimeStr(date))
+            )
+            dates.forEach(date => {
+              if (cancelDatesStr.includes(dateUtil.toTimeStr(date))) {
+                date.choosed = false
+              }
+            })
+            updatedRenderData = {
+              dates,
+              selectedDates: filterSelectedDates
+            }
+          }
+
+          return renderCalendar.call(component, {
+            ...existCalendarData,
+            ...updatedRenderData,
+            ...chooseAreaData
+          })
+        },
+        setSelectedDates: targetDates => {
+          const existCalendarData = getCalendarData('calendar', component)
+          let { dates, selectedDates = [] } = existCalendarData || {}
+          let __selectedDates = []
+          let __dates = dates
+          if (!targetDates) {
+            __dates = dates.map(item => {
+              const date = { ...item }
+              date.choosed = true
+              if (existCalendarData.showLabelAlways && date.showTodoLabel) {
+                date.showTodoLabel = true
+              } else {
+                date.showTodoLabel = false
+              }
+              return date
+            })
+            __selectedDates = dates
+          } else if (targetDates && targetDates.length) {
+            const allSelected = dateUtil.uniqueArrayByDate(
+              selectedDates.concat(targetDates)
+            )
+            const allSelectedDateStr = allSelected.map(d =>
+              dateUtil.toTimeStr(d)
+            )
+            __dates = dates.map(item => {
+              const date = { ...item }
+              if (allSelectedDateStr.includes(dateUtil.toTimeStr(date))) {
+                date.choosed = true
+                __selectedDates.push(date)
+              }
+              if (existCalendarData.showLabelAlways && date.showTodoLabel) {
+                date.showTodoLabel = true
+              } else {
+                date.showTodoLabel = false
+              }
+              return date
+            })
+          }
+          return renderCalendar.call(component, {
+            ...existCalendarData,
+            dates: __dates,
+            selectedDates: __selectedDates
+          })
+        },
+        setDateStyle: toSetDates => {
+          if (!Array.isArray(toSetDates)) return Promise.reject()
+          const existCalendarData = getCalendarData('calendar', component)
+          const { dates = [], specialStyleDates } = existCalendarData || {}
+          if (Array.isArray(specialStyleDates)) {
+            toSetDates = dateUtil.uniqueArrayByDate([
+              ...specialStyleDates,
+              ...toSetDates
+            ])
+          }
+          const toSetDatesStr = toSetDates.map(item => dateUtil.toTimeStr(item))
+          const _dates = dates.map(item => {
+            const idx = toSetDatesStr.indexOf(dateUtil.toTimeStr(item))
+            if (idx > -1) {
+              return {
+                ...item,
+                class: toSetDates[idx].class
+              }
+            } else {
+              return item
+            }
+          })
+          return renderCalendar.call(component, {
+            ...existCalendarData,
+            dates: _dates,
+            specialStyleDates: toSetDates
+          })
+        }
+      }
+    }
+  }
+}

components/local/v2/plugins/preset/get-calendar-data.js

@@ -0,0 +1,69 @@
+/**
+ * @Author: drfu*
+ * @Description: 获取日历数据
+ * @Date: 2020-10-08 21:22:09*
+ * @Last Modified by: drfu
+ * @Last Modified time: 2020-10-11 13:42:37
+ * */
+
+import { getCalendarData, logger, getCalendarConfig } from '../../utils/index'
+
+function wrapDateWithLunar(dates = [], convertFn) {
+  const datesWithLunar = JSON.parse(JSON.stringify(dates)).map(date => ({
+    ...date,
+    lunar: convertFn(date)
+  }))
+  return datesWithLunar
+}
+
+export default () => {
+  return {
+    name: 'getData',
+    methods(component) {
+      return {
+        getCurrentYM: () => {
+          const { curYear, curMonth } = getCalendarData('calendar', component)
+          return {
+            year: curYear,
+            month: curMonth
+          }
+        },
+        getSelectedDates: (options = {}) => {
+          const dates =
+            getCalendarData('calendar.selectedDates', component) || []
+          const config = getCalendarConfig(component) || {}
+          if (options.lunar && !config.showLunar) {
+            const injectedFns = component.calendar || {}
+            if (typeof injectedFns.convertSolarLunar === 'function') {
+              return wrapDateWithLunar(dates, injectedFns.convertSolarLunar)
+            } else {
+              logger.warn('获取农历信息需引入农历插件')
+            }
+          } else {
+            return dates
+          }
+        },
+        getCalendarDates: (options = {}) => {
+          const config = getCalendarConfig(component) || {}
+          const dates = getCalendarData('calendar.dates', component)
+          if (options.lunar && !config.showLunar) {
+            const injectedFns = component.calendar || {}
+            if (typeof injectedFns.convertSolarLunar === 'function') {
+              return wrapDateWithLunar(dates, injectedFns.convertSolarLunar)
+            } else {
+              logger.warn('获取农历信息需引入农历插件')
+            }
+          } else {
+            return dates
+          }
+        },
+        getCalendarAllData: () => {
+          return {
+            data: getCalendarData('calendar', component) || {},
+            config: getCalendarConfig(component) || {}
+          }
+        }
+      }
+    }
+  }
+}

components/local/v2/plugins/preset/index.js

@@ -0,0 +1,9 @@
+import base from './base'
+import getCalendarData from './get-calendar-data'
+
+const preset = [
+  ['base', base()],
+  ['get-calendar-data', getCalendarData()]
+]
+
+export default preset

components/local/v2/plugins/selectable.js

@@ -0,0 +1,219 @@
+/**
+ * @Author: drfu*
+ * @Description: 禁用、启用日期选择
+ * @Date: 2020-10-08 21:22:09*
+ * @Last Modified by: drfu
+ * @Last Modified time: 2020-10-08 21:25:00
+ * */
+
+import { getCalendarData, dateUtil, logger } from '../utils/index'
+import { renderCalendar } from '../render'
+
+function convertEnableAreaToTimestamp(timearea = []) {
+  const start = timearea[0].split('-')
+  const end = timearea[1].split('-')
+  if (start.length !== 3 || end.length !== 3) {
+    logger.warn('enableArea() 参数格式为: ["2018-2-1", "2018-3-1"]')
+    return {}
+  }
+  const startTimestamp = dateUtil
+    .newDate(start[0], start[1], start[2])
+    .getTime()
+  const endTimestamp = dateUtil.newDate(end[0], end[1], end[2]).getTime()
+  return {
+    start,
+    end,
+    startTimestamp,
+    endTimestamp
+  }
+}
+
+function isValiditeOfDateArea(dateArea) {
+  const {
+    start,
+    end,
+    startTimestamp,
+    endTimestamp
+  } = convertEnableAreaToTimestamp(dateArea)
+  if (!start || !end) return
+  const datesCountOfStart = dateUtil.getDatesCountOfMonth(start[0], start[1])
+  const datesCountOfEnd = dateUtil.getDatesCountOfMonth(end[0], end[1])
+  if (start[2] > datesCountOfStart || start[2] < 1) {
+    logger.warn('enableArea() 开始日期错误，指定日期不在指定月份天数范围内')
+    return false
+  } else if (start[1] > 12 || start[1] < 1) {
+    logger.warn('enableArea() 开始日期错误，月份超出1-12月份')
+    return false
+  } else if (end[2] > datesCountOfEnd || end[2] < 1) {
+    logger.warn('enableArea() 截止日期错误，指定日期不在指定月份天数范围内')
+    return false
+  } else if (end[1] > 12 || end[1] < 1) {
+    logger.warn('enableArea() 截止日期错误，月份超出1-12月份')
+    return false
+  } else if (startTimestamp > endTimestamp) {
+    logger.warn('enableArea()参数最小日期大于了最大日期')
+    return false
+  } else {
+    return true
+  }
+}
+
+function handleDisableMode(calendarConfig) {
+  const { disableMode } = calendarConfig
+  if (!disableMode) return {}
+  const disableBound =
+    dateUtil.getTimeStamp(disableMode.date) || dateUtil.todayTimestamp()
+  return {
+    disableBound,
+    disableType: disableMode.type
+  }
+}
+
+function disabledByConfig(dateInfo, currentDate, calendarConfig) {
+  const date = { ...dateInfo }
+  const { disableType, disableBound } = handleDisableMode(calendarConfig)
+  if (
+    (disableType === 'before' && disableBound && currentDate < disableBound) ||
+    (disableType === 'after' && disableBound && currentDate > disableBound)
+  ) {
+    date.disable = true
+  } else {
+    date.disable = false
+  }
+  return date
+}
+
+export default () => {
+  return {
+    name: 'enable',
+    beforeRender(calendarData = {}, calendarConfig = {}) {
+      const {
+        dates,
+        enableArea,
+        enableDates,
+        disableDates,
+        renderCausedBy
+      } = calendarData
+      const _dates = [...dates].map(date => {
+        let item = { ...date }
+        const timeStr = dateUtil.toTimeStr(date)
+        const timestamp = +dateUtil.getTimeStamp(item)
+        if (renderCausedBy === 'enableDates') {
+          if (enableDates && enableDates.length) {
+            if (enableDates.includes(timeStr)) {
+              item.disable = false
+            } else {
+              item.disable = true
+            }
+            return item
+          }
+        } else if (renderCausedBy === 'enableArea') {
+          if (enableArea && enableArea.length) {
+            const [startTimestamp, endTimestamp] = enableArea || []
+            const ifOutofArea =
+              +startTimestamp > timestamp || timestamp > +endTimestamp
+            item.disable = ifOutofArea
+            return item
+          }
+        } else if (renderCausedBy === 'disableDates') {
+          if (disableDates && disableDates.length) {
+            if (disableDates && disableDates.includes(timeStr)) {
+              item.disable = true
+            }
+            return item
+          }
+        }
+        return disabledByConfig(item, timestamp, calendarConfig)
+      })
+
+      return {
+        calendarData: {
+          ...calendarData,
+          dates: _dates
+        },
+        calendarConfig
+      }
+    },
+    methods(component) {
+      return {
+        enableArea: (dateArea = []) => {
+          if (dateArea.length === 2) {
+            const validate = isValiditeOfDateArea(dateArea)
+            if (validate) {
+              const existCalendarData = getCalendarData('calendar', component)
+              const {
+                startTimestamp,
+                endTimestamp
+              } = convertEnableAreaToTimestamp(dateArea)
+
+              return renderCalendar.call(component, {
+                ...existCalendarData,
+                renderCausedBy: 'enableArea',
+                enableArea: [startTimestamp, endTimestamp]
+              })
+            }
+          } else {
+            return Promise.inject(
+              'enableArea()参数需为时间范围数组，形如：["2018-8-4" , "2018-8-24"]'
+            )
+          }
+        },
+        enableDates: (toSet = []) => {
+          if (!toSet.length) return
+          const existCalendarData = getCalendarData('calendar', component)
+          const { enableDates = [] } = existCalendarData || {}
+          let toSetDates = toSet.map(item => {
+            if (typeof item === 'string') {
+              return dateUtil.transformDateRow2Dict(item)
+            }
+            return item
+          })
+          if (enableDates.length) {
+            toSetDates = dateUtil.uniqueArrayByDate([
+              ...toSetDates,
+              ...enableDates.map(d => dateUtil.transformDateRow2Dict(d))
+            ])
+          }
+          return renderCalendar.call(component, {
+            ...existCalendarData,
+            renderCausedBy: 'enableDates',
+            enableDates: toSetDates.map(date => {
+              if (typeof date !== 'string') {
+                return dateUtil.toTimeStr(date)
+              }
+              return date
+            })
+          })
+        },
+        disableDates: toSet => {
+          const existCalendarData = getCalendarData('calendar', component)
+          const { disableDates = [], dates = [] } = existCalendarData || {}
+          let toSetDates = toSet.map(item => {
+            let date = { ...item }
+            if (typeof date === 'string') {
+              return dateUtil.transformDateRow2Dict(item)
+            }
+            return item
+          })
+          if (disableDates && disableDates.length) {
+            toSetDates = dateUtil.uniqueArrayByDate([
+              ...toSetDates,
+              ...disableDates.map(d => dateUtil.transformDateRow2Dict(d))
+            ])
+          }
+          return renderCalendar.call(component, {
+            ...existCalendarData,
+            renderCausedBy: 'disableDates',
+            dates,
+            disableDates: toSetDates.map(date => {
+              if (typeof date !== 'string') {
+                return dateUtil.toTimeStr(date)
+              }
+              return date
+            })
+          })
+        }
+      }
+    }
+  }
+}

components/local/v2/plugins/solarLunar/index.js

@@ -0,0 +1,59 @@
+import { dateUtil } from '../../utils/index'
+import convertSolarLunar from './convertSolarLunar'
+
+function getDateRow2Dict(dateInfo) {
+  if (!dateInfo) return dateInfo
+  if (typeof dateInfo === 'string' && dateInfo.includes('-')) {
+    dateInfo = dateUtil.transformDateRow2Dict(dateInfo)
+  }
+  return dateInfo
+}
+
+export default () => {
+  return {
+    name: 'convertSolarLunar',
+    beforeRender(calendarData = {}, calendarConfig = {}) {
+      let { dates = [], selectedDates = [] } = calendarData
+      if (calendarConfig.showLunar) {
+        dates = dates.map(dataInfo => {
+          const { year, month, date } = dataInfo
+          return {
+            ...dataInfo,
+            lunar: convertSolarLunar.solar2lunar(year, month, date)
+          }
+        })
+        selectedDates = selectedDates.map(dataInfo => {
+          const { year, month, date } = dataInfo
+          return {
+            ...dataInfo,
+            lunar: convertSolarLunar.solar2lunar(year, month, date)
+          }
+        })
+      }
+      return {
+        calendarData: {
+          ...calendarData,
+          dates: dates,
+          selectedDates: selectedDates
+        },
+        calendarConfig
+      }
+    },
+    methods() {
+      return {
+        convertSolarLunar: dateInfo => {
+          dateInfo = getDateRow2Dict(dateInfo)
+          if (!dateInfo) return dateInfo
+          const { year, month, date } = dateInfo
+          return convertSolarLunar.solar2lunar(year, month, date)
+        },
+        convertlLunar2Solar: (dateInfo, isLeapMonth) => {
+          dateInfo = getDateRow2Dict(dateInfo)
+          if (!dateInfo) return dateInfo
+          const { year, month, date } = dateInfo
+          return convertSolarLunar.lunar2solar(year, month, date, isLeapMonth)
+        }
+      }
+    }
+  }
+}

components/local/v2/plugins/time-range.js

@@ -0,0 +1,305 @@
+/**
+ * @Author: drfu*
+ * @Description: 时间区域选择
+ * @Date: 2020-10-08 21:22:09*
+ * @Last Modified by: drfu
+ * @Last Modified time: 2020-10-11 13:56:32
+ * */
+
+import { renderCalendar } from '../render'
+import {
+  logger,
+  dateUtil,
+  getCalendarConfig,
+  getCalendarData
+} from '../utils/index'
+
+function pusheNextMonthDateArea(
+  dateInfo = {},
+  startTimestamp,
+  endTimestamp,
+  selectedDates = []
+) {
+  let tempOfSelectedDate = [...selectedDates]
+  const dates = dateUtil.calcDates(dateInfo.year, dateInfo.month)
+  let datesLen = dates.length
+  for (let i = 0; i < datesLen; i++) {
+    const date = dates[i]
+    const timeStamp = dateUtil.getTimeStamp(date)
+    if (timeStamp <= endTimestamp && timeStamp >= startTimestamp) {
+      tempOfSelectedDate.push({
+        ...date,
+        choosed: true
+      })
+    }
+    if (i === datesLen - 1 && timeStamp < endTimestamp) {
+      pusheNextMonthDateArea(
+        dateUtil.getNextMonthInfo(date),
+        startTimestamp,
+        endTimestamp,
+        tempOfSelectedDate
+      )
+    }
+  }
+  return tempOfSelectedDate
+}
+function pushPrevMonthDateArea(
+  dateInfo = {},
+  startTimestamp,
+  endTimestamp,
+  selectedDates = []
+) {
+  let tempOfSelectedDate = [...selectedDates]
+  const dates = dateUtil.sortDatesByTime(
+    dateUtil.calcDates(dateInfo.year, dateInfo.month),
+    'desc'
+  )
+  let datesLen = dates.length
+  let firstDate = dateUtil.getTimeStamp(dates[0])
+  for (let i = 0; i < datesLen; i++) {
+    const date = dates[i]
+    const timeStamp = dateUtil.getTimeStamp(date)
+    if (timeStamp >= startTimestamp && timeStamp <= endTimestamp) {
+      tempOfSelectedDate.push({
+        ...date,
+        choosed: true
+      })
+    }
+    if (i === datesLen - 1 && firstDate > startTimestamp) {
+      pushPrevMonthDateArea(
+        dateUtil.getPrevMonthInfo(date),
+        startTimestamp,
+        endTimestamp,
+        tempOfSelectedDate
+      )
+    }
+  }
+  return tempOfSelectedDate
+}
+/**
+ * 当设置日期区域非当前时保存其他月份的日期至已选日期数组
+ * @param {object} info
+ */
+function calcDateWhenNotInOneMonth(info) {
+  const { firstDate, lastDate, startTimestamp, endTimestamp } = info
+  let { selectedDate } = info
+  if (dateUtil.getTimeStamp(firstDate) > startTimestamp) {
+    selectedDate = pushPrevMonthDateArea(
+      dateUtil.getPrevMonthInfo(firstDate),
+      startTimestamp,
+      endTimestamp,
+      selectedDate
+    )
+  }
+  if (dateUtil.getTimeStamp(lastDate) < endTimestamp) {
+    selectedDate = pusheNextMonthDateArea(
+      dateUtil.getNextMonthInfo(lastDate),
+      startTimestamp,
+      endTimestamp,
+      selectedDate
+    )
+  }
+  return [...selectedDate]
+}
+
+/**
+ *  指定日期区域转时间戳
+ * @param {array} timearea 时间区域
+ */
+export function convertTimeRangeToTimestamp(timearea = []) {
+  const start = timearea[0].split('-')
+  const end = timearea[1].split('-')
+  if (start.length !== 3 || end.length !== 3) {
+    logger.warn('enableArea() 参数格式为: ["2018-2-1", "2018-3-1"]')
+    return {}
+  }
+  const startTimestamp = dateUtil
+    .newDate(start[0], start[1], start[2])
+    .getTime()
+  const endTimestamp = dateUtil.newDate(end[0], end[1], end[2]).getTime()
+  return {
+    start,
+    end,
+    startTimestamp,
+    endTimestamp
+  }
+}
+
+/**
+ * 校验时间区域是否合法
+ * @param {array} dateArea 时间区域
+ */
+function validateTimeRange(dateArea) {
+  const {
+    start,
+    end,
+    startTimestamp,
+    endTimestamp
+  } = convertTimeRangeToTimestamp(dateArea)
+  if (!start || !end) return
+  const startMonthDays = dateUtil.getDatesCountOfMonth(start[0], start[1])
+  const endMonthDays = dateUtil.getDatesCountOfMonth(end[0], end[1])
+  if (start[2] > startMonthDays || start[2] < 1) {
+    logger.warn('enableArea() 开始日期错误，指定日期不在当前月份天数范围内')
+    return false
+  } else if (start[1] > 12 || start[1] < 1) {
+    logger.warn('enableArea() 开始日期错误，月份超出1-12月份')
+    return false
+  } else if (end[2] > endMonthDays || end[2] < 1) {
+    logger.warn('enableArea() 截止日期错误，指定日期不在当前月份天数范围内')
+    return false
+  } else if (end[1] > 12 || end[1] < 1) {
+    logger.warn('enableArea() 截止日期错误，月份超出1-12月份')
+    return false
+  } else if (startTimestamp > endTimestamp) {
+    logger.warn('enableArea()参数最小日期大于了最大日期')
+    return false
+  } else {
+    return true
+  }
+}
+
+export default () => {
+  return {
+    name: 'timeRange',
+    beforeRender(calendarData = {}, calendarConfig = {}) {
+      const {
+        chooseAreaTimestamp = [],
+        dates = [],
+        selectedDates = []
+      } = calendarData
+      let __dates = dates
+      let __selectedDates = selectedDates
+      const [startDateTimestamp, endDateTimestamp] = chooseAreaTimestamp
+      if (chooseAreaTimestamp.length === 2) {
+        __selectedDates = []
+        __dates = dates.map(d => {
+          const date = { ...d }
+          const dateTimeStamp = dateUtil.getTimeStamp(date)
+          if (
+            dateTimeStamp >= startDateTimestamp &&
+            endDateTimestamp >= dateTimeStamp
+          ) {
+            date.choosed = true
+            __selectedDates.push(date)
+          } else {
+            date.choosed = false
+            __selectedDates = __selectedDates.filter(
+              item => dateUtil.getTimeStamp(item) !== dateTimeStamp
+            )
+          }
+          return date
+        })
+        const monthOfStartDate = new Date(startDateTimestamp).getMonth()
+        const monthOfEndDate = new Date(endDateTimestamp).getMonth()
+        if (monthOfStartDate !== monthOfEndDate) {
+          __selectedDates = calcDateWhenNotInOneMonth({
+            firstDate: __dates[0],
+            lastDate: __dates[__dates.length - 1],
+            startTimestamp: startDateTimestamp,
+            endTimestamp: endDateTimestamp,
+            selectedDate: __selectedDates
+          })
+        }
+      }
+      return {
+        calendarData: {
+          ...calendarData,
+          dates: __dates,
+          selectedDates: dateUtil.sortDatesByTime(
+            dateUtil.uniqueArrayByDate(__selectedDates)
+          )
+        },
+        calendarConfig
+      }
+    },
+    onTapDate(tapedDate, calendarData = {}, calendarConfig = {}) {
+      if (!calendarConfig.chooseAreaMode) {
+        return {
+          calendarData,
+          calendarConfig
+        }
+      }
+      let {
+        tempChooseAreaTimestamp = [],
+        chooseAreaTimestamp: existChooseAreaTimestamp = [],
+        selectedDates = [],
+        dates = []
+      } = calendarData
+      const timestamp = dateUtil.getTimeStamp(tapedDate)
+      let __dates = [...dates]
+      let __selectedDates = [...selectedDates]
+      if (
+        tempChooseAreaTimestamp.length === 2 ||
+        existChooseAreaTimestamp.length === 2
+      ) {
+        tempChooseAreaTimestamp = [tapedDate]
+        __selectedDates = []
+        __dates.forEach(d => (d.choosed = false))
+      } else if (tempChooseAreaTimestamp.length === 1) {
+        const preChoosedDate = tempChooseAreaTimestamp[0]
+        const preTimestamp = dateUtil.getTimeStamp(preChoosedDate)
+        if (preTimestamp <= timestamp) {
+          tempChooseAreaTimestamp.push(tapedDate)
+        } else if (preTimestamp > timestamp) {
+          tempChooseAreaTimestamp.unshift(tapedDate)
+        }
+      } else {
+        tempChooseAreaTimestamp = [tapedDate]
+      }
+      let chooseAreaTimestamp = []
+      if (tempChooseAreaTimestamp.length === 2) {
+        const [startDate, endDate] = tempChooseAreaTimestamp
+        const startDateTimestamp = dateUtil.getTimeStamp(startDate)
+        const endDateTimestamp = dateUtil.getTimeStamp(endDate)
+        chooseAreaTimestamp = [startDateTimestamp, endDateTimestamp]
+      }
+      return {
+        calendarData: {
+          ...calendarData,
+          chooseAreaTimestamp,
+          tempChooseAreaTimestamp,
+          dates: __dates,
+          selectedDates: __selectedDates
+        },
+        calendarConfig: {
+          ...calendarConfig,
+          multi: true
+        }
+      }
+    },
+    methods(component) {
+      return {
+        /**
+         * 设置连续日期选择区域
+         * @param {array} dateArea 区域开始结束日期数组
+         */
+        chooseDateArea: (dateArea = []) => {
+          if (dateArea.length === 1) {
+            dateArea = dateArea.concat(dateArea)
+          }
+          if (dateArea.length !== 2) return
+          const isRight = validateTimeRange(dateArea)
+          if (!isRight) return
+          const config = getCalendarConfig(component) || {}
+          const { startTimestamp, endTimestamp } = convertTimeRangeToTimestamp(
+            dateArea
+          )
+          const existCalendarData = getCalendarData('calendar', component)
+          return renderCalendar.call(
+            component,
+            {
+              ...existCalendarData,
+              chooseAreaTimestamp: [startTimestamp, endTimestamp]
+            },
+            {
+              ...config,
+              multi: true,
+              chooseAreaMode: true
+            }
+          )
+        }
+      }
+    }
+  }
+}

components/local/v2/plugins/todo.js

@@ -0,0 +1,135 @@
+/**
+ * @Author: drfu*
+ * @Description: 代办事项
+ * @Date: 2020-10-08 21:22:09*
+ * @Last Modified by: drfu
+ * @Last Modified time: 2020-10-11 14:23:02
+ * */
+
+import { getCalendarData, dateUtil } from '../utils/index'
+import { renderCalendar } from '../render'
+
+function updateDatePropertyOfTodoLabel(todos, dates, showLabelAlways) {
+  const datesInfo = [...dates]
+  for (let todo of todos) {
+    let targetIdx = datesInfo.findIndex(
+      item => dateUtil.toTimeStr(item) === dateUtil.toTimeStr(todo)
+    )
+    let target = datesInfo[targetIdx]
+    if (!target) continue
+    if (showLabelAlways) {
+      target.showTodoLabel = true
+    } else {
+      target.showTodoLabel = !target.choosed
+    }
+    if (target.showTodoLabel) {
+      target.todoText = todo.todoText
+    }
+    target.color = todo.color
+  }
+  return datesInfo
+}
+
+export default () => {
+  return {
+    name: 'todo',
+    beforeRender(calendarData = {}, calendarConfig = {}, component) {
+      const { todos = [], dates = [], showLabelAlways } = calendarData
+      const dateWithTodoInfo = updateDatePropertyOfTodoLabel(
+        todos,
+        dates,
+        showLabelAlways
+      )
+      return {
+        calendarData: {
+          ...calendarData,
+          dates: dateWithTodoInfo
+        },
+        calendarConfig
+      }
+    },
+    methods(component) {
+      return {
+        setTodos: (options = {}) => {
+          const calendar = getCalendarData('calendar', component)
+          if (!calendar || !calendar.dates) {
+            return Promise.reject('请等待日历初始化完成后再调用该方法')
+          }
+          const {
+            circle,
+            dotColor = '',
+            pos = 'bottom',
+            showLabelAlways,
+            dates: todoDates = []
+          } = options
+          const { todos = [] } = calendar
+          const tranformStr2NumOfTodo = todoDates.map(date =>
+            dateUtil.tranformStr2NumOfDate(date)
+          )
+          const calendarData = {
+            dates: calendar.dates,
+            todos: dateUtil.uniqueArrayByDate(
+              todos.concat(tranformStr2NumOfTodo)
+            )
+          }
+          if (!circle) {
+            calendarData.todoLabelPos = pos
+            calendarData.todoLabelColor = dotColor
+          }
+          calendarData.todoLabelCircle = circle || false
+          calendarData.showLabelAlways = showLabelAlways || false
+          const existCalendarData = getCalendarData('calendar', component)
+          return renderCalendar.call(component, {
+            ...existCalendarData,
+            ...calendarData
+          })
+        },
+        deleteTodos(todos = []) {
+          if (!(todos instanceof Array) || !todos.length)
+            return Promise.reject('deleteTodos()应为入参为非空数组')
+          const existCalendarData = getCalendarData('calendar', component)
+          const allTodos = existCalendarData.todos || []
+          const toDeleteTodos = todos.map(item => dateUtil.toTimeStr(item))
+          const remainTodos = allTodos.filter(
+            item => !toDeleteTodos.includes(dateUtil.toTimeStr(item))
+          )
+          const { dates, curYear, curMonth } = existCalendarData
+          const _dates = [...dates]
+          const currentMonthTodos = dateUtil.filterDatesByYM(
+            {
+              year: curYear,
+              month: curMonth
+            },
+            remainTodos
+          )
+          _dates.forEach(item => {
+            item.showTodoLabel = false
+          })
+          currentMonthTodos.forEach(item => {
+            _dates[item.date - 1].showTodoLabel = !_dates[item.date - 1].choosed
+          })
+          return renderCalendar.call(component, {
+            ...existCalendarData,
+            dates: _dates,
+            todos: remainTodos
+          })
+        },
+        clearTodos() {
+          const existCalendarData = getCalendarData('calendar', component)
+          const _dates = [...existCalendarData.dates]
+          _dates.forEach(item => {
+            item.showTodoLabel = false
+          })
+          return renderCalendar.call(component, {
+            ...existCalendarData,
+            dates: _dates,
+            todos: []
+          })
+        },
+        getTodos() {
+          return getCalendarData('calendar.todos', component) || []
+        }
+      }
+    }
+  }
+}

components/local/v2/plugins/week.js

@@ -0,0 +1,432 @@
+/**
+ * @Author: drfu*
+ * @Description: 周视图
+ * @Date: 2020-10-08 21:22:09*
+ * @Last Modified by: drfu
+ * @Last Modified time: 2020-10-12 14:39:45
+ * */
+
+import { renderCalendar } from '../render'
+import {
+  getCalendarConfig,
+  getCalendarData,
+  logger,
+  dateUtil
+} from '../utils/index'
+import { calcJumpData } from '../core'
+
+/**
+ * 当月第一周所有日期
+ */
+function firstWeekInMonth(
+  target = {},
+  calendarDates = [],
+  calendarConfig = {}
+) {
+  const { firstDayOfWeek } = calendarConfig
+  const firstDayOfWeekIsMon = firstDayOfWeek === 'Mon'
+  const { year, month } = target
+  let firstDay = dateUtil.getDayOfWeek(year, month, 1)
+  if (firstDayOfWeekIsMon && firstDay === 0) {
+    firstDay = 7
+  }
+  const [, end] = [0, 7 - firstDay]
+  return calendarDates.slice(0, firstDayOfWeekIsMon ? end + 1 : end)
+}
+
+/**
+ * 当月最后一周所有日期
+ */
+function lastWeekInMonth(target = {}, calendarDates = [], calendarConfig = {}) {
+  const { firstDayOfWeek } = calendarConfig
+  const firstDayOfWeekIsMon = firstDayOfWeek === 'Mon'
+  const { year, month } = target
+  const lastDay = dateUtil.getDatesCountOfMonth(year, month)
+  let lastDayWeek = dateUtil.getDayOfWeek(year, month, lastDay)
+  if (firstDayOfWeekIsMon && lastDayWeek === 0) {
+    lastDayWeek = 7
+  }
+  const [start, end] = [lastDay - lastDayWeek, lastDay]
+  return calendarDates.slice(firstDayOfWeekIsMon ? start : start - 1, end)
+}
+
+/**
+ * 判断目标日期是否在某些指定日历内
+ */
+function dateIsInDatesRange(target, dates) {
+  if (!target || !dates || !dates.length) return false
+  const targetDateStr = dateUtil.toTimeStr(target)
+  let rst = false
+  for (let date of dates) {
+    const dateStr = dateUtil.toTimeStr(date)
+    if (dateStr === targetDateStr) {
+      rst = true
+      return rst
+    }
+    rst = false
+  }
+  return rst
+}
+
+function getDatesWhenTargetInFirstWeek(target, firstWeekDates) {
+  const { year, month } = target
+  const prevMonthInfo = dateUtil.getPrevMonthInfo({ year, month })
+  let lastMonthDatesCount = dateUtil.getDatesCountOfMonth(
+    prevMonthInfo.year,
+    prevMonthInfo.month
+  )
+  let dates = firstWeekDates
+  let firstWeekCount = firstWeekDates.length
+  for (let i = 0; i < 7 - firstWeekCount; i++) {
+    const week = dateUtil.getDayOfWeek(+year, +month, lastMonthDatesCount)
+    dates.unshift({
+      year: prevMonthInfo.year,
+      month: prevMonthInfo.month,
+      date: lastMonthDatesCount,
+      week
+    })
+    lastMonthDatesCount -= 1
+  }
+  return dates
+}
+
+function getDatesWhenTargetInLastWeek(target, lastWeekDates) {
+  const { year, month } = target
+  const prevMonthInfo = dateUtil.getNextMonthInfo({ year, month })
+  let dates = lastWeekDates
+  let lastWeekCount = lastWeekDates.length
+  for (let i = 0; i < 7 - lastWeekCount; i++) {
+    const week = dateUtil.getDayOfWeek(+year, +month, i + 1)
+    dates.push({
+      year: prevMonthInfo.year,
+      month: prevMonthInfo.month,
+      date: i + 1,
+      week
+    })
+  }
+  return dates
+}
+
+function getDates(target, calendarDates = [], calendarConfig = {}) {
+  const { year, month, date } = target
+  const targetDay = dateUtil.getDayOfWeek(year, month, date)
+  const { firstDayOfWeek } = calendarConfig
+  const firstDayOfWeekIsMon = firstDayOfWeek === 'Mon'
+  if (firstDayOfWeekIsMon) {
+    const startIdx = date - (targetDay || 7)
+    return calendarDates.splice(startIdx, 7)
+  } else {
+    const startIdx = date - targetDay - 1
+    return calendarDates.splice(startIdx, 7)
+  }
+}
+
+function getTargetWeekDates(target, calendarConfig) {
+  if (!target) return
+  const { year, month } = target
+  const calendarDates = dateUtil.calcDates(year, month)
+  const firstWeekDates = firstWeekInMonth(target, calendarDates, calendarConfig)
+  const lastWeekDates = lastWeekInMonth(target, calendarDates, calendarConfig)
+  if (dateIsInDatesRange(target, firstWeekDates)) {
+    return getDatesWhenTargetInFirstWeek(target, firstWeekDates)
+  } else if (dateIsInDatesRange(target, lastWeekDates)) {
+    return getDatesWhenTargetInLastWeek(target, lastWeekDates)
+  } else {
+    return getDates(target, calendarDates, calendarConfig)
+  }
+}
+
+/**
+ * 计算周视图下当前这一周最后一天
+ */
+function calculateLastDateOfCurrentWeek(calendarData = {}) {
+  const { dates = [] } = calendarData
+  return dates[dates.length - 1]
+}
+/**
+ * 计算周视图下当前这一周第一天
+ */
+function calculateFirstDateOfCurrentWeek(calendarData = {}) {
+  const { dates } = calendarData
+  return dates[0]
+}
+
+/**
+ * 计算下一周的日期
+ */
+function calculateNextWeekDates(calendarData = {}) {
+  let { curYear, curMonth } = calendarData
+  let calendarDates = []
+  let lastDateInThisWeek = calculateLastDateOfCurrentWeek(calendarData)
+  const { year: LYear, month: LMonth } = lastDateInThisWeek
+  if (curYear !== LYear || curMonth !== LMonth) {
+    calendarDates = dateUtil.calcDates(LYear, LMonth)
+    curYear = LYear
+    curMonth = LMonth
+  } else {
+    calendarDates = dateUtil.calcDates(curYear, curMonth)
+  }
+  const lastDateInThisMonth = dateUtil.getDatesCountOfMonth(curYear, curMonth)
+  const count = lastDateInThisMonth - lastDateInThisWeek.date
+  const lastDateIdx = calendarDates.findIndex(
+    date => dateUtil.toTimeStr(date) === dateUtil.toTimeStr(lastDateInThisWeek)
+  )
+  const startIdx = lastDateIdx + 1
+  if (count >= 7) {
+    return {
+      dates: calendarDates.splice(startIdx, 7),
+      year: curYear,
+      month: curMonth
+    }
+  } else {
+    const nextMonth = dateUtil.getNextMonthInfo({
+      year: curYear,
+      month: curMonth
+    })
+    const { year, month } = nextMonth || {}
+    const calendarDatesOfNextMonth = dateUtil.calcDates(year, month)
+    const remainDatesOfThisMonth = calendarDates.splice(startIdx)
+    const patchDatesOfNextMonth = calendarDatesOfNextMonth.splice(
+      0,
+      7 - remainDatesOfThisMonth.length
+    )
+    return {
+      dates: [...remainDatesOfThisMonth, ...patchDatesOfNextMonth],
+      ...nextMonth
+    }
+  }
+}
+
+/**
+ * 计算上一周的日期
+ */
+function calculatePrevWeekDates(calendarData = {}) {
+  let { curYear, curMonth } = calendarData
+  let firstDateInThisWeek = calculateFirstDateOfCurrentWeek(calendarData)
+  let calendarDates = []
+  const { year: FYear, month: FMonth } = firstDateInThisWeek
+  if (curYear !== FYear || curMonth !== FMonth) {
+    calendarDates = dateUtil.calcDates(FYear, FMonth)
+    curYear = FYear
+    curMonth = FMonth
+  } else {
+    calendarDates = dateUtil.calcDates(curYear, curMonth)
+  }
+  const firstDateIdx = calendarDates.findIndex(
+    date => dateUtil.toTimeStr(date) === dateUtil.toTimeStr(firstDateInThisWeek)
+  )
+  if (firstDateIdx - 7 >= 0) {
+    const startIdx = firstDateIdx - 7
+    return {
+      dates: calendarDates.splice(startIdx, 7),
+      year: curYear,
+      month: curMonth
+    }
+  } else {
+    const prevMonth = dateUtil.getPrevMonthInfo({
+      year: curYear,
+      month: curMonth
+    })
+    const { year, month } = prevMonth || {}
+    const calendarDatesOfPrevMonth = dateUtil.calcDates(year, month)
+    const remainDatesOfThisMonth = calendarDates.splice(
+      0,
+      firstDateInThisWeek.date - 1
+    )
+    const patchDatesOfPrevMonth = calendarDatesOfPrevMonth.splice(
+      -(7 - remainDatesOfThisMonth.length)
+    )
+    return {
+      dates: [...patchDatesOfPrevMonth, ...remainDatesOfThisMonth],
+      ...prevMonth
+    }
+  }
+}
+
+export default () => {
+  return {
+    name: 'week',
+    beforeRender(calendarData = {}, calendarConfig = {}, component) {
+      const { initializedWeekMode, selectedDates } = calendarData
+      if (calendarConfig.weekMode && !initializedWeekMode) {
+        const { defaultDate } = calendarConfig
+        const target =
+          (selectedDates && selectedDates[0]) ||
+          (defaultDate && dateUtil.transformDateRow2Dict(defaultDate)) ||
+          dateUtil.todayFMD()
+        const waitRenderData = this.methods(
+          component
+        ).__calcDatesWhenSwitchView('week', target)
+        const { data, config } = waitRenderData || {}
+        const setSelectDates = this.methods(
+          component
+        ).__selectTargetDateWhenJump(target, data.dates, config)
+        return {
+          calendarData: {
+            ...data,
+            ...setSelectDates,
+            weeksCh: dateUtil.getWeekHeader(calendarConfig.firstDayOfWeek),
+            initializedWeekMode: true
+          },
+          calendarConfig
+        }
+      }
+      return {
+        calendarData,
+        calendarConfig
+      }
+    },
+    onSwitchCalendar(target = {}, calendarData = {}, component) {
+      const { direction } = target
+      const { curYear, curMonth } = calendarData
+      const calendarConfig = getCalendarConfig(component)
+      let waitRenderData = {}
+      if (calendarConfig.weekMode) {
+        if (direction === 'left') {
+          waitRenderData = calculateNextWeekDates(calendarData)
+        } else {
+          waitRenderData = calculatePrevWeekDates(calendarData)
+        }
+        const { dates, year, month } = waitRenderData
+        return {
+          ...calendarData,
+          dates,
+          curYear: year || curYear,
+          curMonth: month || curMonth
+        }
+      }
+      return calendarData
+    },
+    methods(component) {
+      return {
+        __selectTargetDateWhenJump: (target = {}, dates = [], config = {}) => {
+          let selectedDate = target
+          const weekDates = dates.map((date, idx) => {
+            const tmp = { ...date }
+            tmp.id = idx
+            const isTarget =
+              dateUtil.toTimeStr(target) === dateUtil.toTimeStr(tmp)
+            if (isTarget && !target.choosed && config.autoChoosedWhenJump) {
+              tmp.choosed = true
+              selectedDate = tmp
+            }
+            return tmp
+          })
+          return {
+            dates: weekDates,
+            selectedDates: [selectedDate]
+          }
+        },
+        __calcDatesForWeekMode(target, config = {}, calendarData = {}) {
+          const { year, month } = target || {}
+          const weekDates = getTargetWeekDates(target, config)
+          weekDates.forEach((date, idx) => (date.id = idx))
+          return {
+            data: {
+              ...calendarData,
+              prevMonthGrids: null,
+              nextMonthGrids: null,
+              dates: weekDates,
+              curYear: year,
+              curMonth: month
+            },
+            config: {
+              ...config,
+              weekMode: true
+            }
+          }
+        },
+        __calcDatesForMonthMode(target, config = {}, calendarData = {}) {
+          const { year, month } = target || {}
+          const waitRenderData = calcJumpData({
+            dateInfo: target,
+            config
+          })
+          return {
+            data: {
+              ...calendarData,
+              ...waitRenderData,
+              curYear: year,
+              curMonth: month
+            },
+            config: {
+              ...config,
+              weekMode: false
+            }
+          }
+        },
+        /**
+         * 周、月视图切换
+         * @param {string} view  视图 [week, month]
+         * @param {object} target
+         */
+        __calcDatesWhenSwitchView: (view, target) => {
+          const calendarConfig = getCalendarConfig(component)
+          if (calendarConfig.multi)
+            return logger.warn('多选模式不能切换周月视图')
+          const existCalendarData = getCalendarData('calendar', component) || {}
+          const {
+            selectedDates = [],
+            dates = [],
+            curYear,
+            curMonth
+          } = existCalendarData
+          const currentMonthSelected = selectedDates.filter(
+            item => curYear === +item.year || curMonth === +item.month
+          )
+          let jumpTarget = {}
+          if (target) {
+            jumpTarget = target
+          } else {
+            if (currentMonthSelected.length) {
+              jumpTarget = currentMonthSelected.pop()
+            } else {
+              jumpTarget = dates[0]
+            }
+          }
+          if (view === 'week') {
+            return this.methods(component).__calcDatesForWeekMode(
+              jumpTarget,
+              calendarConfig,
+              existCalendarData
+            )
+          } else {
+            return this.methods(component).__calcDatesForMonthMode(
+              jumpTarget,
+              calendarConfig,
+              existCalendarData
+            )
+          }
+        },
+        weekModeJump: dateInfo => {
+          const target = dateInfo || dateUtil.todayFMD()
+          const existCalendarData = getCalendarData('calendar', component) || {}
+          const waitRenderData = this.methods(
+            component
+          ).__calcDatesWhenSwitchView('week', target)
+          const { data, config } = waitRenderData || {}
+          const setSelectDates = this.methods(
+            component
+          ).__selectTargetDateWhenJump(target, data.dates, config)
+          return renderCalendar.call(
+            component,
+            {
+              ...existCalendarData,
+              ...data,
+              ...setSelectDates
+            },
+            config
+          )
+        },
+        switchView: (view, target) => {
+          const waitRenderData = this.methods(
+            component
+          ).__calcDatesWhenSwitchView(view, target)
+          const { data, config } = waitRenderData || {}
+          if (!data) return logger.warn('当前状态不能切换为周视图')
+          return renderCalendar.call(component, data, config)
+        }
+      }
+    }
+  }
+}

components/local/v2/render.js

@@ -0,0 +1,51 @@
+import plugins from './plugins/index'
+import { getCalendarConfig } from './utils/index'
+
+/**
+ * 渲染日历
+ */
+export function renderCalendar(calendarData, calendarConfig) {
+  return new Promise(resolve => {
+    const Component = this
+    if (Component.firstRender === void 0) {
+      Component.firstRender = true
+    } else {
+      Component.firstRender = false
+    }
+    const exitData = Component.data.calendar || {}
+    for (let plugin of plugins.installed) {
+      const [, p] = plugin
+      if (typeof p.beforeRender === 'function') {
+        const {
+          calendarData: newData,
+          calendarConfig: newConfig
+        } = p.beforeRender(
+          { ...exitData, ...calendarData },
+          calendarConfig || getCalendarConfig(Component),
+          Component
+        )
+        calendarData = newData
+        calendarConfig = newConfig
+      }
+    }
+
+    Component.setData(
+      {
+        config: calendarConfig,
+        calendar: calendarData
+      },
+      () => {
+        const rst = {
+          calendar: calendarData,
+          config: calendarConfig,
+          firstRender: Component.firstRender
+        }
+        resolve(rst)
+        if (Component.firstRender) {
+          Component.triggerEvent('afterCalendarRender', rst)
+          Component.firstRender = false
+        }
+      }
+    )
+  })
+}

components/local/v2/theme/theme-default.wxss

@@ -0,0 +1,61 @@
+
+/* 日历主要颜色相关样式 */
+
+.default_color,
+.default_weekend-color,
+.default_handle-color,
+.default_week-color {
+    color: #ff629a;
+}
+
+.default_today {
+    color: #fff;
+    background-color: #874fb4;
+}
+
+.default_choosed {
+    color: #fff;
+    background-color: #ff629a;
+}
+
+.default_date-disable {
+    color: #c7c7c7;
+}
+
+.default_choosed.default_date-disable {
+    color: #e2e2e2;
+    background-color: #c2afb6;
+}
+
+.default_prev-month-date,
+.default_next-month-date {
+    color: #e2e2e2;
+}
+
+.default_normal-date {
+    color: #88d2ac;
+}
+
+.default_todo-circle {
+    border-color: #88d2ac;
+}
+
+.default_todo-dot {
+    background-color: #e54d42;
+}
+
+.default_date-desc {
+    color: #c2c2c2;
+}
+
+.default_date-desc-lunar {
+    color: #e54d42;
+}
+
+.default_date-desc-disable {
+    color: #e2e2e2;
+}
+
+.default_festival {
+    color: #c2c2c2;
+}

components/local/v2/theme/theme-elegant.wxss

@@ -0,0 +1,58 @@
+.elegant_color,
+.elegant_weekend-color,
+.elegant_handle-color,
+.elegant_week-color {
+    color: #333;
+}
+
+.elegant_today {
+    color: #000;
+    background-color: #e1e7f5;
+}
+
+.elegant_choosed {
+    color: #000;
+    background-color: #e2e2e2;
+}
+
+.elegant_date-disable {
+    color: #c7c7c7;
+}
+
+.elegant_choosed.elegant_date-disable {
+    color: #999;
+    background-color: #ebebeb;
+}
+
+.elegant_prev-month-date,
+.elegant_next-month-date {
+    color: #e2e2e2;
+}
+
+.elegant_normal-date {
+    color: #777;
+}
+
+.elegant_todo-circle {
+    border-color: #161035;
+}
+
+.elegant_todo-dot {
+    background-color: #161035;
+}
+
+.elegant_date-desc {
+    color: #c2c2c2;
+}
+
+.elegant_date-desc-lunar {
+    color: #161035;
+}
+
+.elegant_date-desc-disable {
+    color: #e2e2e2;
+}
+
+.elegant_festival {
+    color: #c2c2c2;
+}

components/local/v2/utils/index.js

@@ -0,0 +1,285 @@
+import Logger from './logger'
+import WxData from './wxData'
+
+let systemInfo
+export function getSystemInfo() {
+  if (systemInfo) return systemInfo
+  systemInfo = wx.getSystemInfoSync()
+  return systemInfo
+}
+
+export function isIos() {
+  const sys = getSystemInfo()
+  return /iphone|ios/i.test(sys.platform)
+}
+
+class Gesture {
+  /**
+   * 左滑
+   * @param {object} e 事件对象
+   * @returns {boolean} 布尔值
+   */
+  isLeft(gesture = {}, touche = {}) {
+    const { startX, startY } = gesture
+    const deltaX = touche.clientX - startX
+    const deltaY = touche.clientY - startY
+    if (deltaX < -60 && deltaY < 20 && deltaY > -20) {
+      return true
+    } else {
+      return false
+    }
+  }
+  /**
+   * 右滑
+   * @param {object} e 事件对象
+   * @returns {boolean} 布尔值
+   */
+  isRight(gesture = {}, touche = {}) {
+    const { startX, startY } = gesture
+    const deltaX = touche.clientX - startX
+    const deltaY = touche.clientY - startY
+
+    if (deltaX > 60 && deltaY < 20 && deltaY > -20) {
+      return true
+    } else {
+      return false
+    }
+  }
+}
+
+class DateUtil {
+  newDate(year, month, date) {
+    let cur = `${+year}-${+month}-${+date}`
+    if (isIos()) {
+      cur = `${+year}/${+month}/${+date}`
+    }
+    return new Date(cur)
+  }
+  /**
+   * 计算指定日期时间戳
+   * @param {object} date
+   */
+  getTimeStamp(dateInfo) {
+    if (typeof dateInfo === 'string') {
+      dateInfo = this.transformDateRow2Dict(dateInfo)
+    }
+    if (Object.prototype.toString.call(dateInfo) !== '[object Object]') return
+    const dateUtil = new DateUtil()
+    return dateUtil
+      .newDate(dateInfo.year, dateInfo.month, dateInfo.date)
+      .getTime()
+  }
+  /**
+   * 计算指定月份共多少天
+   * @param {number} year 年份
+   * @param {number} month  月份
+   */
+  getDatesCountOfMonth(year, month) {
+    return new Date(Date.UTC(year, month, 0)).getUTCDate()
+  }
+  /**
+   * 计算指定月份第一天星期几
+   * @param {number} year 年份
+   * @param {number} month  月份
+   */
+  firstDayOfWeek(year, month) {
+    return new Date(Date.UTC(year, month - 1, 1)).getUTCDay()
+  }
+  /**
+   * 计算指定日期星期几
+   * @param {number} year 年份
+   * @param {number} month  月份
+   * @param {number} date 日期
+   */
+  getDayOfWeek(year, month, date) {
+    return new Date(Date.UTC(year, month - 1, date)).getUTCDay()
+  }
+  todayFMD() {
+    const _date = new Date()
+    const year = _date.getFullYear()
+    const month = _date.getMonth() + 1
+    const date = _date.getDate()
+    return {
+      year: +year,
+      month: +month,
+      date: +date
+    }
+  }
+  todayTimestamp() {
+    const { year, month, date } = this.todayFMD()
+    const timestamp = this.newDate(year, month, date).getTime()
+    return timestamp
+  }
+  toTimeStr(dateInfo = {}) {
+    return `${+dateInfo.year}-${+dateInfo.month}-${+dateInfo.date}`
+  }
+  transformDateRow2Dict(dateStr) {
+    if (typeof dateStr === 'string' && dateStr.includes('-')) {
+      const [year, month, date] = dateStr.split('-')
+      return this.tranformStr2NumOfDate({
+        year,
+        month,
+        date
+      })
+    }
+    return {}
+  }
+  tranformStr2NumOfDate(date = {}) {
+    const target = { ...date }
+    // 可能传入字符串
+    target.year = +target.year
+    target.month = +target.month
+    target.date = +target.date
+    return target
+  }
+  sortDatesByTime(dates = [], sortType) {
+    return dates.sort((a, b) => {
+      const at = this.getTimeStamp(a)
+      const bt = this.getTimeStamp(b)
+      if (at < bt && sortType !== 'desc') {
+        return -1
+      } else {
+        return 1
+      }
+    })
+  }
+  getPrevMonthInfo(date = {}) {
+    const prevMonthInfo =
+      Number(date.month) > 1
+        ? {
+            year: +date.year,
+            month: Number(date.month) - 1
+          }
+        : {
+            year: Number(date.year) - 1,
+            month: 12
+          }
+    return prevMonthInfo
+  }
+  getNextMonthInfo(date = {}) {
+    const nextMonthInfo =
+      Number(date.month) < 12
+        ? {
+            year: +date.year,
+            month: Number(date.month) + 1
+          }
+        : {
+            year: Number(date.year) + 1,
+            month: 1
+          }
+    return nextMonthInfo
+  }
+  getPrevYearInfo(date = {}) {
+    return {
+      year: Number(date.year) - 1,
+      month: +date.month
+    }
+  }
+  getNextYearInfo(date = {}) {
+    return {
+      year: Number(date.year) + 1,
+      month: +date.month
+    }
+  }
+  findDateIndexInArray(target, dates) {
+    return dates.findIndex(
+      item => dateUtil.toTimeStr(item) === dateUtil.toTimeStr(target)
+    )
+  }
+  calcDates(year, month) {
+    const datesCount = this.getDatesCountOfMonth(year, month)
+    const dates = []
+    const today = dateUtil.todayFMD()
+    for (let i = 1; i <= datesCount; i++) {
+      const week = dateUtil.getDayOfWeek(+year, +month, i)
+      const date = {
+        year: +year,
+        id: i - 1,
+        month: +month,
+        date: i,
+        week,
+        isToday:
+          +today.year === +year && +today.month === +month && i === +today.date
+      }
+      dates.push(date)
+    }
+    return dates
+  }
+  /**
+   * 日期数组根据日期去重
+   * @param {array} array 数组
+   */
+  uniqueArrayByDate(array = []) {
+    let uniqueObject = {}
+    let uniqueArray = []
+    array.forEach(item => {
+      uniqueObject[dateUtil.toTimeStr(item)] = item
+    })
+    for (let i in uniqueObject) {
+      uniqueArray.push(uniqueObject[i])
+    }
+    return uniqueArray
+  }
+  /**
+   * 筛选指定年月日期
+   * @param {object} target 指定年月
+   * @param {array} dates 待筛选日期
+   */
+  filterDatesByYM(target, dates) {
+    if (target) {
+      const { year, month } = target
+      const _dates = dates.filter(
+        item => +item.year === +year && +item.month === +month
+      )
+      return _dates
+    }
+    return dates
+  }
+  getWeekHeader(firstDayOfWeek) {
+    let weeksCh = ['日', '一', '二', '三', '四', '五', '六']
+    if (firstDayOfWeek === 'Mon') {
+      weeksCh = ['一', '二', '三', '四', '五', '六', '日']
+    }
+    return weeksCh
+  }
+}
+
+/**
+ * 获取当前页面实例
+ */
+export function getCurrentPage() {
+  const pages = getCurrentPages() || []
+  const last = pages.length - 1
+  return pages[last] || {}
+}
+
+export function getComponentById(componentId) {
+  const logger = new Logger()
+  let page = getCurrentPage() || {}
+  if (page.selectComponent && typeof page.selectComponent === 'function') {
+    if (componentId) {
+      return page.selectComponent(componentId)
+    } else {
+      logger.warn('请传入组件ID')
+    }
+  } else {
+    logger.warn('该基础库暂不支持多个小程序日历组件')
+  }
+}
+
+export const logger = new Logger()
+export const calendarGesture = new Gesture()
+export const dateUtil = new DateUtil()
+export const getCalendarData = (key, component) =>
+  new WxData(component).getData(key)
+export const setCalendarData = (data, component) =>
+  new WxData(component).setData(data)
+export const getCalendarConfig = component =>
+  getCalendarData('config', component)
+export const setCalendarConfig = (config, component) =>
+  setCalendarData(
+    {
+      config
+    },
+    component
+  )

components/local/v2/utils/logger.js

@@ -0,0 +1,23 @@
+export default class Logger {
+  info(msg) {
+    console.log(
+      '%cInfo: %c' + msg,
+      'color:#FF0080;font-weight:bold',
+      'color: #FF509B'
+    )
+  }
+  warn(msg) {
+    console.log(
+      '%cWarn: %c' + msg,
+      'color:#FF6600;font-weight:bold',
+      'color: #FF9933'
+    )
+  }
+  tips(msg) {
+    console.log(
+      '%cTips: %c' + msg,
+      'color:#00B200;font-weight:bold',
+      'color: #00CC33'
+    )
+  }
+}

components/local/v2/utils/wxData.js

@@ -0,0 +1,30 @@
+class WxData {
+  constructor(component) {
+    this.Component = component
+  }
+  getData(key) {
+    const data = this.Component.data
+    if (!key) return data
+    if (key.includes('.')) {
+      let keys = key.split('.')
+      const tmp = keys.reduce((prev, next) => {
+        return prev[next]
+      }, data)
+      return tmp
+    } else {
+      return this.Component.data[key]
+    }
+  }
+  setData(data) {
+    return new Promise((resolve, reject) => {
+      if (!data) return reject('no data to set')
+      if (typeof data === 'object') {
+        this.Component.setData(data, () => {
+          resolve(data)
+        })
+      }
+    })
+  }
+}
+
+export default WxData