zhishifufei_uniapp/pages/material/material_list.vue

<template>
    <BaseContainer class="material-cate goodsClass" flex>
        <NavBar title="资料下载" />
        <view class="header">
            <view class="search acea-row row-middle">
                <view class="pictrue">
                    <image v-if="homeLogo" @error="homeLogo = ''" :src="homeLogo" mode="heightFix" />
                </view>
                <view class="form">
                    <view class="label">
                        <image class="img" :src="getImgPath('/wap/first/zsff/images/search.png')" />
                        <input class="input" @confirm="search" v-model="searchValue" placeholder="输入资料名称" />
                    </view>
                    <view class="submit" @click="search">搜索</view>
                </view>
            </view>

            <scroll-view scroll-x v-if="cateList.length">
                <view class="grade-cate-list flex" @click="handleCateTabClick">
                    <view class="grade-item" v-for="(item, idx) of cateList" :key="item.id" :data-idx="idx"
                        :class="{ cur: idx === supIndex }">
                        {{ item.title }}
                    </view>
                </view>
            </scroll-view>


        </view>

        <scroll-view scroll-x v-if="subList.length">
            <view class="sub-list flex" @click="handleSubTabClick">
                <view class="sub-item" v-for="(item, idx) of subList" :key="item.id" :data-idx="idx"
                    :class="{ cur: idx === subIndex }">
                    {{ item.title }}
                </view>
            </view>
        </scroll-view>

        <view class="flex-auto pos">
            <scroll-view scroll-y class="abs full" @scrolltolower="getMaterialList">
                <view class="list">
                    <navigator v-for="item in materialList" :key="item.id" hover-class="none"
                        :url="`/pages/special/data_details?id=${item.id}`">
                        <view>
                            <image :src="item.image" mode="aspectFit" />
                        </view>
                        <view>
                            <view>{{ item.title }}</view>
                            <view :class="{ money: item.pay_type }">
                                <template v-if="item.pay_type">
                                    ￥<text>{{ item.money }}</text>
                                </template>
                                <template v-else>
                                    免费
                                </template>
                            </view>
                            <view>
                                <view>{{ item.ficti + item.sales }}人已下载</view>
                                <button type="button">去下载</button>
                            </view>
                        </view>
                    </navigator>
                </view>
                <view v-if="finished && !materialList.length">
                    <image mode="aspectFit" class="nothing"
                        :src="getImgPath('/wap/first/zsff/images/no_data_available.png')" />
                </view>
                <view v-else-if="finished && materialList.length" class="loading-line">
                    已全部加载完
                </view>
                <view v-else class="loading-line" style="background-color: #ffffff">
                    <text v-if="loading" class="fa fa-spinner loadingpic" style="font-size: 40rpx"></text>
                    <text>{{ "加载更多" }}</text>
                </view>
                <view style="height: var(--tab-bar-height)"></view>
            </scroll-view>
        </view>
    </BaseContainer>
</template>

<script>
import { getMaterialCate, getMaterialList2 } from "@/api/material";
import { getLogoConfig } from "@/api/special";

export default {
    data() {
        return {
            page: 1,
            limit: 8,
            loading: false,
            finished: false,
            materialList: [],
            headerHeight: 0,
            searchValue: '',
            homeLogo: '',
            cateList: [],
            supIndex: 0,
            subIndex: 0,

            cateScrollIdx: "",
            cateId: -1
        }
    },
    computed: {
        subList() {
            if (!this.cateList.length) {
                return [];
            }
            return this.cateList[this.supIndex].children;
        }
    },
    onLoad() {
        this.getMaterialCate();
        this.getLogoConfig();
    },
    methods: {
        async getLogoConfig() {
            try {
                const { data } = await getLogoConfig();
                this.homeLogo = data.homeLogo;
            } catch (err) {
                console.log(err);
            }
        },
        getHeaderHeight() {
            this.headerHeight = this.$refs.header.clientHeight;
        },
        // 获取分类
        async getMaterialCate() {
            this.loading = true;
            uni.showLoading({ mask: true });

            try {
                const { data: cateList } = await getMaterialCate();
                this.cateList = cateList;
                uni.hideLoading();
                this.loading = false;
                this.getMaterialList();
            } catch (err) {
                this.loading = false;
                uni.hideLoading();
                this.$util.showMsg(err.message);
            }
        },
        // 获取列表
        async getMaterialList() {
            if (this.loading || this.finished) return;

            if (this.searchValue) {
                this.pid = 0;
                this.cate_id = 0;
            } else {
                if (!this.subList.length) {
                    return;
                }
                this.pid = this.cateList[this.supIndex].id;
                this.cate_id = this.subList[this.subIndex].id;
            }
            this.loading = true;

            uni.showLoading({ mask: true });

            try {
                const { data: materialList } = await getMaterialList2({
                    pid: this.pid,
                    cate_id: this.cate_id,
                    search: this.searchValue,
                    page: this.page++,
                    limit: this.limit
                });
                uni.hideLoading();
                this.materialList = this.materialList.concat(materialList);
                this.finished = this.limit > materialList.length;
            } catch (err) {
                uni.hideLoading();
                this.$util.showMsg(err.message);
            }
            this.loading = false;

        },
        // 搜索
        search() {
            if (this.loading) return;
            this.materialList = [];
            this.finished = false;
            this.page = 1;
            this.getMaterialList();
        },
        handleCateTabClick(e) {
            if (e.target.dataset.idx !== undefined) {
                this.supIndex = e.target.dataset.idx;

                this.subIndex = 0;
                this.materialList = [];
                this.finished = false;
                this.page = 1;
                this.searchValue = '';
                this.getMaterialList();
            }
        },
        handleSubTabClick(e) {
            if (e.target.dataset.idx !== undefined) {
                this.subIndex = e.target.dataset.idx;
            }

            this.materialList = [];
            this.finished = false;
            this.page = 1;
            this.searchValue = '';
            this.getMaterialList();
        }
    }
}
</script>

<style></style>

<style lang="scss">
@import "@/static/style/good.scss";

.sub-list {
    white-space: nowrap;
    border-bottom: 1px solid #3f9cff;
}

.goodsClass .header {
    padding-top: 0 !important;
    height: auto;

}

.search {
    /*  #ifdef H5  || APP-PLUS  */
    margin-top: 30rpx;
    /*  #endif  */
}

.sub-item {
    height: 86rpx;
    padding-right: 19rpx;
    padding-left: 19rpx;
    font-size: 26rpx;
    line-height: 86rpx;
    color: #666;

    &.cur {
        font-weight: bold;
        color: #2c8eff;
    }
}

.nothing {
    display: block;
    width: 414rpx;
    height: 305rpx;
    margin: 200rpx auto 0;
}
.goodsClass .header .search {
    padding: 10rpx 10rpx 0;
}


.goodsClass .header .search .label {
    margin-right: 0 !important;
}</style>