是否有直播资格
This commit is contained in:
parent
6913f79e3b
commit
564a7fab9b
@ -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,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
Loading…
Reference in New Issue
Block a user