02/19 18:21

111

dist/css/privacy.1d17fb2f.css

@@ -1 +0,0 @@
-.privacy[data-v-4ed2a664]{background:#fff}header[data-v-4ed2a664]{height:.4rem;line-height:.4rem;color:#000;font-size:.17rem;background:#fff;-webkit-box-shadow:0 1px 8px 0 rgba(0,0,0,.07);box-shadow:0 1px 8px 0 rgba(0,0,0,.07);text-align:center}header .back[data-v-4ed2a664]{width:.2rem;height:.2rem;position:absolute;left:.12rem;top:.1rem}.container[data-v-4ed2a664]{padding:.22rem .2rem .3rem;font-size:.14rem}.container h1[data-v-4ed2a664]{font-size:.16rem;text-align:center}.container h2[data-v-4ed2a664]{font-size:.16rem;font-weight:700;padding-top:.15rem}.container h3[data-v-4ed2a664]{font-size:.14rem;font-weight:700}.container .signature[data-v-4ed2a664]{display:-webkit-box;display:-ms-flexbox;display:flex;padding-top:.5rem}.container .signature .sign[data-v-4ed2a664]{-webkit-box-flex:1;-ms-flex:1;flex:1;position:relative}.container .signature span[data-v-4ed2a664]{display:block;padding-left:.2rem}.container .signature .cachet[data-v-4ed2a664]{position:absolute;top:-.6rem;left:0;width:1.5rem;height:1.5rem}.iInfo[data-v-4ed2a664]{display:-webkit-box;display:-ms-flexbox;display:flex}.iInfo span[data-v-4ed2a664]{-webkit-box-flex:1;-ms-flex:1;flex:1}.btnback[data-v-4ed2a664]{display:inline-block;font-size:.18rem;color:#fff;background:#f1111b;border-radius:.04rem;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.19);box-shadow:0 2px 4px 0 rgba(0,0,0,.19);padding:.08rem 0;margin-top:.8rem;width:100%;text-align:center}.line[data-v-4ed2a664]{border-bottom:1px solid #000}

src/api/teacher.js

@@ -247,6 +247,15 @@ const getactiveList = () => {
 
   })
 }
+const addStudyReport = () => {
+  return axios({
+    url: '/api-teacher/classGroup/addStudyReport ',
+    method: 'post',
+
+  })
+}
+
+// 提交陪练报告
 export {
   queryMyCreatedList,
   queryWaitList,
@@ -274,5 +283,6 @@ export {
   updateSubject,
   findVipSchoolByTeacher2,
   getFortuneBag,
-  getactiveList
+  getactiveList,
+  addStudyReport
 }

src/router/teacherRouter.js

@@ -182,6 +182,16 @@ let teacherRouter = [
       descrition: "陪练报告",
       weight: 8 // 页面权重
     }
+  },
+  {
+    path: "/reportDetail",
+    name: "reportDetail",
+    component: () =>
+      import(/* webpackChunkName: "privacy" */ "@/views/teacher/reportDetail"),
+    meta: {
+      descrition: "陪练报告",
+      weight: 8 // 页面权重
+    }
   }
 ];
 

src/views/teacher/reportDetail.vue

@@ -1,5 +1,219 @@
 <template>
-    <div>
-        报告详情
+  <div class="container">
+    <div class="topWrap">
+      <p>
+        陪练报告是 展示孩子目前综合的练习进度，与本节陪练课表现的总结反馈，陪练老师将在课后24小时内完成填写。
+        <br />陪练报告分为四个部分，分别是
+        <span>练习表现、节奏准确度、音符准确度、演奏连贯度。</span>
+        <br />除了方便家长和主课老师跟踪孩子目前进度外，也能帮助孩子进行课后回顾，巩固练习效果。
+      </p>
     </div>
