03/11 15:31

月报评论加老师评语

src/views/teacher/reportDetailNew.vue

@@ -8,9 +8,9 @@
         等几个学习维度，对学员的学习进度和掌握程度进行精准评估，有助于家长及时了解孩子的学习成果和老师有针对性的指导，不断提升学员的学习能力和音乐成就。
       </p>
     </div>
-    <div class="titleWrap">
+    <div class="titleWrap top">
       <img :src="imgList.title4" class="topTitleImg" alt />
-      <p>学习内容呈现的是老师本次课程教授的乐理，曲子及教材详情。</p>
+      <p class="topTitleP">学习内容呈现的是老师本次课程教授的乐理，曲子及教材详情。</p>
     </div>
     <div class="studyWrap">
       <div class="border">
@@ -85,7 +85,7 @@
     </div>
     <div class="titleWrap">
       <img :src="imgList.title2" alt />
-      <p>评价详情呈现的是老师就学员本组课程的练习表现、节奏准确度、音符准确度、节奏连贯度四个维度的具体评价。</p>
+      <p>评价详情呈现的是老师就学员本组课程的练习表现、气息运用、发音环节、教材演奏、节奏几个维度的具体评价。</p>
     </div>
     <div class="reportWrap1">
       <div class="border">
@@ -155,7 +155,7 @@
             {{ subjectJson['6'][item.six] }}
           </div>
 
-           <div style="width:100%" v-if="item.seven">
+          <div style="width:100%" v-if="item.seven">
             <p class="title">
               <img :src="imgList.squrt" class="squrt" alt />
               {{ subjectJson['7'].title}}
@@ -166,7 +166,7 @@
             {{ subjectJson['7'][item.seven] }}
           </div>
 
-            <div style="width:100%" v-if="item.eight">
+          <div style="width:100%" v-if="item.eight">
             <p class="title">
               <img :src="imgList.squrt" class="squrt" alt />
               {{ subjectJson['8'].title}}
