mteacher/src/views/trainStatistics/trainModel.vue

<template>
    <div class="trainModel">
        <div class="visit-tips" v-show="activeType == 'visited'">
            <span>上周训练时长不足80分钟或训练次数小于4次的学员<br />
            需在每周三24:00前完成回访</span>
        </div>
        <search @onSearch="onSearch" placeholder="学生姓名或手机号">
            <template #left>
                <van-dropdown-menu style="padding-right: .1rem" :close-on-click-outside="false" active-color="#01C1B5">
                    <van-dropdown-item title="筛选" ref="item" class="visitTime">
                        <van-cell title="日期" is-link @click="showCalendar = true" title-style="font-size: .14rem;" :value="calendarValue" value-class="calendarColor"></van-cell>
                    </van-dropdown-item>
                </van-dropdown-menu>
            </template>
        </search>
        <van-row class="searchArray">
            <van-col span="6" class="title-style" @click="onSort(0)">
                训练时长
                <div>
                    <i class="box box-up" :class="{'active': searchArray[0] == 'ASC'}" style="margin-bottom: .03rem;"></i>
                    <i class="box box-down" :class="{'active': searchArray[0] == 'DESC'}"></i>
                </div>
            </van-col>
            <van-col span="6" class="title-style" @click="onSort(1)">
                训练次数
                <div>
                    <i class="box box-up" :class="{'active': searchArray[1] == 'ASC'}" style="margin-bottom: .03rem;"></i>
                    <i class="box box-down" :class="{'active': searchArray[1] == 'DESC'}"></i>
                </div>
            </van-col>
            <van-col span="6" class="title-style" @click="onSort(2)">
                训练天数
                <div>
                    <i class="box box-up" :class="{'active': searchArray[2] == 'ASC'}" style="margin-bottom: .03rem;"></i>
                    <i class="box box-down" :class="{'active': searchArray[2] == 'DESC'}"></i>
                </div>
            </van-col>
            <van-col span="6" class="title-style" @click="onSort(3)">
                评测次数
                <div>
                    <i class="box box-up" :class="{'active': searchArray[3] == 'ASC'}" style="margin-bottom: .03rem;"></i>
                    <i class="box box-down" :class="{'active': searchArray[3] == 'DESC'}"></i>
                </div>
            </van-col>
        </van-row>
        <van-calendar
            v-model="showCalendar"
            :minDate="minDate"
            :default-date="defaultDate"
            :first-day-of-week="1"
            :formatter="formatterDay"
            color="#01C1B5"
            type="range"
            get-container="body"
            @select="selectDate"
            @confirm="onConfirm"
            @close="onClose"
        />
    </div>
</template>