-</template>
+    <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="imgList.default_head_img" alt />
+            </div>
+            <div class="right">
+              <p class="name">李小明</p>
+              <p class="subject">长笛</p>
+            </div>
+          </div>
+          <div class="studentTimeWrap">
+            <div style="margin-right:.22rem">
+              <p class="timeP">6</p>
+              <p class="descP">本轮练习（次）</p>
+            </div>
+            <div>
+              <p class="timeP">180</p>
+              <p class="descP">本轮练习时长（分钟）</p>
+            </div>
+          </div>
+          <div class="assess">
+            <p>小朋友本次练习表现优秀，要继续加油哦！小朋友本次练习表现优秀，要继续加油哦！</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="titleWrap">
+      <img :src="imgList.title2" alt />
+      <p>评分详情呈现的是老师就小朋友本组课程的练习表现，节奏准确度，音符准确度，节奏连贯度四个方面的具体评分。</p>
+    </div>
+    <div class="reportWrap">
+      <div class="border">
+        <div class="imgBox1">
+       
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      imgList: {
+        title1: require("@/assets/images/start/title1.png"),
+        title2: require("@/assets/images/start/title2.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"),
+        btn: require("@/assets/images/start/button.png")
+      }
+    };
+  }
+};
+</script>
+<style lang="less">
+div {
+  box-sizing: border-box;
+}
+.container {
+  font-size: 0.14rem;
+  box-sizing: border-box;
+  background-color: #fff;
+  padding-top: 0.2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .logo {
+    width: 1.03rem;
+    height: 0.77rem;
+    position: absolute;
+    right: -0.15rem;
+    top: -0.15rem;
+  }
+  .topWrap {
+    background-color: #f6f6f6;
+    width: 3.51rem;
+    min-height: 1.96rem;
+    border-radius: 10px;
+    padding: 0.22rem 0.16rem;
+    margin-bottom: 0.26rem;
+    p {
+      font-size: 0.14rem;
+      line-height: 0.23rem;
+      span {
+        color: #28babd;
+      }
+    }
+  }
+  .titleWrap {
+    margin-bottom: 0.24rem;
+    img {
+      width: 1.37rem;
+      height: 0.74;
+    }
+    p {
+      color: #666;
+      line-height: 0.2rem;
+      padding: 0 0.22rem;
+    }
+  }
+  .reportWrap {
+    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;
+        height: 3.5rem;
+        background: url("../../assets/images/start/box1.png") no-repeat;
+        background-size: 100% 100%;
+        margin-top: 0.22rem;
+        display: flex;
+        flex-direction: column;
+        padding: 0.5rem 0.13rem;
+        .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.24rem;
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          margin-bottom: 0.22rem;
+          div {
+            .timeP {
+              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;
+          p {
+              box-sizing: border-box;
+              padding: .17rem .13rem 0.08rem;
+            width: 2.5rem;
+            background: rgba(246, 246, 246, 1);
+            border-radius: 5px;
+            color: #666;
+          }
+        }
+      }
+      .imgBox1{
+         width: 2.9rem;
+        height: 3.5rem;
+        background: url("../../assets/images/start/box2.png") no-repeat;
+        background-size: 100% 100%;
+        margin-top: 0.22rem;
+        display: flex;
+        flex-direction: column;
+        padding: 0.5rem 0.13rem;
+      }
+    }
+  }
+}
+</style>

src/views/teacher/studyReport.vue

@@ -62,7 +62,7 @@
       </p>
       <div class="cell" :class="four==1?'activce':''" @click="four=1">
         <img :src="imgList.excellent" class="icons" alt />
-       非常棒！你演奏一气呵成！
+        非常棒！你演奏一气呵成！
       </div>
       <div class="cell" :class="four==2?'activce':''" @click="four=2">
         <img :src="imgList.good" class="icons" alt />
@@ -73,12 +73,15 @@
         继续努力！告诉自己，你一定能行的！
       </div>
     </div>
-    <div class='submit'>
-        <img :src="imgList.btn" width="100%" alt="">
+    <div class="submit" @click="submietInfo">
+      <img :src="imgList.btn" width="100%" alt />
     </div>
   </div>
 </template>
 <script>
