prsx-crm/components/wx-calendar/index.wxs

var touchStart = function(e, ins) {
    var toucheY = e.changedTouches[0].pageY
    var dataset = e.mark
    var state = ins.getState()
    state.calendarPageY = toucheY
    state.calendarHeight = dataset.calendar
    state.panelHeight = dataset.panel
    state.calendarMax = dataset.max
    state.calendarMin = dataset.min
    state.calendarMoving = false
    if (!state.calendarCurrHeight) state.calendarCurrHeight = dataset.calendar
    if (dataset.view == 1) state.calendarCurrHeight = dataset.calendar
    if (dataset.view == 2) state.calendarCurrHeight = dataset.min
    if (dataset.view == 3) state.calendarCurrHeight = dataset.max
}

var touchMove = function(e, ins) {
    var state = ins.getState()
    if (state.calendarMoving) return false
    state.calendarMoving = true
    var diff = Math.floor((e.changedTouches[0].pageY - state.calendarPageY) * 10) / 10
    if ((state.calendarCurrHeight + diff) >= state.calendarMin && (state.calendarCurrHeight + diff) <= state.calendarMax) {
        //calendar移动距离
        ins.selectComponent('#calendar').setStyle({
            transition: 'unset',
            height: (state.calendarCurrHeight + diff) + 'px'
        })
        var currPanel = ins.selectComponent('.wd-calendar-month-panel.curr')
        if ((state.calendarCurrHeight + diff) >= state.calendarHeight) {
            currPanel.setStyle({
                transition: 'unset',
                height: 'calc(' + (state.calendarCurrHeight + diff) + 'px - 200rpx)'
            })
        }
        if ((state.calendarCurrHeight + diff) < state.calendarHeight) {
            var totalTrans = currPanel.getDataset().trans
            var totalTransDis = state.calendarHeight - state.calendarMin
            var panleTrans = Math.floor(10 * totalTrans * Math.abs(state.calendarCurrHeight + diff - state.calendarHeight) / totalTransDis) / 10
            currPanel.setStyle({
                transition: 'unset',
                transform: 'translateY(' + (-panleTrans) + 'px)'
            })
        }
        if (((state.calendarCurrHeight + diff) < (state.calendarMax - 40))) {
            var schedules = ins.selectAllComponents('.wd-calendar-schedules')
            for (var i = 0; i < schedules.length; i++) {
                schedules[i].removeClass('show')
            }
        }
        //底部控制条样式
        var director = diff > 0 ? 1 : -1
        var deg = 0
        if (Math.abs(diff) < 120) {
            deg = director * Math.floor(Math.abs(diff) / 120 * 20)
        } else {
            deg = director * 20
        }
        ins.selectComponent('#control_1').setStyle({
            transition: 'unset',
            transform: 'rotate(' + deg + 'deg)'
        })
        ins.selectComponent('#control_2').setStyle({
            transition: 'unset',
            transform: 'rotate(' + (-deg) + 'deg)'
        })
    }
    state.calendarMoving = false
}

