✨ 界面/对接

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

@@ -5,7 +5,20 @@
     "pages/logs/logs",
     "pages/member/member",
     "pages/orderDetail/orderDetail",
-    "pages/feedback/feedback"
+    "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/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/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/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/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

pages/clientInfo/clientInfo.js

@@ -0,0 +1,105 @@
+// pages/clientInfo/clientInfo.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    urls: [
+      "https://img1.baidu.com/it/u=202543353,3627416815&fm=26&fmt=auto",
+      "https://img0.baidu.com/it/u=745609344,230882238&fm=26&fmt=auto",
+      "https://img0.baidu.com/it/u=286636366,3227707112&fm=26&fmt=auto",
+      "https://img1.baidu.com/it/u=2450865760,444795162&fm=26&fmt=auto",
+      "https://img0.baidu.com/it/u=4226275504,4103997964&fm=26&fmt=auto",
+      "https://img0.baidu.com/it/u=2247422843,411257408&fm=26&fmt=auto",
+      "https://img0.baidu.com/it/u=3098615520,360170704&fm=26&fmt=auto",
+      "https://img1.baidu.com/it/u=510862345,2249984174&fm=26&fmt=auto",
+      "https://img2.baidu.com/it/u=2222750380,2392750381&fm=26&fmt=auto",
+    ],
+    tags: ['美丽貌美','短短胳膊粗粗的腿','闭月羞花','人美声甜白富美']
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+
+  afterCalendarRender(e) {
+    const calendar = this.selectComponent('#calendar').calendar
+    console.log('afterCalendarRender -> calendar', calendar)
+    const toSet = [
+      {
+        year: 2021,
+        month: 11,
+        date: 15
+      },
+      {
+        year: 2019,
+        month: 3,
+        date: 18
+      }
+    ]
+    calendar.setSelectedDates(toSet)
+  },
+  
+  /**
+   * 图片预览
+   */
+  previewImage(e) {
+    wx.previewImage({
+      current: e.currentTarget.dataset.index,
+      urls: this.data.urls
+    })
+  }
+})

pages/clientInfo/clientInfo.json

@@ -0,0 +1,6 @@
+{
+  "navigationBarTitleText": "客户信息",
+  "usingComponents": {
+    "calendar": "../../components/local/v2/index"
+  }
+}

pages/clientInfo/clientInfo.wxml

