mteacher/src/views/app/CourseDetail.vue

<template>
    <div class="courseEvaluation">
        <MHeader />
        
        <van-cell-group>
            <van-cell title="课程班名称" :value="teacherClassHeadInfo.classGroupName" />
        </van-cell-group>
        <van-cell-group>
            <van-cell title="课程时间" :value="teacherClassHeadInfo.classTime" />
        </van-cell-group>
        <van-cell-group>
            <van-cell title="乐器" :value="teacherClassHeadInfo.subjectNames" />
        </van-cell-group>
        <van-cell-group>
            <van-cell title="班级学员" :value="teacherClassHeadInfo.studentNames" />
        </van-cell-group>
        <van-cell-group>
            <van-field class="textarea" maxlength="255" autosize label="教学内容" type="textarea" v-model="teachingMaterial" readonly />
        </van-cell-group>
        
        <div v-if="courseScheduleComplaints.length > 0">
            <div class="title">学员评价</div>
            <div class="evaluation-item" v-for="(item, index) in courseScheduleComplaints" :key="index">
                <div class="header">
                    <img v-if="item.avatar" :src="item.avatar" alt="">
                    <img v-else src="../../assets/images/app/icon_student.png" alt="">
                    {{ item.username }}
                </div>
                <div class="rate">评价<van-rate v-model="item.score" readonly :size="20" /></div>
                <div class="content">
                    {{ item.reason }}
                </div>
            </div>
        </div>

        <div class="title teacher">老师评价</div>
        <div v-if="courseScheduleReview.length > 0">
            <van-panel>
                <div slot="header" class="van-hairline--bottom" style="display: flex;">
                    <div class="header"><img src="../../assets/images/app/icon_student.png" alt="">李小明</div>
                    <div class="header"><img src="../../assets/images/app/icon_student.png" alt="">李小明</div>
                </div>
                <div slot="default" class="content">盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来</div>
            </van-panel>
        </div>

        <div class="button-group">
            <van-button type="primary" @click="onSubmit" round size="large">确认</van-button>
        </div>
    </div>
</template>
<script>
import MHeader from '@/components/MHeader'
import { getStuAndTeaReview, batchAdd } from '@/api/app'
export default {
    name: 'courseEvaluation',
    components: { MHeader },
    data () {
        let query = this.$route.query
        return {
            rate: 2,
            courseId: query.courseId,
            teachingMaterial: null,
            teacherClassHeadInfo: {},
            courseScheduleReview: [],
            courseScheduleComplaints: [],
            courseScheduleReviewList: {},
            review4StudentIds: {}
        }
    },
    mounted() {
        this.__init()
    },
    methods: {
        __init() {
            getStuAndTeaReview({ courseId: this.courseId}).then(res => {
                let result = res.data
                if(result.code == 200) {
                    let tempResult = result.data
                    if(tempResult) {
                        this.teachingMaterial = tempResult.teachingMaterial
                        this.teacherClassHeadInfo = tempResult.teacherClassHeadInfo ? tempResult.teacherClassHeadInfo : {}
                        if(this.teacherClassHeadInfo.classDate) {
                            this.teacherClassHeadInfo.classTime = this.teacherClassHeadInfo.classDate + ' ' + this.teacherClassHeadInfo.startClassTime + '-' + this.teacherClassHeadInfo.endClassTime
                        }
                        this.courseScheduleReview = tempResult.courseScheduleReview ? tempResult.courseScheduleReview : []
                        this.courseScheduleComplaints = tempResult.courseScheduleComplaints ? tempResult.courseScheduleComplaints : []
                        this.courseScheduleReviewList = tempResult.courseScheduleReviewList ? tempResult.courseScheduleReviewList : {}
                        this.review4StudentIds = tempResult.review4StudentIds ? tempResult.review4StudentIds : {}
                    }
                } else {
                    this.$toast(result.msg)
                }
            })
        },
        onSubmit() {

        }
    }
}
</script>
<style lang="less" scoped>
@import url("../../assets/commonLess/variable.less");
.courseEvaluation {
    position: relative;
    min-height: 100vh;
}
/deep/.van-cell-group {
    margin-top: .15rem;
    /deep/.van-cell {
        padding: .14rem .16rem;
    }
}

/deep/.van-cell__title {
    font-size: .17rem;
    color: #1A1A1A;
    flex: auto 1;
}
/deep/.van-field__control, /deep/.van-cell__value {
    font-size: 0.17rem;
    color: #666;
    width: 70%;
    flex: auto;
}
.textarea {
    flex-direction: column;
    /deep/.van-cell__value {
        margin-top: .1rem;
        width: 100%;
    }
    /deep/.van-field__control {
        font-size: .15rem;
    }
}

.title {
    font-size: .16rem;
    color: #808080;
    line-height: .22rem;
    padding: .15rem .16rem .1rem;
    &.teacher {
        padding-top: 0;
    }
}
.evaluation-item {
    background-color: #fff;
    margin-bottom: .15rem;
    padding: .12rem .16rem;
    img {
        width: .4rem;
        height: .4rem;
        border-radius: 50%;
        overflow: hidden;
        margin-right: .08rem;
    }
    .header {
        display: flex;
        align-items: center;
        font-size: .18rem;
        color: #1A1A1A;
    }
    .rate {
        font-size: .14rem;
        color: #333333;
        display: flex;
        padding: .1rem 0;
        .van-rate {
            margin-left: .05rem;
        }
    }
    .content {
        font-size: .15rem;
        color: #666666;
    }
}
.van-panel {
    padding: .12rem .16rem;
    margin-top: 0;
    margin-bottom: .15rem;
    img {
        width: .28rem;
        height: .28rem;
        border-radius: 50%;
        overflow: hidden;
        margin-right: .08rem;
    }
    .header {
        display: flex;
        align-items: center;
        font-size: .14rem;
        color: #1A1A1A;
        padding: .1rem 0;
        margin-right: .1rem;
    }
    .content {
        padding-top: .1rem;
        font-size: .15rem;
        color: #666666;
    }
}

.button-group {
    margin: .3rem .26rem .2rem;
    .van-button--primary {
        background: @mColor;
        font-size: .18rem;
    }
}
</style>