YXGJ/packageA/course/detail.vue

<template>
    <view>
        <view class="head">
            <block v-if="detail.filetype == '视频'">
                <video id="myVideo" class="video" :src="files[0].showUrl" />
                <view class="video-bottom">
                    倍数
                    <view @click="changeSpeed(item)" v-for="item in speeds" :key="item" class="speed"
                        :class="speed == item ? 'active' : ''" hover-class="navigator-hover">
                        {{ item }}x
                    </view>
                </view>
            </block>
            <block v-else-if="detail.filetype == '图文'">
                <scroll-view class="scroll" scroll-y>
                    <u-parse :content="detail.content" />
                </scroll-view>
            </block>
            <block v-else-if="detail.filetype == '音频'">
                <my-audio :src="files[0].url" :title="files[0].document" />
            </block>
        </view>
        <My_listbox v-if="showListbox" :pullDown="false" boxBackground="#fff">
            <view class="introduce">
                <view class="detail-title">详情</view>
                <view class="group">
                    <view class="title">课件名称</view>
                    <view class="value">{{ detail.title || ' --' }}</view>
                </view>
                <view class="group">
                    <view class="title">讲师</view>
                    <view class="value">{{ detail.teacher || ' --' }}</view>
                </view>
                <view class="group">
                    <view class="title">简介</view>
                    <view class="value">{{ detail.description || ' --' }}</view>
                </view>
            </view>
        </My_listbox>
    </view>
</template>

<script>
import myAudio from "../../components/my-audio.vue"
export default {
    components: { myAudio },
    data() {
        return {
            sat_coursewaredetailid: 0,
            detail: {},
            files: [],
            showListbox: false,
            speed: '1.0',
            speeds: ['0.5', '1.0', '1.5', '2.0']
        }
    },
    onLoad(options) {
        console.log(options)
        this.sat_coursewaredetailid = options.id;
        this.getDetail()
    },
    methods: {
        getDetail() {
            this.$Http.basic({
                "id": 20240315131502,
                "content": {
                    "sat_coursewaredetailid": this.sat_coursewaredetailid
                }
            }).then(res => {
                console.log("获取课件详情", res)
                if (this.cutoff(res.msg)) return;
                this.files = res.data.attinfos.filter(v => {
                    if (v.usetype == "file") switch (res.data.filetype) {
                        case '视频':
                            v.showUrl = this.getSpecifiedImage(v, 'hls')
                            break;
                    }
                    return v.usetype == "file"
                });
                this.detail = res.data;
                setTimeout(() => { this.showListbox = true }, 100)
            })
        },
        //修改视频播放倍数
        changeSpeed(speed) {
            if (!this.videoContext) this.videoContext = uni.createVideoContext('myVideo');
            this.videoContext.playbackRate(speed - 0)
            this.speed = speed;
        }
    }
}
</script>

<style lang="scss">
.head {
    width: 100vw;
    background: #fff;
    margin-bottom: 10px;

    .video {
        width: 375px;
        height: 230px;
    }

    .video-bottom {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 375px;
        height: 62px;
        background: #FFFFFF;
        box-sizing: border-box;

        .speed {
            width: 71px;
            height: 32px;
            text-align: center;
            line-height: 32px;
            background: #F2F2F2;
            border-radius: 5px;
            font-family: PingFang SC, PingFang SC;
            font-size: 14px;
            color: #333333;
        }

        .active {
            color: #FFFFFF;
            background: #C30D23;
        }
    }

    .scroll {
        width: 100vw;
        height: 400px;
        background: #fff;
    }

    .audio-box {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100px;
    }

}

.introduce {
    padding: 10px;

    .detail-title {
        height: 35px;
        background: #FFFFFF;
        padding-top: 2px;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 16px;
        color: #333333;
    }

    .group {
        margin-bottom: 20px;
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-size: 14px;
        line-height: 20px;

        .title {
            color: #666666;
        }

        .value {
            color: #000000;
            margin-top: 10px;
        }
    }
}
</style>