|
|
@@ -18,20 +18,20 @@
|
|
|
<div class="studentWrap">
|
|
|
<img :src="imgList.logo" class="logo" alt />
|
|
|
<div class="left">
|
|
|
- <img :src="imgList.default_head_img" alt />
|
|
|
+ <img :src="studentInfo.avatar" alt />
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
- <p class="name">李小明</p>
|
|
|
- <p class="subject">长笛</p>
|
|
|
+ <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">6</p>
|
|
|
+ <p class="timeP">{{ studentInfo.times }}</p>
|
|
|
<p class="descP">练习次数（次）</p>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <p class="timeP">180</p>
|
|
|
+ <p class="timeP">{{ studentInfo.totalMinutes }}</p>
|
|
|
<p class="descP">练习时长（分钟）</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -54,42 +54,42 @@
|
|
|
<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="imgList.excellent" class="icons" alt />
|
|
|
- 节奏优异！堪称人肉节拍器！
|
|
|
+ <img :src="subjectJson['1'].icon" class="icons" alt />
|
|
|
+ {{ subjectJson['1'][item[0]] }}
|
|
|
</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="imgList.excellent" class="icons" alt />
|
|
|
- 节奏优异！堪称人肉节拍器！
|
|
|
+ <img :src="subjectJson['2'].icon" class="icons" alt />
|
|
|
+ {{ subjectJson['2'][item[1]] }}
|
|
|
</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="imgList.excellent" class="icons" alt />
|
|
|
- 节奏优异！堪称人肉节拍器！
|
|
|
+ <img :src="subjectJson['3'].icon" class="icons" alt />
|
|
|
+ {{ subjectJson['3'][item[2]] }}
|
|
|
</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="imgList.excellent" class="icons" alt />
|
|
|
- 节奏优异！堪称人肉节拍器！
|
|
|
+ <img :src="subjectJson['4'].icon" class="icons" alt />
|
|
|
+ {{ subjectJson['4'][item[3]] }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -102,39 +102,39 @@
|
|
|
<div class="teacherWrap">
|
|
|
<img :src="imgList.logo" class="logo2" alt />
|
|
|
<div class="left">
|
|
|
- <img :src="imgList.default_head_img" alt />
|
|
|
+ <img :src="teacherInfo.avatar" alt />
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
- <p class="name">李小明</p>
|
|
|
- <p class="subject">长笛</p>
|
|
|
+ <p class="name">{{teacherInfo.teacherName }}</p>
|
|
|
+ <p class="subject">{{teacherInfo.subjectName }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="textWrap">
|
|
|
<p>
|
|
|
<i class="num1"></i>
|
|
|
- <span>保持日常练习，与老师良好的互动是进步的开始！稳定的节奏就像是音乐的脉搏，搭配良好的音乐准确度，也许将来会成为职业音乐节也不一定哦！</span>
|
|
|
+ <span>{{strList[0]}}</span>
|
|
|
</p>
|
|
|
<p>
|
|
|
<i class="num2"></i>
|
|
|
- <span>保持日常练习，与老师良好的互动是进步的开始！稳定的节奏就像是音乐的脉搏，搭配良好的音乐准确度，也许将来会成为职业音乐节也不一定哦！</span>
|
|
|
+ <span>{{strList[1]}}</span>
|
|
|
</p>
|
|
|
<p>
|
|
|
<i class="num3"></i>
|
|
|
- <span>保持日常练习，与老师良好的互动是进步的开始！稳定的节奏就像是音乐的脉搏，搭配良好的音乐准确度，也许将来会成为职业音乐节也不一定哦！</span>
|
|
|
+ <span>{{strList[2]}}</span>
|
|
|
</p>
|
|
|
<p>
|
|
|
<i class="num4"></i>
|
|
|
- <span>保持日常练习，与老师良好的互动是进步的开始！稳定的节奏就像是音乐的脉搏，搭配良好的音乐准确度，也许将来会成为职业音乐节也不一定哦！</span>
|
|
|
+ <span>{{strList[3]}}</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="button">继续学习</div>
|
|
|
+ <!-- <div class="button">继续学习</div> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import { browser } from "@/common/common";
|
|
|
-import { addStudyReport } from "@/api/teacher";
|
|
|
+import { studyReport } from "@/api/teacher";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -155,17 +155,81 @@ export default {
|
|
|
4: require("@/assets/images/start/4.png")
|
|
|
},
|
|
|
classGroupId: null,
|
|
|
- str: "我是最帅的</br>哈哈哈"
|
|
|
+ token: null,
|
|
|
+ strList: [],
|
|
|
+ studentInfo: {
|
|
|
+ name: "",
|
|
|
+ subjectName: "",
|
|
|
+ times: "",
|
|
|
+ totalMinutes: "",
|
|
|
+ avatar: ""
|
|
|
+ },
|
|
|
+ teacherInfo: {},
|
|
|
+ item: [],
|
|
|
+ subjectJson: {
|
|
|
+ '1': {
|
|
|
+ title: "练习表现",
|
|
|
+ 1: "表现优异！你就是最闪亮的星！",
|
|
|
+ 2: "表现良好！你非常有潜力！",
|
|
|
+ 3: "偶尔开小差，还要加油哦！",
|
|
|
+ icon: ""
|
|
|
+ },
|
|
|
+ '2': {
|
|
|
+ title: "节奏准确度",
|
|
|
+ 1: "节奏优异！堪称人肉节拍器！",
|
|
|
+ 2: "基本准确！注意时值饱满哦！",
|
|
|
+ 3: "中等稳定！搭配练习节拍器会更好哦！",
|
|
|
+ icon: ""
|
|
|
+ },
|
|
|
+ '3': {
|
|
|
+ title: "音符准确度",
|
|
|
+ 1: "百发百中！棒极了！",
|
|
|
+ 2: "准确度良好！距离完美只有一步之遥！",
|
|
|
+ 3: "中等准确！稍加练习你一定会更好！",
|
|
|
+ icon: ""
|
|
|
+ },
|
|
|
+ '4': {
|
|
|
+ title: "演奏连贯度",
|
|
|
+ 1: "非常棒！你演奏一气呵成！",
|
|
|
+ 2: "良好！多注意乐句末的音符时值哦！",
|
|
|
+ 3: "继续努力！告诉自己，你一定能行的！",
|
|
|
+ icon: ""
|
|
|
+ }
|
|
|
+ },
|
|
|
};
|
|
|
},
|
|
|
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;
|
|
|
}
|
|
|
+ studyReport({ classGroupId: this.classGroupId }).then(res => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+
|
|
|
+ this.studentInfo = {
|
|
|
+ name: res.data.data.student.username || "",
|
|
|
+ subjectName: res.data.data.subjectName,
|
|
|
+ times: res.data.data.times,
|
|
|
+ totalMinutes: res.data.data.totalMinutes,
|
|
|
+ avatar: res.data.data.student.avatar || this.imgList.default_head_img
|
|
|
+ };
|
|
|
+ this.teacherInfo = {
|
|
|
+ teacherName: res.data.data.teacher.name || "",
|
|
|
+ subjectName: res.data.data.subjectName,
|
|
|
+ avatar: res.data.data.teacher.headUrl || this.imgList.default_head_img
|
|
|
+ };
|
|
|
+ // 处理数据 1.item
|
|
|
+ this.item = res.data.data.item.split(',');
|
|
|
+ this.strList = res.data.data.comment.split('#');
|
|
|
+
|
|
|
+ for(let i=1; i<=this.item.length;i++){
|
|
|
+ this.setIcon(this.subjectJson,this.item[i-1],i);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
methods: {
|
|
|
onAppBack() {
|
|
|
@@ -176,6 +240,23 @@ export default {
|
|
|
JSON.stringify({ api: "back" })
|
|
|
);
|
|
|
}
|
|
|
+ },
|
|
|
+ setIcon(object,str,index){
|
|
|
+ switch(str){
|
|
|
+ case '1':{
|
|
|
+ object[index].icon = this.imgList.excellent
|
|
|
+ break
|
|
|
+ }
|
|
|
+ case '2':{
|
|
|
+ object[index].icon = this.imgList.good
|
|
|
+ break
|
|
|
+ }
|
|
|
+ case '3':{
|
|
|
+ object[index].icon = this.imgList.normal
|
|
|
+ break
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -204,17 +285,17 @@ div {
|
|
|
height: 0.77rem;
|
|
|
position: absolute;
|
|
|
right: -0.15rem;
|
|
|
- top: -0.20rem;
|
|
|
+ top: -0.2rem;
|
|
|
}
|
|
|
- .logo1{
|
|
|
- width: 1.03rem;
|
|
|
+ .logo1 {
|
|
|
+ width: 1.03rem;
|
|
|
height: 0.77rem;
|
|
|
position: absolute;
|
|
|
right: 0rem;
|
|
|
top: -0.08rem;
|
|
|
}
|
|
|
- .logo2{
|
|
|
- width: 1.03rem;
|
|
|
+ .logo2 {
|
|
|
+ width: 1.03rem;
|
|
|
height: 0.77rem;
|
|
|
position: absolute;
|
|
|
right: -0.2rem;
|
|
|
@@ -224,7 +305,7 @@ div {
|
|
|
background-color: #f6f6f6;
|
|
|
width: 3.51rem;
|
|
|
border-radius: 10px;
|
|
|
- padding:0.16rem;
|
|
|
+ padding: 0.16rem;
|
|
|
margin-bottom: 0.26rem;
|
|
|
color: #333;
|
|
|
p {
|
|
|
@@ -438,43 +519,42 @@ div {
|
|
|
border-radius: 5px;
|
|
|
margin-top: 0.24rem;
|
|
|
p {
|
|
|
- display:flex;
|
|
|
+ display: flex;
|
|
|
flex-direction: row;
|
|
|
justify-content: flex-start;
|
|
|
- margin-bottom: .1rem;
|
|
|
+ margin-bottom: 0.1rem;
|
|
|
i {
|
|
|
display: block;
|
|
|
- width: .19rem;
|
|
|
- height: .16rem;
|
|
|
- margin-right: .06rem;
|
|
|
+ width: 0.19rem;
|
|
|
+ height: 0.16rem;
|
|
|
+ margin-right: 0.06rem;
|
|
|
position: relative;
|
|
|
top: 2px;
|
|
|
}
|
|
|
span {
|
|
|
width: 2.25rem;
|
|
|
- font-size: .12rem;
|
|
|
- line-height: .18rem;
|
|
|
+ font-size: 0.12rem;
|
|
|
+ line-height: 0.18rem;
|
|
|
color: #666;
|
|
|
}
|
|
|
- .num1{
|
|
|
- background: url("../../assets/images/start/1.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
+ .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%;
|
|
|
+ .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%;
|
|
|
+
|
|
|
+ .num3 {
|
|
|
+ background: url("../../assets/images/start/3.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
-
|
|
|
- .num4{
|
|
|
- background: url("../../assets/images/start/4.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
+
|
|
|
+ .num4 {
|
|
|
+ background: url("../../assets/images/start/4.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
}
|
261568008@qq.com