var touchEnd = function(e, ins) {
    var state = ins.getState()
    var _pageY = e.changedTouches[0].pageY
    var diff = Math.floor((_pageY - state.calendarPageY))
    var position = state.calendarCurrHeight + diff
    var viewSate = e.mark.view
    var calendarCriticalMin = state.calendarHeight - 120
    var calendarCriticalMax = state.calendarHeight + Math.floor((state.calendarMax - state.calendarHeight) * 0.3)
    if (position > calendarCriticalMax) {
        viewSate = 3
        ins.selectComponent('#calendar').setStyle({
            transition: 'all .3s ease 0s',
            height: state.calendarMax + 'px'
        })
        ins.selectComponent('.wd-calendar-month-panel.curr').setStyle({
            transition: 'all .3s ease 0s',
            height: 'calc(' + state.calendarMax + 'px - 200rpx)',
            transform: 'translateY(0)'
        })
        var others = ins.selectAllComponents('.wd-calendar-month-panel.other')
        for (var i = 0; i < others.length; i++) {
            others[i].setStyle({
                transition: 'unset',
                height: 'calc(' + state.calendarMax + 'px - 200rpx)'
            })
        }
        var schedules = ins.selectAllComponents('.wd-calendar-schedules')
        for (var i = 0; i < schedules.length; i++) {
            schedules[i].addClass('show')
        }
        state.schedule_show = true
    } else if (position <= calendarCriticalMax && position > calendarCriticalMin) {
        viewSate = 1
        ins.selectComponent('#calendar').setStyle({
            transition: 'all .3s cubic-bezier(0.5, 0, 0.27, 1.5) 0s',
            height: state.calendarHeight + 'px'
        })
        ins.selectComponent('.wd-calendar-month-panel.curr').setStyle({
            transition: 'all .3s cubic-bezier(0.5, 0, 0.27, 1.5) 0s',
            height: state.panelHeight + 'px',
            transform: 'translateY(0)'
        })
        var others = ins.selectAllComponents('.wd-calendar-month-panel.other')
        for (var i = 0; i < others.length; i++) {
            others[i].setStyle({
                transition: 'unset',
                height: state.panelHeight + 'px',
                transform: 'translateY(0)'
            })
        }
    } else {
        viewSate = 2
        ins.selectComponent('#calendar').setStyle({
            transition: 'all .3s cubic-bezier(0.5, 0, 0.27, 1.5) 0s',
            height: state.calendarMin + 'px'
        })
        var curr = ins.selectComponent('.wd-calendar-month-panel.curr')
        curr.setStyle({
            transition: 'all .3s cubic-bezier(0.5, 0, 0.27, 1.5) 0s',
            height: state.panelHeight + 'px',
            transform: 'translateY(' + (-curr.getDataset().trans) + 'px)'
        })
        var others = ins.selectAllComponents('.wd-calendar-month-panel.other')
        for (var i = 0; i < others.length; i++) {
            var trans = others[i].getDataset().trans
            others[i].setStyle({
                transition: 'unset',
                height: state.panelHeight + 'px',
                transform: 'translateY(' + (-trans) + 'px)'
            })
        }
    }
    ins.selectComponent('#control_1').setStyle({
        transition: 'all .3s cubic-bezier(0.6, 0, 0.27, 1.5) .2s',
        transform: 'rotate(0deg)'
    })
    ins.selectComponent('#control_2').setStyle({
        transition: 'all .3s cubic-bezier(0.6, 0, 0.27, 1.5) .2s',
        transform: 'rotate(0deg)'
    })
    ins.callMethod('toggleView', { state: viewSate })
}

var handleViewToggle = function(viewState, dataset, ins) {
    if (viewState == 2) {
        ins.selectComponent('#calendar').setStyle({
            transition: 'all .28s ease 0s',
            height: dataset.min + 'px'
        })
        var curr = ins.selectComponent('.wd-calendar-month-panel.curr')
        curr.setStyle({
            transition: 'all .28s ease 0s',
            height: dataset.panel + 'px',
            transform: 'translateY(' + (-curr.getDataset().trans) + 'px)'
        })
        var others = ins.selectAllComponents('.wd-calendar-month-panel.other')
        for (var i = 0; i < others.length; i++) {
            var trans = others[i].getDataset().trans
            others[i].setStyle({
                transition: 'unset',
                height: dataset.panel + 'px',
                transform: 'translateY(' + (-trans) + 'px)'
            })
        }
    } else {
        ins.selectComponent('#calendar').setStyle({
            transition: 'all .28s ease 0s',
            height: dataset.calendar + 'px'
        })
        ins.selectComponent('.wd-calendar-month-panel.curr').setStyle({
            transition: 'all .28s ease 0s',
            height: dataset.panel + 'px',
            transform: 'translateY(0)'
        })
        var others = ins.selectAllComponents('.wd-calendar-month-panel.other')
        for (var i = 0; i < others.length; i++) {
            others[i].setStyle({
                transition: 'unset',
                height: dataset.panel + 'px',
                transform: 'translateY(0)'
            })
        }
    }
    var schedules = ins.selectAllComponents('.wd-calendar-schedules')
    for (var i = 0; i < schedules.length; i++) {
        schedules[i].removeClass('show')
    }
}