+import { browser }  from '@/common/common'
+import { addStudyReport } from "@/api/teacher";
+// addStudyReport
 export default {
   data() {
     return {
@@ -88,13 +91,75 @@ export default {
         excellent: require("@/assets/images/start/excellent.png"),
         good: require("@/assets/images/start/good.png"),
         normal: require("@/assets/images/start/normal.png"),
-        btn: require("@/assets/images/start/button.png"),
+        btn: require("@/assets/images/start/button.png")
       },
-      one:'',
-      two:'',
-      three:'',
-      four:'',
+      one: "",
+      two: "",
+      three: "",
+      four: "",
+      json: {
+        one: {
+          "1": "保持日常练习，与老师良好的互动是进步的开始 ！稳定的节奏就像是音乐的脉搏，搭配良好的音符准确度，也许将来会成为职业音乐家也不一定哦！",
+          "2": "保持日常练习，与老师良好的互动是进步的开始 ！稳定的节奏就像是音乐的脉搏，搭配良好的音符准确度，也许将来会成为职业音乐家也不一定哦！",
+          "3": "专注是进步的基石，练习在“精”不在“长”，打开节拍器练习，认真读谱再演奏，高质量的练习会让你在课程中突飞猛进！"
+        },
+        two: {
+          "1": "节奏是音乐的心跳，恭喜你有一颗良好跳动的音乐之心！保持你的优势，同时提升其他方面综合水平，相信未来的你会更好！",
+          "2": "节奏是音乐的心跳，恭喜你有一颗良好跳动的音乐之心！保持你的优势，同时提升其他方面综合水平，相信未来的你会更好！",
+          "3": "俗话说“错音不错节奏”，音乐的风格与律动与节奏有着离不开的关系，建议平时多使用节拍器练习，想要提升节奏稳定度，一定要“慢”不要“快”！"
+        },
+        three: {
+          "1": "识谱能力非凡的你，在日常练习中可以针对其他环节做更多的练习，音乐是多元素的艺术表现方式，综合能力的提升才是硬道理！",
+          "2": "识谱能力非凡的你，在日常练习中可以针对其他环节做更多的练习，音乐是多元素的艺术表现方式，综合能力的提升才是硬道理！",
+          "3": "识谱慢？没关系！你知道吗，管乐器常用的音符一共才不超过36呦！熟悉它们的位置，分清线上和线间，包你读谱赛神仙！"
+        },
+        four: {
+          "1": "你的演奏行云流水！这一定离不开你对节奏的掌控跟快速准确的识谱，现在可以在曲目演奏过程中加上一些你对音乐的理解，音乐的表达是重要的一环哦！",
+          "2": "你的演奏行云流水！这一定离不开你对节奏的掌控跟快速准确的识谱，现在可以在曲目演奏过程中加上一些你对音乐的理解，音乐的表达是重要的一环哦！",
+          "3": "你的演奏行云流水！这一定离不开你对节奏的掌控跟快速准确的识谱，现在可以在曲目演奏过程中加上一些你对音乐的理解，音乐的表达是重要的一环哦！"
+        }
+      },
+      classGroupId:null,
+      comment:null,
+      item:null,
     };
+  },
+  created(){
+    this.classGroupId = this.$route.query.classGroupId;
+     this.token = localStorage.getItem('userInfo')
+    if (!this.token || !this.classGroupId) {
+      this.onAppBack()
+      return
+    }
+  },
+  methods:{
+    
+    submietInfo(){
+      // console.log(this.one)
+      // console.log(this.json.one[this.one])
+      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.code == 200){
+         this.$toast('提交成功')
+          this.onAppBack()
+       }else {
+         this.$toast(res.msg)
+       }
+     })
+      
+    },
+      onAppBack() {
+            if(browser().android) {
+                DAYA.postMessage(JSON.stringify({api: 'back'}))
+            } else if(browser().iPhone) {
+                window.webkit.messageHandlers.DAYA.postMessage(JSON.stringify({api: 'back'}))
+            }
+        },
   }
 };
 </script>
@@ -108,8 +173,6 @@ export default {
   flex-direction: column;
   align-items: center;
   .topBanner {
-    padding-left: 0.41rem;
-    padding-right: 0.16rem;
     position: relative;
     top: 0.1rem;
   }
@@ -165,15 +228,15 @@ export default {
     background-color: #fff;
     font-size: 0.15rem;
     margin-bottom: 0.245rem;
-     border: 1px solid transparent;
+    border: 1px solid transparent;
     .icons {
       width: 0.26rem;
       height: 0.26rem;
       margin: 0 0.105rem;
     }
   }
-  .submit { 
-      width: 3.2rem;
+  .submit {
+    width: 3.2rem;
   }
 }
 </style>