最热ip

.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

@@ -1,9 +1,117 @@
 <template>
-    <div></div>
+    <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>
-export default {};
+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></style>
+<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,7 +85,7 @@
                     <div class="text2">{{ item.remark }}</div>
                 </div>
             </div>
-            <div class="card news" style="order: 2">
+            <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>
@@ -101,11 +101,16 @@
                         slides-per-view="auto"
                         free-mode
                     >
-                        <swiper-slide v-for="(item, index) in hotUsers" :key="index">
+                        <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" v-model:info="hotUsers[index]"></hot-collect>
+                            <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>
 
@@ -248,7 +253,8 @@ export default {
             scrollTop: 0,
             riskShow: false,
             hideMore: false,
-            hotUsers: []
+            hotUsers: [],
+            HotCollects: []
         };
     },
     mounted() {
@@ -357,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();
             });
@@ -369,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 => {
@@ -812,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;
 }