mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-06 17:36:45 +08:00
430 lines
13 KiB
Vue
430 lines
13 KiB
Vue
<template>
|
||
<view class="main">
|
||
<u-toast ref="uToast"></u-toast>
|
||
<u-modal :show="showFlag" :closeOnClickOverlay="true" :showCancelButton="true" @cancel="hideDialog" @confirm="submit" :content="scoreNum>80?'您给讲师打的分数是'+scoreNum+'分， 是否确认提交?':'您给讲师打的分数是'+scoreNum+'分， 低于认证通过的标准80分， 是否确认提交？'"></u-modal>
|
||
<div class="info">
|
||
<div class="info_top">
|
||
<div class="header_img">
|
||
<img :src="lecturersInfo.courseImage || `../../../static/images/lecturer/teacher.png`"></img>
|
||
</div>
|
||
<div class="base_info">
|
||
<div class="base_info_1">
|
||
<div class="name">{{lecturersInfo.teacherName}}</div>
|
||
<div class="number">{{lecturersInfo.teacherNo}}</div>
|
||
</div>
|
||
<div class="base_info_2">{{lecturersInfo.orgPath}}</div>
|
||
<div class="base_info_3">
|
||
<div>{{lecturersInfo.positionName}}</div>
|
||
<div>{{lecturersInfo.bandCode}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="info_buttom">
|
||
<span>认证课程名称:</span>{{lecturersInfo.courseName}}
|
||
</div>
|
||
</div>
|
||
<div class="curriculumDevelopment">
|
||
<div class="title">课程开发（35分）</div>
|
||
<div class="topic">
|
||
<div class="substance">
|
||
1.对课程主题理解有深度，在编写/优化课件时，能理论结合实际；<span>（20分）</span>
|
||
</div>
|
||
<div class="fraction">
|
||
<u-number-box v-model="score.one" :disabled="scoreDisabled" min="0" max="20" @change="stepperChange('one')"></u-number-box>
|
||
</div>
|
||
</div>
|
||
<div class="topic" style="border: none">
|
||
<div class="substance">
|
||
2.了解学员，善于将课程内容与学员情况相结合，使用他们熟悉的语言和场景进行讲授，促使学员更快地理解并接受课程内容；<span>（15分）</span>
|
||
</div>
|
||
<div class="fraction">
|
||
<u-number-box v-model="score.two" :disabled="scoreDisabled" min="0" max="15" @change="stepperChange('two')"></u-number-box>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="curriculumDevelopment">
|
||
<div class="title">课程讲授与互动（45分）</div>
|
||
<div class="topic">
|
||
<div class="substance">
|
||
1.富有教师思维，能够根据成人的学习习惯，运用多种教学手段，使课堂生动活泼，提升课堂效率；
|
||
<span>（15分）</span>
|
||
</div>
|
||
<div class="fraction">
|
||
<u-number-box v-model="score.three" :disabled="scoreDisabled" min="0" max="15" @change="stepperChange('three')"></u-number-box>
|
||
</div>
|
||
</div>
|
||
<div class="topic">
|
||
<div class="substance">
|
||
2.具备所讲授课程的专业知识或实战经验，能够应对学员在课堂上提出的普通问题或挑战性问题；
|
||
<span>（15分）</span>
|
||
</div>
|
||
<div class="fraction">
|
||
<u-number-box v-model="score.four" :disabled="scoreDisabled" min="0" max="15" @change="stepperChange('four')"></u-number-box>
|
||
</div>
|
||
</div>
|
||
<div class="topic">
|
||
<div class="substance">
|
||
3.心态开放，有较强的临场应变技能，能够通过正向引导，化解课堂中的“危机”，推进课程正常进行；
|
||
<span>（10分）</span>
|
||
</div>
|
||
<div class="fraction">
|
||
<u-number-box v-model="score.five" :disabled="scoreDisabled" min="0" max="10" @change="stepperChange('five')"></u-number-box>
|
||
</div>
|
||
</div>
|
||
<div class="topic" style="border: none">
|
||
<div class="substance">
|
||
4.语言正向、积极，富有感染力，传递知识的同时，传递能量；
|
||
<span>（5分）</span>
|
||
</div>
|
||
<div class="fraction">
|
||
<u-number-box v-model="score.six" :disabled="scoreDisabled" min="0" max="5" @change="stepperChange('six')"></u-number-box>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="curriculumDevelopment">
|
||
<div class="title">仪表与仪态（20分）</div>
|
||
<div class="topic">
|
||
<div class="substance">
|
||
1.着装符合课程主题的要求；（10分）
|
||
<span>（10分）</span>
|
||
</div>
|
||
<div class="fraction">
|
||
<u-number-box v-model="score.seven" :disabled="scoreDisabled" min="0" max="10" @change="stepperChange('seven')"></u-number-box>
|
||
</div>
|
||
</div>
|
||
<div class="topic">
|
||
<div class="substance">
|
||
2.站立行走落落大方，不卑不亢；
|
||
<span>（5分）</span>
|
||
</div>
|
||
<div class="fraction">
|
||
<u-number-box v-model="score.eight" :disabled="scoreDisabled" min="0" max="5" @change="stepperChange('eight')"></u-number-box>
|
||
</div>
|
||
</div>
|
||
<div class="topic" style="border: none;padding-bottom: 100px;margin-bottom: 0px;">
|
||
<div class="substance">
|
||
3.普通话标准，语言文明健康，讲授适度、接地气；
|
||
<span>（5分）</span>
|
||
</div>
|
||
<div class="fraction">
|
||
<u-number-box v-model="score.nine" :disabled="scoreDisabled" min="0" max="5" @change="stepperChange('nine')"></u-number-box>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="foot" >
|
||
<view class="fraction">您的评分：<span>{{scoreNum}}分</span></view>
|
||
<view class="submit" v-if="!lecturersInfo.scores" @click="showDialog()">提交</view>
|
||
</div>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import apiLecturerCert from "@/api/lecturer/certification.js";
|
||
export default {
|
||
data() {
|
||
return {
|
||
showFlag: false,
|
||
lecturersInfo: {},
|
||
score:{
|
||
"one": 0,
|
||
"two": 0,
|
||
"three": 0,
|
||
"four": 0,
|
||
"five": 0,
|
||
"six": 0,
|
||
"seven": 0,
|
||
"eight": 0,
|
||
"nine": 0
|
||
},
|
||
scoreDisabled: false,
|
||
scoreNum: 0,
|
||
reviewId: ''
|
||
}
|
||
},
|
||
onPullDownRefresh() {
|
||
|
||
},
|
||
onReachBottom() {
|
||
|
||
},
|
||
onLoad(options) {
|
||
this.teacherId = options.teacherId
|
||
this.reviewId = options.reviewId
|
||
this.info(options.teacherId)
|
||
},
|
||
methods:{
|
||
showDialog(){
|
||
if(this.scoreNum<=0){
|
||
this.$refs.uToast.show({message:"请先进行评份",type:'error'});
|
||
return;
|
||
}
|
||
this.showFlag=true
|
||
},
|
||
hideDialog(){
|
||
this.showFlag=false
|
||
},
|
||
stepperChange(name){
|
||
setTimeout(()=>{
|
||
this.scoreNum = this.score.one + this.score.two + this.score.three + this.score.four + this.score.five + this.score.six + this.score.seven + this.score.eight + this.score.nine
|
||
},50)
|
||
},
|
||
info(teacherId){
|
||
apiLecturerCert.lecturerCertificationInfo({
|
||
teacherId: teacherId
|
||
}).then(res => {
|
||
console.log('res::',res)
|
||
if (res.code == 200 && res.data) {
|
||
|
||
this.lecturersInfo = res.data || {}
|
||
//this.lecturersInfo.scores="" //"1,2,3,1,2,3,1,2,3"
|
||
if(this.lecturersInfo.scores&&this.lecturersInfo.scores.length>1){
|
||
this.scoreDisabled = true
|
||
var arr = this.lecturersInfo.scores.split(',')
|
||
var key = 0
|
||
for (var name in this.score) {
|
||
this.score[name] = Number(arr[key])
|
||
key++
|
||
}
|
||
this.stepperChange()
|
||
}
|
||
} else {
|
||
this.lecturersInfo = {}
|
||
this.$refs.uToast.show({message:res.msg,type:'error'});
|
||
}
|
||
});
|
||
this.showFlag=false
|
||
},
|
||
submit(){
|
||
var scores = []
|
||
for (var key in this.score) {
|
||
scores.push(this.score[key])
|
||
}
|
||
// return
|
||
apiLecturerCert.lecturerCertificationSave({
|
||
teacherId: parseInt(this.teacherId),
|
||
score: this.scoreNum,
|
||
scores: String(scores)
|
||
}).then(res => {
|
||
// 评分完成回列表
|
||
if (res.code == 200) {
|
||
uni.navigateTo({
|
||
url:'/pages/lecturer/certification/list?reviewId='+this.reviewId
|
||
})
|
||
} else {
|
||
this.$refs.uToast.show({message:res.msg,type:'error'});
|
||
}
|
||
});
|
||
this.showFlag=false
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.main {
|
||
background: #F9F9F9;
|
||
overflow:hidden ;
|
||
.info {
|
||
text-align: left;
|
||
background: #fff;
|
||
padding: 20px 16px 16px 16px;
|
||
|
||
.info_top {
|
||
display: flex;
|
||
margin-left: 9px;
|
||
|
||
.header_img {
|
||
img {
|
||
width: 144rpx;
|
||
height: 144rpx;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.base_info {
|
||
margin-left: 20px;
|
||
margin-top: 3px;
|
||
|
||
.base_info_1 {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.name {
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
color: #333333;
|
||
line-height: 22px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.number {
|
||
margin-left: 9px;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #333333;
|
||
line-height: 20px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
.base_info_2 {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: normal;
|
||
margin: 8px 0;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #333333;
|
||
line-height: 20px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.base_info_3 {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 0px;
|
||
}
|
||
.base_info_3:first-child {
|
||
margin-right: 20px;
|
||
}
|
||
}
|
||
}
|
||
.info_buttom {
|
||
margin-top: 10px;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #333333;
|
||
line-height: 20px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
span{
|
||
width: 110px;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
.curriculumDevelopment {
|
||
background: #fff;
|
||
margin-top: 10px;
|
||
padding: 0 16px;
|
||
.title {
|
||
padding-top: 18px;
|
||
font-weight: 500;
|
||
font-size: 16px;
|
||
color: #333333;
|
||
line-height: 22px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-bottom: 15px;
|
||
}
|
||
.topic {
|
||
padding-bottom: 20px;
|
||
border-bottom: 1px solid rgba(83, 83, 83, 0.06);
|
||
margin-bottom: 17px;
|
||
.substance {
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #666666;
|
||
line-height: 20px;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
span {
|
||
color: #409EFF;
|
||
}
|
||
}
|
||
.fraction {
|
||
margin-top: 4px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
}
|
||
}
|
||
.foot {
|
||
height: 81px;
|
||
background: #F8F8F8;
|
||
border-radius: 16px 16px 0px 0px;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
align-items: center;
|
||
position: fixed;
|
||
bottom: 0px;
|
||
width: 100vw;
|
||
.fraction{
|
||
font-weight: 500;
|
||
font-size: 16px;
|
||
color: #333333;
|
||
line-height: 22px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
span{
|
||
color: #409EFF;
|
||
}
|
||
}
|
||
.submit{
|
||
width: 180px;
|
||
height: 44px;
|
||
background: #409EFF;
|
||
box-shadow: 0px 2px 7px 1px rgba(104,102,102,0.08);
|
||
border-radius: 22px;
|
||
color: #FFFFFF;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
line-height: 44px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
:deep(.a-popup--center){
|
||
width: 288px;
|
||
height: 150px;
|
||
background: #FFFFFF;
|
||
border-radius: 14px;
|
||
.content{
|
||
width: 196px;
|
||
height: 44px;
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
color: #333333;
|
||
line-height: 22px;
|
||
text-align: center;
|
||
font-style: normal;
|
||
margin-top: 31px;
|
||
margin-left: 46px;
|
||
}
|
||
.buttons{
|
||
position:absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
overflow: hidden;
|
||
.qx{
|
||
border-right: 1px solid rgba(153,153,153,0.18);
|
||
font-weight: 400;
|
||
font-size: 16px;
|
||
color: #333333;
|
||
line-height: 22px;
|
||
font-style: normal;
|
||
}
|
||
.qr{
|
||
font-weight: 400;
|
||
font-size: 16px;
|
||
color: #387DF7;
|
||
line-height: 22px;
|
||
font-style: normal;
|
||
}
|
||
div{
|
||
width: 144px;
|
||
height: 47px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-top: 1px solid rgba(153,153,153,0.18);
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
</style> |