@@ -0,0 +1,68 @@
+<view class="content">
+  <view class="border-radius padding user-info">
+    <view class="top flex-justify-space-between">
+      <text style="font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;">基本信息</text>
+      <navigator url="/pages/clientInfoEdit/clientInfoEdit" hover-class="none">
+        <view class="edit-btn flex-center">编辑信息</view>
+      </navigator>
+    </view>
+    <view class="user-avatar flex-align-center">
+      <image src=""></image>
+      <text style="font-size: 28rpx;">查理兹·塞隆…</text>
+      <text class="flex1"></text>
+      <text style="font-size: 28rpx;color: #999;">下午  3:45</text>
+    </view>
+    <view class="user-content flex-column">
+      <text>姓名：陈姐</text>
+      <text>性别：女</text>
+      <text>生日：1980-01-01</text>
+      <text>手机号码：13888888888</text>
+      <text>所在地区：广东省，深圳市，南山区</text>
+      <view class="tags-list flex-align-center">
+        <text>客户标签：</text>
+        <view class="item" wx:for="{{ tags }}" wx:key="index">
+          <text>{{ item }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+  <view class="border-radius padding buy-info">
+    <text style="font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;">会员信息</text>
+    <view class="buy-content flex-column">
+      <text class="ellipsis {{ index == 0 ? 'active' : '' }}" wx:for="{{ 10 }}" wx:key="index">2020/01/01-2020/02/01:40分钟月卡会员</text>
+      <view class="buy-active flex-center">生效中</view>
+    </view>
+    <view class="btn-more flex-center" style="color: #666;">查看更多记录</view>
+  </view>
+  <view class="border-radius padding">
+    <calendar 
+      id="calendar"
+      bind:afterCalendarRender="afterCalendarRender"
+    />
+  </view>
+  <view class="border-radius padding list">
+    <view class="item-top flex-align-center">
+      <text class="flex1">反馈记录</text>
+      <view class="btn flex-center">订单</view>
+    </view>
+    <view class="item flex-column" wx:for="{{4}}" wx:key="index">
+      <view class="user-info flex-align-center">
+        <image></image>
+        <view class="info flex-column flex1">
+          <text style="font-size: 28rpx;margin-bottom: 6rpx;">查理兹·塞隆…</text>
+          <text style="font-size: 20rpx;color: #999;">下午  3:45</text>
+        </view>
+        <!-- <view class="more flex-align-center flex-justify-space-between" bindtap="onEditItem">
+          <text></text>
+          <text></text>
+          <text></text>
+        </view> -->
+        <!-- <view class="more">···</view> -->
+      </view>
+      <text style="font-size: 28rpx;color: #666;">当前皮肤毛孔出现堵塞，抓哟集中在T区，主要问题在于自身油脂分泌过多。</text>
+      <view class="box">
+        <image src="{{item}}" data-index="{{item}}" bindtap="previewImage" wx:for="{{urls}}" wx:key="index"></image>
+      </view>
+    </view>
+  </view>
+</view>

pages/clientInfo/clientInfo.wxss

@@ -0,0 +1,160 @@
+.content {
+  padding:  10rpx 28rpx;
+}
+
+.border-radius {
+  background: #FFFFFF;
+  border-radius: 24rpx;
+  margin: 20rpx 0;
+}
+
+.padding {
+  padding: 28rpx;
+}
+
+.user-info .top .edit-btn {
+  width: 154rpx;
+  height: 52rpx;
+  border-radius: 26rpx;
+  border: 2rpx solid #333333;
+  font-size: 28rpx;
+}
+
+.user-info .user-avatar {
+  margin: 56rpx 0 30rpx;
+}
+
+.user-info .user-avatar image {
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 50%;
+  background-color: #ccc;
+  margin-right: 14rpx;
+}
+
+.user-info .user-content {
+  background: #FFF7FA;
+  border-radius: 16rpx;
+  padding: 24rpx 28rpx 4rpx;
+}
+
+.user-info .user-content text {
+  font-size: 28rpx;
+  color: #333333;
+  line-height: 48rpx;
+}
+
+.user-content .tags-list {
+  flex-wrap:wrap;
+  margin-top: 8rpx;
+}
+
+.user-content .tags-list .item {
+  padding: 6rpx 20rpx;
+  border-radius: 26rpx;
+  border: 2rpx solid #333333;
+  box-sizing: border-box;
+  margin-right: 6rpx;
+  margin-bottom: 20rpx;
+}
+
+.buy-info {
+  padding-bottom: 0;
+}
+
+.buy-info .buy-content {
+  background: #FFF7FA;
+  border-radius: 16rpx;
+  padding: 30rpx 26rpx;
+  margin-top: 30rpx;
+  position: relative;
+}
+
+.buy-info .buy-content text {
+  font-size: 28rpx;
+  color: #666;
+  line-height: 48rpx;
+}
+
+.buy-info .buy-content .buy-active {
+  color: #fff;
+  font-size: 16rpx;
+  width: 70rpx;
+  height: 40rpx;
+  background: #FF77B0;
+  overflow: hidden;
+  position: absolute;
+  border-top-left-radius: 200rpx;
+  border-bottom-left-radius: 200rpx;
+  right: 0;
+  top: 34rpx;
+  /* border-radius: 200rpx 0rpx rpx 200rpx; */
+}
+
+.buy-info .buy-content text.active {
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #333333;
+}
+
+.btn-more {
+  height: 104rpx;
+  margin-top: 30rpx;
+  box-sizing: border-box;
+  border-top: 2rpx solid #F2F2F2;
+}
+
+
+
+.list .item {
+  padding-top: 30rpx;
+}
+
+.list .item-top .btn {
+  width: 154rpx;
+  height: 52rpx;
+  border-radius: 26rpx;
+  border: 2rpx solid #333333;
+  box-sizing: border-box;
+  font-size: 28rpx;
+}
+
+.list .user-info {
+  margin-bottom: 20rpx;
+}
+
+.list .user-info image {
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 50%;
+  background-color: red;
+  margin-right: 14rpx;
+}
+
+/* .list .more {
+  width: 48rpx;
+  height: 48rpx;
+  padding: 0 4rpx;
+  box-sizing: border-box;
+}
+
+.list .more text {
+  width: 8rpx;
+  height: 8rpx;
+  background: #333;
+  border-radius: 50%;
+} */
+
+.list .box {
+  display: grid;
+  grid-gap: 20rpx 22rpx;
+  grid-template-columns: repeat(3, 1fr);
+  padding: 30rpx 0;
+}
+
+.list .box image {
+  width: 198rpx;
+  height: 198rpx;
+  border-radius: 16rpx;
+  background-color: red;
+}

pages/clientInfoEdit/clientInfoEdit.js

@@ -0,0 +1,157 @@
+// import {
+//   get, post,
+// } from '../../utils/http';
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    userInfo: {},
+    visible: false,
+    genders: ["男","女"],
+    genderIndex: 0,
+    date: '2016-09-01',
+    region: ['广东省', '广州市', '海珠区'],
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+    // this.getUserFiles()
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+    this.setData({
+      visible: false
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+    
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+
+  isShow() {},
+
+  /**
+   * 弹框状态
+   */
+  onPopupState(e, key, value) {
+    if (e) {
+      key = e.currentTarget.dataset.key
+      value = e.currentTarget.dataset.value
+    }
+    console.log(key)
+    console.log(value)
+    this.setData({
+      [key]: value
+    })
+  },
+
+  /**
+   * 选择性别
+  */
+  bindGenderChange(e) {
+    this.setData({
+      ['userInfo.sex']: Number(e.detail.value) + 1,
+    },() => {
+      this.setUserFiles()
+    })
+  },
+
+  /**
+   * 选择生日
+  */
+  bindDateChange: function(e) {
+    console.log(e)
+    this.setData({
+      ['userInfo.birthday']: e.detail.value,
+      // date: e.detail.value
+    },() => {
+      this.setUserFiles()
+    })
+  },
+
+  /**
+   * 选择所在地
+  */
+  bindRegionChange: function (e) {
+    this.setData({
+      region: e.detail.value,
+      ['userInfo.city']: e.detail.value.toString(),
+    },() => {
+      this.setUserFiles()
+    })
+  },
+
+  /**
+   * 获取用户档案
+   * api/user/files
+  */
+  getUserFiles() {
+    get('api/user/files',{},(res) => {
+      this.setData({
+        userInfo: res.data
+      })
+      console.log(res)
+    })
+  },
+
+  /**
+   * 更新用户档案
+   * api/user/save_files
+  */
+  setUserFiles() {
+    let { real_name,birthday,sex,city } = this.data.userInfo;
+    post('api/user/save_files',{
+      real_name,
+      birthday,
+      sex,
+      city
+    },() => {
+
+    })
+  }
+})

pages/clientInfoEdit/clientInfoEdit.json

@@ -0,0 +1,7 @@
+{
+  "navigationBarTitleText": "编辑客户信息",
+  "usingComponents": {
+    "wux-landscape": "../../components/dist/landscape/index",
+    "wux-popup": "../../components/dist/popup/index"
+  }
+}

pages/clientInfoEdit/clientInfoEdit.wxml

@@ -0,0 +1,91 @@
+<view class="list">
+  <view class="item flex-align-center">
+    <text class="flex1">头像</text>
+    <image class="avatar" src="{{userInfo.avatar_url}}"></image>
+  </view>
+  <navigator url="/pages/name/name" hover-class="none">
+    <view class="item flex-align-center">
+      <view class="flex-column flex1">
+        <text class="title">昵称</text>
+        <text class="flex1" wx:if="{{ userInfo.real_name }}">{{ userInfo.real_name  }}</text>
+        <text class="flex1" wx:else style="font-size: 28rpx;color: #ccc;">请填写昵称</text>
+      </view>
+      <image class="icon-right" src="/images/icon_02.png"></image>
+    </view>
+  </navigator>
+  <navigator url="/pages/name/name" hover-class="none">
+    <view class="item flex-align-center">
+      <view class="flex-column flex1">
+        <text class="title">姓名</text>
+        <text class="flex1" wx:if="{{ userInfo.real_name }}">{{ userInfo.real_name  }}</text>
+        <text class="flex1" wx:else style="font-size: 28rpx;color: #ccc;">请填写姓名</text>
+      </view>
+      <image class="icon-right" src="/images/icon_02.png"></image>
+    </view>
+  </navigator>
+  <picker bindchange="bindGenderChange" value="{{userInfo.sex == 0 ? 0 : userInfo.sex -1}}" range="{{genders}}">
+    <view class="item flex-align-center">
+      <view class="flex-column flex1">
+      <text class="title">性别</text>
+      <text class="flex1">{{ userInfo.sex == 0 ? '保密' : genders[userInfo.sex -1 ] }}</text>
+      <!-- <text class="flex1">{{genders[genderIndex]}}</text> -->
+    </view>
+    <image class="icon-right" src="/images/icon_02.png"></image>
+    </view>
+  </picker>
+  <picker mode="date" value="{{userInfo.birthday}}" start="1980-09-01" bindchange="bindDateChange">
+    <view class="item flex-align-center">
+      <view class="flex-column flex1">
+        <text class="title">生日</text>
+        <text class="flex1" wx:if="{{ userInfo.birthday }}">{{userInfo.birthday}}</text>
+        <text class="flex1" wx:else style="font-size: 28rpx;color: #ccc;">请选择生日</text>
+      </view>
+      <image class="icon-right" src="/images/icon_02.png"></image>
+    </view>
+  </picker>
+  <view class="item flex-align-center" bindtap="onPopupState" data-key="visible" data-value="{{true}}">
+    <view class="flex-column flex1">
+      <text class="title">手机号码</text>
+      <text class="flex1">{{ userInfo.mobile }}</text>
+    </view>
+    <image class="icon-right" src="/images/icon_02.png"></image>
+  </view>
+  <picker mode="region" bindchange="bindRegionChange">
+    <view class="item flex-align-center">
+      <view class="flex-column flex1">
+        <text class="title">所在地</text>
+        <text class="flex1" wx:if="{{ userInfo.city }}">{{ userInfo.city }}</text>
+        <text class="flex1" wx:else style="font-size: 28rpx;color: #ccc;">请选择常驻城市</text>
+        <!-- <text class="flex1">{{region[0]}}，{{region[1]}}，{{region[2]}}</text> -->
+      </view>
+      <image class="icon-right" src="/images/icon_02.png"></image>
+    </view>
+  </picker>
+  <navigator url="/pages/tagsEdit/tagsEdit" hover-class="none">
+    <view class="item flex-align-center" style="height: auto;padding: 40rpx 24rpx 30rpx;">
+      <view class="flex-column flex1">
+        <text class="title">客户标签</text>
+        <view class="tags-list flex">
+          <view class="tags-item" wx:for="{{ 10 }}" wx:key="index">美丽貌美</view>
+        </view>
+        <!-- <text class="flex1" wx:if="{{ userInfo.real_name }}">{{ userInfo.real_name  }}</text>
+        <text class="flex1" wx:else style="font-size: 28rpx;color: #ccc;">请填写昵称</text> -->
+      </view>
+      <image class="icon-right" src="/images/icon_02.png"></image>
+    </view>
+  </navigator>
+</view>
+
+<wux-landscape visible="{{ visible }}"  maskClosable="{{ true }}" closable="{{ false }}" bind:close="onPopupState" data-key="visible" data-value="{{false}}">
+  <view class="use-popup flex-column">
+    <text style="font-size: 36rpx;">更换手机</text>
+    <text style="color: #666666;margin: 28rpx 0 78rpx;">您确定要更换绑定的手机吗？</text>
+    <view class="use-btn">
+      <view class="btn cancel flex-center" bindtap="onPopupState" data-key="visible" data-value="{{false}}">取消</view>
+      <navigator url="/pages/phone/phone?phone={{userInfo.mobile}}" hover-class="none">
+        <view class="btn confirm flex-center">更换</view>
+      </navigator>
+    </view>
+    <!-- [温馨提示] 确认激活后，该会员卡将立即生效； 如暂不激活，可在“已购会员卡”中去选择激活。 -->
+  </view>
+</wux-landscape>

pages/clientInfoEdit/clientInfoEdit.wxss

@@ -0,0 +1,84 @@
+page {
+  background: #fff;
+}
+
+.list .item {
+  height: 192rpx;
+  padding: 0 24rpx;
+  box-sizing: border-box;
+  border-bottom: 2rpx solid #EEEEEE;
+}
+
+.list .item text {
+  font-size: 36rpx;
+}
+
+.list .item .title {
+  color: #999;
+  font-size: 28rpx;
+  margin-bottom: 22rpx;
+}
+
+.list .item .avatar {
+  width: 116rpx;
+  height: 116rpx;
+  border-radius: 50%;
+  background: #EDEDED;
+  border: 2rpx solid #979797;
+}
+
+.tags-list {
+  flex-wrap: wrap;
+}
+
+.tags-list .tags-item {
+  padding: 6rpx 20rpx;
+  border-radius: 26rpx;
+  border: 2rpx solid #333333;
+  font-size: 28rpx;
+  margin-right: 6rpx;
+  margin-bottom: 20rpx;
+  box-sizing: border-box;
+  overflow: hidden;
+  color: #333333;
+}
+
+.icon-right {
+  width: 48rpx;
+  height: 48rpx;
+}
+
+
+
+.use-popup {
+  width: 558rpx;
+  height: 508rpx;
+  background: #FFFFFF;
+  border-radius: 40rpx;
+  justify-content: center;
+  /* justify-content: space-evenly; */
+}
+
+/* .use-popup .red {
+  font-size: 24rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #E95564;
+} */
+
+.use-btn .btn {
+  /* width: 208rpx; */
+  height: 92rpx;
+  margin: 0 48rpx;
+  font-size: 36rpx;
+  color: #FF77B0;
+  border-radius: 52rpx;
+  border: 2rpx solid #FF77B0;
+}
+
+.use-btn .confirm {
+  margin-top: 28rpx;
+  /* margin-left: 46rpx; */
+  background-color: #FF77B0;
+  color: #fff;
+}

pages/contact/contact.js

@@ -0,0 +1,66 @@
+// pages/contact/contact.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/contact/contact.json

@@ -0,0 +1,4 @@
+{
+  "navigationBarTitleText": "联系我们",
+  "usingComponents": {}
+}

pages/contact/contact.wxml

@@ -0,0 +1,21 @@
+<view class="content flex-column flex-align-center">
+  <!-- icon_logo.png -->
+  <image class="logo" src="/images/icon_logo.png"></image>
+  <text style="margin: 46rpx 0 14rpx;font-size: 36rpx;font-family: PingFangSC-Medium, PingFang SC;">玖哩玖哩</text>
+  <text style="font-size: 28rpx;color: #333333;">版本：1.0.0</text>
+  <view class="flex" style="margin-top: 118rpx;">
+    <view class="item flex-column flex-align-center" style="margin-right:52rpx">
+      <image src="/images/wx.png" show-menu-by-longpress></image>
+      <text>客服微信</text>
+    </view>
+    <view class="item flex-column flex-align-center">
+      <image src="/images/gzh.png" show-menu-by-longpress></image>
+      <text>公众号</text>
+    </view>
+  </view>
+</view>
+
+<view class="bottom flex-column flex-align-center">
+  <text>Copyright (C) 2021</text>
+  <text>玖哩玖哩 ijolijoli.com 版权所有</text>
+</view>

pages/contact/contact.wxss

@@ -0,0 +1,33 @@
+page {
+  background: #F9F9F9;
+}
+
+.logo {
+  width: 272rpx;
+  height: 272rpx;
+  margin-top: 94rpx;
+}
+
+.item image {
+  width: 216rpx;
+  height: 216rpx;
+  background: #FFFFFF;
+  border: 2rpx solid #CCCCCC;
+  margin-bottom: 22rpx;
+}
+
+.item text {
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+}
+
+.bottom {
+  position: fixed;
+  bottom: 56rpx;
+  width: 100%;
+}
+
+.bottom text {
+  font-size: 28rpx;
+  color: #333333;
+}

pages/dossier/dossier.js

@@ -0,0 +1,155 @@
+// import {
+//   get, post,
+// } from '../../utils/http';
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    userInfo: {},
+    visible: false,
+    genders: ["男","女"],
+    genderIndex: 0,
+    date: '2016-09-01',
+    region: ['广东省', '广州市', '海珠区'],
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+    // this.getUserFiles()
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+    this.setData({
+      visible: false
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+    
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+
+  isShow() {},
+
+  /**
+   * 弹框状态
+   */
+  onPopupState(e, key, value) {
+    if (e) {
+      key = e.currentTarget.dataset.key
+      value = e.currentTarget.dataset.value
+    }
+    this.setData({
+      [key]: value
+    })
+  },
+
+  /**
+   * 选择性别
+  */
+  bindGenderChange(e) {
+    this.setData({
+      ['userInfo.sex']: Number(e.detail.value) + 1,
+    },() => {
+      this.setUserFiles()
+    })
+  },
+
+  /**
+   * 选择生日
+  */
+  bindDateChange: function(e) {
+    console.log(e)
+    this.setData({
+      ['userInfo.birthday']: e.detail.value,
+      // date: e.detail.value
+    },() => {
+      this.setUserFiles()
+    })
+  },
+
+  /**
+   * 选择所在地
+  */
+  bindRegionChange: function (e) {
+    this.setData({
+      region: e.detail.value,
+      ['userInfo.city']: e.detail.value.toString(),
+    },() => {
+      this.setUserFiles()
+    })
+  },
+
+  /**
+   * 获取用户档案
+   * api/user/files
+  */
+  getUserFiles() {
+    get('api/user/files',{},(res) => {
+      this.setData({
+        userInfo: res.data
+      })
+      console.log(res)
+    })
+  },
+
+  /**
+   * 更新用户档案
+   * api/user/save_files
+  */
+  setUserFiles() {
+    let { real_name,birthday,sex,city } = this.data.userInfo;
+    post('api/user/save_files',{
+      real_name,
+      birthday,
+      sex,
+      city
+    },() => {
+
+    })
+  }
+})

pages/dossier/dossier.json

@@ -0,0 +1,7 @@
+{
+  "navigationBarTitleText": "个人信息",
+  "usingComponents": {
+    "wux-landscape": "../../components/dist/landscape/index",
+    "wux-popup": "../../components/dist/popup/index"
+  }
+}

pages/dossier/dossier.wxml

@@ -0,0 +1,68 @@
+<view class="list">
+  <view class="item flex-align-center">
+    <text class="flex1">头像</text>
+    <image class="avatar" src="{{userInfo.avatar_url}}"></image>
+  </view>
+  <navigator url="/pages/name/name" hover-class="none">
+    <view class="item flex-align-center">
+      <view class="flex-column flex1">
+        <text class="title">姓名</text>
+        <text class="flex1" wx:if="{{ userInfo.real_name }}">{{ userInfo.real_name  }}</text>
+        <text class="flex1" wx:else style="font-size: 28rpx;color: #ccc;">请填写姓名</text>
+      </view>
+      <image class="icon-right" src="/images/my/right.png"></image>
+    </view>
+  </navigator>
+  <picker bindchange="bindGenderChange" value="{{userInfo.sex == 0 ? 0 : userInfo.sex -1}}" range="{{genders}}">
+    <view class="item flex-align-center">
+      <view class="flex-column flex1">
+      <text class="title">性别</text>
+      <text class="flex1">{{ userInfo.sex == 0 ? '保密' : genders[userInfo.sex -1 ] }}</text>
+      <!-- <text class="flex1">{{genders[genderIndex]}}</text> -->
+    </view>
+    <image class="icon-right" src="/images/my/right.png"></image>
+    </view>
+  </picker>
+  <picker mode="date" value="{{userInfo.birthday}}" start="1980-09-01" bindchange="bindDateChange">
+    <view class="item flex-align-center">
+      <view class="flex-column flex1">
+        <text class="title">生日</text>
+        <text class="flex1" wx:if="{{ userInfo.birthday }}">{{userInfo.birthday}}</text>
+        <text class="flex1" wx:else style="font-size: 28rpx;color: #ccc;">请选择生日</text>
+      </view>
+      <image class="icon-right" src="/images/my/right.png"></image>
+    </view>
+  </picker>
+  <view class="item flex-align-center" bindtap="onPopupState" data-key="visible" data-value="{{true}}">
+    <view class="flex-column flex1">
+      <text class="title">手机号码</text>
+      <text class="flex1">{{ userInfo.mobile }}</text>
+    </view>
+    <image class="icon-right" src="/images/my/right.png"></image>
+  </view>
+  <picker mode="region" bindchange="bindRegionChange">
+    <view class="item flex-align-center">
+      <view class="flex-column flex1">
+        <text class="title">所在地</text>
+        <text class="flex1" wx:if="{{ userInfo.city }}">{{ userInfo.city }}</text>
+        <text class="flex1" wx:else style="font-size: 28rpx;color: #ccc;">请选择常驻城市</text>
+        <!-- <text class="flex1">{{region[0]}}，{{region[1]}}，{{region[2]}}</text> -->
+      </view>
+      <image class="icon-right" src="/images/my/right.png"></image>
+    </view>
+  </picker>
+</view>
+
+<wux-landscape visible="{{ visible }}"  maskClosable="{{ true }}" closable="{{ false }}" bind:close="onPopupState" data-key="visible" data-value="{{false}}">
+  <view class="use-popup flex-column">
+    <text style="font-size: 36rpx;">更换手机</text>
+    <text style="color: #666666;margin: 28rpx 0 78rpx;">您确定要更换绑定的手机吗？</text>
+    <view class="use-btn">
+      <view class="btn cancel flex-center" bindtap="onPopupState" data-key="visible" data-value="{{false}}">取消</view>
+      <navigator url="/pages/phone/phone?phone={{userInfo.mobile}}" hover-class="none">
+        <view class="btn confirm flex-center">更换</view>
+      </navigator>
+    </view>
+    <!-- [温馨提示] 确认激活后，该会员卡将立即生效； 如暂不激活，可在“已购会员卡”中去选择激活。 -->
+  </view>
+</wux-landscape>

pages/dossier/dossier.wxss

@@ -0,0 +1,68 @@
+page {
+  background: #fff;
+}
+
+.list .item {
+  height: 192rpx;
+  padding: 0 30rpx;
+  box-sizing: border-box;
+  border-bottom: 2rpx solid #EEEEEE;
+}
+
+.list .item text {
+  font-size: 36rpx;
+}
+
+.list .item .title {
+  color: #999;
+  font-size: 28rpx;
+  margin-bottom: 22rpx;
+}
+
+.list .item .avatar {
+  width: 116rpx;
+  height: 116rpx;
+  border-radius: 50%;
+  background: #EDEDED;
+  border: 2rpx solid #979797;
+}
+
+.icon-right {
+  width: 48rpx;
+  height: 48rpx;
+}
+
+
+
+.use-popup {
+  width: 558rpx;
+  height: 508rpx;
+  background: #FFFFFF;
+  border-radius: 40rpx;
+  justify-content: center;
+  /* justify-content: space-evenly; */
+}
+
+/* .use-popup .red {
+  font-size: 24rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #E95564;
+} */
+
+.use-btn .btn {
+  /* width: 208rpx; */
+  height: 92rpx;
+  margin: 0 48rpx;
+  font-size: 36rpx;
+  color: #FF77B0;
+  border-radius: 52rpx;
+  border: 2rpx solid #FF77B0;
+}
+
+.use-btn .confirm {
+  margin-top: 28rpx;
+  /* margin-left: 46rpx; */
+  background-color: #FF77B0;
+  color: #fff;
+}

pages/feedback/feedback.js

@@ -1,4 +1,7 @@
-// pages/feedback/feedback.js
+import {
+  get,
+  post
+} from '../../utils/http';
 Page({
 
   /**
@@ -8,43 +11,75 @@ Page({
     maxlength: 500,
     number: 0,
     value: "",
-    imgs: [
+    imgs: [],
+    // imgs: [
+    //   {
+    //     type: "image",
+    //     url: "https://img1.baidu.com/it/u=202543353,3627416815&fm=26&fmt=auto"
+    //   },
+    //   {
+    //     type: "image",
+    //     url: "https://img0.baidu.com/it/u=745609344,230882238&fm=26&fmt=auto"
+    //   },
+    //   {
+    //     type: "image",
+    //     url: "https://img0.baidu.com/it/u=286636366,3227707112&fm=26&fmt=auto"
+    //   },
+    //   {
+    //     type: "image",
+    //     url: "https://img1.baidu.com/it/u=2450865760,444795162&fm=26&fmt=auto"
+    //   },
+    //   {
+    //     type: "image",
+    //     url: "https://img0.baidu.com/it/u=4226275504,4103997964&fm=26&fmt=auto"
+    //   },
+    //   {
+    //     type: "image",
+    //     url: "https://img0.baidu.com/it/u=2247422843,411257408&fm=26&fmt=auto"
+    //   },
+    // ],
+    raterList: [
       {
-        type: "video",
-        url: "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
+        text: '整体满意度',
+        num: 1
       },
       {
-        type: "image",
-        url: "https://img1.baidu.com/it/u=202543353,3627416815&fm=26&fmt=auto"
+        text: '效果认可度',
+        num: 2
       },
       {
-        type: "image",
-        url: "https://img0.baidu.com/it/u=745609344,230882238&fm=26&fmt=auto"
+        text: '价格接受度',
+        num: 3
       },
       {
-        type: "image",
-        url: "https://img0.baidu.com/it/u=286636366,3227707112&fm=26&fmt=auto"
+        text: '类别满意度',
+        num: 4
       },
       {
-        type: "image",
-        url: "https://img1.baidu.com/it/u=2450865760,444795162&fm=26&fmt=auto"
+        text: '安全认可度',
+        num: 5
       },
-      {
-        type: "image",
-        url: "https://img0.baidu.com/it/u=4226275504,4103997964&fm=26&fmt=auto"
-      },
-      {
-        type: "image",
-        url: "https://img0.baidu.com/it/u=2247422843,411257408&fm=26&fmt=auto"
-      },
-    ]
+    ],
+    raterStatus: {
+      1: '差',
+      2: '较差',
+      3: '一般',
+      4: '满意',
+      5: '非常好',
+    }
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-
+    if(options.orderId) {
+      this.setData({
+        orderId: options.orderId,
+        cover: options.cover,
+        name: options.name
+      })
+    }
   },
 
   /**
@@ -140,17 +175,142 @@ Page({
       sizeType: ['original', 'compressed'],
       sourceType: ['album', 'camera'],
       success (res) {
-        const tempFilePaths = res.tempFilePaths
-        tempFilePaths.forEach((item) => {
-          imgs.push({
-            type: 'image',
-            url: item
-          })
+        wx.showLoading({
+          title: '正在上传图片',
+          mask: true
+        });
+        const tempFiles = res.tempFiles
+        tempFiles.forEach((item) => {
+          that.upload(item.path).then((data) => {
+            imgs.push({
+              type: 'image',
+              url: data.data.url,
+            })
+            that.setData({ imgs })
+            wx.hideLoading()
+          });
         })
-        that.setData({
-          imgs
+        
+      }
+    })
+  },
+
+  /**
+   * 选择视频
+  */
+  chooseVideo(){
+    let that = this;
+    let imgs = this.data.imgs;
+    wx.chooseMedia({
+      count: 1,
+      mediaType: ['video'],
+      sourceType: ['album', 'camera'],
+      maxDuration: 30,
+      camera: 'back',
+      success(res) {
+        wx.showLoading({
+          title: '正在上传视频',
+          mask: true
+        });
+        const tempFiles = res.tempFiles
+        that.upload(tempFiles[0].tempFilePath).then((data) => {
+          imgs.unshift({
+            type: 'video',
+            thumb: tempFiles[0].thumbTempFilePath,
+            url: data.data.url
+          })
+          that.setData({ imgs })
+          wx.hideLoading()
+        });
+        return;
+        tempFiles.forEach((item) => {
+          imgs.unshift({
+            type: 'video',
+            thumb: item.thumbTempFilePath,
+            url: item.tempFilePath
+          })
         })
+        that.setData({ imgs })
       }
     })
-  }
+  },
+
+  /**
+   * 选择星星
+  */
+  onChange(e) {
+    let index = e.currentTarget.dataset.index
+    let value = e.detail.value
+    this.setData({
+      ['raterList[' + index + '].num']: value
+    })
+  },
+
+  /**
+   * 提交反馈
+  */
+  onSubmit() {
+    // api/feedback/add
+    let { orderId,value,raterList } = this.data;
+    console.log(this.data.imgs)
+    post('api/feedback/add',{
+      order_id: orderId,
+      content: value,
+      media_list: JSON.stringify(this.data.imgs),
+      score_whole: raterList[0].num,
+      score_effect: raterList[1].num,
+      score_price: raterList[2].num,
+      score_kind: raterList[3].num,
+      score_safe: raterList[4].num,
+    },(res) => {
+      console.log(res)
+    })
+  },
+
+  /**
+   * 上传视频/图片
+  */
+  upload(filePath) {
+    let that = this;
+    // 上传类型/业务类型：avatar头像，order订单反馈，check检查表反馈
+    return new Promise((resolve,reject) => {
+      let { imgs } = this.data;
+      wx.uploadFile({
+        url: 'https://store.test-api.ijolijoli.com/api/upload',
+        header: {
+          token: wx.getStorageSync('token') || '',
+        },
+        filePath,
+        name: 'file',
+        formData: {
+          'type': 'order'
+        },
+        success(res) {
+          console.log(res)
+          if(res.statusCode == 200 && res.data) {
+            let data = JSON.parse(res.data);
+            if(data.code == 200 && data.data) {
+              resolve(data)
+            } else {
+              wx.showToast({
+                title: '上传失败',
+                icon: 'none'
+              })
+            }
+          } else {
+            wx.showToast({
+              title: '上传失败',
+              icon: 'none'
+            })
+          }
+        },
+        fail(err) {
+          wx.showToast({
+            title: '上传失败',
+            icon: 'none'
+          })
+        }
+      })
+    })
+  },
 })

