mteacher/src/views/audition/ManageEvaluation.vue

<template>
  <div class="wrap">
    <m-header v-if="headerStatus" />
    <div class="searchSection">
      <div class="searchDate">
        <div class="date startDate" @click="dateSection.status = true">
          开始
          <span>{{dateSection.showStartDate}}</span>
        </div>-
        <div class="date endDate" @click="dateEndSection.status = true">
          结束
          <span>{{dateEndSection.showEndDate}}</span>
        </div>
      </div>
      <!-- <div class="searchMore">
                筛选<i class="arrowDown"></i>
      </div>-->
      <van-dropdown-menu active-color="#14928A">
        <van-dropdown-item title="筛选" ref="item" v-model="search.status">
          <div class="dropList">
            <div class="dropItem">
              <p class="dropTitle">课程类型</p>
              <div class="radioGroup">
                <span :class="search.type=='PRACTICE'?'actived':''" @click="search.type='PRACTICE'">网管课</span>
                <span :class="search.type=='VIP'?'actived':''" @click="search.type='VIP'">VIP课</span>
                <span :class="search.type==0?'actived':''" @click="search.type=0" style="margin-top: .08rem">全部</span>
              </div>
            </div>
            <div class="dropItem">
              <p class="dropTitle">评价进度</p>
              <div class="radioGroup">
                <span :class="search.hasReview==0?'actived':''" @click="search.hasReview=0">待完成</span>
                <span :class="search.hasReview==1?'actived':''" @click="search.hasReview=1">已完成</span>
              </div>
            </div>
            <div class="dropItem">
              <p class="dropTitle">提交作业</p>
              <div class="radioGroup">
                <span
                  :class="search.hasHandHomework==1?'actived':''"
                  @click="search.hasHandHomework=1"
                >是</span>
                <span
                  :class="search.hasHandHomework==0?'actived':''"
                  @click="search.hasHandHomework=0"
                >否</span>
              </div>
            </div>
            <div class="dropItem">
              <p class="dropTitle">完成双向沟通</p>
              <div class="radioGroup">
                <span :class="search.hasLiaison==1?'actived':''" @click="search.hasLiaison=1">是</span>
                <span :class="search.hasLiaison==0?'actived':''" @click="search.hasLiaison=0">否</span>
              </div>
            </div>
            <div class="dropItem">
              <p class="dropTitle">学生是否到课</p>
              <div class="radioGroup">
                <span :class="search.hasArrived==1?'actived':''" @click="search.hasArrived=1">是</span>
                <span :class="search.hasArrived==0?'actived':''" @click="search.hasArrived=0">否</span>
              </div>
            </div>
          </div>
          <div class="btnGroup">
            <div class="btn btn-reset" @click="resetSerach">重置</div>
            <div class="btn btn-sure" @click="submitInfo">确定</div>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <div v-if="dataShow" key="data">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
        <van-cell
          v-for="(item,index) in courseList"
          :key="index"
          class="cellGroup"
          :title="item.classDate | filterClass"
          title-class="sectionTitle"
          value-class="sectionValue"
        >
          <template solt="default">
            <p class="content van-ellipsis">{{ item.courseName }}</p>
            <van-button
              type="primary"
              round
              size="small"
              v-if="item.reviewId==0"
              @click="submitReview(item)"
            >提交评价</van-button>
            <van-button
              type="primary"
              round class="van-update"
              size="small"
              v-if="item.reviewId>0"
              @click="submitReview(item)"
            >修改评价</van-button>
          </template>
        </van-cell>
      </van-list>
    </div>

    <m-empty class="empty" msg="暂无数据" v-else key="data" />

    <!-- 日期开始弹窗 -->
    <van-popup position="bottom" v-model="dateSection.status">
      <van-datetime-picker
        v-model="dateSection.currentDate"
        type="date"
        :min-date="dateSection.minDate"
        :max-date="dateSection.maxDate"
        :formatter="formatter"
        @confirm="confirmStartTime()"
        @cancel="cancelTime()"
      />
    </van-popup>
    <!-- 日期结束弹窗 -->
    <van-popup position="bottom" v-model="dateEndSection.status">
      <van-datetime-picker
        v-model="dateEndSection.currentDate"
        type="date"
        :min-date="dateSection.minDate"
        :max-date="dateSection.maxDate"
        :formatter="formatter"
        @confirm="confirmEndTime()"
        @cancel="cancelTime()"
      />
    </van-popup>

    <!-- <van-popup position="bottom" v-model="search.status"></van-popup> -->
  </div>
