lasuo_nft_front/src/views/Creator.vue

<template>
    <div class="discover">
        <van-sticky ref="top" :offset-top="bar.value && bar.value.show ? 46 : 0">
            <div class="top">
                <div class="top-btn">
                    <div class="btn" @click="$router.replace('/discover')">收藏探索</div>
                    <div class="btn active">铸造者</div>
                </div>
                <div class="search" @click="$router.push('/creatorSearch')">
                    <img src="@assets/svgs/search.svg" alt="" />
                </div>
            </div>

            <van-tabs
                v-model:active="sort"
                @change="
                    page = 0;
                    getList();
                "
                line-width="16"
                line-height="2"
            >
                <van-tab title="全部" name="id,desc"></van-tab>
                <van-tab title="最新" name="createdAt,desc"></van-tab>
                <van-tab title="人气" name="followers,desc"></van-tab>
            </van-tabs>
        </van-sticky>
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多" @load="getList">
            <template v-for="(item, index) in miners" :key="index">
                <creator-info v-model:info="miners[index]"></creator-info>
            </template>
        </van-list>
    </div>
</template>

<script>
import CreatorInfo from '../components/creator/CreatorInfo.vue';
export default {
    components: { CreatorInfo },
    inject: ['bar'],
    data() {
        return {
            miners: [],
            stiky: null,
            sort: 'id,desc',
            loading: false,
            finished: false,
            page: 0,
            empty: false
        };
    },
    methods: {
        getList() {
            if (this.page === 0) {
                this.miners = [];
            }
            this.loading = true;
            this.finished = false;
            this.empty = false;
            this.$http
                .post(
                    '/user/all',
                    {
                        page: this.page,
                        query: { minter: true },
                        size: 20,
                        sort: this.sort
                    },
                    { body: 'json' }
                )
                .then(res => {
                    this.miners = [...this.miners, ...res.content];
                    this.empty = res.empty;
                    this.loading = false;
                    this.finished = res.last;
                    if (!this.finished) {
                        this.page = this.page + 1;
                    }
                });
        }
    }
};
</script>

<style lang="less" scoped>
.top {
    display: flex;
    padding: 10px 16px;
    background-color: @bg;
    .top-btn {
        flex-grow: 1;
        .btn {
            font-size: 16px;
            line-height: 26px;
            display: inline-block;
            vertical-align: text-bottom;

            &.active {
                color: @prim;
                font-size: 20px;
                font-weight: bold;
                line-height: 30px;
            }
        }

        .btn + .btn {
            margin-left: 30px;
        }
    }
}

.discover {
    background-color: @bg3;
    padding-bottom: 100px;
    min-height: 100vh;
}

/deep/.van-tab {
    color: #fff;
    flex: 0;
    padding: 20px;
    flex-shrink: 0;
    min-width: 74px;

    &.van-tab--active {
        color: @prim;
    }
}

/deep/ .van-tabs__line {
    bottom: 20px;
}
</style>