var toggleView = function(e, ins) {
    var dataset = e.mark
    var viewSate = dataset.view
    if (dataset.view == 2) {
        viewSate = 1
        handleViewToggle(1, dataset, ins)
    } else {
        viewSate = 2
        handleViewToggle(2, dataset, ins)
    }
    ins.callMethod('toggleView', { state: viewSate })
}

var handleViewChange = function(view, _, ins) {
    if (view) {
        var dataset = ins.selectComponent('#calendar').getDataset()
        var viewSate = view == 'week' ? 2 : 1
        handleViewToggle(viewSate, dataset, ins)
        ins.callMethod('toggleView', { state: viewSate })
    }
}

var handleMonthChange = function(monthchange, _, ins) {
    if (monthchange) {
        var dataset = ins.selectComponent('#calendar').getDataset()
        var curr = ins.selectComponent('.wd-calendar-month-panel.curr')
        curr.setStyle({
            transition: 'unset',
            height: dataset.panel + 'px',
            transform: 'translateY(' + (-curr.getDataset().trans) + 'px)'
        })
    }
}

var handleInitTrans = function(needInitTrans, _, ins) {
    if (needInitTrans) {
        var dataset = ins.selectComponent('#calendar').getDataset()
        var curr = ins.selectComponent('.wd-calendar-month-panel.curr')
        curr.setStyle({
            transition: 'unset',
            height: dataset.panel + 'px',
            transform: 'translateY(' + (-curr.getDataset().trans) + 'px)'
        })
        var others = ins.selectAllComponents('.wd-calendar-month-panel.other')
        for (var i = 0; i < others.length; i++) {
            var trans = others[i].getDataset().trans
            others[i].setStyle({
                transition: 'unset',
                height: dataset.panel + 'px',
                transform: 'translateY(' + (-trans) + 'px)'
            })
        }
    }
}

var handleWeekSwiperChange = function(weektabchange, _, ins) {
    if (weektabchange >= 0) {
        var dataset = ins.selectComponent('#calendar').getDataset()
        var others = ins.selectAllComponents('.wd-calendar-month-panel.other')
        for (var i = 0; i < others.length; i++) {
            var trans = others[i].getDataset().trans
            others[i].setStyle({
                transition: 'unset',
                height: dataset.panel + 'px',
                transform: 'translateY(' + (-trans) + 'px)'
            })
        }
    }
}

var handleYearPanelShow = function(e, ins) {
    var dataset = e.mark
    var viewSate = dataset.view
    if (viewSate == 1) {
        ins.callMethod('justYearPanelShow')
    } else {
        ins.selectComponent('#calendar').setStyle({
            transition: 'all .28s ease 0s',
            height: dataset.calendar + 'px'
        })
        ins.selectComponent('.wd-calendar-month-panel.curr').setStyle({
            transition: 'all .28s ease 0s',
            height: dataset.panel + 'px',
            transform: 'translateY(0)'
        })
        var others = ins.selectAllComponents('.wd-calendar-month-panel.other')
        for (var i = 0; i < others.length; i++) {
            others[i].setStyle({
                transition: 'unset',
                height: dataset.panel + 'px',
                transform: 'translateY(0)'
            })
        }
        ins.callMethod('handleYearPanelShow')
        ins.callMethod('toggleView', { state: 1 })
    }
}

module.exports = {
    touchStart: touchStart,
    touchMove: touchMove,
    touchEnd: touchEnd,
    toggleView: toggleView,
    handleMonthChange: handleMonthChange,
    handleWeekSwiperChange: handleWeekSwiperChange,
    handleYearPanelShow: handleYearPanelShow,
    handleInitTrans: handleInitTrans,
    handleViewChange: handleViewChange
}