|
@@ -2,20 +2,14 @@
|
|
|
<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-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
|
|
@@ -24,10 +18,9 @@
|
|
|
: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-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">
|
|
@@ -36,7 +29,7 @@
|
|
|
<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>
|
|
|
+ <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>
|
|
@@ -45,13 +38,13 @@
|
|
|
<template #icon>{{ item.totalPlayTime }}分钟</template>
|
|
|
</van-grid-item>
|
|
|
<van-grid-item text="训练次数">
|
|
|
- <template #icon><span style="color: #01C1B5">{{ item.trainDay }}次</span></template>
|
|
|
+ <template #icon><span style="color: #01C1B5">{{ item.trainNum }}次</span></template>
|
|
|
</van-grid-item>
|
|
|
<van-grid-item text="训练天数">
|
|
|
- <template #icon><span style="color: #01C1B5">{{ item.trainDay }}天</span></template>
|
|
|
+ <template #icon><span style="color: #FF802C">{{ item.trainDay }}天</span></template>
|
|
|
</van-grid-item>
|
|
|
<van-grid-item text="评测次数">
|
|
|
- <template #icon><span style="color: #FF802C">{{ item.recordNum }}次</span></template>
|
|
|
+ <template #icon><span style="color: #F79C00">{{ item.recordNum }}次</span></template>
|
|
|
</van-grid-item>
|
|
|
</van-grid>
|
|
|
</template>
|
|
@@ -60,55 +53,34 @@
|
|
|
</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'
|
|
|
+import trainModel from './trainModel.vue'
|
|
|
export default {
|
|
|
- components: { MHeader, MEmpty, Search },
|
|
|
+ components: { MHeader, MEmpty, trainModel },
|
|
|
data() {
|
|
|
+ const activeType = sessionStorage.getItem('trainTab')
|
|
|
+ sessionStorage.removeItem('trainTab')
|
|
|
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,
|
|
|
+ active: activeType || 'all',
|
|
|
list: [],
|
|
|
loading: false,
|
|
|
finished: false,
|
|
|
params: {
|
|
|
- search: null,
|
|
|
page: 1,
|
|
|
rows: 20,
|
|
|
},
|
|
|
dataShow: true,
|
|
|
+ // 类型为回访学员时
|
|
|
+ formatEndTime: null,
|
|
|
+ formatStartTime: null,
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
@@ -121,9 +93,27 @@ export default {
|
|
|
this.headerStatus = false;
|
|
|
}
|
|
|
document.title = '训练统计'
|
|
|
- this.getList()
|
|
|
+
|
|
|
+ // 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()
|
|
@@ -137,70 +127,23 @@ export default {
|
|
|
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
|
|
|
+ avatar: item.avatar,
|
|
|
+ visitFlag: item.visitFlag
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- 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;
|
|
|
- params.startTime = this.formatStartTime || null
|
|
|
- params.endTime = this.formatEndTime || null
|
|
|
+ let visitFlag = this.active != 'all' ? 1 : null
|
|
|
try {
|
|
|
- let res = await countStudentTrain(params)
|
|
|
+ let res = await countStudentTrain({...params, visitFlag})
|
|
|
let result = res.data;
|
|
|
this.loading = false;
|
|
|
params.page = result.pageNo;
|
|
@@ -218,17 +161,7 @@ export default {
|
|
|
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>
|
|
@@ -237,17 +170,25 @@ export default {
|
|
|
|
|
|
.visitList {
|
|
|
min-height: 100vh;
|
|
|
- .visitTime {
|
|
|
- .van-cell__right-icon{
|
|
|
- // line-height: .36rem;
|
|
|
- }
|
|
|
- }
|
|
|
+ // .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: .15rem .15rem 0;
|
|
|
+ margin: .1rem .15rem 0;
|
|
|
border-radius: .1rem;
|
|
|
overflow: hidden;
|
|
|
.logo {
|
|
@@ -271,10 +212,12 @@ export default {
|
|
|
}
|
|
|
/deep/.van-grid-item__icon-wrapper {
|
|
|
font-size: .15rem;
|
|
|
+ font-weight: 500;
|
|
|
color: #000;
|
|
|
}
|
|
|
/deep/.van-grid-item__text {
|
|
|
- font-size: .14rem;
|
|
|
+ padding-top: .03rem;
|
|
|
+ font-size: .12rem;
|
|
|
color: #808080;
|
|
|
}
|
|
|
.teacher_info {
|
|
@@ -288,25 +231,6 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-// .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;
|
|
@@ -327,15 +251,5 @@ export default {
|
|
|
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>
|