modern_point/src/main/pc-space/src/views/Collection.vue

<template>
    <div class="container">
        <div class="title" ref="anchor">{{ type === 'BLIND_BOX' ? '欢迎来到藏品盲盒市场' : '欢迎来到藏品市场' }}</div>
        <el-radio-group v-if="type !== 'BLIND_BOX'" class="menu" v-model="select" size="normal">
            <el-radio-button v-for="(item, index) in typeList" :key="index" :label="item.value">
                <div class="radio-item">
                    <i class="font_family" :class="[item.icon]"></i>
                    <span>{{ item.label }}</span>
                </div>
            </el-radio-button>
        </el-radio-group>

        <div class="border" v-if="type !== 'BLIND_BOX'" style="margin-top: 30px"></div>
        <div class="search-list">
            <el-input
                class="search"
                prefix-icon="el-icon-search"
                placeholder="请输入您想找到的作品名称…"
                v-model="search"
                clearable
                @change="onSearch"
            >
            </el-input>
            <el-select class="select" style="margin-top: 30px" v-model="sortStr" placeholder="请选择">
                <el-option v-for="item in sortList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>

        <div class="list" v-loading="fetchingData">
            <collection-info v-for="(item, index) in list" :key="item.id" :info.sync="list[index]"></collection-info>

            <el-empty v-if="empty" description="还没有该类型的藏品哦～"></el-empty>
        </div>

        <div class="pagination-wrapper">
            <el-pagination
                @size-change="onSizeChange"
                @current-change="onCurrentChange"
                :current-page="page"
                :page-sizes="[10, 20, 30, 40, 50]"
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="totalElements"
            >
            </el-pagination>
        </div>
    </div>
</template>
<script>
import CollectionInfo from '../components/CollectionInfo.vue';
import pageableTable from '../mixins/pageableTable';
export default {
    components: { CollectionInfo },
    data() {
        return {
            typeList: [
                {
                    label: '全部',
                    icon: 'icon-icon-quanbu',
                    value: '0'
                },
                {
                    label: '新品',
                    icon: 'icon-icon-zuixin',
                    value: '1'
                },
                {
                    label: '转让',
                    icon: 'icon-icon-zhuanrang',
                    value: '2'
                },
                {
                    label: '拍卖',
                    icon: 'icon-icon-paimai',
                    value: '3'
                }
            ],
            sortList: [
                {
                    label: '综合排序',
                    value: 'createdAt,desc'
                },
                {
                    label: '热门排序',
                    value: 'likes,desc'
                },
                {
                    label: '价格降序',
                    value: 'price,desc'
                },
                {
                    label: '价格升序',
                    value: 'price,asc'
                }
            ],
            search: '',
            select: '0',
            url: '/collection/all',
            list: [],
            type: 'DEFAULT,AUCTION'
        };
    },
    mixins: [pageableTable],
    watch: {
        select() {
            if (this.type === 'BLIND_BOX') {
                return;
            }
            switch (this.select) {
                case '0':
                    this.type = 'DEFAULT,AUCTION';
                    this.canResale = '';
                    break;
                case '1':
                    this.type = 'DEFAULT';
                    this.canResale = '';
                    break;
                case '2':
                    this.type = 'DEFAULT,AUCTION';
                    this.canResale = true;
                    break;
                case '3':
                    this.type = 'AUCTION';
                    this.canResale = '';
                    break;
            }

            this.$router
                .replace({
                    query: {
                        ...this.$route.query,
                        type: this.type,
                        canResale: this.canResale
                    }
                })
                .catch(() => {});

            this.page = 1;
            this.getData();
        },
        '$route.query.type'() {
            if (!this.$route.query.type || this.$route.query.type === 'BLIND_BOX') {
                this.init();
            }
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.init();
        });
    },
    methods: {
        init() {
            this.type = 'DEFAULT,AUCTION';
            this.search = '';
            this.sortStr = 'createdAt,desc';
            this.page = 1;
            if (this.$route.query.sort) {
                this.sortStr = this.$route.query.sort;
            }
            if (this.$route.query.type) {
                this.type = this.$route.query.type;
            }
            this.select = '0';
            if (this.type === 'DEFAULT') {
                this.select = '1';
            }
            if (this.type === 'AUCTION') {
                this.select = '3';
            }
            if (this.$route.query.canResale) {
                this.canResale = true;
                this.select = '2';
            } else {
                this.canResale = '';
            }
            this.isFirst = true;
            this.getData();
        },
        beforeGetData() {
            if (this.canResale) {
                return {
                    search: this.search,
                    query: {
                        type: this.type,
                        canResale: this.canResale,
                        onShelf: true
                    }
                };
            } else {
                return {
                    search: this.search,
                    query: {
                        type: this.type,
                        onShelf: true
                    }
                };
            }
        },
        setList(list) {
            this.list = list;
        }
    }
};
</script>
<style lang="less" scoped>
@import url('../styles/list.less');
</style>