YXGJ/packageA/resourceLibrary/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" @onInterrupt="onInterrupt" />
        <view style="height: 9px;" />
        <My_listbox ref="List" @getlist="getList" boxBackground="#fff">
            <view class="waterfalls">
                <custom-waterfalls-flow ref="waterfallsFlowRef" :value="list" :column="2" :columnSpace="1.5" :seat="2"
                    @wapperClick="wapperClick" @imageClick="wapperClick">
                    <!-- #ifdef MP-WEIXIN -->
                    <view class="waterfalls-item" v-for="(item, index) in list" :key="index" slot="slot{{index}}">
                        <view class="waterfalls-item-title u-line-2">{{ item.title }}</view>
                    </view>
                    <!-- #endif -->
                    <!-- #ifndef MP-WEIXIN -->
                    <template v-slot:default="item">
                        <view class="waterfalls-item">
                            <view class="waterfalls-item-title u-line-2">{{ item.title }}</view>
                        </view>
                    </template>
                    <!-- #endif -->
                </custom-waterfalls-flow>
            </view>
        </My_listbox>
    </view>
</template>

<script>
export default {
    data() {
        return {
            crumbs: [],
            list: [],
            "content": {
                "isDataAuth": true,//小程序默认传true
                "where": {
                    "condition": "",
                    "status": "发布",
                    "type": "",//1:图片，2：视频，3：图文
                    "sat_sharematerial_classids": [[]],
                    "begindate_create": "",//创建时间
                    "enddate_create": "",//创建时间
                    "begindate": "",//发布时间
                    "enddate": ""//发布时间
                }
            },
            filtrateList: []
        }
    },
    onLoad(options) {
        this.crumbs = [{
            classname: options.name,
            parentid: options.id
        }, {
            classname: "全部",
            parentid: ''
        }]
        this.getType()
        this.getList(true)
        uni.setNavigationBarTitle({
            title: '装备资源库',
        })
    },
    onShow() {
        this.updateList()
    },
    methods: {
        getType() {
            this.$Http.basic({
                "id": "20221102143202",
                content: {
                    pageSize: 9999,
                    parentid: this.crumbs[0].parentid,
                    "where": {
                        "isenable": 1
                    }
                }
            }).then(res => {
                console.log("获取分类列表", res)
                if (this.cutoff(res.msg)) return;
                this.filtrateList = [{
                    title: "分类",
                    key: '一级分类',//提交时返回的Key
                    showKey: "classname",//显示的key
                    selected: "sat_sharematerial_classid",//选择时选择的字段
                    value: "",//提交时选中的value
                    defaultVal: "",//返回的默认值
                    isAll: true,
                    interrupt: true,
                    rang: [{ classname: "全部", sat_sharematerial_classid: "", children: [] }].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_sharematerial_classids = ids.length ? [[ids[ids.length - 1]]] : []
            this.$Http.basic({
                "id": 20240407094702,
                content: this.content
            }).then(res => {
                this.$refs.List.RefreshToComplete()
                console.log("获取装备资源库列表", res)
                if (this.cutoff(res.msg)) return;
                res.data = res.data.map(v => {
                    v.image = v.attinfos.length ? this.getSpecifiedImage(v.attinfos.find(s => s.usetype == "avatar") || v.attinfos[0]) : ''
                    return v
                })
                this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data);
                if (init) this.$refs.waterfallsFlowRef.refresh()
                this.content = this.$refs.List.paging(this.content, res)
            })
        },
        updateList() {
            if (this.content.pageNumber && this.content.pageNumber >= 2) {
                let content = this.paging(this.content, true, true)
                this.$Http.basic({
                    "id": "20240407094702",
                    content
                }).then(res => {
                    console.log("更新装备资源库列表", res)
                    if (this.cutoff(res.msg)) return;
                    this.list = res.data;
                })
            }
        },
        wapperClick(e) {
            uni.navigateTo({ url: '/packageA/resourceLibrary/detail?id=' + e.sat_sharematerialid })
        },
        openFiltrate() {
            this.$refs.Filtrate.changeShow();
        },
        onSearch(condition) {
            this.content.where.condition = condition;
            this.getList(true)
        },
        onInterrupt({ item, index, option }) {
            let filtrateList = this.$refs.Filtrate.list;
            const i = filtrateList.findIndex(v => v.title == '下级分类');
            if (option.children.length) {
                const obj = {
                    title: "下级分类",
                    key: '二级分类',
                    showKey: "classname",
                    selected: "sat_sharematerial_classid",
                    value: "",
                    defaultVal: "",
                    isAll: true,
                    rang: [{ classname: "全部", sat_sharematerial_classid: "" }].concat(option.children),
                };
                i == -1 ? filtrateList.push(obj) : filtrateList[i] = obj;
            } else {
                i == -1 ? '' : filtrateList.pop();
            }
            this.$refs.Filtrate.list = filtrateList || JSON.parse(JSON.stringify());
        },
        onFiltration(e) {
            let crumbs = [this.crumbs[0]]
            crumbs.push({
                classname: e.一级分类.classname,
                parentid: e.一级分类.sat_sharematerial_classid
            })
            if (e.二级分类) crumbs.push({
                classname: e.二级分类.classname,
                parentid: e.二级分类.sat_sharematerial_classid
            })

            this.crumbs = crumbs;
            this.getList(true)
        },
        statusChange({ name }) {
            this.content.where.status = name == '全部' ? '' : name;
            this.getList(true)
        }
    }
}
</script>

<style lang="scss" scoped >
.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: "";
    }
}

.waterfalls {
    width: 100vw;
    padding: 10px;
    box-sizing: border-box;

    &-item {
        border-radius: 0 !important;

        &-title {
            text-align: center;
            line-height: 18.5px;
            width: 100%;
            background: #FFFFFF;
            font-family: PingFang SC, PingFang SC;
            font-size: 12px;
            color: #333333;
        }
    }

}
</style>