lasuo_nft_front/src/views/Store.vue

<template>
    <div class="explore_content" :class="collections.length < 5 ? 'shop_list_one' : ''">
        <van-pull-refresh
            class="load_refresh"
            success-text="加载成功"
            success-duration="1000"
            v-model="isLoading"
            @refresh="onRefresh"
        >
            <!-- 搜素 -->
            <van-sticky :offset-top="0" class="explore_content_con">
                <div class="explore_content_top">
                    <div class="explore_content_top_one">
                        <div class="collection_switching">
                            <div class="collection_switching_con" :class="{ active: active === 0 }" @click="active = 0">
                                持有藏品
                            </div>
                            <div
                                class="collection_switching_con"
                                :class="{ active: active === 1 }"
                                @click="getCollection"
                            >
                                收藏藏品
                            </div>
                        </div>
                        <img
                            src="@assets/sousuo@3x.png"
                            alt=""
                            class="search_img"
                            @click="$router.push('/productSearch')"
                        />
                    </div>
                    <!-- 标签页展示切换 -->
                    <van-tabs
                        v-model:active="sort"
                        line-width="32"
                        line-height="2"
                        @click-tab="changeTab"
                        v-if="active === 0"
                    >
                        <van-tab
                            :title="item.label"
                            :name="item.value"
                            :key="index"
                            v-for="(item, index) in selectOptions"
                        >
                        </van-tab>
                    </van-tabs>
                    <!-- <div class="label_tabs">
                        <div
                            :class="tabLabel == 'whole' ? 'label_selected' : 'label_not_selected'"
                            @click="tabLabelName('whole')"
                            class="label_tab"
                        >
                            全部
                        </div>
                        <div
                            :class="tabLabel == 'onSale' ? 'label_selected' : 'label_not_selected'"
                            @click="tabLabelName('onSale')"
                            class="label_tab"
                        >
                            出售中
                        </div>
                        <div
                            :class="tabLabel == 'showOnly' ? 'label_selected' : 'label_not_selected'"
                            @click="tabLabelName('showOnly')"
                            class="label_tab"
                        >
                            仅展示
                        </div>
                        <div
                            :class="tabLabel == 'notShown' ? 'label_selected' : 'label_not_selected'"
                            @click="tabLabelName('notShown')"
                            class="label_tab"
                        >
                            未展示
                        </div>
                    </div> -->
                </div>
            </van-sticky>
            <div class="data_display" v-if="active === 0">
                <!-- 藏品展示 -->
                <van-list v-model:loading="loading" :finished="finished" @load="getAllCollections">
                    <div class="data_display_fanter">
                        <template v-for="(item, index) in collections" :key="index">
                            <asset-info :info="item"></asset-info>
                        </template>
                    </div>
                    <van-empty
                        v-if="collections.length === 0 && !loading"
                        :image="require(`@assets/empty-collection.png`)"
                        :image-size="`172`"
                    >
                        <div class="h44_tip_one">你还没有相关藏品</div>
                        <div class="h44_tip">这里将展示你在拉索持有的数字藏品</div>
                    </van-empty>
                    <!-- </van-empty> -->
                </van-list>
            </div>
            <div class="data_display_one" v-else>
                <div class="current_recommendation">
                    <template v-for="(item, index) in showList" :key="index">
                        <CollectionList v-model:info="list[item.index]" @update:info="init"></CollectionList>
                    </template>
                </div>
                <van-empty
                    v-if="showList.length === 0"
                    :image="require(`@assets/empty-collection.png`)"
                    :image-size="`172`"
                >
                    <div class="h44_tip_one">你还没有收藏的藏品</div>
                    <div class="h44_tip">这里将展示你在拉索持有的数字藏品</div>
                </van-empty>
            </div>
        </van-pull-refresh>
    </div>
</template>

