From 564a7fab9bb886cd5eb370212c18281539b8ff71 Mon Sep 17 00:00:00 2001
From: ghusermoon <2673031505@qq.com>
Date: Thu, 19 Nov 2020 14:22:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=98=AF=E5=90=A6=E6=9C=89=E7=9B=B4=E6=92=AD?=
 =?UTF-8?q?=E8=B5=84=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mine/RankList.vue | 85 ++++++++++++-------------------------
 1 file changed, 26 insertions(+), 59 deletions(-)

diff --git a/src/views/mine/RankList.vue b/src/views/mine/RankList.vue
index ab3b5a2..de8e18f 100644
--- a/src/views/mine/RankList.vue
+++ b/src/views/mine/RankList.vue
@@ -6,7 +6,7 @@
             <div class="hits">视频点击量</div>
         </div>
         <div class="list-body">
-            <div class="rank-item" v-for="(item,index) in list" :key="index" :class="{'mine-item': item.isme }">
+            <div class="rank-item" v-for="(item,index) in filterData(list)" :key="index" :class="{'mine-item': item.isme }">
                 <div class="other-rank" :class="{'mine-rank': item.isme }">
                     <div class="ranking-number">
                         <span v-if="item.isme" class="mine">我的成绩</span>
@@ -14,19 +14,19 @@
                             <img src="@/static/images/rank_first.png" class="rank-img" v-if="index === 0" />
                             <img src="@/static/images/rank_second.png" class="rank-img" v-else-if="index === 1" />
                             <img src="@/static/images/rank_third.png" class="rank-img" v-else-if="index === 2" />
-                            <span class="other" v-else>{{ item.id }}</span>
+                            <span class="other" v-else>{{ item.rank }}</span>
                         </div>
                     </div>
                     <div class="user-info">
-                        <a-avatar :size="34">
+                        <a-avatar :size="34" :src="item.img">
                             <template v-slot:icon><UserOutlined /></template>
                         </a-avatar>
                         <span class="name">{{ item.name }}</span>
                     </div>
-                    <div class="hits">{{ item.value }}</div>
+                    <div class="hits">{{ item.clicks }}</div>
                 </div>
-                <div class="third-ellipsis" v-if="item.id === 3">...</div>
-                <div class="twenty-ellipsis" v-if="item.id === 20">
+                <div class="third-ellipsis" v-if="item.rank == 3">...</div>
+                <div class="twenty-ellipsis" v-if="item.rank === deadLine">
                     <div class="third-ellipsis">
                         <div>...</div>
                     </div>
@@ -37,7 +37,7 @@
     </div>
 </template>
 <script lang="ts">
-import { defineComponent, reactive } from 'vue';
+import { defineComponent, ref } from 'vue';
 import { UserOutlined } from '@ant-design/icons-vue';
 
 export default defineComponent({
@@ -45,64 +45,31 @@ export default defineComponent({
     components: {
         UserOutlined
     },
-    props:{
+    props: {
         list: {
-            type: Object
+            type: Array
         }
     },
     setup() {
-        interface RankItem {
-            uid: number;
-            id: number;
-            avatar: string;
-            name: string;
-            value: number | string;
+        const deadLine = ref(4); // 写死的合格线
+
+        function filterData(list: any) {
+            let mineRank = 0; // 自己的排名
+            list.forEach((element: any) => {
+                if(element.isme) {
+                    mineRank = element.rank;
+                }
+            });
+            // 过滤数据
+            const newList = list.filter((item: any) => {
+                return item.rank <= 3 || item.rank == deadLine.value || item.rank === mineRank || item.rank === mineRank - 1 || item.rank === mineRank + 1;
+            })
+            return newList;
         }
-        const rankData: Array<RankItem> = reactive([{
-            uid: 1,
-            id: 1,
-            avatar: '',
-            name: '1',
-            value: '123456',
-        }, {
-            uid: 2,
-            id: 2,
-            avatar: '',
-            name: '12',
-            value: '12345',
-        }, {
-            uid: 3,
-            id: 3,
-            avatar: '',
-            name: '123',
-            value: '1234',
-        }, {
-            uid: 4,
-            id: 20,
-            avatar: '',
-            name: '1234',
-            value: '123',
-        }, {
-            uid: 15,
-            id: 21,
-            avatar: '',
-            name: '15',
-            value: '12',
-        }, {
-            uid: 5,
-            id: 22,
-            avatar: '',
-            name: '61',
-            value: '1',
-        }, {
-            uid: 51,
-            id: 23,
-            avatar: '',
-            name: '61',
-            value: '1',
-        }]);
+        
         return {
-            rankData
+            filterData,
+            deadLine,
         }
     }
 })