YXGJ/pages/index/cloud/dataBank.vue

<template>
    <My_listbox ref="List" @getlist="getList" :isShowEmpty="false" :bottomHeight="70">
        <view class="box">
            <navigator class="nav-box" v-for="item in appList" :key="item.name" :url="item.path"
                hover-class="navigator-hover">
                <image v-if="item.cover" class="image" :src="item.cover" mode="aspectFill" lazy-load="false" />
                <text v-else>{{ item.remark }}</text>
            </navigator>
            <navigator class="nav-box" v-for="item in list" :url="'/packageA/resourceLibrary/index?id=' + item.parentid"
                :key="item.name" hover-class="navigator-hover">
                <image v-if="item.cover" class="image" :src="item.cover" mode="aspectFill" lazy-load="false" />
                <text v-else>{{ item.title }}</text>
            </navigator>
        </view>
    </My_listbox>
</template>

<script>
export default {
    data() {
        return {
            appList: [],
            list: [],
            "content": {
                "pageNumber": 1,
                "pageSize": 20,
                "isDataAuth": true,//小程序默认传true
                "where": {
                    "condition": "",
                    "sat_sharematerial_classids": [],
                }
            }
        }
    },
    methods: {
        init(callBack) {
            try {
                this.appList = this.getApps('资料库')
            } catch (error) {
                console.log("未获取到授权")
            }
            this.getList().then(res => {
                callBack()
            })
        },
        getList(init = false) {
            return new Promise((resolve, reject) => {
                if (this.paging(this.content, init)) return resolve();
                this.$Http.basic({
                    "id": "20240407094702",
                    content: this.content
                }).then(res => {
                    console.log("获取装备资源库一级分类", res)
                    this.$refs.List.RefreshToComplete()
                    resolve()
                    if (this.cutoff(res.msg)) return;
                    res.data = res.data.map(v => {
                        v.cover = v.attinfos.length ? this.getSpecifiedImage(v.attinfos.find(s => v.usetype == "avatar")) : "";
                        return v
                    });
                    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">
.box {
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .nav-box {
        width: 172.5px;
        height: 104px;
        flex-shrink: 0;
        margin-top: 10px;

        .image {
            width: 100%;
            height: 100%;
        }
    }
}
</style>