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>
<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,
}
}
})