theluyuan/beelink
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

是否有直播资格

Browse Source
This commit is contained in:
ghusermoon 2020-11-19 14:22:59 +08:00
parent 6913f79e3b
commit 564a7fab9b
1 changed files with 26 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/views/mine/RankList.vue
View File

@ -6,7 +6,7 @@
<div class="hits">视频点击量</div> <div class="hits">视频点击量</div>
</div> </div>
<div class="list-body"> <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="other-rank" :class="{'mine-rank': item.isme }">
<div class="ranking-number"> <div class="ranking-number">
<span v-if="item.isme" class="mine">我的成绩</span> <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_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_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" /> <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> </div>
<div class="user-info"> <div class="user-info">
<a-avatar :size="34"> <a-avatar :size="34" :src="item.img">
<template v-slot:icon><UserOutlined /></template> <template v-slot:icon><UserOutlined /></template>
</a-avatar> </a-avatar>
<span class="name">{{ item.name }}</span> <span class="name">{{ item.name }}</span>
</div> </div>
<div class="hits">{{ item.value }}</div> <div class="hits">{{ item.clicks }}</div>
</div> </div>
<div class="third-ellipsis" v-if="item.id === 3">...</div> <div class="third-ellipsis" v-if="item.rank == 3">...</div>
<div class="twenty-ellipsis" v-if="item.id === 20"> <div class="twenty-ellipsis" v-if="item.rank === deadLine">
<div class="third-ellipsis"> <div class="third-ellipsis">
<div>...</div> <div>...</div>
</div> </div>
@ -37,7 +37,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, reactive } from 'vue'; import { defineComponent, ref } from 'vue';
import { UserOutlined } from '@ant-design/icons-vue'; import { UserOutlined } from '@ant-design/icons-vue';
export default defineComponent({ export default defineComponent({
@ -45,64 +45,31 @@ export default defineComponent({
components: { components: {
UserOutlined UserOutlined
}, },
props:{ props: {
list: { list: {
type: Object type: Array
} }
}, },
setup() { setup() {
interface RankItem { const deadLine = ref(4); // 写死的合格线
uid: number;
id: number; function filterData(list: any) {
avatar: string; let mineRank = 0; // 自己的排名
name: string; list.forEach((element: any) => {
value: number | string; 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 { return {
rankData filterData,
deadLine,
} }
} }
}) })