prsx-crm/components/timeRange/timeRange.js

import {
    formatTime
} from "../../utils/getTime.js"
Component({
    options: {
        addGlobalClass: true
    },
    properties: {
        dateTypes: {
            type: Array,
            value: ["全部", "本年", "本季", "本月"]
        },
        dateType: {
            type: String,
            value: "本年"
        },
        onChange: {
            type: Function,
        },
    },
    lifetimes: {
        attached: function () {
            getApp().globalData.Language.getLanguagePackage(this)
            this.setData({
                actions: this.data.dateTypes.map(item => {
                    return {
                        name: getApp().globalData.Language.getMapText(item),
                        value: item,
                        color: item == this.data.dateType ? "#3874F6" : ""
                    }
                })
            })
            this.setRange();
        }
    },
    data: {
        actionShow: false,
        whereType: {
            value: "begdate",
            begdate: formatTime(new Date(), "-").split(' ')[0].slice(0, 7),
            enddate: "",
            begTimestamp: new Date().getTime(),
            endTimestamp: "",
        },
        begdate: "",
        enddate: "",
        showTimePicker: false,
    },
    methods: {
        openActionSheet() {
            this.setData({
                actionShow: true
            })
        },
        confirmTimePicker() {
            let whereType = this.data.whereType,
                begdate = whereType.begdate,
                enddate = whereType.enddate;
            if (whereType.enddate == "") {
                whereType.value = "enddate";
                this.setData({
                    whereType
                })
                wx.showToast({
                    title: getApp().globalData.Language.getMapText("请选择结束时间"),
                    icon: "none"
                })
            } else {
                this.setData({
                    showTimePicker: false,
                    begdate,
                    enddate,
                    actions: this.data.actions.map(item => {
                        item.color = ""
                        return item
                    })
                })
                this.triggerEvent("onChange", {
                    dateType: '',
                    isAll: 99,
                    begdate,
                    enddate
                })
            }
        },
        openTimePicker() {
            this.setData({
                showTimePicker: true
            })
        },
        cancelWhereType() {
            this.setData({
                showTimePicker: false
            })
        },
        /* 日期选择器 */
        datetimeOnInput(event) {
            let type = event.currentTarget.dataset.name,
                whereType = this.data.whereType;
            if (type == "begdate") {
                whereType.begTimestamp = event.detail;
                whereType.begdate = formatTime(new Date(event.detail), "-").split(' ')[0].slice(0, 7);
                if (whereType.begTimestamp > whereType.endTimestamp) {
                    whereType.engTimestamp = whereType.begTimestamp
                    whereType.enddate = '';
                }
            } else {
                whereType.endTimestamp = event.detail;
                whereType.enddate = formatTime(new Date(event.detail), "-").split(' ')[0].slice(0, 7);
            }
            this.setData({
                whereType
            })
        },
        //切换日期类型
        changeDateType(e) {
            const {
                name
            } = e.target.dataset;
            this.setData({
                "whereType.value": name
            })
        },
        /* 周期选择器 */
        onSelect(event) {
            const {
                value
            } = event.detail;
            if (this.data.dateType == value) return this.onCancel();
            this.setData({
                dateType: value,
                actions: this.data.actions.map(item => {
                    item.color = item.value == value ? "#3874F6" : "";
                    item.loading = item.value == value ? true : false;
                    return item
                })
            })
            this.setRange();
            this.triggerEvent("onChange", {
                dateType: value,
                isAll: this.data.dateType == "全部" ? 1 : 0,
                begdate: "",
                enddate: ""
            })
        },
        onCancel() {
            this.setData({
                actionShow: false,
                actions: this.data.actions.map(item => {
                    item.loading = false;
                    return item
                })
            })
        },
        setRange() {
            let dateType = this.data.dateType,
                whereType = {
                    value: "begdate",
                    begdate: formatTime(new Date(), "-").split(' ')[0].slice(0, 7),
                    enddate: "",
                    begTimestamp: new Date().getTime(),
                    endTimestamp: "",
                },
                begdate = "",
                enddate = "";
            switch (dateType) {
                case '本年':
                    begdate = formatTime(new Date(), "-").split(' ')[0].slice(0, 4) + "-01";
                    enddate = formatTime(new Date(), "-").split(' ')[0].slice(0, 4) + "-12";
                    whereType.begdate = begdate;
                    whereType.enddate = enddate;
                    break;
                case '本月':
                    begdate = formatTime(new Date(), "-").split(' ')[0].slice(0, 7);
                    enddate = formatTime(new Date(), "-").split(' ')[0].slice(0, 7);
                    whereType.begdate = begdate;
                    whereType.enddate = enddate;
                    break;
                case '本季':
                    begdate = formatTime(new Date(), "-").split(' ')[0].slice(0, 4) + "-" + (Math.floor((new Date().getMonth() + 1) / 3) * 3 - 2);
                    enddate = formatTime(new Date(), "-").split(' ')[0].slice(0, 4) + "-" + (Math.floor((new Date().getMonth() + 1) / 3) * 3);
                    whereType.begdate = begdate;
                    whereType.enddate = enddate;
                    break;
                default:
                    break;
            }
            if (dateType != "全部") {
                whereType.begTimestamp = new Date(begdate + '-01').getTime();
                whereType.endTimestamp = new Date(enddate + '-30').getTime();
            }
            this.setData({
                whereType,
                begdate,
                enddate
            })
        }
    }
})