mteacher/src/views/trainStatistics/index.vue

<template>
    <div class="visitList">
        <van-sticky>
            <m-header v-if="headerStatus" :isFixed="false" />
            <search @onSearch="search" 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="onChangeDate('showStart')" :value="formatStartTime"></van-cell>
                            <van-cell title="结束时间" is-link @click="onChangeDate('showEnd')" :value="formatEndTime"></van-cell>
                            <div class="btnWrap">
                                <div class="cancelBtn" @click="cancelBtn">重置</div>
                                <div class="okBtn" @click="okBtn">确定</div>
                            </div>
                        </van-dropdown-item>
                    </van-dropdown-menu>
                </template>
            </search>
        </van-sticky>

        <van-list
            v-model="loading"
            v-if="dataShow"
            :finished="finished"
            finished-text="- 没有更多了 -"
            :immediate-check="false"
            style="padding-top: .12rem;"
            @load="getList"
        >
            <van-cell-group class="data-content" v-for="(item, index) in list" :key="index" @click="onHref(item)">
                <van-cell style="padding: 16px 12px; 12px" :center="true">
                    <template #title>
                        <div class="teacher_info">
                            <img class="logo" v-if="item.avatar" :src="item.avatar" alt="" />
                            <img class="logo" v-else src="../../assets/images/icon_student.png" alt="" />
                            <p style="color: #1a1a1a; font-size: .14rem;">{{ item.username }}</p>
                        </div>
                    </template>
                    <p style="font-size: 14px; color: #808080;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.musicGroupName }}</p>
                </van-cell>
                <van-cell is-link :clickable="false" center style="padding: 12px 12px 16px">
                    <template #title>
                        <van-grid :border="false" column-num="4" :clickable="true">
                            <van-grid-item text="训练时长">
                                <template #icon>{{ item.totalPlayTime }}分钟</template>
                            </van-grid-item>
                            <van-grid-item text="训练天数">
                                <template #icon><span style="color: #01C1B5">{{ item.trainDay }}天</span></template>
                            </van-grid-item>
                            <van-grid-item text="训练次数">
                                <template #icon><span style="color: #01C1B5">{{ item.trainDay }}次</span></template>
                            </van-grid-item>
                            <van-grid-item text="评测次数">
                                <template #icon><span style="color: #FF802C">{{ item.recordNum }}次</span></template>
                            </van-grid-item>
                        </van-grid>
                    </template>
                </van-cell>
            </van-cell-group>
        </van-list>
        <m-empty v-else msg="暂无训练统计" />

        <van-popup v-model="dataForm.status" position="bottom" :style="{ height: '40%' }">
            <van-datetime-picker
                v-model="dataForm.currentDate"
                :min-date="dataForm.minDate"
                :max-date="dataForm.maxDate"
                :formatter="formatter"
                @cancel="dataForm.status = false"
                type="date"
                @confirm="chioseDate"
            />
        </van-popup>
    </div>
