|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="home">
|
|
<div class="home">
|
|
|
- <div class="filter-bg"></div>
|
|
|
|
|
|
|
+ <div class="filter-bg" :style="{ backgroundImage: `url(${bgImg})` }"></div>
|
|
|
<div class="welcom">
|
|
<div class="welcom">
|
|
|
<div class="left">
|
|
<div class="left">
|
|
|
<div class="text1">WELCOME</div>
|
|
<div class="text1">WELCOME</div>
|
|
@@ -10,6 +10,7 @@
|
|
|
width="38"
|
|
width="38"
|
|
|
height="38"
|
|
height="38"
|
|
|
:radius="32"
|
|
:radius="32"
|
|
|
|
|
+ :class="{ activeAvatar: isLogin && userInfo.useCollectionPic }"
|
|
|
:src="isLogin ? userInfo.avatar : require('@assets/img_default_photo.png')"
|
|
:src="isLogin ? userInfo.avatar : require('@assets/img_default_photo.png')"
|
|
|
></van-image>
|
|
></van-image>
|
|
|
</div>
|
|
</div>
|
|
@@ -27,17 +28,28 @@
|
|
|
</swiper-slide>
|
|
</swiper-slide>
|
|
|
</swiper>
|
|
</swiper>
|
|
|
|
|
|
|
|
- <div class="list">
|
|
|
|
|
|
|
+ <div class="tabs" v-if="!empty">
|
|
|
|
|
+ <div class="tab" :class="{ active: active === 0 }" @click="active = 0">数字藏品</div>
|
|
|
|
|
+ <div class="tab" :class="{ active: active === 1 }" @click="active = 1">产品新闻端</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="list" v-if="active == 0">
|
|
|
<product-large
|
|
<product-large
|
|
|
v-for="(item, index) in products"
|
|
v-for="(item, index) in products"
|
|
|
:key="index"
|
|
:key="index"
|
|
|
v-model:info="products[index]"
|
|
v-model:info="products[index]"
|
|
|
></product-large>
|
|
></product-large>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <template v-else>
|
|
|
|
|
+ <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getNews">
|
|
|
|
|
+ <news-info v-for="item in news" :key="item.id" :info="item"></news-info>
|
|
|
|
|
+ </van-list>
|
|
|
|
|
+ </template>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
|
+import product from '../mixins/product';
|
|
|
import { Swiper, SwiperSlide } from 'swiper/vue';
|
|
import { Swiper, SwiperSlide } from 'swiper/vue';
|
|
|
|
|
|
|
|
import 'swiper/swiper.min.css';
|
|
import 'swiper/swiper.min.css';
|
|
@@ -52,16 +64,18 @@ import banner from '../mixins/banner';
|
|
|
import ProductLarge from '../components/product/productLarge.vue';
|
|
import ProductLarge from '../components/product/productLarge.vue';
|
|
|
import ProductSmall from '../components/product/productSmall.vue';
|
|
import ProductSmall from '../components/product/productSmall.vue';
|
|
|
import { mapState } from 'vuex';
|
|
import { mapState } from 'vuex';
|
|
|
|
|
+import NewsInfo from '../components/product/NewsInfo';
|
|
|
|
|
|
|
|
export default {
|
|
export default {
|
|
|
name: 'home',
|
|
name: 'home',
|
|
|
inject: ['bar'],
|
|
inject: ['bar'],
|
|
|
- mixins: [banner],
|
|
|
|
|
|
|
+ mixins: [banner, product],
|
|
|
components: {
|
|
components: {
|
|
|
Swiper,
|
|
Swiper,
|
|
|
SwiperSlide,
|
|
SwiperSlide,
|
|
|
ProductLarge,
|
|
ProductLarge,
|
|
|
- ProductSmall
|
|
|
|
|
|
|
+ ProductSmall,
|
|
|
|
|
+ NewsInfo
|
|
|
},
|
|
},
|
|
|
computed: {
|
|
computed: {
|
|
|
...mapState(['userInfo'])
|
|
...mapState(['userInfo'])
|
|
@@ -69,7 +83,14 @@ export default {
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
banners: [],
|
|
banners: [],
|
|
|
- products: []
|
|
|
|
|
|
|
+ products: [],
|
|
|
|
|
+ active: 0,
|
|
|
|
|
+ news: [],
|
|
|
|
|
+ loading: false,
|
|
|
|
|
+ finished: false,
|
|
|
|
|
+ page: 0,
|
|
|
|
|
+ empty: false,
|
|
|
|
|
+ bgImg: ''
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
mounted() {
|
|
mounted() {
|
|
@@ -78,6 +99,9 @@ export default {
|
|
|
StatusBar.styleDefault();
|
|
StatusBar.styleDefault();
|
|
|
}
|
|
}
|
|
|
this.getInit();
|
|
this.getInit();
|
|
|
|
|
+ // this.$http.get('sysConfig/get/home_bg').then(res => {
|
|
|
|
|
+ // this.bgImg = res.value || '';
|
|
|
|
|
+ // });
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
getInit() {
|
|
getInit() {
|
|
@@ -89,6 +113,7 @@ export default {
|
|
|
this.getProduct('LIST').then(res => {
|
|
this.getProduct('LIST').then(res => {
|
|
|
this.products = res;
|
|
this.products = res;
|
|
|
});
|
|
});
|
|
|
|
|
+ this.getNews();
|
|
|
},
|
|
},
|
|
|
getProduct(type = 'BANNER') {
|
|
getProduct(type = 'BANNER') {
|
|
|
return this.$http
|
|
return this.$http
|
|
@@ -105,7 +130,8 @@ export default {
|
|
|
'/banner/all',
|
|
'/banner/all',
|
|
|
{
|
|
{
|
|
|
query: {
|
|
query: {
|
|
|
- type: 'HOME'
|
|
|
|
|
|
|
+ type: 'HOME',
|
|
|
|
|
+ del: false
|
|
|
},
|
|
},
|
|
|
sort: 'sort,asc;createdAt,desc'
|
|
sort: 'sort,asc;createdAt,desc'
|
|
|
},
|
|
},
|
|
@@ -120,9 +146,6 @@ export default {
|
|
|
if (this.page === 0) {
|
|
if (this.page === 0) {
|
|
|
this.list = [];
|
|
this.list = [];
|
|
|
}
|
|
}
|
|
|
- this.loading = true;
|
|
|
|
|
- this.finished = false;
|
|
|
|
|
- this.empty = false;
|
|
|
|
|
this.$http
|
|
this.$http
|
|
|
.post(
|
|
.post(
|
|
|
'/collection/all',
|
|
'/collection/all',
|
|
@@ -139,9 +162,6 @@ export default {
|
|
|
)
|
|
)
|
|
|
.then(res => {
|
|
.then(res => {
|
|
|
this.list = [...this.list, ...res.content];
|
|
this.list = [...this.list, ...res.content];
|
|
|
- this.empty = res.empty;
|
|
|
|
|
- this.loading = false;
|
|
|
|
|
- this.finished = res.last;
|
|
|
|
|
if (!this.finished) {
|
|
if (!this.finished) {
|
|
|
this.page = this.page + 1;
|
|
this.page = this.page + 1;
|
|
|
}
|
|
}
|
|
@@ -163,12 +183,45 @@ export default {
|
|
|
this.miners = res.content;
|
|
this.miners = res.content;
|
|
|
// console.log(this.miners);
|
|
// console.log(this.miners);
|
|
|
});
|
|
});
|
|
|
|
|
+ },
|
|
|
|
|
+ getNews() {
|
|
|
|
|
+ if (this.page === 0) {
|
|
|
|
|
+ this.news = [];
|
|
|
|
|
+ }
|
|
|
|
|
+ this.loading = true;
|
|
|
|
|
+ this.finished = false;
|
|
|
|
|
+ this.empty = false;
|
|
|
|
|
+ this.$http
|
|
|
|
|
+ .post(
|
|
|
|
|
+ '/news/all',
|
|
|
|
|
+ {
|
|
|
|
|
+ page: this.page,
|
|
|
|
|
+ size: 20,
|
|
|
|
|
+ query: {
|
|
|
|
|
+ del: false
|
|
|
|
|
+ },
|
|
|
|
|
+ sort: 'sort,asc;createdAt,desc'
|
|
|
|
|
+ },
|
|
|
|
|
+ { body: 'json' }
|
|
|
|
|
+ )
|
|
|
|
|
+ .then(res => {
|
|
|
|
|
+ this.news = [...this.news, ...res.content];
|
|
|
|
|
+ this.empty = res.empty;
|
|
|
|
|
+ this.loading = false;
|
|
|
|
|
+ this.finished = res.last;
|
|
|
|
|
+ if (!this.finished) {
|
|
|
|
|
+ this.page = this.page + 1;
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
|
|
|
+.darkBg {
|
|
|
|
|
+ background-color: #181818;
|
|
|
|
|
+}
|
|
|
.top {
|
|
.top {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
padding: 9px 16px;
|
|
padding: 9px 16px;
|
|
@@ -225,7 +278,7 @@ export default {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.swiper-pagination-bullet-active {
|
|
.swiper-pagination-bullet-active {
|
|
|
- background: @prim;
|
|
|
|
|
|
|
+ background: #fff;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
.swiper-slide {
|
|
.swiper-slide {
|
|
@@ -245,13 +298,13 @@ export default {
|
|
|
.text1 {
|
|
.text1 {
|
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
|
- color: #939599;
|
|
|
|
|
|
|
+ color: @text0;
|
|
|
line-height: 24px;
|
|
line-height: 24px;
|
|
|
}
|
|
}
|
|
|
.text2 {
|
|
.text2 {
|
|
|
font-size: 24px;
|
|
font-size: 24px;
|
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
|
- color: #0a0a0a;
|
|
|
|
|
|
|
+ color: @text0;
|
|
|
line-height: 32px;
|
|
line-height: 32px;
|
|
|
letter-spacing: 2px;
|
|
letter-spacing: 2px;
|
|
|
|
|
|
|
@@ -263,4 +316,35 @@ export default {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+.tabs {
|
|
|
|
|
+ .flex();
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ color: fade(@text0, 60%);
|
|
|
|
|
+ line-height: 24px;
|
|
|
|
|
+ padding: 0 16px;
|
|
|
|
|
+
|
|
|
|
|
+ .tab + .tab {
|
|
|
|
|
+ margin-left: 20px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .tab {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ &.active {
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: @text0;
|
|
|
|
|
+
|
|
|
|
|
+ &::after {
|
|
|
|
|
+ content: '';
|
|
|
|
|
+ height: 2px;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+ width: 18px;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ bottom: -2px;
|
|
|
|
|
+ left: 50%;
|
|
|
|
|
+ transform: translateX(-50%);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|