Merge branch '首页' of xiongzhu/raex_front into master

.env.development

@@ -1,4 +1,4 @@
-VUE_APP_BASE_URL=https://test.raex.vip/
+VUE_APP_BASE_URL=https://www.raex.vip/
 NODE_ENV=development
 VUE_APP_PUBLIC_PATH=/
 ASSETS_PATH=raex

src/components/product/HotCollect.vue

@@ -0,0 +1,117 @@
+<template>
+    <div class="collect-info" @click="goSearch">
+        <van-image width="46" height="46" radius="8" :src="getImg(changeImgs(info.pic, 600))" />
+        <div class="content">
+            <div class="text1 van-ellipsis">{{ info.name }}</div>
+            <div class="text2">
+                <span>收藏品</span>
+            </div>
+        </div>
+        <van-button size="mini" plain type="primary" round> 查看</van-button>
+
+        <img :src="icons[index]" v-if="index < 3" alt="" class="rank-img" />
+        <div class="rank-num" v-else>{{ index + 1 }}</div>
+    </div>
+</template>
+
+<script>
+import product from '../../mixins/product';
+export default {
+    mixins: [product],
+    props: {
+        index: {
+            type: Number,
+            default: 0
+        },
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    },
+    data() {
+        return {
+            icons: [
+                require('@assets/info_icon_no1-ip.png'),
+                require('@assets/info_icon_no2-ip.png'),
+                require('@assets/info_icon_no3-ip.png')
+            ]
+        };
+    },
+    methods: {
+        goSearch() {
+            this.$router.push({
+                path: '/productSearchCorpse',
+                query: {
+                    search: this.info.prefixName
+                }
+            });
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.collect-info {
+    .flex();
+    padding: 12px 16px;
+    position: relative;
+    .van-image {
+        flex-shrink: 0;
+    }
+}
+
+.content {
+    flex-grow: 1;
+    overflow: hidden;
+    padding: 0 20px 0 12px;
+
+    .text1 {
+        font-size: 14px;
+        font-weight: bold;
+        color: #000000;
+        line-height: 24px;
+    }
+    .text2 {
+        margin-top: 4px;
+        span {
+            font-size: 12px;
+            color: #8a8a8e;
+            line-height: 18px;
+            background: #f5f7fa;
+            border-radius: 2px;
+            padding: 0 10px;
+            overflow: hidden;
+        }
+    }
+}
+
+.van-button {
+    min-width: 68px;
+    background: #f5f7fa;
+}
+
+.rank-img {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    top: 12px;
+    left: 16px;
+}
+
+.rank-num {
+    position: absolute;
+    top: 12px;
+    left: 16px;
+    text-align: center;
+    font-size: 14px;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 20px;
+    width: 20px;
+    height: 20px;
+    background: linear-gradient(42deg, #8d94b2 0%, #abb2d4 100%);
+    border-radius: 8px 0px 8px 0px;
+}
+</style>

src/views/Home.vue

@@ -85,6 +85,34 @@
                     <div class="text2">{{ item.remark }}</div>
                 </div>
             </div>
+            <div class="card news" style="order: 2" v-if="HotCollects.length > 0">
+                <div class="news-title">
+                    <div class="news-left">
+                        <div class="text1">热力IP</div>
+                        <div class="text2">一周最热IP排名</div>
+                    </div>
+                </div>
+                <div class="rank-list">
+                    <swiper
+                        class="rankSwiper"
+                        @reachEnd="reachEnd"
+                        @slidePrevTransitionStart="slidePrevTransitionStart"
+                        direction="vertical"
+                        slides-per-view="auto"
+                        free-mode
+                    >
+                        <swiper-slide v-for="(item, index) in HotCollects" :key="index">
+                            <!-- <rank-info :index="index" v-model:info="hotUsers[index]"></rank-info> -->
+                            <hot-collect :index="index" :info="item"></hot-collect>
+                        </swiper-slide>
+                    </swiper>
+
+                    <div class="rank-more" :style="{ visibility: hideMore ? 'hidden' : 'visible' }">
+                        <van-icon name="icon-a-iconarrowdown1" class-prefix="font_family" />
+                        <div>上滑显示更多</div>
+                    </div>
+                </div>
+            </div>
 
             <div class="card news" style="order: 2" v-if="hotUsers.length > 0">
                 <div class="news-title">
@@ -116,7 +144,7 @@
                 <div class="text1" :class="{ active: active === 1 }" @click="changeActive(1)">绿洲头条</div>
             </van-badge>
         </div> -->
-        <div class="listSwiper-title">往期数字艺术品</div>
+        <div class="listSwiper-title">最新数字艺术品</div>
         <div class="listSwiper">
             <product-large
                 v-for="(item, index) in products"
@@ -167,6 +195,7 @@ import NewsInfo from '../components/product/NewsInfo';
 import NewsSmall from '../components/product/NewsSmall.vue';
 import NewsRecord from '../components/product/NewsRecord.vue';
 import RankInfo from '../components/creator/RankInfo.vue';
+import HotCollect from '../components/product/HotCollect.vue';
 
 export default {
     name: 'home',
@@ -178,7 +207,8 @@ export default {
         ProductLarge,
         ProductSmall,
         NewsRecord,
-        RankInfo
+        RankInfo,
+        HotCollect
     },
     computed: {
         ...mapState(['userInfo']),
@@ -223,7 +253,8 @@ export default {
             scrollTop: 0,
             riskShow: false,
             hideMore: false,
-            hotUsers: []
+            hotUsers: [],
+            HotCollects: []
         };
     },
     mounted() {
@@ -332,7 +363,7 @@ export default {
                 message: '加载中...',
                 forbidClick: true
             });
-            return Promise.all([this.getBanner(), this.getProduct(), this.getHot()]).then(() => {
+            return Promise.all([this.getBanner(), this.getProduct(), this.getHot(), this.getTop()]).then(() => {
                 this.$toast.clear();
                 return Promise.resolve();
             });
@@ -344,6 +375,12 @@ export default {
                 return Promise.resolve();
             });
         },
+        getTop() {
+            return this.$http.get('/asset/topTen').then(res => {
+                this.HotCollects = res;
+                return Promise.resolve();
+            });
+        },
         getProduct() {
             return this.$http.get('/collection/recommend').then(res => {
                 this.products = res.filter(item => {
@@ -787,9 +824,21 @@ export default {
 }
 
 .rankSwiper {
-    height: 320px;
+    height: 350px;
     .swiper-slide {
-        height: 65px;
+        height: 70px;
+        position: relative;
+    }
+    .swiper-slide + .swiper-slide {
+        &::before {
+            content: '';
+            height: 1px;
+            background: #f5f7fa;
+            left: 74px;
+            right: 16px;
+            top: 0;
+            position: absolute;
+        }
     }
     // overflow: auto;
 }