mteacher/src/views/trainStatistics/trainDetail.vue

<template>
  <div class="trainDetail">
    <van-sticky>
      <m-header v-if="headerStatus" :isFixed="false" />
    </van-sticky>

    <div class="evaluation">
      <van-cell style="padding: 16px 12px; background-color: transparent" :center="true">
        <template #title>
          <div class="teacher_info">
            <img class="logo" v-if="avatar" :src="avatar" alt="" />
            <img class="logo" v-else src="../../assets/images/icon_student.png" alt="" />
            <div class="teacher_content">
              <p style="color: #1a1a1a; font-size: 0.18rem">{{ username }}</p>
              <p style="font-size: 14px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 2.4rem">{{ musicGroupName }}</p>
            </div>
          </div>
        </template>
        <!-- <p style="font-size: 14px; color: #808080;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ musicGroupName }}</p> -->
      </van-cell>
    </div>

    <van-row class="dataSearch" type="flex" v-if="!visitFlag">
      <van-col span="9" offset="1">
        <van-cell @click="onChangeDate('showStart')" is-link>
          <template #right-icon>
            <van-icon :name="arrowIcon" class="search-icon" size="10" />
          </template>
          <template v-if="searchList.startTime">{{ searchList.startTime }}</template>
          <span v-else style="color: #adadad">开始日期</span>
        </van-cell>
      </van-col>
      <van-col span="1" class="flexCenter">-</van-col>
      <van-col span="9">
        <van-cell @click="onChangeDate('showEnd')">
          <template #right-icon>
            <van-icon :name="arrowIcon" class="search-icon" size="10" />
          </template>
          <template v-if="searchList.endTime">{{ searchList.endTime }}</template>
          <span v-else style="color: #adadad">结束日期</span>
        </van-cell>
      </van-col>
      <van-col span="4" class="flexCenter">
        <span class="btn-search" @click="onSearch">搜索</span>
      </van-col>
    </van-row>
    <van-popup v-model="dataForm.status" position="bottom" round :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 class="specialList" :class="{ bottomHeight: visitFlag }">
      <van-list v-model="loading" v-if="show" key="trainDetail" :finished="finished" finished-text="- 没有更多内容 -" :immediate-check="false" @load="getList()">
        <van-cell-group class="data-content" :border="false" v-for="(item, index) in dataList" :key="index" @click="showDetail(item)">
          <van-cell style="padding: 16px 12px" :center="true" title-style="flex-basis: 45%;">
            <template #title>
              <span style="font-size: 0.17rem; color: #333333; font-weight: 500; padding-right: 0.05rem; padding-bottom: 0.05rem">{{ item.sysMusicScoreName }}</span>
              <p style="font-size: 14px; color: #808080">{{ item.createTime }}</p>
            </template>
            <p>
              <img v-if="getLevelByScore(item.score) == 1" class="scoreImg" src="./images/1.png" alt="" />
              <img v-if="getLevelByScore(item.score) == 2" class="scoreImg" src="./images/2.png" alt="" />
              <img v-if="getLevelByScore(item.score) == 3" class="scoreImg" src="./images/3.png" alt="" />
            </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="综合得分" class="van-hairline--right">
                  <template #icon>{{ item.score }}分</template>
                </van-grid-item>
                <van-grid-item text="音准" class="van-hairline--right">
                  <template #icon>
                    <span style="color: #01c1b5" v-if="item.isPercussion">--</span>
                    <span style="color: #01c1b5" v-else>{{ item.intonation }}分</span>
                  </template>
                </van-grid-item>
                <van-grid-item text="节奏" class="van-hairline--right">
                  <template #icon>
                    <span style="color: #ff802c">{{ item.cadence }}分</span>
                  </template>
                </van-grid-item>
                <van-grid-item text="完成度">
                  <template #icon>
                    <span style="color: #f79c00" v-if="item.isPercussion">--</span>
                    <span style="color: #f79c00" v-else>{{ item.integrity }}分</span>
                  </template>
                </van-grid-item>
              </van-grid>
            </template>
          </van-cell>
        </van-cell-group>
      </van-list>
      <m-empty v-else key="trainDetail" msg="暂无训练详情" />

      <!-- 是否需要回访 -->
      <div class="button-group" v-if="visitFlag">
        <van-button type="primary" size="large" round @click="addVisited">添加回访</van-button>
        <div class="placeholder-btn"></div>
      </div>
    </div>
  </div>