pages/feedback/feedback.json

@@ -1,4 +1,6 @@
 {
   "navigationBarTitleText": "发布记录反馈",
-  "usingComponents": {}
+  "usingComponents": {
+    "wux-rater": "../../components/dist/rater/index"
+  }
 }

pages/feedback/feedback.wxml

@@ -1,8 +1,8 @@
 <view class="content">
   <view class="detail border-radius">
     <view class="top flex-align-center">
-      <image src=""></image>
-      <text style="font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;">水氧清洁水光提升综合管理</text>
+      <image src="{{ cover }}"></image>
+      <text class="flex1 ellipsis" style="font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;">{{ name }}</text>
     </view>
     <view class="box-textarea">
       <textarea bindinput="bindTextAreaInput" value="{{value}}" maxlength="{{maxlength}}" placeholder="请输入记录反馈" />
@@ -19,7 +19,12 @@
             <block wx:if="{{ item.type == 'video' }}">
               <!-- <video src="{{ item.url }}"></video> -->
               <!-- <text>视频播放</text> -->
-              <view class="flex-center" style="font-size: 28rpx;width: 100%;height: 100%;background-color: #ccc;" data-index="{{index}}" bindtap="previewMedia">这个是视频</view>
+              <view class="flex-center" style="font-size: 28rpx;width: 100%;height: 100%;background-color: #ccc;" data-index="{{index}}" bindtap="previewMedia">
+                <!-- 这个是视频 -->
+                <image class="icon-01" src="/images/icon_01.png"></image>
+                <!-- <text style="position: absolute;">这个是视频</text> -->
+                <image class="img-content" data-index="{{index}}" src="{{ item.thumb }}" alt=""></image>
+              </view>
             </block>
             <block wx:if="{{ item.type == 'image' }}">
               <image class="img-content" data-index="{{index}}" src="{{ item.url }}" alt="" bindtap="previewMedia"></image>
