添加搜索条件

src/views/trainStatistics/index.vue

@@ -1,252 +1,259 @@
 <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" :playTime="playTime" :trainNum="trainNum" :active="active" :defaultTime="-1" />
-                </van-tab>
-            </van-tabs>
-        </van-sticky>
+  <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" :playTime="playTime" :trainNum="trainNum" :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>
+    <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 src="./images/v3.png" class="memberLogo" v-if="item.memberFlag" />
+              <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: 0.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 MEmpty from "@/components/MEmpty";
 // import dayjs from "dayjs";
 import { browser } from "@/common/common";
-import { countStudentTrain } from './api.js'
-import trainModel from './trainModel.vue'
-import { sysTenantConfig } from '../rules/api'
+import { countStudentTrain } from "./api.js";
+import trainModel from "./trainModel.vue";
+import { sysTenantConfig } from "../rules/api";
 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,
-            trainNum: 0,
-            playTime: 0,
-        };
-    },
-    created() {
-		this.tenantId = sessionStorage.getItem('tenantId') || null
-	},
-    async 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;
+  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,
+      trainNum: 0,
+      playTime: 0,
+    };
+  },
+  created() {
+    this.tenantId = sessionStorage.getItem("tenantId") || null;
+  },
+  async 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 = "训练统计";
+    try {
+      let res = await sysTenantConfig({ group: "DAYA_BASIC" });
+      const { data } = res;
+      data.forEach((item) => {
+        if (item.paramName == "student_cloud_teacher_train_num") {
+          this.trainNum = item.paranValue;
+        } else if (item.paramName == "student_cloud_teacher_total_play_time") {
+          this.playTime = item.paranValue;
         }
-        document.title = '训练统计'
-        try {
-            let res = await sysTenantConfig({ group: 'DAYA_BASIC' })
-            const { data } = res
-            data.forEach(item => {
-                if(item.paramName == 'student_cloud_teacher_train_num') {
-                    this.trainNum = item.paranValue
-                } else if(item.paramName == 'student_cloud_teacher_total_play_time') {
-                    this.playTime = item.paranValue
-                }
-            });
-        } catch(e) {}
-        // this.getList()
+      });
+    } catch (e) {}
+    // this.getList()
+  },
+  methods: {
+    onLoad(value) {
+      this.params = Object.assign(this.params, value);
+      this.onResetList();
     },
-    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,
-                    phone: item.phone,
-                    musicGroupName: item.musicGroupName,
-                    avatar: item.avatar,
-                    visitFlag: item.visitFlag
-                }
-            })
+    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,
+          phone: item.phone,
+          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;
-            }
+      });
+    },
+    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;
-    }
+  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;
+  font-size: 0.16rem;
 }
 /deep/.search .van-search {
-    margin: 10px 0 ;
+  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;
+  margin: 0.1rem 0.15rem 0;
+  border-radius: 0.1rem;
+  overflow: hidden;
+  .logo {
+    width: 0.4rem;
+    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: 0.03rem;
+  }
+  /deep/.van-grid-item__content {
+    background-color: transparent;
+  }
+  /deep/.van-grid-item__icon-wrapper {
+    font-size: 0.15rem;
+    font-weight: 500;
+    color: #000;
+  }
+  /deep/.van-grid-item__text {
+    padding-top: 0.03rem;
+    font-size: 0.12rem;
+    color: #808080;
+  }
+  .teacher_info {
+    position: relative;
+    display: flex;
+    align-items: center;
+    img {
+      margin-right: 0.1rem;
+      width: 0.4rem;
+      height: 0.4rem;
+      border-radius: 50%;
     }
-    .teacher_info {
-        display: flex;
-        align-items: center;
-        img {
-            margin-right: .1rem;
-            width: .4rem;
-            height: .4rem;
-            border-radius: 50%;
-        }
+    .memberLogo {
+      position: absolute;
+      left: 0.3rem;
+      top: -0.04rem;
+      width: 20px;
+      height: 20px;
     }
+  }
 }
 .btnWrap {
   display: flex;
@@ -268,5 +275,4 @@ export default {
     text-align: center;
   }
 }
-
-</style>
+</style>

src/views/trainStatistics/trainModel.vue

@@ -1,295 +1,334 @@
 <template>
-    <div class="trainModel">
-        <div class="visit-tips" v-show="activeType == 'visited'">
-            <span>上周训练时长不足{{ playTime }}分钟或训练次数小于{{ trainNum }}次的学员<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 class="trainModel">
+    <div class="visit-tips" v-show="activeType == 'visited'">
+      <span
+        >上周训练时长不足{{ playTime }}分钟或训练次数小于{{ trainNum }}次的学员<br />
+        需在每周三24:00前完成回访</span
+      >
     </div>
+    <search @onSearch="onSearch" placeholder="学生姓名或手机号">
+      <template #left>
+        <van-dropdown-menu style="padding-right: 0.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-cell title="学员类型" title-style="font-size: .14rem;" class="studentCell">
+              <van-radio-group v-model="memberFlag" direction="horizontal">
+                <van-radio name="">全部学员</van-radio>
+                <van-radio name="1">会员学员</van-radio>
+                <van-radio name="0">普通学员</van-radio>
+              </van-radio-group>
+            </van-cell>
+            <div style="padding: 14px 16px; display: flex">
+              <van-button block round @click="onReset" style="margin-right: 12px"> 重置 </van-button>
+              <van-button type="primary" block round @click="onSubmit"> 确认 </van-button>
+            </div>
+          </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: 0.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: 0.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: 0.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: 0.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 Search from "@/components/Search";
 import dayjs from "dayjs";
-import { getNowDateAndMonday, getNowDateAndSunday } from '@/common/common'
+import { getNowDateAndMonday, getNowDateAndSunday } from "@/common/common";
 export default {
-    props: {
-        active: {
-            type: String,
-            default: 'all'
-        },
-        defaultTime: {
-            type: Number,
-            default: 0
-        },
-        trainNum: {
-            type: [Number, String],
-            default: 0
-        },
-        playTime: {
-            type: [Number, String],
-            default: 0
-        },
+  props: {
+    active: {
+      type: String,
+      default: "all",
+    },
+    defaultTime: {
+      type: Number,
+      default: 0,
+    },
+    trainNum: {
+      type: [Number, String],
+      default: 0,
+    },
+    playTime: {
+      type: [Number, String],
+      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,
-            }
+  },
+  components: { Search },
+  data() {
+    return {
+      showCalendar: false,
+      minDate: new Date(2000, 0, 1),
+      defaultDate: [],
+      memberFlag: "",
+      // 类型为全部时
+      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();
     },
-    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"))
+    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;
         }
-        this.defaultDate = [new Date(startTime), new Date(endTime)]
-        this.startDay = startTime
-        this.endDay = endTime
-
-        this.onSort()
+      });
+      const searchType = ["totalPlayTime", "trainNum", "trainDay", "recordNum"];
+      let params = {
+        search: this.search,
+        memberFlag: this.memberFlag,
+        startTime: this.startDay,
+        endTime: this.endDay,
+        page: 1,
+        sort: searchType[currentIndex],
+        order: currentType,
+      };
+      this.$listeners.onLoad(params);
+    },
+    changeDropDownItemStatus() {
+      this.$refs.item.toggle(false);
     },
