YXGJ/components/collectLists/courseware.vue

<template>
    <view class="catalog">
        <navigator class="item" :url="'/packageA/course/detail?id=' + item.sat_coursewaredetailid" v-for="item in list"
            :key="item.sat_coursewaredetailid">
            <view class="cover">
                <view class="u-icon" v-if="item.filetype == '视频' || item.filetype == '音频'">
                    <u-icon name="play-right-fill" color="#FFFFFF" size="30" />
                </view>
                <image class="image" :src="item.cover" mode="aspectFill" lazy-load="true" />
            </view>
            <view class="title u-line-2">
                {{ item.title || '--' }}
            </view>
        </navigator>
    </view>
</template>

<script>
export default {
    name: "list",
    props: {
        list: {
            type: Array
        }
    },
    methods: {
        handleList(list) {
            return list.map(v => {
                if (v.filetype == '视频') {
                    if (v.attinfos.length) {
                        let cover = v.attinfos.find(s => s.subfiles.some(e => e.type == 'cover'))
                        if (cover) {
                            v.cover = cover.subfiles.find(e => e.type == 'cover').url;
                        } else {
                            v.cover = uni.getStorageSync("site").logo
                        }
                    } else {
                        v.cover = uni.getStorageSync("site").logo
                    }
                }
                else {
                    v.cover = v.attinfos.length ? this.getSpecifiedImage(v.attinfos.find(s => s.usetype == "avatar") || v.attinfos[0]) : uni.getStorageSync("site").logo || ''
                }
                return v
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.catalog {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;

    .item {
        flex-shrink: 0;
        margin-bottom: 10px;
        border-radius: 5px;

        .cover {
            position: relative;
            width: 173px;
            height: 106px;
            border-radius: 5px;
            overflow: hidden;

            .u-icon {
                position: absolute;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                z-index: 9999999;
                opacity: .9;
            }

            .image {
                width: 100%;
                height: 100%;
            }
        }

        .title {
            height: 34px;
            font-size: 12px;
            color: #333333;
            line-height: 17px;
            margin-top: 10px;
            width: 173px;
        }
    }
}
</style>