pbl-teacher-table/src/components/pages/testStudent/view/component/course.vue

<template>
    <div class="c_box">
        <div class="choice_box" v-loading="isloading" v-if="checkJson">
            <div class="title" style="display: flex;align-items: center;">
                <span class="g_t_index" style="min-width: fit-content;">{{ tindex + 1 }}</span>
                <span>{{ checkJson.title }}</span>
            </div>
            <div class="detail" v-if="checkJson.detail" v-html="checkJson.detail"
                style="color: #00000066;margin-top: 5px;">
            </div>
            <div class="choices" v-if="checkJson.courses.length">
                <div class="course" @click="openCourse()">
                    <div class="banner" :style=" isN==1? 'width:140px;height:90px;' : ''">
                        <div v-if="tid" class="isRate">已评分</div>
                        <img :src="courseDetail.cover" alt="">
                    </div>
                    <div class="content">
                        <div class="c_c">
                            <span>课程名称：</span>
                            <el-tooltip :content="courseDetail.title" placement="top" effect="dark">
                                <span :style=" isN==1? 'max-width:75px;' : ''">{{ courseDetail.title }}</span>
                            </el-tooltip>
                        </div>
                        <div class="c_c">
                            <span>课程类型：</span>
                            <span v-if="!courseDetail.name">{{ '暂无' }}</span>
                            <el-tooltip v-else :content="courseDetail.name" placement="top" effect="dark">
                                <span :style=" isN==1? 'max-width:75px;' : ''">{{ courseDetail.name }}</span>
                            </el-tooltip>
                        </div>
                        <div class="c_c">
                            <span>创建人：</span>
                            <span :style=" isN==1? 'max-width:75px;' : ''">{{ courseDetail.username }}</span>
                        </div>
                        <div class="c_c">
                            <span>协作者：</span>
                            <span v-if="!courseDetail.xieName">{{ '暂无' }}</span>
                            <el-tooltip v-else :content="courseDetail.xieName" placement="top" effect="dark">
                                <span :style=" isN==1? 'max-width:75px;' : ''">{{ courseDetail.xieName }}</span>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <div class="page" v-if="checktype == '1'">
                    <el-button type="primary" size="mini" :disabled="page == 0" @click="setPage('-1')">上一个</el-button>
                    <div class="p_page"><span>{{ page + 1 }}</span><span>/</span><span>{{ checkJson.courses.length
                            }}</span>
                    </div>
                    <el-button type="primary" size="mini" :disabled="page == (checkJson.courses.length - 1)"
                        @click="setPage('1')">下一个</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        tindex: {
            type: Number
        },
        cJson: {
            type: Object,
        },
        checktype: {
            type: Number,
            default: 1
        },
        see: {
            type: Boolean,
            default: false
        },
        issetPage: {
            type: Boolean,
            default: false
        },
        tid: {
            type: String
        }
    },
    data() {
        return {
            option: {
                1: { name: '附件' },
            },
            userid: this.$route.query.userid,
            isN: this.$route.query.isN,

            checkJson: undefined,
            progress: 0,
            isFinishSize: 0,
            proVisible: false,
            isAllSize: 0,
            wurl: "",
            isTong: false,
            page: 0,
            isloading: false,
            courseDetail: {},
            courseid: ''
        }
    },
    computed: {

    },
    watch: {
        checkJson: {
            handler(newValue) {
                this.$emit('update:cJson', newValue)
            },
            deep: true
        },
        cJson: {
            handler(newValue) {
                if (newValue.answer2 != this.checkJson.answer2) {
                    this.checkJson = this.depthCopy(newValue)
                    if (this.checkJson.courses.length) {
                        this.page = this.checkJson.courses.indexOf(this.courseid)
                        this.checkJson.answer2 = this.courseid
                    }
                    this.$forceUpdate()
                }
            },
            deep: true
        },
        courseid: {
            handler(newValue) {
                if (this.issetPage) {
                    this.$emit('update:issetPage', false)
                } else {
                    this.$emit('getTestWorkByCid', newValue)
                }
            },
            deep: true
        }
    },
    methods: {
        depthCopy(s) {
            return JSON.parse(JSON.stringify(s));
        },
        openFileBox() {
            this.dialogVisiblefile = true
        },
        setPage(index) {
            this.$emit('publish2')
            setTimeout(() => {
                if (index == '1') {
                    this.page++
                } else if (index == '-1') {
                    this.page--
                }
                this.checkJson.answer2 = this.checkJson.courses[this.page]
                this.courseid = this.checkJson.answer2
                this.$forceUpdate()
                this.getCourse(this.checkJson.answer2)
            }, 500);
        },
        openCourse() {
             window.topU.postMessage({ cid: this.checkJson.answer2, screenType: "3" }, "*");
        },
        getCourse(id) {
            this.isloading = true
            let params = {
                cid: id,
            };
            this.ajax
                .get(this.$store.state.api + "getCourseInfoTest", params)
                .then((res) => {
                    this.isloading = false
                    this.courseDetail = res.data[0][0]
                    this.courseDetail.cover = JSON.parse(this.courseDetail.cover)[0].url
                })
                .catch((err) => {
                    this.isloading = false
                    console.error(err);
                });
        }
    },
    mounted() {
        this.checkJson = this.cJson ? this.depthCopy(this.cJson) : undefined
        if (this.checkJson.courses.length) {
            this.page = this.checkJson.courses.indexOf(this.checkJson.answer2)
            this.courseid = this.checkJson.answer2
            this.getCourse(this.checkJson.answer2)
        }
    }
}
</script>

<style scoped>
.c_box {
    width: 100%;
    position: relative;
		padding-left: 45px;
}

/* .mask {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 2;
} */

.choice_box {
    white-space: pre-line;
}

.choice_box>.title {
    font-weight: bold;
    width: 100%;
    word-break: break-all;
}

.choice_box>.choices {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.choices>.page {
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.p_page {
    margin: 0 10px;
}

.course {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.course>.banner {
    width: 200px;
    height: 120px;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #3896fc;
    box-sizing: border-box;
    padding: 5px;
    margin-right: 15px;
    position: relative;
}

.isRate {
    position: absolute;
    background: #0061FF;
    width: 70px;
    height: 30px;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
    top: 5px;
    left: 5px;
}

.course>.banner>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course>.content {}

.course>.content>.c_c {
    display: flex;
    align-items: center;
}

.course>.content>.c_c+.c_c {
    margin-top: 5px;
}

.course>.content>.c_c span:nth-child(1) {}

.course>.content>.c_c span:nth-child(2) {
    max-width: 250px;
    overflow: hidden;
    white-space: nowrap;
    display: block;
    text-overflow: ellipsis;
}

.g_t_index{
	color: #3681FC;
	font-size: 28px;
	font-weight: bold;
	position: relative;
	margin-right: 30px;
	margin-left: -40px;
}

.g_t_index+span{
	font-weight: bold;
	font-size: 18px;
}

.g_t_index::after{
	content: "";
	width: 18px;
	height: 2px;
	position: absolute;
	right: -18px;
	top: 50%;
	transform: translateY(-50%);
	background: #3681FC;
}

.g_t_index::before{
	content: "";
	width: 6px;
	height: 6px;
	border-right: 2px solid #3681FC;
	border-top: 2px solid #3681FC;
	position: absolute;
	right: -15px;
	top: 50%;
	transform: rotate(45deg) translateY(-5px);
}
</style>