@@ -179,12 +179,34 @@
         </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 { studyReport, getReviewsInfo } from "@/api/teacher";
 import { subjectJson } from "@/utils/questionJson";
 export default {
   data() {
@@ -193,7 +215,7 @@ export default {
         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"),
+        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"),
@@ -208,7 +230,7 @@ export default {
       },
       classGroupId: null,
       token: null,
-      strList: [],
+      comment: "",
       studentInfo: {
         name: "",
         subjectName: "",
@@ -219,10 +241,9 @@ export default {
       teacherInfo: {},
       item: [],
       subjectJson: subjectJson,
-      musicTheory:[],
-      song:'',
-      teachingMaterial:[]
-
+      musicTheory: [],
+      song: "",
+      teachingMaterial: []
     };
   },
   created() {
@@ -239,26 +260,29 @@ export default {
     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,
+          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,
-         
+          totalMinutes: res.data.data.totalMinutes
         };
         this.teacherInfo = {
-          teacherName: res.data.data.teacher&&res.data.data.teacher.name || "",
+          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
+          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
+        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.strList = res.data.data.comment.split("#");
-        console.log(this.item);
+        this.comment = res.data.data.comment;
         for (let key in this.item) {
           this.setIcon(this.subjectJson, this.item[key], key);
         }
@@ -322,7 +346,9 @@ export default {
   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;
 }
@@ -354,7 +380,7 @@ div {
     height: 0.77rem;
     position: absolute;
     right: -0.2rem;
-    top: -0.05rem;
+    top: -0.1rem;
   }
   .topWrap {
     background-color: #f6f6f6;
@@ -371,8 +397,11 @@ div {
       }
     }
   }
+  .titleWrap.top {
+    margin-bottom: 0.01rem;
+  }
   .titleWrap {
-    margin-bottom: 0.24rem;
+    margin-bottom: 0.14rem;
     img {
       width: 1.37rem;
       height: 0.74;
@@ -396,7 +425,7 @@ div {
       margin-bottom: 0.1rem;
       .logo1 {
         position: absolute;
-        top: -0.15rem;
+        top: -0.2rem;
         z-index: 20;
       }
       img {
@@ -431,7 +460,7 @@ div {
         background-color: #fff;
         display: flex;
         flex-direction: column;
-        padding-left: 0.4rem;
+        padding-left: 0.18rem;
         .theoryBox {
           display: flex;
           flex-direction: row;
@@ -558,6 +587,7 @@ div {
         display: flex;
         flex-direction: column;
         align-items: center;
+        padding-bottom: 0.15rem;
         .title {
           box-sizing: border-box;
           display: flex;
@@ -567,9 +597,10 @@ div {
           font-size: 0.18rem;
           height: 0.3rem;
           line-height: 0.3rem;
-          margin: 0.1rem 0;
+          margin: 0.15rem 0;
           padding: 0 0.16rem;
           color: #006b6b;
+          font-weight: bold;
           .squrt {
             width: 0.05rem;
             height: 0.22rem;
@@ -590,105 +621,110 @@ div {
           box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
           background-color: #fff;
           font-size: 0.12rem;
-          margin-bottom: 0.125rem;
+
           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;
+    // padding: 0 0.22rem;
+    // background: url("../../assets/images/start/box3.png") no-repeat;
     background-size: 100% 100%;
     width: 3.33rem;
-    min-height: 5.31rem;
+    // min-height: 5.31rem;
     display: flex;
     flex-direction: column;
     align-items: center;
-    .teacherWrap {
-      margin-top: 0.6rem;
-      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: 2.5rem;
-      max-height: 3.2rem;
-      overflow: scroll;
-      padding: 0.16rem 0.08rem 0.22rem;
-      background-color: #f6f6f6;
+    .border {
+      width: 100%;
+      background-color: #2dc5c5;
+      min-height: 200px;
       border-radius: 5px;
-      margin-top: 0.24rem;
-      p {
+      padding: 0.18rem;
+      margin-bottom: 0.1rem;
+      .boxWrap {
+        background-color: #fff;
+        padding: 0 0.14rem;
         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;
+        flex-direction: column;
+        align-items: center;
+        padding-bottom: 0.27rem;
+        border-radius: 0 0 10px 10px;
+        .teacherWrap {
+          width: 100%;
+          top: -0.1rem;
           position: relative;
-          top: 2px;
-        }
-        span {
-          width: 2.25rem;
-          font-size: 0.12rem;
-          line-height: 0.18rem;
-          color: #666;
-        }
-        .num1 {
-          background: url("../../assets/images/start/1.png") no-repeat;
-          background-size: 100% 100%;
-        }
-        .num2 {
-          background: url("../../assets/images/start/2.png") no-repeat;
-          background-size: 100% 100%;
-        }
-
-        .num3 {
-          background: url("../../assets/images/start/3.png") no-repeat;
-          background-size: 100% 100%;
+          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;
+            }
+          }
         }
-
-        .num4 {
-          background: url("../../assets/images/start/4.png") no-repeat;
-          background-size: 100% 100%;
+        .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;
-
+    width: 1.21rem !important;
+    vertical-align: middle;
+  }
+  .topTitleP {
+    position: relative;
+    top: -0.1rem;
   }
   .button {
     width: 3.2rem;

src/views/teacher/studyReportNew.vue

@@ -24,7 +24,12 @@
                   :value="item.str"
                   @click="item.show = true"
                 />
-                <van-popup v-model="item.show" position="bottom" :overlay="true" get-container="#app">
+                <van-popup
+                  v-model="item.show"
+                  position="bottom"
+                  :overlay="true"
+                  get-container="#app"
+                >
                   <van-picker
                     show-toolbar
                     :columns="theoryList"
@@ -223,6 +228,15 @@
           </div>
         </div>
       </div>
+      <div class="nextCard">
+        <p class="title commitTitle">
+          <img :src="imgList.squrt" class="squrts" alt />
+          授课内容
+        </p>
+        <div class="commitWrap">
+          <van-field v-model="comment" rows="3" autosize type="textarea" placeholder="学员表现的怎么样？填写评语能让学员更清楚自己 的优点和美中不足的地方哦～" />
+        </div>
+      </div>
     </div>
     <div class="submit" @click="submietInfo">
       <img :src="imgList.btn" width="100%" alt />
@@ -233,7 +247,7 @@
 <script>
 import { subjectJson } from "@/utils/questionJson";
 import { browser } from "@/common/common";
-import {findTeacherClassGroupInfo,addStudyReport1  } from "@/api/teacher"
+import { findTeacherClassGroupInfo, addStudyReport1 } from "@/api/teacher";
 export default {
   data() {
     return {
@@ -278,8 +292,9 @@ export default {
       six: "",
       seven: "",
       eight: "",
-      subjectName:null,
-      id:''
+      subjectName: null,
+      id: "",
+      comment:''
     };
   },
   created() {
@@ -295,7 +310,7 @@ export default {
     // }
     findTeacherClassGroupInfo({ classGroupId: this.classGroupId }).then(res => {
       if (res.data.code == 200) {
-          this.subjectName = res.data.data.subjectNames;
+        this.subjectName = res.data.data.subjectNames;
       }
     });
   },
@@ -340,6 +355,7 @@ export default {
         eight: this.eight
       };
       let id = this.id || null;
+      let comment = this.comment || null;
       addStudyReport1({
         classGroupId: this.classGroupId,
         item: this.item,
@@ -347,12 +363,13 @@ export default {
         musicTheory: this.hasTheory,
         teachingMaterial: this.teaching,
         version: 2,
+        comment:this.comment,
         id
       }).then(res => {
         if (res.data.code == 200) {
           this.$toast("提交成功");
           setTimeout(() => {
-           this.onAppBack()
+            this.onAppBack();
           }, 2000);
         } else {
           this.$toast(res.data.msg);
@@ -410,6 +427,13 @@ div {
       flex-direction: column;
       justify-content: center;
       padding-bottom: 0.24rem;
+      .commitTitle {
+        position: relative!important;
+        margin-bottom:.17rem!important; 
+      }
+      .commitWrap {
+        padding: 0.1rem;
+      }
       .topNote {
         z-index: 1;
       }
@@ -426,6 +450,7 @@ div {
         line-height: 0.22rem;
         margin-bottom: 0.365rem;
         color: #808080;
+        font-weight: bold;
         .squrts {
           width: 0.05rem;
           height: 0.22rem;
@@ -467,7 +492,7 @@ div {
               top: 0.04rem;
             }
             .bookIcon {
-                  width: 0.16rem;
+              width: 0.16rem;
               height: 0.19rem;
               position: relative;
               top: 0.04rem;
@@ -545,6 +570,8 @@ div {
       width: 0.26rem;
       height: 0.26rem;
       margin: 0 0.105rem;
+      display: block;
+      flex: 1;
     }
   }
   .submit {
@@ -562,10 +589,9 @@ div {
     bottom: 0;
     z-index: 1;
   }
-
 }
 .van-overflow-hidden {
-    z-index: 0;
-    position: relative;
+  z-index: 0;
+  position: relative;
 }
 </style>