<script>
import Search from '@/components/Search';
import dayjs from "dayjs";
import { getNowDateAndMonday, getNowDateAndSunday } from '@/common/common'
export default {
    props: {
        active: {
            type: String,
            default: 'all'
        },
        defaultTime: {
            type: Number,
            default: 0
        }
    },
    components: { Search },
    data() {
        return {
            showCalendar: false,
            minDate: new Date(2000, 0, 1),
            defaultDate:[],
            // 类型为全部时
            startDay: null,
            endDay: null,
            search: null,
            searchArray: [null, null, null, null],
            searchType: {
                // ASC DESC
                totalPlayTime: null,
                trainNum: null,
                trainDay: null,
                recordNum: null,
            },

        }
    },
    async mounted() {
        let defaultTime = this.defaultTime
        let day = defaultTime * 7
        let startTime = new Date(), endTime = new Date()
        if(day > 0) {
            startTime = getNowDateAndMonday(dayjs().add(day, 'day').format("YYYY-MM-DD"))
            endTime = getNowDateAndSunday(dayjs().add(day, 'day').format("YYYY-MM-DD"))
        } else {
            startTime = getNowDateAndMonday(dayjs().subtract(Math.abs(day), 'day').format("YYYY-MM-DD"))
            endTime = getNowDateAndSunday(dayjs().subtract(Math.abs(day), 'day').format("YYYY-MM-DD"))
        }
        this.defaultDate = [new Date(startTime), new Date(endTime)]
        this.startDay = startTime
        this.endDay = endTime

        this.onSort()
    },
    computed: {
        calendarValue() {
            return `${dayjs(this.startDay).format("YYYY/MM/DD")} - ${dayjs(this.endDay).format("YYYY/MM/DD")}`;
        },
        activeType() {
            return this.active
        }
    },
    methods: {
        onSort(type) {
            let searchArray = this.searchArray
            searchArray.forEach((item, index) => {
                if(index != type) {
                    searchArray[index] = null
                }
            });
            if(searchArray[type] == 'ASC') {
                searchArray[type] = 'DESC'
            } else if(searchArray[type] == 'DESC') {
                searchArray[type] = null
            } else {
                searchArray[type] = 'ASC'
            }
            this.$forceUpdate()
            // console.log(searchArray)
            this.onAllFilter()
        },
        onSearch(val) {
            this.search = val
            this.onAllFilter()
        },
        onAllFilter() {
            const searchArray = this.searchArray
            let currentIndex = null
            let currentType = null
            searchArray.forEach((item, index) => {
                if(item) {
                    currentIndex = index
                    currentType = item
                }
            })
            const searchType = ['totalPlayTime', 'trainNum', 'trainDay', 'recordNum']
            let params = {
                search: this.search,
                startTime: this.startDay,
                endTime: this.endDay,
                page: 1,
                sort: searchType[currentIndex],
                order: currentType
            }
            this.$listeners.onLoad(params)
        },
        changeDropDownItemStatus() {
            this.$refs.item.toggle(false)
        },
        selectDate(date) {
            let [start, end] = date;
            if (start) {
                const num = dayjs(start).get("day");
                if (num === 0) {
                    start = dayjs(start).subtract(6, "day");
                } else {
                    start = dayjs(start).subtract(num - 1, "day");
                }
            }
            if (start) {
                const num = 7 - dayjs(start).get("day");
                if (num < 7) {
                    end = dayjs(start).add(num, "day");
                }
            }
            this.defaultDate = [new Date(start.valueOf()),new Date(end.valueOf())]
        },
        onConfirm(date) {
            let [start, end] = date;
            this.showCalendar = false;
            if (start) {
                const num = dayjs(start).get("day");
                if (num === 0) {
                start = dayjs(start).subtract(6, "day");
                } else {
                start = dayjs(start).subtract(num - 1, "day");
                }
            }
            if (end) {
                const num = 7 - dayjs(end).get("day");
                if (num < 7) {
                end = dayjs(end).add(num, "day");
                }
            }
            this.startDay = dayjs(start).format("YYYY-MM-DD");
            this.endDay = dayjs(end).format("YYYY-MM-DD");
            //
            this.changeDropDownItemStatus()
            this.onAllFilter()
        },
        onClose() {
            // 关闭弹窗时初始化默认日期
            this.defaultDate = [new Date(this.startDay), new Date(this.endDay)]
        },
        formatterDay(day) {
            const month = day.date.getMonth() + 1;
            const date = day.date.getDate();
            let nowDate = new Date()
            if(month == nowDate.getMonth() + 1 && date == nowDate.getDate()){
                day.text = '今天'
            }
            return day
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.van-dropdown-menu__title::after {
    border-color: transparent transparent #01C1B5 #01C1B5;
}
.calendarColor {
    color: #333;
    font-size: .14rem;
}
.visit-tips {
    background-color: #fff;
    // padding: 10px 10px 0;
    padding: 10px 12px 0;
    text-align: center;
    span {
        display: block;
        padding: 6px 12px;
        background-color: #FFF6DE;
        font-size: 12px;
        color: #FF802C;
        text-align: left;
    }
}
.searchArray {
    font-size: .14rem;
    padding-top: .15rem;
    padding-bottom: .12rem;
    color: #1A1A1A;
    background-color: #f5f5f5;
}
.title-style {
    display: flex;
    align-items: center;
    justify-content: center;
}
.box {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: .02rem;
}
.box-up {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid #ccc;
    &.active {
        border-bottom-color: #01C1B5;
    }
}
.box-down {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #ccc;
    &.active {
        border-top-color: #01C1B5;
    }
}
</style>