02/20 19:19

提交测试

src/views/teacher/reportDetail.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="container">
     <div class="topWrap">
+      <p class="tTilte" style="font-size:.17rem;">什么是学习报告：</p>
       <p>
-        陪练报告是 展示孩子目前综合的练习进度，与本节陪练课表现的总结反馈，陪练老师将在课后24小时内完成填写。
-        <br />陪练报告分为四个部分，分别是
+        阶段性课时完成后，我们将围绕
         <span>练习表现、节奏准确度、音符准确度、演奏连贯度。</span>
-        <br />除了方便家长和主课老师跟踪孩子目前进度外，也能帮助孩子进行课后回顾，巩固练习效果。
+       等四个学习维度，对学员的学习进度和掌握程度进行精准评估，有助于家长及时了解孩子的学习成果和老师有针对性的指导，不断提升学员的学习能力和音乐成就。
       </p>
     </div>
     <div class="titleWrap">
       <img :src="imgList.title1" alt />
-      <p>报告概览呈现的是小朋友目前综合的练习进度，提升小朋友练习的成就感，鼓励小朋友再接再厉。</p>
+      <p>报告概览呈现的是学员目前综合的练习进度，提升小朋友练习的成就感，鼓励小朋友再接再厉。</p>
     </div>
     <div class="reportWrap">
       <div class="border">
@@ -28,11 +28,11 @@
           <div class="studentTimeWrap">
             <div style="margin-right:.22rem">
               <p class="timeP">6</p>
-              <p class="descP">本轮练习（次）</p>
+              <p class="descP">练习次数（次）</p>
             </div>
             <div>
               <p class="timeP">180</p>
-              <p class="descP">本轮练习时长（分钟）</p>
+              <p class="descP">练习时长（分钟）</p>
             </div>
           </div>
           <div class="assess">
@@ -43,12 +43,12 @@
     </div>
     <div class="titleWrap">
       <img :src="imgList.title2" alt />
-      <p>评分详情呈现的是老师就小朋友本组课程的练习表现，节奏准确度，音符准确度，节奏连贯度四个方面的具体评分。</p>
+      <p>评分详情呈现的是老师就学员本组课程的练习表现，节奏准确度，音符准确度，节奏连贯度四个方面的具体评分。</p>
     </div>
     <div class="reportWrap1">
-      <div class="border">
+
         <div class="imgBox1">
-          <div style="width:100%;  position: relative;">
+          <div style="width:100%;  position: relative; margin-top:.1rem">
             <img :src="imgList.logo" class="logo" alt />
             <p class="title">
               <img :src="imgList.squrt" class="squrt" alt />
@@ -90,7 +90,6 @@
             节奏优异！堪称人肉节拍器！
           </div>
         </div>
-      </div>
     </div>
     <div class="titleWrap">
       <img :src="imgList.title3" alt />
@@ -98,21 +97,25 @@
     </div>
     <div class="reportWrap2">
       <div class="boxWrap">
-          <div class="teacherWrap">
-            <img :src="imgList.logo" class="logo" alt />
-            <div class="left">
-              <img :src="imgList.default_head_img" alt />
-            </div>
-            <div class="right">
-              <p class="name">李小明</p>
-              <p class="subject">长笛</p>
-            </div>
+        <div class="teacherWrap">
+          <img :src="imgList.logo" class="logo" alt />
+          <div class="left">
+            <img :src="imgList.default_head_img" alt />
+          </div>
+          <div class="right">
+            <p class="name">李小明</p>
+            <p class="subject">长笛</p>
           </div>
+        </div>
+        <div class="textWrap">{{str}}</div>
       </div>
     </div>
+    <div class="button">继续学习</div>
   </div>
 </template>
 <script>
+import { browser } from "@/common/common";
+import { addStudyReport } from "@/api/teacher";
 export default {
   data() {
     return {
@@ -127,12 +130,41 @@ export default {
         normal: require("@/assets/images/start/normal.png"),
         squrt: require("@/assets/images/start/squrt.png"),
         btn: require("@/assets/images/start/button.png")
-      }
+      },
+      classGroupId:null,
+      str:'我是最帅的</br>哈哈哈'
     };
+  },
+  created(){
+     this.classGroupId = this.$route.query.classGroupId;
+     this.token = localStorage.getItem('Authorization')
+     this.token = 'bearer+585ca4d9-683b-49ab-8025-463e4b8a998f'
+    if (!this.token || !this.classGroupId) {
+      this.onAppBack()
+      return
+    }
+    
+  },
+  methods:{
+      onAppBack() {
+      if (browser().android) {
+        DAYA.postMessage(JSON.stringify({ api: "back" }));
+      } else if (browser().iPhone) {
+        window.webkit.messageHandlers.DAYA.postMessage(
+          JSON.stringify({ api: "back" })
+        );
+      }
+    }
   }
 };
 </script>
 <style lang="less">
