mteacher/src/components/CourseDetail.vue

<template>
    <div class="courseDetail">
        <van-radio-group v-model="radioSelect">
            <van-cell-group class="" v-for="(item, index) in dataList" :border="false" :key="index" @click="onDetail(item)">
                <van-cell title-class="title-content" :center="true">
                    <template slot="title">
                        <div class="title-section" :class="[signStatus || (!signStatus && item.newCourseId && item.newCourseId != item.id) ? 'signInfo' : null]">
                            <div class="title-info">
                                <span class="teachMode">{{ item.teachMode == 'ONLINE' ? '线上' : null }}{{ item.teachMode == 'OFFLINE' ? '线下' : null }}</span>
                                <span :class="['courseType', item.type]">{{ item.type | coursesType }}</span>
                                <span style="line-height: 18px;vertical-align: bottom;">{{ item.name }}</span>
                            </div>
                            <div class="title-status" v-if="signStatus">
                                <span class="teachMode" :class="[`sign${item.signInStatus}`]">{{ item.signInStatus | attendanceType }}</span>
                            </div>
                            <div class="title-status" v-if="!signStatus && item.newCourseId && item.newCourseId != item.id">
                                <span class="teachMode sign1">被合并</span>
                            </div>
                        </div>
                    </template>
                    <template slot="label">
                        <div style="padding: .05rem 0 0;">
                            <p>
                                <span>
                                上课日期：{{item.startClassTime | formatDateExtend}}
                                </span>
                            </p>
                            <!-- <p v-if="item.type != 'VIP' && item.type != 'PRACTICE'">
                                所在乐团：{{ item.groupName }}
                            </p> -->
                            <p>
                                <span v-if="item.teachMode == 'ONLINE'">
                                    上课地点：网络教室
                                </span>
                                <span v-else>
                                    上课地点：{{ item.schoolName }}
                                </span>
                              
                            </p>
                    
                            <p v-if="teacherStatus">主讲老师：{{ item.teacherName }}</p>
                        </div>
                    </template>
                </van-cell>
                <van-cell :icon="icon_timer" :center="true" value-class="courseTimer">
                    <!-- <template slot="default">
                        <template v-if="radioStatus">
                            <van-radio
                                ref="radioes"
                                :disabled="item.radioDisabled"
                                :name="item.id"
                                >
                                    <template #icon="props">
                                        <img v-if="!item.radioDisabled" class="img-icon" :src="props.checked ? activeButtonIcon : inactiveButtonIcon" />
                                    </template>
                                </van-radio>
                        </template>
                        <template v-else>
                            <p>
                                <span>到课:{{ item.studentNum }}/{{ item.totalStudentNum }}</span>
                                <span>请假:{{ item.leaveStudentNum }}</span>
                            </p>
                        </template>
                    </template> -->
                    <template slot="title">{{ item.startClassTime | formatDate }} - {{ item.endClassTime | formatDate }}</template>
                </van-cell>
            </van-cell-group>
        </van-radio-group>
    </div>
</template>

<script>
export default {
    name: 'courseDetail',
    props: {
        dataList: {
            type: Array,
            default() {
                return []
            }
        },
        selectRadioId: {
            type: [Number, String],
            default() {
                return null
            }
        },
        signStatus: { // 是否显示签到状态
            type: Boolean,
            default() {
                return false
            }
        },
        radioStatus: { // 是否显示单选按钮
            type: Boolean,
            default() {
                return false
            }
        },
        teacherStatus: {
            type: Boolean,
            default() {
                return false
            }
        }
    },
    data() {
        return {
            icon_timer: require('@/assets/images/common/icon_timer.png'),
            radioSelect: this.selectRadioId || null
        }
    },
    methods: {
        onDetail(item) {
            if(!item.radioDisabled) {
                this.radioSelect = item.id;
            }
            this.$emit('onDetail', item)
        }
    },
    watch: {
        selectRadioId() {
            this.radioSelect = this.selectRadioId
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../assets/commonLess/variable');
.courseDetail {
    margin: 0 .12rem;
    /deep/.van-cell__left-icon img {
        padding-top: .03rem;
    }
    /deep/.van-cell__title {
        font-size: .16rem;
        color: #333333;
    }
    /deep/.van-cell-group {
        margin-top: .15rem;
        border-radius: .1rem;
        overflow: hidden;
    }
    .title-content {
        font-weight: bold;
        flex: 1 auto;
        padding-top: 5px;
        .van-cell__label {
            font-weight: 400;
            margin-top: .06rem;
            display: flex;
            align-items: center;
        }
        .van-icon-location, .van-icon-video-o {
            margin-right: .05rem;
        }
        .groupName {
            display: block;
            font-size: .14rem;
            font-weight: 400;
            padding-bottom: 0.04rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
    /deep/.van-cell__value, /deep/.van-cell__label {
        color: #808080;
        span {
            padding-right: .1rem;
        }
    }

    // .title-info {
        // display: flex;
        // align-items: center;
        // line-height: 1.2;
        // overflow: hidden;
        // white-space: nowrap;
        // text-overflow: ellipsis;
    // }

    .title-section {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        &.signInfo {
            .title-info {
                flex-basis: 80%;
            }
            .title-status {
                flex-basis: 20%;
                text-align: right;
            }
        }
    }

    .courseTimer {
        display: flex;
        justify-content: flex-end;
    }
}

/deep/.van-radio__icon--disabled .van-icon {
  border-color: transparent;
  background: #fff;
  color: transparent;
}

</style>