榜单

src/main/modern-point/src/views/Discover.vue

@@ -33,9 +33,9 @@
                     <img class="grid-img" src="@assets/info_icon_zhuzaozhe.png" />
                 </template>
             </van-grid-item>
-            <van-grid-item text="拍卖系列" @click="wait" v-if="!$store.state.review">
+            <van-grid-item text="月度榜单" :to="{ path: '/ranking' }">
                 <template v-slot:icon>
-                    <img class="grid-img" src="@assets/info_icon_paimaixilie.png" />
+                    <img class="grid-img" src="@assets/bangdan.png" />
                 </template>
             </van-grid-item>
             <van-grid-item text="系列活动" :to="{ path: '/activityList' }">

src/main/modern-point/src/views/creator/Ranking.vue

@@ -5,7 +5,7 @@
             <div class="info">
                 <div class="title">
                     <div class="text1">月榜</div>
-                    <div class="text2">（2022.02.02-2022.03.09）</div>
+                    <div class="text2">（{{ dayInfo }}）</div>
                 </div>
 
                 <div class="persons">
@@ -40,6 +40,16 @@
                 <div class="td">{{ item.num }}</div>
             </div>
         </div>
+        <div class="empty-text" v-if="rankList.length === 0">暂无数据</div>
+
+        <div class="mine-person">
+            <div class="td">
+                <span>{{ userRank.rank }}</span>
+                <van-image radius="26" width="26px" height="26px" :src="userRank.avatar" />
+            </div>
+            <div class="td">{{ userRank.nickname }}</div>
+            <div class="td">{{ userRank.num }}</div>
+        </div>
     </div>
 </template>
 
@@ -48,7 +58,8 @@ import { mapState } from 'vuex';
 export default {
     data() {
         return {
-            list: []
+            list: [],
+            dayInfo: ''
         };
     },
     computed: {
@@ -67,13 +78,20 @@ export default {
             return list;
         },
         rankList() {
-            return [...this.list];
+            return [...this.list].filter((item, index) => {
+                return index >= 3;
+            });
         },
         userRank() {
             if (this.isLogin) {
+                let info = [...this.list].find(item => {
+                    return item.userId == this.userInfo.id;
+                });
                 return {
                     avatar: this.userInfo.avatar,
-                    nickname: this.userInfo.nickname
+                    nickname: this.userInfo.nickname,
+                    rank: info ? info.rank : '未上榜',
+                    num: info ? info.num : 0
                 };
             } else {
                 return null;
@@ -84,6 +102,7 @@ export default {
         this.$http.post('/asset/ranking').then(res => {
             this.list = res;
         });
+        this.dayInfo = this.dayjs().add(-1, 'month').format('YYYY.MM.DD') + '~' + this.dayjs().format('YYYY.MM.DD');
     }
 };
 </script>
@@ -261,4 +280,44 @@ export default {
         }
     }
 }
+
+.empty-text {
+    text-align: center;
+    color: @text3;
+    padding: 10px;
+    font-size: 12px;
+}
+
+.mine-person {
+    .bottom();
+    height: 55px;
+    .flex();
+    background: #fff;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 20;
+
+    .td {
+        font-size: 14px;
+        line-height: 14px;
+        color: #26273c;
+        width: 33%;
+        text-align: center;
+
+        &:first-child {
+            .flex();
+            justify-content: center;
+            span {
+                font-size: 12px;
+                margin-right: 18px;
+            }
+        }
+
+        &:nth-child(3) {
+            color: #f7931a;
+        }
+    }
+}
 </style>