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

Merge branch 'master' of http://git.luyuan.tk/luyuan/beelink into xbx

Browse Source
This commit is contained in:
luyuan 2020-11-20 10:18:06 +08:00
commit 06eff76696
Signed by: theluyuan
GPG Key ID: A7972FD973317FF3
1 changed files with 25 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
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 newList" :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,28 @@ 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 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',
}]);
setup(props) {
const deadLine = ref(4); // 写死的合格线
const list = ref(props.list);
let mineRank = 0; // 自己的排名
list.value!.forEach((element: any) => {
if(element.isme) {
mineRank = element.rank;
}
});
// 过滤数据
const newList = list.value!.filter((item: any) => {
return item.rank <= 3 || item.rank == deadLine.value || item.rank === mineRank || item.rank === mineRank - 1 || item.rank === mineRank + 1;
})
return {
rankData
newList,
deadLine,
}
}
})