</template>
<script>
import MHeader from "@/components/MHeader";
import MEmpty from "@/components/MEmpty";
import { postMessage } from "@/helpers/native-message";
import dayjs from "dayjs";
import { browser } from "@/common/common";
import { queryMusicCompareRecord } from "./api.js";
export default {
  components: { MHeader, MEmpty },
  data() {
    const query = this.$route.query;
    return {
      arrowIcon: require("./images/arrow_down.png"),
      headerStatus: true,
      show: true,
      avatar: query.avatar,
      username: query.username,
      musicGroupName: query.musicGroupName,
      visitFlag: Number(query.visitFlag) || 0,
      searchList: {
        startTime: null,
        endTime: null,
        userId: query.userId,
        page: 1,
        rows: 20,
      },
      dataForm: {
        // 时间下拉框
        type: null,
        status: false,
        minDate: new Date(2000, 0, 1),
        maxDate: new Date(2030, 11, 31),
        currentDate: new Date(),
      },
      dataList: [],
      loading: false,
      finished: false,
    };
  },
  mounted() {
    if (browser().android || browser().iPhone) {
      this.headerStatus = false;
    }
    document.title = "评测详情";
    this.getList();
  },
  methods: {
    addVisited() {
      this.$router.push({
        path: "/addVisit",
        query: {
          ...this.$route.query,
          type: "train",
          name: "新增回访记录",
        },
      });
    },
    showDetail(item) {
      if (item.notesDataIndex > 0) {
        const route = location.hostname.indexOf("dayaedu.com") ? "/accompany/" : "/accompany-teacher/";
        postMessage({
          api: "openWebView",
          content: {
            url: location.origin + route + `#/report/${item.id}`,
            orientation: 0,
            isHideTitle: true,
            statusBarTextColor: false,
            isOpenLight: true,
          },
        });
      } else {
        this.$toast("本次评测未生成报告");
      }
    },
    isRhythmicExercises(examSongName) {
      return examSongName.indexOf("节奏练习") > -1;
    },
    async getList() {
      try {
        let res = await queryMusicCompareRecord(this.searchList);
        let result = res.data;
        this.loading = false;
        // 重点这句，判断是不是重复请求了
        if (this.dataList.length > 0 && result.pageNo == 1) {
          return;
        }
        let rows = result.rows || [];
        this.dataList = this.dataList.concat(rows).map((item) => {
          item.isPercussion = [23, 113, 121].includes(item.subjectId) || this.isRhythmicExercises(item.sysMusicScoreName);
          return item;
        });
        if (this.searchList.page >= result.totalPage) {
          this.finished = true;
        }
        this.searchList.page++;
        if (this.dataList.length <= 0) {
          this.show = false;
        }
      } catch {
        this.show = false;
        this.finished = true;
      }
    },
    onSearch() {
      this.dataList = []; // 重置数据
      this.show = true;
      this.loading = true;
      this.finished = false;
      this.searchList.page = 1;
      this.getList();
    },
    onChangeDate(type) {
      let dataForm = this.dataForm;
      if (type == "showEnd" && this.searchList.startTime) {
        dataForm.minDate = new Date(dayjs(this.searchList.startTime));
        dataForm.maxDate = new Date(2030, 11, 31);
        setTimeout(() => {
          dataForm.currentDate = this.searchList.endTime ? new Date(dayjs(this.searchList.endTime)) : new Date();
        }, 500);
      } else if (type == "showStart" && this.searchList.endTime) {
        dataForm.minDate = new Date(2000, 0, 1);
        dataForm.maxDate = new Date(dayjs(this.searchList.endTime));
        setTimeout(() => {
          dataForm.currentDate = this.searchList.startTime ? new Date(dayjs(this.searchList.startTime)) : new Date();
        }, 500);
      }
      dataForm.status = true;
      dataForm.type = type;
    },
    chioseDate(value) {
      let dataForm = this.dataForm;
      if (dataForm.type == "showStart") {
        this.searchList.startTime = dayjs(value).format("YYYY-MM-DD");
      } else if (dataForm.type == "showEnd") {
        this.searchList.endTime = dayjs(value).format("YYYY-MM-DD");
      }
      dataForm.status = false;
    },
    formatter(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      } else if (type == "day") {
        return `${val}日`;
      }
      return val;
    },
    getLevelByScore(score) {
      let level = 3;
      if (score > 60 && score <= 80) {
        level = 2;
      } else if (score > 80) {
        level = 1;
      }
      return level;
    },
  },
};
</script>

<style lang="less" scoped>
.trainDetail {
  background: #f5f5f5;
  min-height: 100vh;
  overflow: hidden;
}
.evaluation {
  display: flex;
  align-items: center;
  margin: 0.12rem 0.12rem 0;
  height: 1.05rem;
  border-radius: 0.1rem;
  background: url("./images/user_bg.png") no-repeat center #fff;
  background-size: contain;

  .teacher_info {
    display: flex;
    align-items: center;
    img {
      margin-right: 0.15rem;
      width: 0.6rem;
      height: 0.6rem;
      border-radius: 50%;
    }
  }
}
.search-icon {
  display: flex;
  align-items: center;
}
.scoreImg {
  width: 66px;
  height: 25px;
}
.data-content {
  margin: 0.15rem 0.15rem 0;
  border-radius: 0.1rem;
  overflow: hidden;
  &: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 {
    display: flex;
    align-items: center;
    img {
      margin-right: 0.1rem;
      width: 0.4rem;
      height: 0.4rem;
      border-radius: 50%;
    }
  }
}
.specialList {
  padding-top: 0.1rem;
  // padding-bottom: calc(env(safe-area-inset-bottom) / 2);
  &.bottomHeight {
    padding-bottom: 65px;
  }
}
.dataSearch {
  padding: 0.12rem 0.12rem 0.05rem;
  background-color: #f5f5f5;
  /deep/.van-cell {
    background: #fff;
    padding: 0rem 0.16rem;
    border-radius: 1rem;
    overflow: hidden;
    height: 0.27rem;
    line-height: 0.27rem;
  }
  /deep/.van-cell__value--alone {
    text-align: center;
  }
  .flexCenter {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .btn-search {
    background: #01c1b5;
    font-size: 14px;
    color: #fff;
    padding: 3px 9px;
    border-radius: 15px;
  }
}
.button-group {
  overflow: hidden;
  position: fixed;
  bottom: 0;
  width: calc(100% - 0.24rem);
  z-index: 9;
  margin: 0 0.12rem 12px;
  .van-button--primary {
    background: #01c1b5;
    border: 1px solid #01c1b5;
    font-size: 0.16rem;
    float: right;
    // padding-bottom: calc(env(safe-area-inset-bottom) / 2);
    height: auto;
    line-height: 48px;
  }
}
</style>