@@ -28,15 +33,28 @@
           <image src="" class="delete-img" data-index="{{index}}" bindtap="onDeleteItem"></image>
         </view>
         
-        <view class="item upload flex-column flex-center" wx:if="{{ imgs.length>0 && imgs.length < 9 &&imgs[0].type != 'video' }}">
+        <view class="item upload flex-column flex-center" wx:if="{{ imgs.length < 9 &&imgs[0].type != 'video' }}" bindtap="chooseVideo">
           <image src=""></image>
           <text style="font-size: 28rpx;">添加视频</text>
         </view>
-        <view class="item upload flex-column flex-center" wx:if="{{ imgs.length > 0 && imgs.length < 9}}" bindtap="chooseImage">
+        <view class="item upload flex-column flex-center" wx:if="{{ imgs.length < 9}}" bindtap="chooseImage">
           <image src=""></image>
           <text style="font-size: 28rpx;">添加图片</text>
         </view>
       </view>
     </view>
   </view>
+  <view class="detail border-radius rater">
+    <view class="rater-text">
+      <text style="font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;">客户评价</text>
+      <text style="font-size: 28rpx;color:#999;">（选填，且只有第一次填写生效）</text>
+    </view>
+
+    <view class="item flex-align-center" wx:for="{{ raterList }}" wx:key="index">
+      <text class="text-01">{{ item.text }}</text>
+      <wux-rater slot="footer" active-color="#FF77B0" margin="{{ 12 }}" font-size="{{ 18 }}" default-value="{{ item.num }}" data-index="{{ index }}" bind:change="onChange" />
+      <text class="text-02">{{ raterStatus[item.num] }}</text>
+    </view>
+  </view>
+  <view class="btn flex-center" bindtap="onSubmit">提交</view>
 </view>