-    computed: {
-        calendarValue() {
-            return `${dayjs(this.startDay).format("YYYY/MM/DD")} - ${dayjs(this.endDay).format("YYYY/MM/DD")}`;
-        },
-        activeType() {
-            return this.active
+    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())];
     },
-    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
+    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();
+    },
+    onSubmit() {
+      this.changeDropDownItemStatus();
+      this.onAllFilter();
+    },
+    onReset() {
+      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.memberFlag = "";
+      this.onSubmit();
+    },
+    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;
+  border-color: transparent transparent #01c1b5 #01c1b5;
 }
 .calendarColor {
-    color: #333;
-    font-size: .14rem;
+  color: #333;
+  font-size: 0.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;
-    }
+  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;
+  font-size: 0.14rem;
+  padding-top: 0.15rem;
+  padding-bottom: 0.12rem;
+  color: #1a1a1a;
+  background-color: #f5f5f5;
 }
 .title-style {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .box {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-left: .02rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: 0.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;
-    }
+  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;
-    }
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 5px solid #ccc;
+  &.active {
+    border-top-color: #01c1b5;
+  }
+}
+
+.studentCell {
+  /deep/.van-cell__title {
+    flex-shrink: 0;
+    flex: auto;
+  }
+  /deep/.van-cell__value {
+    flex: 1 auto;
+  }
+  /deep/.van-radio-group--horizontal {
+    justify-content: flex-end;
+  }
 }
-</style>
+</style>