|
|
@@ -14,14 +14,43 @@
|
|
|
}"
|
|
|
loop
|
|
|
class="mySwiper"
|
|
|
+ v-if="banners.length > 0"
|
|
|
>
|
|
|
- <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
|
|
|
- <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
|
|
|
- <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
|
|
|
- <swiper-slide><img src="../assets/banner.jpg" /></swiper-slide>
|
|
|
+ <template v-for="item in banners" :key="item.id">
|
|
|
+ <swiper-slide>
|
|
|
+ <van-image
|
|
|
+ width="100%"
|
|
|
+ height="calc(45vw - 29px)"
|
|
|
+ :src="item.pic"
|
|
|
+ fit="cover"
|
|
|
+ />
|
|
|
+ </swiper-slide>
|
|
|
+ </template>
|
|
|
</swiper>
|
|
|
|
|
|
- <page-title title="最HOT收藏品"></page-title>
|
|
|
+ <div class="box" v-if="box.length > 0">
|
|
|
+ <page-title title="数字盲盒"></page-title>
|
|
|
+ <div class="box-list">
|
|
|
+ <product-info
|
|
|
+ v-for="item in box"
|
|
|
+ :key="item.id"
|
|
|
+ :info="item"
|
|
|
+ ></product-info>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="box">
|
|
|
+ <page-title title="最HOT收藏品"></page-title>
|
|
|
+ <div class="box-list">
|
|
|
+ <product-info
|
|
|
+ v-for="item in products"
|
|
|
+ :key="item.id"
|
|
|
+ :info="item"
|
|
|
+ ></product-info>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <page-title title="最HOT收藏品"></page-title>
|
|
|
|
|
|
<div class="hot">
|
|
|
<product-info></product-info>
|
|
|
@@ -29,26 +58,16 @@
|
|
|
<product-small></product-small>
|
|
|
<product-small></product-small>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
|
|
|
<div class="casting">
|
|
|
<page-title title="最受欢迎铸造者"></page-title>
|
|
|
-
|
|
|
- <creator-info :rank="1"></creator-info>
|
|
|
- <creator-info :rank="2"></creator-info>
|
|
|
- <creator-info :rank="3"></creator-info>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="box">
|
|
|
- <page-title title="数字盲盒"></page-title>
|
|
|
- <div class="box-list">
|
|
|
- <product-info></product-info>
|
|
|
- <product-info></product-info>
|
|
|
- <product-info></product-info>
|
|
|
- <product-info></product-info>
|
|
|
- <product-info></product-info>
|
|
|
- <product-info></product-info>
|
|
|
- </div>
|
|
|
+ <template v-for="(item, index) in miners" :key="index">
|
|
|
+ <creator-info
|
|
|
+ :rank="index < 3 ? index + 1 : 0"
|
|
|
+ :info="item"
|
|
|
+ ></creator-info>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -65,7 +84,7 @@ 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 ProductSmall from "../components/product/productSmall.vue";
|
|
|
import CreatorInfo from "../components/creator/CreatorInfo.vue";
|
|
|
|
|
|
// install Swiper modules
|
|
|
@@ -78,9 +97,64 @@ export default {
|
|
|
Swiper,
|
|
|
SwiperSlide,
|
|
|
ProductInfo,
|
|
|
- ProductSmall,
|
|
|
CreatorInfo,
|
|
|
},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ banners: [],
|
|
|
+ box: [],
|
|
|
+ products: [],
|
|
|
+ miners: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$http.post("/banner/all", {}, { 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();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getProduct(type = "DEFAULT") {
|
|
|
+ return this.$http
|
|
|
+ .post(
|
|
|
+ "/collection/all",
|
|
|
+ {
|
|
|
+ page: 0,
|
|
|
+ size: 4,
|
|
|
+ query: {
|
|
|
+ type: type,
|
|
|
+ },
|
|
|
+ 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: "createdAt,desc",
|
|
|
+ },
|
|
|
+ { body: "json" }
|
|
|
+ )
|
|
|
+ .then((res) => {
|
|
|
+ this.miners = res.content;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|