+@font-face{
+    font-family: myFirstFont;
+    src: url('../../assets/images/start/din-bold.otf'),
+         url('../../assets/images/start/din-bold.otf'); /* IE9+ */
+}
+
 div {
   box-sizing: border-box;
 }
@@ -141,6 +173,7 @@ div {
   box-sizing: border-box;
   background-color: #fff;
   padding-top: 0.2rem;
+  padding-bottom: 0.36rem;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -182,23 +215,15 @@ div {
     width: 100%;
     padding: 0 0.22rem;
     margin-bottom: 0.28rem;
-    .border {
-      width: 100%;
-      background-color: #61c2c4;
-      height: 4rem;
-      border-radius: 5px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
       .imgBox {
-        width: 2.9rem;
+        width: 3.3rem;
         height: 3.5rem;
         background: url("../../assets/images/start/box1.png") no-repeat;
         background-size: 100% 100%;
-        margin-top: 0.22rem;
+        // margin-top: 0.22rem;
         display: flex;
         flex-direction: column;
-        padding: 0.5rem 0.13rem;
+        padding: 0.5rem 0.35rem;
         .studentWrap {
           position: relative;
           display: flex;
@@ -227,13 +252,14 @@ div {
         }
         .studentTimeWrap {
           padding: 0 0.08rem;
-          margin-top: 0.24rem;
+          margin-top: 0.2rem;
           display: flex;
           flex-direction: row;
           justify-content: flex-start;
-          margin-bottom: 0.22rem;
+          margin-bottom: 0.15rem;
           div {
             .timeP {
+              font-family: myFirstFont,Microsoft YaHei;
               font-size: 0.4rem;
               font-weight: bold;
               color: rgba(51, 51, 51, 1);
@@ -246,13 +272,14 @@ div {
               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.08rem;
@@ -269,34 +296,28 @@ div {
     width: 100%;
     padding: 0 0.22rem;
     margin-bottom: 0.28rem;
-    .border {
-      width: 100%;
-      background-color: #61c2c4;
-      height: 5rem;
-      border-radius: 5px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
 
       .imgBox1 {
+
         position: relative;
-        width: 2.9rem;
+        width: 3.3rem;
         height: 4.625rem;
         background: url("../../assets/images/start/box2.png") no-repeat;
         background-size: 100% 100%;
-        margin-top: 0.22rem;
         display: flex;
         flex-direction: column;
         align-items: center;
-        padding: 0.5rem 0.13rem;
+        padding: 0.5rem 0.22rem;
         .title {
+          box-sizing: border-box;
           display: flex;
           flex-direction: row;
           justify-content: flex-start;
           font-size: 0.21rem;
-          height: 0.22rem;
-          line-height: 0.22rem;
-          margin-bottom: 0.17rem;
+          height: 0.3rem;
+          line-height: 0.3rem;
+          margin: 0.12rem 0;
+          padding: 0 .16rem;
           color: #000;
           .squrt {
             width: 0.05rem;
@@ -310,8 +331,9 @@ div {
         }
         .cell {
           width: 2.6rem;
-          height: 0.42rem;
-          line-height: 0.42rem;
+          height: .36rem;
+          line-height: .36rem;
+            box-sizing: border-box;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
@@ -322,7 +344,7 @@ div {
           box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
           background-color: #fff;
           font-size: 0.12rem;
-          margin-bottom: 0.245rem;
+          // margin-bottom: 0.245rem;
           border: 1px solid transparent;
           .icons {
             width: 0.22rem;
@@ -330,7 +352,7 @@ div {
             margin: 0 0.105rem;
           }
         }
-      }
+      
     }
   }
   .reportWrap2 {
@@ -338,35 +360,62 @@ div {
     background: url("../../assets/images/start/box3.png") no-repeat;
     background-size: 100% 100%;
     width: 3.33rem;
-    min-height:5.31rem ;
-     .teacherWrap {
-       margin-top: .6rem;
-       padding: 0 .13rem;
-          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;
-            }
-          }
+    min-height: 5.31rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .teacherWrap {
+      margin-top: 0.6rem;
+      padding: 0 0.13rem;
+      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;
+      min-height: 2.8rem;
+      padding: 0.16rem 0.13rem 0.22rem;
+      background-color: #f6f6f6;
+      border-radius: 5px;
+      margin-top: 0.24rem;
+    }
+  }
+  .button {
+    width: 3.2rem;
+    height: .5rem;
+    line-height: .5rem;
+    text-align: center;
+    margin-top: .27rem;
+    font-size:.18rem;
+    color: #fff;
+    background: linear-gradient(
+      90deg,
+      rgba(97, 194, 196, 1) 0%,
+      rgba(62, 174, 176, 1) 100%
+    );
+    border-radius: .25rem;
   }
 }
 </style>

src/views/teacher/studyReport.vue

@@ -66,7 +66,7 @@
       </div>
       <div class="cell" :class="four==2?'activce':''" @click="four=2">
         <img :src="imgList.good" class="icons" alt />
-        良好！多注意乐句末多音符时值哦！
+        良好！多注意乐句末的音符时值哦！
       </div>
       <div class="cell" :class="four==3?'activce':''" @click="four=3">
         <img :src="imgList.normal" class="icons" alt />
@@ -79,7 +79,7 @@
   </div>
 </template>
 <script>
-import { browser }  from '@/common/common'
+import { browser } from "@/common/common";
 import { addStudyReport } from "@/api/teacher";
 // addStudyReport
 export default {
@@ -99,71 +99,100 @@ export default {
       four: "",
       json: {
         one: {
-          "1": "保持日常练习，与老师良好的互动是进步的开始 ！稳定的节奏就像是音乐的脉搏，搭配良好的音符准确度，也许将来会成为职业音乐家也不一定哦！",
-          "2": "保持日常练习，与老师良好的互动是进步的开始 ！稳定的节奏就像是音乐的脉搏，搭配良好的音符准确度，也许将来会成为职业音乐家也不一定哦！",
-          "3": "专注是进步的基石，练习在“精”不在“长”，打开节拍器练习，认真读谱再演奏，高质量的练习会让你在课程中突飞猛进！"
+          "1":
+            "保持日常练习，与老师良好的互动是进步的开始 ！稳定的节奏就像是音乐的脉搏，搭配良好的音符准确度，也许将来会成为职业音乐家也不一定哦！",
+          "2":
+            "练习时不要怕出错，有疑问时也多多提出，问题的改正+疑惑的解开会让你有意想不到的收获！",
+          "3":
+            "专注是进步的基石，练习在“精”不在“长”，打开节拍器练习，认真读谱再演奏，高质量的练习会让你在课程中突飞猛进！"
         },
         two: {
-          "1": "节奏是音乐的心跳，恭喜你有一颗良好跳动的音乐之心！保持你的优势，同时提升其他方面综合水平，相信未来的你会更好！",
-          "2": "节奏是音乐的心跳，恭喜你有一颗良好跳动的音乐之心！保持你的优势，同时提升其他方面综合水平，相信未来的你会更好！",
-          "3": "俗话说“错音不错节奏”，音乐的风格与律动与节奏有着离不开的关系，建议平时多使用节拍器练习，想要提升节奏稳定度，一定要“慢”不要“快”！"
+          "1":
+            "节奏是音乐的心跳，恭喜你有一颗良好跳动的音乐之心！保持你的优势，同时提升其他方面综合水平，相信未来的你会更好！",
+          "2":
+            "节拍器是练习的好帮手！在它的帮助下会让你的节奏更精准，现阶段要注意休止符空拍准确和长音演奏的饱满。",
+          "3":
+            "俗话说“错音不错节奏”，音乐的风格与律动与节奏有着离不开的关系，建议平时多使用节拍器练习，想要提升节奏稳定度，一定要“慢”不要“快”！"
         },
         three: {
-          "1": "识谱能力非凡的你，在日常练习中可以针对其他环节做更多的练习，音乐是多元素的艺术表现方式，综合能力的提升才是硬道理！",
-          "2": "识谱能力非凡的你，在日常练习中可以针对其他环节做更多的练习，音乐是多元素的艺术表现方式，综合能力的提升才是硬道理！",
-          "3": "识谱慢？没关系！你知道吗，管乐器常用的音符一共才不超过36呦！熟悉它们的位置，分清线上和线间，包你读谱赛神仙！"
+          "1":
+            "识谱能力非凡的你，在日常练习中可以针对其他环节做更多的练习，音乐是多元素的艺术表现方式，综合能力的提升才是硬道理！",
+          "2":
+            "重视每一个“小错误”，演奏前首先注意调号，还要关注临时变音记号通常会持续整个小，马马虎虎的话可是会谬以千里哦！",
+          "3":
+            "识谱慢？没关系！你知道吗，管乐器常用的音符一共才不超过36呦！熟悉它们的位置，分清线上和线间，包你读谱赛神仙！"
         },
         four: {
-          "1": "你的演奏行云流水！这一定离不开你对节奏的掌控跟快速准确的识谱，现在可以在曲目演奏过程中加上一些你对音乐的理解，音乐的表达是重要的一环哦！",
-          "2": "你的演奏行云流水！这一定离不开你对节奏的掌控跟快速准确的识谱，现在可以在曲目演奏过程中加上一些你对音乐的理解，音乐的表达是重要的一环哦！",
-          "3": "你的演奏行云流水！这一定离不开你对节奏的掌控跟快速准确的识谱，现在可以在曲目演奏过程中加上一些你对音乐的理解，音乐的表达是重要的一环哦！"
+          "1":
+            "你的演奏行云流水！现在可以在曲目演奏过程中加上一些你对音乐的理解，音乐的表达是重要的一环哦！",
+          "2":
+            "练习要目标明确，在不连贯的地方针对练习，会让你的练习更加高效！",
+          "3":
+            "经常卡壳？心急吃不了热豆腐，注意力集中的慢练才是“制胜法宝” ！"
         }
       },
-      classGroupId:null,
-      comment:null,
-      item:null,
+      classGroupId: null,
+      comment: null,
+      item: null
     };
   },
-  created(){
+  created() {
     this.classGroupId = this.$route.query.classGroupId;
-     this.token = localStorage.getItem('Authorization')
-     this.token = 'bearer+585ca4d9-683b-49ab-8025-463e4b8a998f'
+    this.token = localStorage.getItem("Authorization");
     if (!this.token || !this.classGroupId) {
-      this.onAppBack()
-      return
+      this.onAppBack();
+      return;
     }
   },
-  methods:{
-    
-    submietInfo(){
+  methods: {
+    submietInfo() {
       // console.log(this.one)
       // console.log(this.json.one[this.one])
-      if(!this.one || !this.two ||!this.three || !this.four){
-        this.$toast('请认真选择每一项')
+      if (!this.one || !this.two || !this.three || !this.four) {
+        this.$toast("请认真选择每一项");
         return;
       }
-      this.comment = this.json.one[this.one]+this.json.two[this.two]+this.json.three[this.three]+this.json.four[this.four]
-      this.item = this.one+','+this.two+','+this.three+','+this.four
-     addStudyReport({classGroupId:this.classGroupId,item:this.item,comment:this.comment}).then(res=>{
-       if(res.data.code == 200){
-         this.$toast('提交成功')
-         setTimeout(()=>{
-             this.onAppBack()
-         },2000)
-        
-       }else {
-         this.$toast(res.data.msg)
-       }
-     })
-      
+      this.comment =
+        this.json.one[this.one] +'#'+
+        this.json.two[this.two] +'#'+
+        this.json.three[this.three] +'#'+
+        this.json.four[this.four];
+      this.item =
+        this.one + "," + this.two + "," + this.three + "," + this.four;
+      addStudyReport({
+        classGroupId: this.classGroupId,
+        item: this.item,
+        comment: this.comment
+      }).then(res => {
+        if (res.data.code == 200) {
+          this.$toast("提交成功");
+          setTimeout(() => {
+            // this.$router.push({
+            //   path: "/studyReport",
+            //   query: { classGroupId: this.classGroupId }
+            // });
+            this.onAppBack();
+          }, 2000);
+        } else {
+          this.$toast(res.data.msg);
+          setTimeout(() => {
+            // this.$router.push({
+            //   path: "/studyReport",
+            //   query: { classGroupId: this.classGroupId }
+            // });
+          }, 2000);
+        }
+      });
     },
-      onAppBack() {
-            if(browser().android) {
-                DAYA.postMessage(JSON.stringify({api: 'back'}))
-            } else if(browser().iPhone) {
-                window.webkit.messageHandlers.DAYA.postMessage(JSON.stringify({api: 'back'}))
-            }
-        },
+    onAppBack() {
+      if (browser().android) {
+        DAYA.postMessage(JSON.stringify({ api: "back" }));
+      } else if (browser().iPhone) {
+        window.webkit.messageHandlers.DAYA.postMessage(
+          JSON.stringify({ api: "back" })
+        );
+      }
+    }
   }
 };
 </script>
@@ -226,7 +255,7 @@ export default {
     line-height: 0.42rem;
     white-space: nowrap;
     overflow: hidden;
-     text-overflow: ellipsis;
+    text-overflow: ellipsis;
     display: flex;
     flex-direction: row;
     align-items: center;