</template>
<script>
import MHeader from '@/components/MHeader'
import MEmpty from "@/components/MEmpty"
import { browser }  from '@/common/common'
import { getOnlineCourse } from "@/api/audition"
// SINGLE,MIX,HIGH,VIP,DEMO,COMPREHENSIVE,PRACTICE,ENLIGHTENMENT,TRAINING_SINGLE,TRAINING_MIX,CLASSROOM,COMM,HIGH_ONLINE,MUSIC_NETWORK
export default {
  name: "teacherList",
  components: { MHeader, MEmpty },
  data() {
    return {
      headerStatus: true,
      dateSection: {
        status: false,
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 10, 1),
        currentDate: null,
        showStartDate: null
      },
      dateEndSection: {
        status: false,
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 10, 1),
        currentDate: null,
        showEndDate: null
      },
      search: {
        status: false,
        hasReview: null,
        hasHandHomework: null,
        hasLiaison: null,
        hasArrived: null,
        type: null, //课程类型
      },
      courseList: [],
      loading: false,
      finished: false,
      dataShow: true, // 是否显示
      page: 1
    };
  },
  created() {
    let params = this.$route.query;
    if (params.Authorization) {
      localStorage.setItem("Authorization", decodeURI(params.Authorization));
      localStorage.setItem("userInfo", decodeURI(params.Authorization));
    }
  },
  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
    }
    this.dateSection.currentDate = new Date();
    this.dateSection.showStartDate = this.timeFormat(
      this.dateSection.currentDate
    );
    this.dateEndSection.currentDate = new Date();
    this.dateEndSection.showEndDate = this.timeFormat(
      this.dateEndSection.currentDate
    );
    let evaluationList = sessionStorage.getItem("evaluationList");
    if (evaluationList) {
      this.search = JSON.parse(evaluationList);
      this.dateSection.showStartDate = this.timeFormat(
        new Date(this.search.startTime.replace(/-/g, "/"))
      );
      this.dateSection.currentDate = new Date(this.search.startTime.replace(/-/g, "/"))
      this.dateEndSection.currentDate = new Date(this.search.endTime.replace(/-/g, "/"))
      this.dateEndSection.showEndDate = this.timeFormat(
        new Date(this.search.endTime.replace(/-/g, "/"))
      );
    }
  },
  methods: {
    formatter(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      } else if (type == "day") {
        return `${val}日`;
      }
      return val;
    },
    confirmStartTime() {
      this.dateSection.showStartDate = this.timeFormat(
        this.dateSection.currentDate
      );
      this.dataShow = true
      this.page = 1
      this.onRefresh();
      this.dateSection.status = false;
    },
    confirmEndTime() {
      this.dateEndSection.showEndDate = this.timeFormat(
        this.dateEndSection.currentDate
      );
      this.dataShow = true
      this.page = 1
      this.onRefresh();
      this.dateEndSection.status = false;
    },
    cancelTime() {
      this.dateEndSection.status = false;
      this.dateSection.status = false;
    },
    timeFormat(time) {
      // 时间格式化 2019-09-08
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      return year + "/" + month + "/" + day;
    },
    resetSerach() {
      this.search = {
        status: false,
        hasReview: null,
        hasHandHomework: null,
        hasLiaison: null,
        hasArrived: null,
        type: null
      };
    },
    submitInfo() {
      // 提交请求
      this.onRefresh();
      this.dataShow = true
      this.page = 1
      this.search.status = false;
      this.$refs.item.toggle();
    },
    getList() {
      this.loading = true;
      this.search.startTime =
        this.dateSection.showStartDate.replace(/\//g, "-") + " 00:00:00";
      (this.search.endTime =
        this.dateEndSection.showEndDate.replace(/\//g, "-") + " 23:59:59"),
        (this.search.page = this.page);
      this.search.type = this.search.type ? this.search.type : null
      this.search.rows = 20;
      getOnlineCourse(this.search).then(res => {
        let result = res.data;
        this.loading = false;
        if (result.code == 200) {
          sessionStorage.setItem("evaluationList", JSON.stringify(this.search));
          this.page = result.data.pageNo;
          this.courseList = this.courseList.concat(result.data.rows);
          if (this.page >= result.data.totalPage) {
            this.finished = true;
          }
          this.page++;
        } else {
          this.finished = true;
        }
        // 判断是否有数据
        if (this.courseList.length <= 0) {
          this.dataShow = false;
        }
      });
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      this.page = 1;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = false;
      this.courseList = [];
      this.getList();
    },
    submitReview(item) {
      this.$router.push({
        path: "/courseEvaluation",
        query: { id: item.id, reviewId: item.reviewId, isInside: true }
      });
    }
  },
  filters: {
    filterClass(val) {
      return val.substring(0, 10);
    }
  }
};
</script>
<style lang="less" scoped>
@import url("../../assets/commonLess/variable.less");
.wrap {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #F3F4F8;
}
/deep/.van-dropdown-item__content {
  height: 100%;
  max-height: 100%;
}
.searchSection {
  display: flex;
  justify-content: space-between;
  background: #fff;
  margin-bottom: 0.12rem;
  padding: .1rem 0.16rem;
  align-items: center;

  .searchDate {
    display: flex;
    align-items: center;
    color: #666666;
    height: auto;
    .startDate {
      margin-right: 0.05rem;
    }
    .endDate {
      margin-left: 0.05rem;
    }
    .date {
      padding: 0.02rem 0.06rem;
      border: 1px solid #e5e5e5;
      font-size: 0.14rem;
      color: #999999;
      span {
        padding-left: 0.04rem;
        font-size: 0.15rem;
        color: #666666;
      }
    }
  }
  /deep/.van-hairline--top-bottom::after,
  .van-hairline-unset--top-bottom::after {
    border-width: 0 0;
  }

  /deep/.van-dropdown-menu__title {
    font-size: 0.17rem;
    color: #1a1a1a;
    line-height: inherit;
    height: auto;
  }

  .btnGroup {
    display: flex;
    margin-top: 0.15rem;
    position: fixed;
    width: 100%;
    bottom: 0;
    .btn {
      width: 50%;
      text-align: center;
      font-size: 0.17rem;
      color: #000;
      padding: 0.12rem 0;
    }
    .btn-reset {
      background-color: #e1f6f4;
      color: #14928a;
    }
    .btn-sure {
      background-color: #14928a;
      color: #fff;
    }
  }
  .dropList {
    margin-bottom: .55rem;
  }
  .dropItem {
    padding: 0.1rem 0.16rem;
    .dropTitle {
      font-size: 0.17rem;
      color: #1a1a1a;
    }
    .radioGroup {
      display: flex;
      justify-content: space-between;
      padding-top: .08rem;
      flex-wrap: wrap;
      span {
        color: #000000;
        background-color: #f4f4f4;
        width: 48%;
        padding: .08rem 0;
        text-align: center;
        border-radius: 2px;
        &.actived {
          color: #14928a;
          background: url("../../assets/images/audition/icon_check.png")
            no-repeat bottom right #e4f6f5;
          background-size: 0.2rem;
        }
      }
    }
  }
}
.cellGroup {
  padding: 0.16rem;
  font-size: .14rem;
  line-height: .24rem;
}
.sectionTitle {
  font-size: 0.16rem;
  color: #808080;
  align-items: center;
  display: flex;
}
.sectionValue {
  display: flex;
  width: 70%;
  flex: 1 auto;
  justify-content: space-between;
  align-items: center;
  height: auto !important;
  .content {
    font-size: 0.17rem;
    color: #1a1a1a;
  }
  .van-button {
    font-size: 0.14rem;
    background-color: #14928a;
    border-color: #14928a;
    padding: 0 0.12rem;
    min-width: 0.88rem;
    height: .3rem;
    &.van-update {
      background-color: #fff;
      color: #14928a;
    }
  }
}
/deep/.van-cell__title {
  font-size: 0.14rem;
  color: @mFontColor;
  flex: 1 auto;
}
.logo {
  width: 0.35rem;
  height: 0.35rem;
  margin-right: 0.12rem;
  border-radius: 100%;
}
.input-cell {
  padding: 0.12rem 0.16rem 0.2rem;
  .van-radio {
    justify-content: flex-end;
  }
}
/deep/.van-cell__value {
  height: 0.2rem;
}
/deep/.van-radio__icon .van-icon {
  border-color: @sFontColor;
}
/deep/.van-radio__icon--checked {
  .van-icon {
    border-color: @orangeColor;
    background: @orangeColor;
  }
}
.van-tag {
  margin-left: 0.08rem;
}
.button-group {
  margin: 0.3rem 0.26rem 0.2rem;
  .van-button--primary {
    background: @mColor;
    border: 1px solid @mColor;
    font-size: 0.18rem;
  }
}
/deep/.van-dropdown-menu__bar {
  box-shadow: none;
}
</style>