pages/feedback/feedback.wxss

@@ -98,7 +98,45 @@
   height: 100%;
 }
 
+.change-img .img-box .icon-01 {
+  width: 64rpx;
+  height: 64rpx;
+  position: absolute;
+}
+
 .change-img .img-box .img-content {
   width: 100%;
   height: 100%;
 }
+
+.rater .item {
+  margin-top: 34rpx;
+}
+
+.rater .text-01 {
+  font-size: 28rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #666666;
+  line-height: 32rpx;
+  margin-right: 20rpx;
+}
+
+.rater .text-02 {
+  font-size: 28rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #FF77B0;
+  line-height: 32rx;
+  margin-left: 36rpx;
+} 
+
+.btn {
+  margin: 30rpx 0;
+  height: 96rpx;
+  width: 100%;
+  background: #FF77B0;
+  border-radius: 48rpx;
+  font-size: 36rpx;
+  color: #fff;
+}

pages/home/home.js

@@ -1,18 +1,39 @@
-// pages/home/home.js
+import {
+  get,
+  post
+} from '../../utils/http';
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
-    current: 0
+    current: 0,
+    currentDay: '2021-11-29',
+    startDay: '1998-04-20',
+    endDay: '2021-11-29',
+    homeData: {},
+    list: [],
+    total: 0,
+    page: 1
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-
+    let date = new Date()
+    let year = date.getFullYear()
+    let month = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1
+    let day = date.getDate() < 10 ? '0'+date.getDate() : date.getDate()
+    console.log(year,month,day)
+    this.setData({
+      currentDay: `${year}-${month}-${day}`,
+      startDay: '1998-04-20',
+      endDay: `${year}-${month}-${day}`,
+    })
+    this.getHomeData();
+    this.getOrderList();
   },
 
   /**
@@ -54,7 +75,9 @@ Page({
    * 页面上拉触底事件的处理函数
    */
   onReachBottom: function () {
-
+    if(this.data.page * 10 < this.data.total) {
+      this.getOrderList(++this.data.page)
+    }
   },
 
   /**
@@ -73,9 +96,63 @@ Page({
     }
     this.setData({
       current,
-      // page: 1,
+      page: 1,
     },() => {
-      // this.getPlanList()
+      this.getOrderList(1)
+    })
+  },
+
+  /**
+   * 选择时间
+  */
+  bindDateChange: function(e) {
+    console.log('picker发送选择改变，携带值为', e.detail.value)
+    this.setData({
+      [e.currentTarget.dataset.date]: e.detail.value,
+    })
+  },
+
+  /**
+   * 订单搜索
+  */
+  onSearchOrder() {
+    this.getOrderList();
+  },
+
+  /**
+   * 获取首页统计数据
+  */
+  getHomeData() {
+    get('api/home',{},(res) => {
+      this.setData({
+        homeData: res.data
+      })
     })
   },