<script>
import AssetInfo from '../components/asset/assetInfo.vue';
import CollectionList from '../components/CollectionList.vue';
import product from '../mixins/product';
export default {
    mixins: [product],
    components: {
        AssetInfo,
        CollectionList
    },
    data() {
        return {
            tabLabel: 'whole',
            page: 0,
            empty: false,
            list: [],
            loading: false,
            finished: false,
            // 藏品列表
            collections: [],
            isLoading: true,
            active: 0,
            selectOptions: [
                {
                    label: '全部',
                    value: 'whole'
                },
                {
                    label: '挂售中',
                    value: 'onSale'
                },
                {
                    label: '仅展示',
                    value: 'showOnly'
                },
                {
                    label: '未展示',
                    value: 'notShown'
                }
            ]
        };
    },
    computed: {
        status() {
            return 'NORMAL,TRADING,GIFTING,MINTING';
        },
        showList() {
            return [...this.list].map((item, index) => {
                return {
                    ...item,
                    index
                };
            });
        }
    },
    mounted() {
        // this.getAllCollections();
    },
    methods: {
        // 获取收藏藏品
        getCollection() {
            this.active = 1;
            this.init();
        },
        init() {
            if (!this.isLogin) {
                this.empty = true;
                this.loading = false;
                return Promise.resolve();
            }
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.empty = false;
            this.$http.get('/collection/myLikes').then(res => {
                this.list = res;
                this.empty = res.length === 0;
                this.$toast.clear();
            });
        },
        change() {
            this.$root.$el.scrollTop = 0;
        },
        // 获取全部库存藏品
        getAllCollections() {
            if (!this.isLogin) {
                this.empty = true;
                this.loading = false;
                return Promise.resolve();
            }
            if (this.page === 0) {
                this.collections = [];
            }
            this.finished = false;
            this.empty = false;
            let form = {
                page: this.page,
                size: 20,
                sort: 'createdAt,desc',
                query: {
                    userId: this.$store.state.userInfo.id,
                    ...this.beforeQuery()
                }
            };
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            return this.$http.post('/asset/all', form, { body: 'json' }).then(res => {
                if (res.first) {
                    this.collections = [];
                }
                this.collections = [...this.collections, ...res.content];
                this.empty = res.empty;
                this.loading = false;
                this.finished = res.last;
                if (!this.finished) {
                    this.page = this.page + 1;
                }
                this.$toast.clear();
            });
        },
        // 顶部数据类型切换
        changeTab(info) {
            this.tabLabel = info.name;
            this.page = 0;
            this.loading = true;
            this.getAllCollections();
        },
        beforeQuery() {
            let form = {};
            if (this.tabLabel == 'onSale') {
                form = {
                    ...form,
                    publicShow: true,
                    consignment: true
                };
            } else if (this.tabLabel == 'showOnly') {
                form = {
                    ...form,
                    publicShow: true,
                    consignment: false
                };
            } else if (this.tabLabel == 'notShown') {
                form = {
                    ...form,
                    publicShow: false,
                    consignment: false
                };
            } else {
                form = {
                    status: this.status
                };
            }
            return form;
        },
        onRefresh() {
            if (this.active === 0) {
                this.page = 0;
                this.getAllCollections().then(() => {
                    this.isLoading = false;
                });
            } else {
                Promise.all([this.init()]).then(res => {
                    this.isLoading = false;
                });
            }
        }
    }
};
</script>
<style lang="less" scoped>
.load_refresh {
    background: #191d27;
}
/deep/ .van-button {
    width: 280px;
    height: 38px;
}
.explore_content {
    width: 100%;
    // margin-top: 44px;
    box-sizing: border-box;
    background: #191d27;
    .explore_content_top {
        padding: 0px 15px 15px;
        box-sizing: border-box;
        background: #191d27;
        .explore_content_top_one {
            height: 44px;
            padding: 6px 0px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            .collection_switching {
                display: flex;
                font-family: PingFangSC-Semibold, PingFang SC;
                .collection_switching_con {
                    padding-top: 5px;
                    box-sizing: border-box;
                    margin-right: 18px;
                    font-size: 16px;
                    font-weight: 500;
                    color: #ffffff;
                    line-height: 22px;
                }
                .active {
                    padding-top: 2px;
                    box-sizing: border-box;
                    font-size: 20px;
                    font-weight: 600;
                    color: #f2d5b2;
                    line-height: 28px;
                }
            }
            .search_img {
                width: 32px;
                height: 32px;
            }
        }
        /deep/ .van-tabs__wrap {
            height: 36px;
            .van-tabs__nav--line {
                padding-left: 0 !important;
                border-top: none;
                background: #191d27;
                padding-bottom: 0px;
            }
            .van-tab {
                flex: 1 !important;
                margin-right: 0px !important;
            }
            .van-tabs__line {
                bottom: 0;
                background: #d8d8d8;
            }
            .van-tab--active {
                font-size: 16px;
                font-weight: 500;
                color: #ffffff !important;
            }
        }
    }
    .label_tabs {
        width: 100%;
        display: flex;
        height: 36px;
        .label_tab {
            // width: 80px;
            flex: 1;
            height: 24px;
            // background: #29293f;
            // border-radius: 4px;
            margin-right: 16px;
            text-align: center;
            line-height: 24px;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
        }
        .label_tab:last-child {
            margin-right: 0;
        }
        .label_selected {
            font-weight: 500;
            color: #ffffff;
            border-bottom: 2px solid #d8d8d8;
        }
        .label_not_selected {
            font-weight: 400;
            color: #5f646f;
        }
    }
    .data_display {
        padding: 0px 16px 16px;
        box-sizing: border-box;
        // background: #0F0F27;
        .data_display_fanter {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-bottom: 50px;
        }
    }
    .data_display_one {
        // padding: 0px 16px 16px;
        // box-sizing: border-box;
        .current_recommendation {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            padding: 16px;
            box-sizing: border-box;
        }
    }
}
.shop_list_one {
    height: 100%;
    position: absolute;
}
.explore_content_con {
    position: relative;
    z-index: 10;
}
.h44_tip_one {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 22px;
    text-align: center;
    margin-bottom: 8px;
}
.h44_tip {
    height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 20px;
    opacity: 0.3;
}
</style>