YXGJ/packageA/course/index.vue

<template>
    <view>
        <view class="head" catchtouchmove="true" @touchmove.stop.prevent="() => { }">
            <My_search :value="content.where.condition" @onSearch="onSearch">
                <view class="filtrate" v-if="filtrateList.length" hover-class="navigator-hover" @click="openFiltrate">
                    筛选
                    <text class="iconfont icon-shaixuan" />
                </view>
            </My_search>
            <view class="crumbs">
                <view class="crumb" v-for="item in crumbs" :key="item.classname">{{ item.classname }}</view>
            </view>
        </view>
        <view style="height: 1px;" />
        <filtrate ref="Filtrate" :filtrateList="filtrateList" @onFiltration="onFiltration" />
        <view style="height: 9px;" />
        <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.onsale_courseware_count || 0 }}个课件 | {{ item.study_count || 0
                        }}人已学习
                        </view>
                    </view>
                </navigator>
            </view>
        </My_listbox>
    </view>
</template>

<script>
export default {
    data() {
        return {
            crumbs: [],
            list: [],
            "content": {
                "where": {
                    "condition": "",
                    "sat_courseware_classids": [[]]
                }
            },
            filtrateList: []
        }
    },
    computed: {
    },
    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.filtrateList = [{
                    title: "分类",
                    key: 'sat_courseware_classids',//提交时返回的Key
                    showKey: "classname",//显示的key
                    selected: "sat_courseware_classid",//选择时选择的字段
                    value: "",//提交时选中的value
                    defaultVal: "",//返回的默认值
                    isAll: true,
                    rang: [{ classname: "全部", sat_courseware_classid: "" }].concat(res.data),//选择的范围
                }]
            })
        },
        getList(init = false) {
            if (this.paging(this.content, init)) return;
            let ids = this.crumbs.map(v => v.parentid).filter(v => v);
            this.content.where.sat_courseware_classids = ids.length ? [[ids[ids.length - 1]]] : []
            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)
            })
        },
        openFiltrate() {
            this.$refs.Filtrate.changeShow();
        },
        onSearch(condition) {
            this.content.where.condition = condition;
            this.getList(true)
        },
        onFiltration(e) {
            this.$set(this.crumbs, 2, {
                classname: e.sat_courseware_classids.classname,
                parentid: e.sat_courseware_classids.sat_courseware_classid,
            })
            this.getList(true)
        }
    }
}
</script>

<style lang="scss">
.head {
    padding: 10px;
    width: 100%;
    background: #fff;
    box-sizing: border-box;

    .filtrate {
        line-height: 30px;
        padding: 0 10px;
        font-family: PingFang SC, PingFang SC;
        font-size: 14px;
        color: #333333;
        border-radius: 3px;
        margin-left: 10px;

        .iconfont {
            margin-left: 3px;
            color: #BBBBBB;
        }
    }
}

.crumbs {
    display: flex;
    line-height: 17px;
    font-family: PingFang SC, PingFang SC;
    font-size: 12px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 10px;

    .crumb {
        flex-shrink: 0;

    }

    .crumb::after {
        content: ">";
        padding: 0 2px;
    }

    .crumb:last-child {
        font-weight: bold;
    }

    .crumb:last-child::after {
        content: "";
    }
}

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