</template>
<script>
import MHeader from "@/components/MHeader";
import MEmpty from '@/components/MEmpty';
import Search from '@/components/Search';
import dayjs from "dayjs";
import { browser } from "@/common/common";
import { countStudentTrain } from './api.js'
export default {
    components: { MHeader, MEmpty, Search },
    data() {
        return {
            headerStatus: true,
            dataForm: {
                // 时间下拉框
                type: null,
                status: false,
                minDate: new Date(2000, 0, 1),
                maxDate: new Date(2025, 10, 1),
                currentDate: new Date(),
            },
            purposeStatus: true,
            startDate: null,
            endDate: null,
            showStart: false,
            showEnd: false,
            formatEndTime: null,
            formatStartTime: null,
            list: [],
            loading: false,
            finished: false,
            params: {
                search: null,
                page: 1,
                rows: 20,
            },
            dataShow: true,
        };
    },
    mounted() {
        let params = this.$route.query;
        if (params.Authorization) {
            localStorage.setItem("Authorization", decodeURI(params.Authorization));
            localStorage.setItem("userInfo", decodeURI(params.Authorization));
        }
        if (browser().android || browser().iPhone) {
            this.headerStatus = false;
        }
        document.title = '训练统计'
        this.getList()
    },
    methods: {
        search(val) {
            this.params.search = val
            this.onResetList()
        },
        onResetList() {
            this.list = [];
            this.params.page = 1;
            this.dataShow = true;
            this.loading = true;
            this.finished = false;
            this.getList()
        },
        onHref(item) {
            this.$router.push({
                path: '/trainDetail',
                query: {
                    userId: item.userId,
                    username: item.username
                }
            })
        },
        cancelBtn() {
            this.formatStartTime = null;
            this.formatEndTime = null;
            this.onResetList()
            this.$refs.item.toggle();
        },
        okBtn() {
            if(this.formatStartTime && this.formatEndTime) {
                this.onResetList()
            }
            this.$refs.item.toggle();
        },
        onChangeDate(type) {
            let dataForm = this.dataForm
            if(type == 'showEnd') {
                if(this.formatStartTime) {
                dataForm.minDate = new Date(dayjs(this.formatStartTime))
                }
                setTimeout(() => {
                dataForm.currentDate = this.formatEndTime ? new Date(dayjs(this.formatEndTime)) : new Date()
                }, 500)
            } else if(type == 'showStart') {
                dataForm.minDate = new Date(2000, 0, 1)
                setTimeout(() => {
                dataForm.currentDate = this.formatStartTime ? new Date(dayjs(this.formatStartTime)) : new Date()
                }, 500)
            }
            dataForm.status = true
            dataForm.type = type
        },
        chioseDate(value) {
            let dataForm = this.dataForm
            if(dataForm.type == 'showStart') {
                this.formatStartTime = dayjs(value).format('YYYY/MM/DD')
                if(this.formatEndTime && dayjs(value).unix() > dayjs(this.formatEndTime).unix()) {
                this.formatEndTime = null
                }
            } else if(dataForm.type == 'showEnd') {
                this.formatEndTime = dayjs(value).format('YYYY/MM/DD')
            }
            dataForm.status = false
        },
        // onTypeChange() {
        //   this.onResetList()
        // },
        onPurposeChange() {
            this.onResetList()
        },
        async getList() {
            let params = this.params;
            if(this.formatStartTime && this.formatEndTime) {
                params.startTime = this.formatStartTime
                params.endTime = this.formatEndTime
            } else {
                params.startTime = null
                params.endTime = null
            }
            try {
                let res = await countStudentTrain(params)
                let result = res.data;
                this.loading = false;
                params.page = result.pageNo;
                this.list = this.list.concat(result.rows);
                if (params.page >= result.totalPage) {
                    this.finished = true;
                }
                this.params.page++;
                // 判断是否有数据
                if (this.list.length <= 0) {
                    this.dataShow = false;
                }
            } catch {
                //
                this.finished = true;
                this.dataShow = false;
            }
        },
        formatter(type, val) {
        if (type === "year") {
            return `${val}年`;
        } else if (type === "month") {
            return `${val}月`;
        } else if (type == "day") {
            return `${val}日`;
        }
        return val;
        },
    },
};
</script>
<style lang="less" scoped>
@import url("../../assets/commonLess/variable.less");

.visitList {
    min-height: 100vh;
    .visitTime {
        .van-cell__right-icon{
        line-height: .36rem;
        }
    }
    /deep/.van-dropdown-menu__bar {
        box-shadow: none;
    }
}
.data-content {
    margin: .15rem .15rem 0;
    border-radius: .1rem;
    overflow: hidden;
    &:first-child {
        margin-top: 0;
    }
    .van-row-item {
        display: flex;
        align-items: center;
    }
    /deep/.van-grid-item__content {
        padding: .03rem
    }
    /deep/.van-grid-item__content {
        background-color: transparent;
    }
    /deep/.van-grid-item__icon-wrapper {
        font-size: .15rem;
        color: #000;
    }
    /deep/.van-grid-item__text {
        font-size: .14rem;
        color: #808080;
    }
    .teacher_info {
        display: flex;
        align-items: center;
        img {
            margin-right: .1rem;
            width: .4rem;
            height: .4rem;
            border-radius: 50%;
        }
    }
}
// .cellGroup {
//   display: flex;
//   align-items: center;
//   line-height: .61rem;
//   .logo {
//     width: 0.35rem;
//     height: 0.35rem;
//     // margin-right: 0.12rem;
//     border-radius: 100%;
//   }
//   .type {
//       line-height: 1.2;
//   }
// }
// /deep/.van-cell__title {
//   font-size: 0.14rem;
//   color: @mFontColor;
//   flex: 1 auto;
// }
.btnWrap {
  display: flex;
  flex-direction: row;
  .cancelBtn {
    height: 48px;
    line-height: 48px;
    background: #eeeff3;
    color: @mColor;
    text-align: center;
    width: 100%;
  }
  .okBtn {
    width: 100%;
    height: 48px;
    line-height: 48px;
    background: @mColor;
    color: #fff;
    text-align: center;
  }
}
// .van-cell{
//     color: #1A1A1A;
//     line-height: .36rem!important;
//     font-size: .16rem;
// }
// /deep/.van-col--9 {
//     display: flex;
// }
// /deep/.van-col--5 {
//     text-align: center;
// }
</style>