lasuo_back/src/main/nine-space/src/views/Home.vue

<template>
    <div class="home">
        <swiper
            :effect="'coverflow'"
            :grabCursor="true"
            :centeredSlides="true"
            :slidesPerView="'auto'"
            :coverflowEffect="{
                rotate: 30,
                stretch: 0,
                depth: 0,
                modifier: 1,
                slideShadows: true
            }"
            class="mySwiper"
            v-if="banners.length > 0"
        >
            <template v-for="item in banners" :key="item.id">
                <swiper-slide>
                    <van-image :radius="6" width="100%" height="calc(45vw - 29px)" :src="item.pic" fit="cover" />
                </swiper-slide>
            </template>
        </swiper>

        <div class="box" v-if="box.length > 0">
            <page-title title="数字盲盒" :to="{ path: '/productList', query: { type: 'BLIND_BOX' } }"></page-title>
            <div class="box-list">
                <product-info v-for="(item, index) in box" :key="item.id" v-model:info="box[index]"></product-info>
            </div>
        </div>

        <div class="box">
            <page-title title="最HOT收藏品" :to="{ path: '/productList', query: { type: 'DEFAULT' } }"></page-title>
            <div class="box-list">
                <template v-for="(item, index) in products" :key="item.id">
                    <product-info v-model:info="products[index]"></product-info
                ></template>
            </div>
        </div>

        <!-- <page-title title="最HOT收藏品"></page-title>

    <div class="hot">
      <product-info></product-info>
      <div class="hot-right">
        <product-small></product-small>
        <product-small></product-small>
      </div>
    </div> -->

        <div class="casting">
            <page-title title="最受欢迎铸造者" :to="{ path: '/creatorList' }"></page-title>
            <template v-for="(item, index) in miners" :key="index">
                <creator-info
                    :rank="index < 3 ? index + 1 : 0"
                    v-model:info="miners[index]"
                    size="large"
                ></creator-info>
            </template>
        </div>

        <div class="tabbar-placeholder"></div>
    </div>
</template>

<script>
// @ is an alias to /src

import { Swiper, SwiperSlide } from 'swiper/vue';

// Import Swiper styles

import 'swiper/swiper.min.css';
import 'swiper/swiper-bundle.min.css';

import SwiperCore, { EffectCoverflow } from 'swiper';
import ProductInfo from '../components/product/productInfo.vue';
// import ProductSmall from "../components/product/productSmall.vue";
import CreatorInfo from '../components/creator/CreatorInfo.vue';

// install Swiper modules
SwiperCore.use([EffectCoverflow]);

export default {
    name: 'Home',
    inject: ['bs'],
    components: {
        Swiper,
        SwiperSlide,
        ProductInfo,
        CreatorInfo
    },
    data() {
        return {
            banners: [],
            box: [],
            products: [],
            miners: []
        };
    },
    mounted() {
        this.$toast.loading({
            message: '加载中...',
            forbidClick: true
        });
        Promise.all([
            this.$http
                .post(
                    '/banner/all',
                    {
                        query: {
                            type: 'HOME'
                        },
                        sort: 'createdAt,desc'
                    },
                    { body: 'json' }
                )
                .then(res => {
                    this.banners = res.content;
                }),
            this.getProduct('BLIND_BOX').then(res => {
                this.box = res;
            }),
            this.getProduct().then(res => {
                this.products = res;
            }),
            this.getMiner()
        ]).then(() => {
            this.$toast.clear();
        });
    },
    methods: {
        getProduct(type = 'DEFAULT') {
            return this.$http
                .post(
                    '/collection/all',
                    {
                        page: 0,
                        size: 4,
                        query: {
                            type: type,
                            onShelf: true,
                            del: false
                        },
                        sort: 'createdAt,desc'
                    },
                    { body: 'json' }
                )
                .then(res => {
                    return Promise.resolve(res.content);
                });
        },
        getMiner() {
            this.$http
                .post(
                    '/user/all',
                    {
                        page: 0,
                        query: { hasRole: 'ROLE_MINTER' },
                        size: 5,
                        sort: 'sales,desc'
                    },
                    { body: 'json' }
                )
                .then(res => {
                    this.miners = res.content;
                });
        }
    }
};
</script>

<style lang="less" scoped>
.swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: calc(100vw - 66px);
    height: calc(45vw - 29px);

    img {
        width: calc(100vw - 66px);
        height: calc(45vw - 29px);
        display: block;
    }
    .van-image {
        border-radius: 6px;
    }
}

.swiper-slide img {
    display: block;
    width: 100%;
}
.home {
    padding: 10px 0 100px 0;
}

.hot {
    display: flex;
    padding: 0 8px;

    .hot-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

.box-list {
    padding: 0 8px;
    display: flex;
    flex-wrap: wrap;

    .product {
        margin-bottom: 16px;
    }
}
</style>