+
+  /**
+   * 首页订单列表
+  */
+  getOrderList(_page) {
+    let { list,current,page,startDay,endDay } = this.data;
+    get('api/order/list',{
+      start_day: startDay,
+      end_day: endDay,
+      type: current,
+      page: _page || page,
+      limit: 10
+    },(res) => {
+      if (_page == 1 || page == 1) {
+        list = []
+        this.data.page = 1
+      }
+      list.push(...res.data.list)
+      this.setData({
+        list,
+        total: res.data.total,
+        spinning: false
+      })
+      console.log(res)
+    })
+  }
 })

pages/home/home.wxml

@@ -1,32 +1,37 @@
 <view class="content">
   <view class="top-text flex-column">
-    <text class="text-1" >今日预约订单数：18</text>
-    <text style="font-size: 28rpx;color: #999999;margin-top: 12rpx;">今日服务订单数：11</text>
+    <text class="text-1" >今日预约订单数：{{ homeData.order_num }}</text>
+    <text style="font-size: 28rpx;color: #999999;margin-top: 12rpx;">今日服务订单数：{{ homeData.served_num }}</text>
     <view class="flex-align-center" style="margin-top: 12rpx;">
-      <image src=""></image>
-      <text style="font-size: 24rpx;">南山华润置地XX楼808号（南山店）</text>
+      <image src="/images/icon_05.png"></image>
+      <text class="flex1 ellipsis" style="font-size: 24rpx;">{{ homeData.store_address }} {{ homeData.store_name }}</text>
     </view>
   </view>
   <view class="tabs-bgc">
     <view class="tabs-wrap flex-align-center">
       <view class="item flex-center {{current == 0 ? 'active' : ''}}" bindtap="onTabsChange" data-id="0">进行中</view>
-      <view class="item flex-center {{current == 1 ? 'active' : ''}}" bindtap="onTabsChange" data-id="1">待添加</view>
+      <view class="item flex-center {{current == 1 ? 'active' : ''}}" bindtap="onTabsChange" data-id="1">待进行</view>
       <view class="item flex-center {{current == 2 ? 'active' : ''}}" bindtap="onTabsChange" data-id="2">已结束</view>
     </view>
   </view>
   <view class="change-time border-radius flex-center">
-    <view class="time flex-align-center" style="margin-right: 50rpx;">
-      <text>2019-08-07</text>
-      <view class="triangle"></view>
-    </view>
-    <view class="time flex-align-center" style="margin-right: 64rpx;">
-      <text>2019-08-07</text>
-      <view class="triangle"></view>
-    </view>
-    <view class="search flex-center">搜索</view>
+    <picker mode="date" value="{{startDay}}" start="1998-04-20" end="{{endDay}}" bindchange="bindDateChange" data-date="startDay">
+      <view class="time flex-align-center" style="margin-right: 50rpx;">
+        <text>{{startDay}}</text>
+        <view class="triangle"></view>
+      </view>
+    </picker>
+    
+    <picker mode="date" value="{{endDay}}" start="{{startDay}}" end="{{currentDay}}" bindchange="bindDateChange" data-date="endDay">
+      <view class="time flex-align-center" style="margin-right: 64rpx;">
+        <text>{{endDay}}</text>
+        <view class="triangle"></view>
+      </view>
+    </picker>
+    <view class="search flex-center" bindtap="onSearchOrder">搜索</view>
   </view>
   <view class="tabs-content">
-    <navigator url="/pages/orderDetail/orderDetail" hover-class="none" wx:for="{{ 2 }}" wx:key="index">
+    <navigator url="/pages/orderDetail/orderDetail?orderId={{item.order_id}}" hover-class="none" wx:for="{{ list }}" wx:key="index">
       <view class="item border-radius">
         <view class="item-top flex-align-center">
           <text class="flex1">水氧清洁水光提升综合管理</text>
@@ -44,11 +49,13 @@
         </view>
         <view class="item-btn flex-align-center flex-justify-space-between">
           <view class="btn flex-center">订单详情</view>
-          <view class="btn flex-center">客户信息</view>
+          <navigator url="/pages/clientInfo/clientInfo" hover-class="none">
+            <view class="btn flex-center">客户信息</view>
+          </navigator>
           <view class="btn flex-center">记录反馈</view>
         </view>
       </view>
     </navigator>
-    
+    <view class="no-data" style="display: {{list.length == 0 ? 'block' : 'none'}};">暂无数据~</view>
   </view>
 </view>

pages/login/login.js

