mteacher/src/views/teacher/reportDetailNew.vue

<template>
  <div class="container">
    <div class="topWrap">
      <p class="tTilte" style="font-size:.17rem; margin-bottom:.08rem;">什么是学习报告：</p>
      <p>
        阶段性课时完成后，我们将围绕
        <span>练习表现、气息运用、发音环节、教材演奏、节奏</span>
        等几个学习维度，对学员的学习进度和掌握程度进行精准评估，有助于家长及时了解孩子的学习成果和老师有针对性的指导，不断提升学员的学习能力和音乐成就。
      </p>
    </div>
    <div class="titleWrap top">
      <img :src="imgList.title4" class="topTitleImg" alt />
      <p class="topTitleP">学习内容呈现的是老师本次课程教授的乐理，曲子及教材详情。</p>
    </div>
    <div class="studyWrap">
      <div class="border">
        <img :src="imgList.boxtitle1" width="100%" alt />
        <div class="borderContainer">
          <img :src="imgList.logo" class="logo1" alt />
          <div class="theoryBox">
            <div class="left">
              <img :src="imgList.theoryIcon" class="theoryIcon" alt />
            </div>
            <div class="right">
              <p class="subTitle">乐理</p>
              <p class="desc" v-for="(item,index) in musicTheory" :key="index">{{item.str}}</p>
            </div>
          </div>
          <div class="theoryBox">
            <div class="left">
              <img :src="imgList.muiscIcon" class="muiscIcon" alt />
            </div>
            <div class="right">
              <p class="subTitle">曲子</p>
              <p class="desc">{{ song }}</p>
            </div>
          </div>
          <div class="theoryBox">
            <div class="left">
              <img :src="imgList.bookIcon" class="bookIcon" alt />
            </div>
            <div class="right">
              <p class="subTitle">教材</p>
              <p class="desc" v-for="(item,index) in teachingMaterial" :key="index">{{item.str}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="titleWrap">
      <img :src="imgList.title1" alt />
      <p>报告概览呈现的是学员本阶段的练习频率及累计时长，演奏技能的提升离不开日积月累的练习哦！</p>
    </div>
    <div class="reportWrap">
      <div class="border">
        <div class="imgBox">
          <div class="studentWrap">
            <img :src="imgList.logo" class="logo" alt />
            <div class="left">
              <img :src="studentInfo.avatar" alt />
            </div>
            <div class="right">
              <p class="name">{{ studentInfo.name }}</p>
              <p class="subject">{{ studentInfo.subjectName }}</p>
            </div>
          </div>
          <div class="studentTimeWrap">
            <div style="margin-right:.22rem">
              <p class="timeP">{{ studentInfo.times }}</p>
              <p class="descP">练习次数（次）</p>
            </div>
            <div>
              <p class="timeP">{{ studentInfo.totalMinutes }}</p>
              <p class="descP">练习时长（分钟）</p>
            </div>
          </div>
          <div class="assess">
            <p>
              本次
              <span>练习表现优异，进步很大，希望持之以恒，</span> 要继续加油哦！
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="titleWrap">
      <img :src="imgList.title2" alt />
      <p>评价详情呈现的是老师就学员本组课程的练习表现、气息运用、发音环节、教材演奏、节奏几个维度的具体评价。</p>
    </div>
    <div class="reportWrap1">
      <div class="border">
        <img :src="imgList.boxtitle2" width="100%" alt />
        <div class="imgBox1">
          <div style="width:100%;  position: relative; margin-top:.1rem">
            <img :src="imgList.logo" class="logo1" alt />
            <p class="title">
              <img :src="imgList.squrt" class="squrt" alt />
              {{ subjectJson['1'].title}}
            </p>
          </div>
          <div class="cell">
            <img :src="subjectJson['1'].icon" class="icons" alt />
            {{ subjectJson['1'][item.one] }}
          </div>
          <div style="width:100%">
            <p class="title">
              <img :src="imgList.squrt" class="squrt" alt />
              {{ subjectJson['2'].title}}
            </p>
          </div>
          <div class="cell">
            <img :src="subjectJson['2'].icon" class="icons" alt />
            {{ subjectJson['2'][item.two] }}
          </div>
          <div style="width:100%">
            <p class="title">
              <img :src="imgList.squrt" class="squrt" alt />
              {{ subjectJson['3'].title}}
            </p>
          </div>
          <div class="cell">
            <img :src="subjectJson['3'].icon" class="icons" alt />
            {{ subjectJson['3'][item.three] }}
          </div>
          <div style="width:100%">
            <p class="title">
              <img :src="imgList.squrt" class="squrt" alt />
              {{ subjectJson['4'].title}}
            </p>
          </div>
          <div class="cell">
            <img :src="subjectJson['4'].icon" class="icons" alt />
            {{ subjectJson['4'][item.four] }}
          </div>

          <div style="width:100%">
            <p class="title">
              <img :src="imgList.squrt" class="squrt" alt />
              {{ subjectJson['5'].title}}
            </p>
          </div>
          <div class="cell">
            <img :src="subjectJson['5'].icon" class="icons" alt />
            {{ subjectJson['5'][item.five] }}
          </div>

          <div style="width:100%" v-if="item.six">
            <p class="title">
              <img :src="imgList.squrt" class="squrt" alt />
              {{ subjectJson['6'].title}}
            </p>
          </div>
          <div class="cell" v-if="item.six">
            <img :src="subjectJson['6'].icon" class="icons" alt />
            {{ subjectJson['6'][item.six] }}
          </div>

          <div style="width:100%" v-if="item.seven">
            <p class="title">
              <img :src="imgList.squrt" class="squrt" alt />
              {{ subjectJson['7'].title}}
            </p>
          </div>
          <div class="cell" v-if="item.seven">
            <img :src="subjectJson['7'].icon" class="icons" alt />
            {{ subjectJson['7'][item.seven] }}
          </div>

          <div style="width:100%" v-if="item.eight">
            <p class="title">
              <img :src="imgList.squrt" class="squrt" alt />
              {{ subjectJson['8'].title}}
            </p>
          </div>
          <div class="cell" v-if="item.eight">
            <img :src="subjectJson['8'].icon" class="icons" alt />
            {{ subjectJson['8'][item.eight] }}
          </div>
        </div>
      </div>
    </div>
    <div class="titleWrap">
      <img :src="imgList.title3" alt />
      <p>老师评语是老师就学员的练习情况给予的总结，鼓励学员再接再厉哦！</p>
    </div>
    <div class="reportWrap2">
      <div class="border">
        <img :src="imgList.boxtitle1" width="100%" alt />
        <div class="boxWrap">
          <div class="teacherWrap">
            <img :src="imgList.logo" class="logo2" alt />
            <div class="left">
              <img :src="teacherInfo.avatar" alt />
            </div>
            <div class="right">
              <p class="name">{{teacherInfo.teacherName }}</p>
              <p class="subject">{{teacherInfo.subjectName }}</p>
            </div>
          </div>
          <div class="textWrap">{{comment}}</div>
        </div>
      </div>
    </div>
    <!-- <div class="button">继续学习</div> -->
  </div>
</template>
<script>
import { browser } from "@/common/common";
import { studyReport, getReviewsInfo } from "@/api/teacher";
import { subjectJson } from "@/utils/questionJson";
export default {
  data() {
    return {
      imgList: {
        title1: require("@/assets/images/start/title1.png"),
        title2: require("@/assets/images/start/title2.png"),
        title3: require("@/assets/images/start/title3.png"),
        title4: require("@/assets/images/start/title4.png"),
        default_head_img: require("@/assets/images/default_head_img.png"),
        logo: require("@/assets/images/start/logo.png"),
        excellent: require("@/assets/images/start/excellent.png"),
        good: require("@/assets/images/start/good.png"),
        normal: require("@/assets/images/start/normal.png"),
        squrt: require("@/assets/images/start/squrt.png"),
        boxtitle2: require("@/assets/images/start/boxtitle2.png"),
        boxtitle1: require("@/assets/images/start/boxtitle1.png"),
        theoryIcon: require("@/assets/images/start/theory-icon.png"),
        muiscIcon: require("@/assets/images/start/muisc-icon.png"),
        bookIcon: require("@/assets/images/start/book-icon.png")
      },
      classGroupId: null,
      token: null,
      comment: "",
      studentInfo: {
        name: "",
        subjectName: "",
        times: "",
        totalMinutes: "",
        avatar: ""
      },
      teacherInfo: {},
      item: [],
      subjectJson: subjectJson,
      musicTheory: [],
      song: "",
      teachingMaterial: []
    };
  },
  created() {
    this.id = this.$route.query.id;
    let params = this.$route.query;
    if (params.Authorization) {
      localStorage.setItem("Authorization", decodeURI(params.Authorization));
      localStorage.setItem("userInfo", decodeURI(params.Authorization));
    }
    if (!this.id) {
      this.onAppBack();
      return;
    }
    getReviewsInfo({ id: this.id }).then(res => {
      if (res.data.code == 200) {
        this.studentInfo = {
          name: (res.data.data.student && res.data.data.student.username) || "",
          avatar:
            (res.data.data.student && res.data.data.student.avatar) ||
            this.imgList.default_head_img,
          subjectName: res.data.data.subjectName,
          times: res.data.data.times,
          totalMinutes: res.data.data.totalMinutes
        };
        this.teacherInfo = {
          teacherName:
            (res.data.data.teacher && res.data.data.teacher.name) || "",
          subjectName: res.data.data.subjectName,
          avatar:
            (res.data.data.teacher && res.data.data.teacher.headUrl) ||
            this.imgList.default_head_img
        };

        this.teachingMaterial = JSON.parse(res.data.data.teachingMaterial);
        this.musicTheory = JSON.parse(res.data.data.musicTheory);
        this.song = res.data.data.song;
        // 处理数据  1.item
        this.item = JSON.parse(res.data.data.item);
        this.comment = res.data.data.comment;
        for (let key in this.item) {
          this.setIcon(this.subjectJson, this.item[key], key);
        }

        // for (let i = 1; i <= this.item.length; i++) {
        //   this.setIcon(this.subjectJson, this.item[i - 1], i);
        // }
      }
    });
  },
  methods: {
    onAppBack() {
      if (browser().android) {
        DAYA.postMessage(JSON.stringify({ api: "back" }));
      } else if (browser().iPhone) {
        window.webkit.messageHandlers.DAYA.postMessage(
          JSON.stringify({ api: "back" })
        );
      }
    },
    setIcon(object, str, index) {
      let some = {
        one: 1,
        two: 2,
        three: 3,
        four: 4,
        five: 5,
        six: 6,
        seven: 7,
        eight: 8
      };

      switch (str) {
        case 1: {
          object[some[index]].icon = this.imgList.excellent;
          break;
        }
        case 2: {
          //  console.log( object[some[index]].icon)
          object[some[index]].icon = this.imgList.good;
          break;
        }
        case 3: {
          // console.log( object[some[index]].icon)
          object[some[index]].icon = this.imgList.normal;
          break;
        }
      }
      if (index == "seven" || index == "six") {
        object[some[index]].icon == this.imgList.good
          ? (object[some[index]].icon = this.imgList.normal)
          : object[some[index]].icon;
      }
    }
  }
};
</script>
<style lang="less" scoped>
@font-face {
  font-family: myFirstFont;
  src: url("../../assets/images/start/din-bold.otf"),
    url("../../assets/images/start/din-bold.otf"); /* IE9+ */
}
img {
  vertical-align: middle;
}
div {
  box-sizing: border-box;
}
.container {
  font-size: 0.14rem;
  box-sizing: border-box;
  background-color: #fff;
  padding-top: 0.2rem;
  padding-bottom: 0.36rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  .logo {
    width: 1.03rem;
    height: 0.77rem;
    position: absolute;
    right: -0.15rem;
    top: -0.2rem;
  }
  .logo1 {
    width: 1.03rem;
    height: 0.77rem;
    position: absolute;
    right: 0rem;
    top: -0.08rem;
  }
  .logo2 {
    width: 1.03rem;
    height: 0.77rem;
    position: absolute;
    right: -0.2rem;
    top: -0.1rem;
  }
  .topWrap {
    background-color: #f6f6f6;
    width: 3.51rem;
    border-radius: 10px;
    padding: 0.16rem;
    margin-bottom: 0.1rem;
    color: #333;
    p {
      font-size: 0.14rem;
      line-height: 0.23rem;
      span {
        color: #28babd;
      }
    }
  }
  .titleWrap.top {
    margin-bottom: 0.01rem;
  }
  .titleWrap {
    margin-bottom: 0.14rem;
    img {
      width: 1.37rem;
      height: 0.74;
    }
    p {
      color: #666;
      line-height: 0.2rem;
      padding: 0 0.22rem;
    }
  }
  .studyWrap {
    min-height: 200px;
    padding: 0 0.2rem;
    width: 100%;
    .border {
      width: 100%;
      background-color: #2dc5c5;
      min-height: 200px;
      border-radius: 5px;
      padding: 0.18rem;
      margin-bottom: 0.1rem;
      .logo1 {
        position: absolute;
        top: -0.2rem;
        z-index: 20;
      }
      img {
        vertical-align: middle;
        position: relative;

        top: 0.01rem;
      }
      .theoryIcon {
        width: 0.17rem;
        height: 0.17rem;
        position: relative;
        top: -0.02rem;
      }
      .muiscIcon {
        width: 0.17rem;
        height: 0.19rem;
        position: relative;
        top: -0.02rem;
      }
      .bookIcon {
        width: 0.16rem;
        height: 0.19rem;
        position: relative;
        top: -0.02rem;
      }
      .borderContainer {
        position: relative;
        border-radius: 0 0 10px 10px;
        z-index: 1;
        min-height: 200px;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        padding-left: 0.18rem;
        .theoryBox {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          margin-bottom: 0.25rem;
          .right {
            margin-left: 0.09rem;
            .subTitle {
              font-size: 0.13rem;
              color: #000;
            }
            .desc {
              font-size: 0.13rem;
              color: #808080;
              line-height: 0.2rem;
            }
          }
        }
      }
    }
  }
  .reportWrap {
    width: 100%;
    padding: 0 0.22rem;
    margin-bottom: 0.28rem;
    .imgBox {
      width: 3.3rem;
      height: 4rem;
      background: url("../../assets/images/start/box1.png") no-repeat;
      background-size: 100% 100%;
      // margin-top: 0.22rem;
      display: flex;
      flex-direction: column;
      padding: 0.74rem 0.35rem 0;
      .studentWrap {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        .left {
          width: 0.72rem;
          height: 0.72rem;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 0.13rem;
          img {
            width: 0.72rem;
            height: 0.72rem;
          }
        }
        .right {
          .name {
            font-size: 0.19rem;
          }
          .subject {
            font-size: 0.15rem;
          }
        }
      }
      .studentTimeWrap {
        padding: 0 0.08rem;
        margin-top: 0.2rem;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        margin-bottom: 0.3rem;
        div {
          .timeP {
            font-family: myFirstFont, Microsoft YaHei;
            font-size: 0.4rem;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            line-height: 0.45rem;
          }
          .descP {
            font-size: 0.13rem;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
            line-height: 0.2rem;
          }
        }
      }
      .assess {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #f6f6f6;
        p {
          box-sizing: border-box;
          padding: 0.17rem 0.13rem 0.17rem;
          width: 2.5rem;
          background: rgba(246, 246, 246, 1);
          border-radius: 5px;
          color: #666;
          span {
            font-weight: bold;
          }
        }
      }
    }
  }
  .reportWrap1 {
    width: 100%;
    padding: 0 0.22rem;
    // margin-bottom: 0.28rem;
    .border {
      width: 100%;
      background-color: #2dc5c5;
      min-height: 200px;
      border-radius: 5px;
      padding: 0.18rem;
      margin-bottom: 0.1rem;
      img {
        vertical-align: middle;
      }
      .imgBox1 {
        background-color: #fff;
        border-radius: 0 0 10px 10px;
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 0.15rem;
        .title {
          box-sizing: border-box;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          font-size: 0.18rem;
          height: 0.3rem;
          line-height: 0.3rem;
          margin: 0.15rem 0;
          padding: 0 0.16rem;
          color: #006b6b;
          font-weight: bold;
          .squrt {
            width: 0.05rem;
            height: 0.22rem;
            margin-right: 0.1rem;
          }
        }
        .cell.activce {
          border: 1px solid #28babd;
          color: #28babd;
        }
        .cell {
          width: 2.6rem;
          padding: 0.08rem 0.17rem 0.08rem 0;
          box-sizing: border-box;
          display: flex;
          flex-direction: row;
          border-radius: 10px;
          box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
          background-color: #fff;
          font-size: 0.12rem;

          border: 1px solid transparent;
          .icons {
            width: 0.22rem;
            height: 0.22rem;
            margin: 0 0.105rem;
            display: block;
            flex: 1;
          }
        }
      }
    }
  }
  .reportWrap2 {
    // padding: 0 0.22rem;
    // background: url("../../assets/images/start/box3.png") no-repeat;
    background-size: 100% 100%;
    width: 3.33rem;
    // min-height: 5.31rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    .border {
      width: 100%;
      background-color: #2dc5c5;
      min-height: 200px;
      border-radius: 5px;
      padding: 0.18rem;
      margin-bottom: 0.1rem;
      .boxWrap {
        background-color: #fff;
        padding: 0 0.14rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 0.27rem;
        border-radius: 0 0 10px 10px;
        .teacherWrap {
          width: 100%;
          top: -0.1rem;
          position: relative;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          .left {
            width: 0.72rem;
            height: 0.72rem;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 0.13rem;
            img {
              width: 0.72rem;
              height: 0.72rem;
            }
          }
          .right {
            .name {
              font-size: 0.19rem;
            }
            .subject {
              font-size: 0.15rem;
            }
          }
        }
        .textWrap {
          width: 100%;
          padding: 0.16rem 0.08rem 0.22rem;
          background-color: #f6f6f6;
          border-radius: 5px;
          margin-top: 0.1rem;
          min-height: 1.08rem;
          border-radius: 5px;
          p {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            margin-bottom: 0.1rem;
            i {
              display: block;
              width: 0.19rem;
              height: 0.16rem;
              margin-right: 0.06rem;
              position: relative;
              top: 2px;
            }
            span {
              width: 2.25rem;
              font-size: 0.12rem;
              line-height: 0.18rem;
              color: #666;
            }
          }
        }
      }
    }
  }
  .topTitleImg {
    width: 1.21rem !important;
    vertical-align: middle;
  }
  .topTitleP {
    position: relative;
    top: -0.1rem;
  }
  .button {
    width: 3.2rem;
    height: 0.5rem;
    line-height: 0.5rem;
    text-align: center;
    margin-top: 0.27rem;
    font-size: 0.18rem;
    color: #fff;
    background: linear-gradient(
      90deg,
      rgba(97, 194, 196, 1) 0%,
      rgba(62, 174, 176, 1) 100%
    );
    border-radius: 0.25rem;
  }
}
</style>