YXGJ/packageA/course/index.vue

<template>
    <view>
        <view style="height: 10px;">

        </view>
        <My_listbox ref="List" @getlist="getList" boxBackground="#fff">
            <view class="list-box">
                <navigator class="item" v-for="item in list" :key="item.sat_coursewareid"
                    :url="'/packageA/course/list?id=' + item.sat_coursewareid">
                    <image class="image" :src="item.cover" mode="aspectFill" lazy-load="true" />
                    <view class="text">
                        <view class="title u-line-1">{{ item.title || '--' }}</view>
                        <view class="teacher u-line-1">讲师：{{ item.teacher || '--' }}</view>
                        <view class="count u-line-1">共{{ item.courseware_count || 0 }}个课件 | {{ item.study_count || 0 }}人已学习
                        </view>
                    </view>
                </navigator>
            </view>
        </My_listbox>
    </view>
</template>

<script>
export default {
    data() {
        return {
            crumbs: [],
            types: [],
            list: [],
            "content": {
                "where": {
                    "condition": "",
                    "sat_courseware_classids": [[]]
                }
            }
        }
    },
    onLoad(options) {
        this.crumbs = [{
            classname: "商学院"
        }, {
            classname: options.classname,
            parentid: options.id
        }, {
            classname: "全部",
            parentid: ''
        },]
        this.getType()
        this.getList(true)
    },
    methods: {
        getType() {
            this.$Http.basic({
                "id": "20221102143302",
                content: {
                    pageSize: 9999,
                    parentid: this.crumbs[1].parentid,
                    "where": {
                        "isenable": 1
                    }
                }
            }).then(res => {
                console.log("获取二级列表", res)
                if (this.cutoff(res.msg)) return;
                this.types = res.pageNumber == 1 ? res.data : this.types.concat(res.data);
            })
        },
        getList(init = false) {
            if (this.paging(this.content, init)) return;
            this.content.where.sat_courseware_classids = [
                [
                    this.crumbs[1].parentid,
                    this.crumbs[2].parentid,
                ].filter(v => v)
            ]
            this.$Http.basic({
                "id": 20240318101802,
                content: this.content
            }).then(res => {
                this.$refs.List.RefreshToComplete()
                console.log("获取课程列表", res)
                if (this.cutoff(res.msg)) return;
                this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data);
                this.content = this.$refs.List.paging(this.content, res)
            })
        },
    }
}
</script>

<style lang="scss">
.list-box {
    padding: 10px;
    width: 100vw;
    box-sizing: border-box;

    .item {
        display: flex;
        width: 100%;
        border-radius: 5px;
        overflow: hidden;
        margin-top: 10px;

        .image {
            width: 120px;
            height: 74px;
            margin-right: 10px;
            border-radius: 5px;
            flex-shrink: 0;
        }

        .text {
            flex: 1;
            font-family: Source Han Sans SC, Source Han Sans SC;

            .title {
                font-weight: bold;
                font-size: 16px;
                color: #000000;
                line-height: 24px;
            }

            .teacher {
                font-size: 14px;
                color: #999999;
                line-height: 20px;
                margin-top: 4px;
            }

            .count {
                font-size: 12px;
                color: #666666;
                line-height: 17px;
                margin-top: 8px;
            }
        }

    }
}
</style>