@@ -0,0 +1,143 @@
+import {
+  post,
+} from '../../utils/http';
+import {
+  objToParam,
+} from '../../utils/util';
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    userInfo: null,
+    prePage: 0
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    console.log(options)
+    if(options.prePage) {
+      this.setData({
+        prePage: options.prePage
+      })
+    }
+    
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+
+  /**
+   * 获取用户信息
+   */
+  getUserInfo(e) {
+    wx.getUserProfile({
+      desc: 'desc',
+      success: (res) => {
+        this.setData({
+          userInfo: JSON.parse(res.rawData)
+        })
+        console.log(JSON.parse(res.rawData))
+      }
+    })
+  },
+
+  /**
+   * 获取用户手机号
+   */
+  getPhoneNumber(e) {
+    let that = this;
+    wx.login({
+      success(res) {
+        post('api/login', {
+          js_code: res.code,
+          avatar_url: that.data.userInfo.avatarUrl,
+          nickname: that.data.userInfo.nickName,
+          iv: e.detail.iv,
+          encrypted_data: e.detail.encryptedData,
+          wx_data: JSON.stringify(that.data.userInfo)
+        }, (res) => {
+          console.log(res)
+          wx.setStorageSync('token', res.data.token);
+          wx.setStorageSync('userInfo', res.data)
+          wx.showToast({
+            title: res.msg,
+            icon: 'none'
+          })
+          setTimeout(() => {
+            if(that.data.prePage == 1) {
+              wx.navigateBack()
+            } else {
+              let sceneData = getApp().globalData.sceneData
+              wx.reLaunch({
+                url: `/${sceneData.path}?${objToParam(sceneData.query)}`,
+              })
+              // wx.switchTab({
+              //   url: '/pages/home/home',
+              // })
+            }
+          }, 1500);
+        })
+      }
+    })
+    
+  },
+
+  /**
+   * 跳转去用户协议
+   */
+  goToAgree(e) {
+    wx.navigateTo({
+      url: '/pages/agreement/agreement?agree=' + e.currentTarget.dataset.agree,
+    })
+  }
+})

pages/login/login.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/login/login.wxml

@@ -0,0 +1,15 @@
+<view class="content flex-column">
+  <view class="box flex-column flex-center">
+    <image src="/images/icon_logo.png" wx:if="{{!userInfo}}"></image>
+    <image class="avatar" src="{{userInfo.avatarUrl}}" wx:else></image>
+    <button class="flex-center" bindtap="getUserInfo" wx:if="{{!userInfo}}">授权微信用户信息</button>
+    <button class="flex-center" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" wx:else>授权绑定手机号</button>
+  </view>
+  <view class="flex1"></view>
+  <view class="bottom">
+    <text>登录代表同意I JOLI JOLI </text>
+    <text style="color: #E95564;" bindtap="goToAgree" data-agree="user_agreement">用户协议、</text>
+    <text style="color: #E95564;" bindtap="goToAgree" data-agree="user_private">隐私协议</text>
+  </view>
+</view>
+

pages/login/login.wxss

@@ -0,0 +1,39 @@
+page {
+  background: #F9F9F9;
+}
+
+page,.content {
+  height: 100%;
+}
+
+.content button {
+  width: 654rpx;
+  height: 84rpx;
+  background-color: #12B311;
+  color: #fff;
+  font-size: 32rpx;
+  border-radius: 4rpx;
+}
+
+.content image {
+  width: 290rpx;
+  height: 290rpx;
+  margin: 176rpx 0 128rpx 0;
+}
+
+.content .avatar {
+  border-radius: 50%;
+  width: 254rpx;
+  height: 254rpx;
+}
+
+.bottom {
+  text-align: center;
+  margin-bottom: 26rpx;
+}
+
+.bottom text {
+  font-size: 24rpx;
+  color: #666;
+}
+

pages/member/member.js

@@ -1,11 +1,21 @@
-// pages/member/member.js
+// import {
+//   get,
+//   post
+// } from '../../utils/http';
+// import {
+//   formatActivity,
+// } from '../../utils/time';
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
-
+    userInfo: {},
+    agree: false,
+    visible: false,
+    sum: 0,
+    activity: {}
   },
 
   /**
@@ -26,7 +36,9 @@ Page({
    * 生命周期函数--监听页面显示
    */
   onShow: function () {
-
+    // this.getUser()
+    // this.getUserActivity()
+    // this.setData({ agree: wx.getStorageSync('agree') || false })
   },
 
   /**
@@ -40,7 +52,9 @@ Page({
    * 生命周期函数--监听页面卸载
    */
   onUnload: function () {
-
+    if(this.timer_) {
+      clearInterval(this.timer_);
+    }
   },
 
   /**
@@ -62,5 +76,73 @@ Page({
    */
   onShareAppMessage: function () {
 
-  }
+  },
+
+  // 点击头像切换环境
+  onAvatar() {
+    this.data.sum++
+    if(this.data.sum >= 10) {
+      this.setData({
+        visible: true,
+        sum: 0
+      })
+    }
+  },
+
+  /**
+   * 获取用户信息
+   * api/user
+  */
+  getUser() {
+    get('api/user',{},(res) => {
+      if(res.data) {
+        this.setData({
+          userInfo: res.data
+        })
+        wx.setStorageSync('userInfo',res.data);
+      }
+      console.log(res)
+    })
+  },
+
+  /**
+   * 跳转vip页面
+  */
+  goToVip() {
+    console.log(this.data.userInfo)
+    let nextDatas = JSON.stringify(this.data.userInfo)
+    wx.navigateTo({
+      url: `/pages/vip/vip?userInfo=${encodeURIComponent(nextDatas)}`
+      // url: `/pages/vip/vip?userInfo=${JSON.stringify(this.data.userInfo)}`
+      // url: '/pages/vip/vip?userInfo='+ JSON.stringify(this.data.userInfo),
+    })
+  },
+
+  /**
+   * 获取首次开卡优惠
+   * api/user/activity
+  */
+  getUserActivity() {
+    if(this.timer) {
+      clearInterval(this.timer_);
+    }
+    get('api/user/activity',{},(res) => {
+      if(res.data) {
+        res.data.currentTime = formatActivity(res.data.expire_time_seconds)
+        this.setData({
+          activity: res.data
+        })
+        this.timer_ = setInterval(() => {
+          if(res.data.expire_time_seconds <= 0) {
+            clearInterval(this.timer_);
+          }
+          res.data.expire_time_seconds--
+          res.data.currentTime = formatActivity(res.data.expire_time_seconds)
+          this.setData({
+            activity: res.data
+          })
+        }, 1000);
+      }
+    })
+  },
 })

pages/member/member.wxml

