mteacher/src/views/trainStatistics/trainModel.vue

<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: 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 dayjs from "dayjs";
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,
    },
  },
  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();
    },
    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,
        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);
    },
    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();
    },
    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;
}
.calendarColor {
  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;
  }
}
.searchArray {
  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;
}
.box {
  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;
  }
}
.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;
  }
}

.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;
    font-size: 0.12rem;
  }
}
</style>