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 class="collect" @click="loadings.collect ? '' : handleCollect(1, detail.iscollect)">
                <u-loading-icon v-if="loadings.collect" />
                <block v-else>
                    <view v-if="detail.iscollect" style="color: #FFC300;" class="iconfont icon-yishoucang" />
                    <view v-else style="color: #646566;" class="iconfont icon-weishoucang" />
                    <view class="text">
                        收藏
                    </view>
                </block>
            </view>
        </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'],
            loadings: {
                collect: false
            }
        }
    },
    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;
                uni.setNavigationBarTitle({
                    title: res.data.title,
                })
                setTimeout(() => { this.showListbox = true }, 100)
            })
        },
        //修改视频播放倍数
        changeSpeed(speed) {
            if (!this.videoContext) this.videoContext = uni.createVideoContext('myVideo');
            this.videoContext.playbackRate(speed - 0)
            this.speed = speed;
        },
        handleCollect(type, value) {
            if (type == 1) {
                this.loadings.collect = true;
            } else {
                this.loadings.like = true;
            }
            this.$Http.basic({
                "id": 20240416133702,
                "content": {
                    "ownertable": "sat_coursewaredetail",
                    "ownerid": this.detail.sat_coursewaredetailid,
                    type
                },
            }).then(res => {
                console.log(value ? '取消' : '添加', type == 1 ? "收藏" : "喜欢", res)
                if (type == 1) {
                    this.loadings.collect = false;
                } else {
                    this.loadings.like = false;
                }
                if (this.cutoff(res.msg)) return;
                if (type == 1) {
                    this.detail.iscollect = value ? 0 : 1
                    this.detail.collectcount = value ? this.detail.collectcount - 1 : this.detail.collectcount - 0 + 1
                } else {
                    this.detail.islike = value ? 0 : 1
                    this.detail.likecount = value ? this.detail.likecount - 1 : this.detail.likecount - 0 + 1
                }
            })
        }
    }
}
</script>

<style lang="scss">
.head {
    position: relative;
    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;
    }

    .collect {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 10px;
        right: 10px;
        width: 80px;
        height: 24px;
        background: #FFFFFF;
        border-radius: 12px;
        border: 1px solid #CCCCCC;

        .iconfont {
            font-size: 14px;
        }

        .text {
            font-family: PingFang SC, PingFang SC;
            font-size: 12px;
            color: #333333;
            margin-left: 5px;
        }
    }

}



.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>