@@ -1,2 +1,111 @@
-<!--pages/member/member.wxml-->
-<text>pages/member/member.wxml</text>
+
+<view class="user-info">
+  <!-- <image class="bg" src="/images/background/my-background.png"></image> -->
+  <view class="user-info-box flex flex-align-center {{ userInfo.is_vip == 1 ? 'active' : '' }}">
+    <image class="avatar" src="{{userInfo.avatar_url || '/images/header.png'}}" bindtap="onAvatar"></image>
+    <view class="info-right flex-column">
+      <text class="nick-name">{{userInfo.nickname || '微信用户'}}</text>
+      <!-- <view class="intro flex-align-center">
+        <view class="gender flex-center" style="margin-right: 14rpx;" wx:if="{{ userInfo.sex == 1 || userInfo.sex == 2 }}">
+          <image src="/images/icon_gender_{{userInfo.sex}}.png"></image>
+        </view>
+        <view class="city flex-center" style="margin-right: 16rpx;">深圳</view>
+        <view class="vip-time flex-center" wx:if="{{userInfo.vip}}">
+          <image src="/images/icon_vip_04.png"></image>
+          <text>{{userInfo.vip.card_name}}({{userInfo.vip.store_time_alias}})</text>
+        </view>
+      </view>
+      <text style="color: #666;font-size: 24rpx;" wx:if="{{userInfo.is_vip == 1}}">会员有效期时间：{{userInfo.vip.valid_time}}</text>
+      <text style="color: #666;font-size: 28rpx;" wx:if="{{userInfo.is_vip == 0}}">您还没有开通会员哦～</text> -->
+    </view>
+  </view>
+</view>
+
+<!-- <view class="order item-radius" style="margin-top: -66rpx;">
+  <navigator url="/pages/order/order?current=0" hover-class="none">
+    <view class="item">
+      <image src="/images/dfk.png"></image>
+      <text>待付款</text>
+      <view class="item-num flex-center" wx:if="{{userInfo.order_num && userInfo.order_num.wait_pay_num > 0}}">{{userInfo.order_num.wait_pay_num > 99 ? '99' : userInfo.order_num.wait_pay_num }}</view>
+    </view>
+  </navigator>
+  <navigator url="/pages/order/order?current=1" hover-class="none">
+    <view class="item">
+      <image src="/images/yyy.png"></image>
+      <text>已预约</text>
+      <view class="item-num flex-center" wx:if="{{userInfo.order_num && userInfo.order_num.wait_use_num > 0}}">{{userInfo.order_num.wait_use_num > 99 ? '99' : userInfo.order_num.wait_use_num }}</view>
+    </view>
+  </navigator>
+  <navigator url="/pages/order/order?current=2" hover-class="none">
+    <view class="item">
+      <image src="/images/jxz.png"></image>
+      <text>进行中</text>
+      <view class="item-num flex-center" wx:if="{{userInfo.order_num && userInfo.order_num.using_num > 0}}">{{userInfo.order_num.using_num > 99 ? '99' : userInfo.order_num.using_num }}</view>
+    </view>
+  </navigator>
+  <navigator url="/pages/order/order?current=3" hover-class="none">
+    <view class="item">
+      <image src="/images/yjs.png"></image>
+      <text>已结算</text>
+    </view>
+  </navigator>
+  <navigator url="/pages/order/order?current=4" hover-class="none">
+    <view class="item">
+      <image src="/images/yqx.png"></image>
+      <text>已取消</text>
+    </view>
+  </navigator>
+</view> -->
+
+<view class="tools">
+  
+  <view class="item-radius" style="margin-top: 20rpx;">
+    <navigator url="/pages/recordList/recordList">
+      <view class="item line">
+        <image class="icon-left" src="/images/tools_07.png"></image>
+        <text class="flex1">门店检查记录</text>
+        <text class="active" style="color:#999999;">今日未检查</text>
+        <image class="icon-right" src="/images/right.png"></image>
+      </view>
+    </navigator>
+
+    <navigator url="/pages/beautyPlanList/beautyPlanList">
+      <view class="item line">
+        <image class="icon-left" src="/images/tools_08.png"></image>
+        <text class="flex1">门店客户记录</text>
+        <!-- <text class="active" wx:if="{{ userInfo.card_num>0 }}">{{userInfo.card_num}}张可用</text> -->
+        <image class="icon-right" src="/images/right.png"></image>
+      </view>
+    </navigator>
+    
+    <navigator url="/pages/dossier/dossier">
+      <view class="item line">
+        <image class="icon-left" src="/images/tools_02.png"></image>
+        <text class="flex1">个人信息</text>
+        <text class="active" style="color:#999999;">去修改</text>
+        <image class="icon-right" src="/images/right.png"></image>
+      </view>
+    </navigator>
+  </view>
+  
+  <view class="item-radius" style="margin-top: 20rpx;">
+    <navigator url="/pages/role/role" hover-class="none">
+      <view class="item line">
+        <image class="icon-left" src="/images/tools_05.png"></image>
+        <text class="flex1">切换角色</text>
+        <image class="icon-right" src="/images/right.png"></image>
+      </view>
+    </navigator>
+    <navigator url="/pages/contact/contact" hover-class="none">
+      <view class="item">
+        <image class="icon-left" src="/images/tools_06.png"></image>
+        <text class="flex1">联系我们</text>
+        <!-- <text class="active" style="color:#999999;">去修改</text> -->
+        <image class="icon-right" src="/images/right.png"></image>
+      </view>
+    </navigator>
+  </view>
+
+</view>
+
+<change-env visible="{{ visible }}"></change-env>

pages/member/member.wxss

@@ -1 +1,204 @@
-/* pages/member/member.wxss */
+page {
+  background: #F9F9F9;
+  /* overflow: hidden; */
+  /* background: #fff; */
+}
+
+/* .user-info {
+  height: 290rpx;
+  position: relative;
+} */
+
+.user-info {
+  width: 100%;
+  height: 168rpx;
+  padding: 28rpx 30rpx;
+  box-sizing: border-box;
+  overflow: hidden;
+  position: relative;
+  /* position: relative;
+  z-index: -1;
+  overflow: hidden; */
+}
+
+.user-info::after {
+  content: '';
+  width: 100%;
+  height: 168rpx;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: -1;
+  border-radius: 0 0 24rpx 24rpx;
+  background: #FFCAE0;
+  overflow: hidden;
+}
+
+.user-info .bg {
+  width: 100%;
+  height: 100%;
+}
+
+/* .user-info-box {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+} */
+
+.user-info-box .avatar {
+  width: 112rpx;
+  height: 112rpx;
+  /* margin-bottom: 20rpx; */
+  border-radius: 50%;
+  box-sizing: border-box;
+  border: 2rpx solid #FFFFFF;
+  /* background-color: #ccc; */
+}
+
+
+.user-info-box.active .avatar {
+  border: 2rpx solid #FF3803;
+}
+
+.user-info-box .info-right {
+  margin-left: 20rpx;
+}
+
+.user-info-box.active .nick-name {
+  font-family: PingFangSC-Medium, PingFang SC;
+  color: #FF3803;
+}
+
+.user-info-box .intro {
+  margin: 4rpx 0;
+}
+
+.user-info-box .gender {
+  width: 44rpx;
+  height: 28rpx;
+  background: #FFFFFF;
+  border-radius: 14rpx;
+}
+
+.user-info-box .gender image {
+  width: 28rpx;
+  height: 28rpx;
+}
+
+.user-info-box .city {
+  height: 28rpx;
+  padding: 0rpx 10rpx;
+  background: #FFFFFF;
+  border-radius: 14rpx;
+  font-size: 16rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #666666;
+}
+
+.user-info-box .vip-time {
+  background: linear-gradient(298deg, #FFB16E 0%, #FF7F7F 100%);
+  border-radius: 20rpx;
+  height: 40rpx;
+  padding: 0 8rpx;
+}
+
+.user-info-box .vip-time image {
+  width: 48rpx;
+  height: 28rpx;
+}
+
+.user-info-box .vip-time text {
+  font-size: 28rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #FFFFFF;
+}
+
+/* .user-info-box text {
+  color: #fff;
+} */
+
+.order {
+  height: 172rpx;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  background: #fff;
+}
+
+.order .item {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.order .item image {
+  width: 72rpx;
+  height: 72rpx;
+  margin-bottom: 10rpx;
+}
+
+.order .item text {
+  font-size: 24rpx;
+  color: #666666;
+  font-family: PingFangSC-Regular;
+}
+
+.order .item .item-num {
+  position: absolute;
+  top: -14rpx;
+  right: -14rpx;
+  height: 28rpx;
+  width: 28rpx;
+  padding: 4rpx;
+  /* padding: 4rpx; */
+  background: #FF566B;
+  border-radius: 50%;
+  font-size: 22rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #FFFFFF;
+}
+
+.tools .item {
+  display: flex;
+  align-items: center;
+  padding: 0 30rpx;
+  height: 112rpx;
+  background: #fff;
+}
+
+.tools .item.top {
+  margin-top: 20rpx;
+}
+
+.tools .item.line {
+  border-bottom: 1rpx solid #F9F9F9;
+}
+
+.tools .item .active {
+  font-size: 14px;
+  color: #FF87B9;
+}
+
+.tools .item .icon-left {
+  width: 48rpx;
+  height: 48rpx;
+  margin-right: 20rpx;
+  background-color: #ccc;
+}
+
+.tools .item .icon-right {
+  width: 24rpx;
+  height: 24rpx;
+  margin-left: 12rpx;
+}
+
+.item-radius {
+  background: #FFFFFF;
+  border-radius: 16rpx;
+  margin: 20rpx 30rpx;
+  overflow: hidden;
+}