mteacher/src/views/trainStatistics/index.vue

<template>
    <div class="visitList">
        <van-sticky>
            <m-header v-if="headerStatus" :isFixed="false" />
            <van-tabs v-model="active" @change="tabChange" title-active-color="#000000" title-inactive-color="#808080" color="#01C1B5" class="van-hairline--bottom">
                <van-tab title="全部学员" name="all">
                    <train-model ref="trainModel1" @onLoad="onLoad" :active="active" :defaultTime="0" />
                </van-tab>
                <van-tab title="待回访学员" name="visited">
                    <train-model ref="trainModel2" @onLoad="onLoad" :active="active" :defaultTime="-1" />
                </van-tab>
            </van-tabs>
        </van-sticky>

        <van-list
            v-model="loading"
            v-if="dataShow"
            :finished="finished"
            finished-text="- 没有更多了 -"
            :immediate-check="false"
            @load="getList"
        >
            <van-cell-group class="data-content" :border="false" v-for="(item, index) in list" :key="index" @click="onHref(item)">
                <van-cell style="padding: 16px 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: #333;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.trainNum }}次</span></template>
                            </van-grid-item>
                            <van-grid-item text="训练天数">
                                <template #icon><span style="color: #FF802C">{{ item.trainDay }}天</span></template>
                            </van-grid-item>
                            <van-grid-item text="评测次数">
                                <template #icon><span style="color: #F79C00">{{ item.recordNum }}次</span></template>
                            </van-grid-item>
                        </van-grid>
                    </template>
                </van-cell>
            </van-cell-group>
        </van-list>
        <m-empty v-else msg="暂无训练统计" />

    </div>
</template>
<script>
import MHeader from "@/components/MHeader";
import MEmpty from '@/components/MEmpty';
import dayjs from "dayjs";
import { browser } from "@/common/common";
import { countStudentTrain } from './api.js'
import trainModel from './trainModel.vue'
export default {
    components: { MHeader, MEmpty, trainModel },
    data() {
        const activeType = sessionStorage.getItem('trainTab')
        sessionStorage.removeItem('trainTab')
        return {
            headerStatus: true,
            active: activeType || 'all',
            list: [],
            loading: false,
            finished: false,
            params: {
                page: 1,
                rows: 20,
            },
            dataShow: true,
            // 类型为回访学员时
            formatEndTime: null,
            formatStartTime: null,
        };
    },
    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: {
        onLoad(value) {
            this.params = Object.assign(this.params, value)
            this.onResetList()
        },
        tabChange() {
            if(this.$refs.trainModel1) {
                this.$refs.trainModel1.changeDropDownItemStatus()
            }
            if(this.$refs.trainModel2) {
                this.$refs.trainModel2.changeDropDownItemStatus()
            }
            if(this.active == 'visited' && this.$refs.trainModel2) {
                this.$refs.trainModel2.onAllFilter()
            } else if(this.active == 'all' && this.$refs.trainModel1) {
                this.$refs.trainModel1.onAllFilter()
            }
        },
        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) {
            sessionStorage.setItem('trainTab', this.active)
            this.$router.push({
                path: '/trainDetail',
                query: {
                    userId: item.userId,
                    username: item.username,
                    musicGroupName: item.musicGroupName,
                    avatar: item.avatar,
                    visitFlag: item.visitFlag
                }
            })
        },
        async getList() {
            let params = this.params;
            let visitFlag = this.active != 'all' ? 1 : null
            try {
                let res = await countStudentTrain({...params, visitFlag})
                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;
            }
        }
    },
};
</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;
    }
}

/deep/.van-tab {
    font-size: .16rem;
}
/deep/.search .van-search {
    margin: 10px 0 ;
}

.data-content {
    margin: .1rem .15rem 0;
    border-radius: .1rem;
    overflow: hidden;
    .logo {
        width: 0.40rem;
        height: 0.4rem;
        // margin-right: 0.12rem;
        border-radius: 100%;
    }
    &: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;
        font-weight: 500;
        color: #000;
    }
    /deep/.van-grid-item__text {
        padding-top: .03rem;
        font-size: .12rem;
        color: #808080;
    }
    .teacher_info {
        display: flex;
        align-items: center;
        img {
            margin-right: .1rem;
            width: .4rem;
            height: .4rem;
            border-radius: 50%;
        }
    }
}
.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;
  }
}

</style>