mteacher/src/views/app/CourseDetail.vue

<template>
    <div class="courseEvaluation">
        <MHeader v-if="headerStatus" />
        
        <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="teachingMaterialStatus" placeholder="请输入1-255字" />
        </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" :class="[courseScheduleComplaints.length > 0 ? 'teacher' : '']">老师评价</div>
        <div v-if="courseScheduleReviewList.length > 0">
            <van-panel v-for="(item, index) in courseScheduleReviewList" :key="index">
                <div slot="header" class="van-hairline--bottom" style="display: flex;">
                    <div class="header">
                        <img v-if="item.studentAvatar" :src="item.studentAvatar" alt="">
                        <img v-else src="../../assets/images/app/icon_student.png" alt="">{{ item.studentName }}
                    </div>
                </div>
                <div slot="default" class="content">{{ item.memo }}</div>
            </van-panel>
        </div>
        <div v-else>
            <van-cell center title="是否对所有学生评价">
                <van-switch v-model="checked" slot="right-icon" />
            </van-cell>

            <van-panel title="评论给所有学生" class="evaluation-panel" v-if="checked">
                <div slot="default">
                    <van-field rows="3" maxlength="255" v-model="contentall" autosize type="textarea" placeholder="请输入1-255字" />
                </div>
            </van-panel>

            <div v-else>
                <van-panel class="evaluation-panel" v-for="(item, index) in students" :key="index">
                    <div slot="header" class="van-hairline--bottom" style="display: flex; padding-left: .16rem">
                        <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>
                    <div slot="default">
                        <van-field rows="3" v-model="item.content" autosize type="textarea" placeholder="请输入1-255字" />
                    </div>
                </van-panel>
            </div>
        </div>

        <div class="button-group" v-if="courseScheduleReviewList.length <= 0">
            <van-button type="primary" @click="onSubmit" round size="large">确认</van-button>
        </div>
    </div>
</template>
<script>
/* eslint-disable */
import MHeader from '@/components/MHeader'
import { getStuAndTeaReview, batchAdd } from '@/api/app'
import { browser }  from '@/common/common'
export default {
    name: 'courseEvaluation',
    components: { MHeader },
    data () {
        let query = this.$route.query
        return {
            headerStatus: false,
            checked: true,
            courseId: query.courseId,
            teachingMaterial: null,
            teachingMaterialStatus: false,
            teacherClassHeadInfo: {},
            courseScheduleReview: [], // 学生评价
            courseScheduleComplaints: [], // 老师评价
            courseScheduleReviewList: [],
            review4StudentIds: {},
            students: [], // 学生列表
            contentall: null, // 回复内容
        }
    },
    mounted() {
        let params = this.$route.query
        if(params.Authorization) {
            localStorage.setItem('Authorization', decodeURI(params.Authorization))
            localStorage.setItem('userInfo', decodeURI(params.Authorization))
        }
        // 判断是否在app里面
        if(!browser().android && !browser().iPhone) {
            this.headerStatus = true
        } else {
            document.title = '课程评价'
        }

        this.__init()
    },
    methods: {
        __init() {
            this.$toast.loading({
                duration: 0,
                message: '加载中...',
                forbidClick: true,
                loadingType: 'spinner'
            })
            getStuAndTeaReview({ courseId: this.courseId}).then(res => {
                let result = res.data
                this.$toast.clear()
                if(result.code == 200) {
                    let tempResult = result.data
                    if(tempResult) {
                        this.teachingMaterial = tempResult.teachingMaterial
                        this.teachingMaterialStatus = tempResult.teachingMaterial ? true : false
                        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 : {}
                        this.students = tempResult.students ? tempResult.students : []
                        tempResult.students.forEach(item => {
                            item.content = null
                        })
                    }
                } else {
                    this.$toast(result.msg)
                }
            })
        },
        onSubmit() {
            let students = this.students
            let params = []
            if(!this.teachingMaterial) {
                this.$toast('请输入教学内容')
                return
            }
            if(!this.contentall && this.checked) {
                this.$toast('请输入学生评价')
                return
            }
            students.forEach(item => {
                if(!this.checked && !item.content) {
                    this.$toast('请输入学生评价')
                    return
                }
                params.push({
                    "memo": this.checked ? this.contentall : item.content,
                    "courseScheduleId": this.courseId,
                    "studentId": item.id,
                    "teachingMaterial": this.teachingMaterial
                })
            })
            this.$toast.loading({
                duration: 0,
                message: '加载中...',
                forbidClick: true,
                loadingType: 'spinner'
            })
            batchAdd(params).then(res => {
                this.$toast.clear()
                let result = res.data
                if(result.code == 200) {
                    this.$toast('评价成功')
                    setTimeout(() => {
                        this.onSubmitStatus = true
                        if(browser().iPhone) {
                            window.webkit.messageHandlers.DAYA.postMessage(JSON.stringify({api: 'back'}))
                        } else if(browser().android) {
                            DAYA.postMessage(JSON.stringify({api: 'back'}))
                        } else {
                            this.$router.push('/business')
                        }
                    }, 500)
                } else {
                    this.$toast(result.msg)
                }
            })
        }
    },
    destroyed() {
        this.$toast.clear()
    }
}
</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;
    }
}

.evaluation-panel {
    padding: 0;
    margin-top: .15rem;
    margin-bottom: 0;
    /deep/.van-cell {
        padding: .1rem .16rem; 
    }
}

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