<template>
|
<div class="ranking-box">
|
<div class="common-form d-b-c">
|
<div style="font-size: 18px;">活跃会员排行榜</div>
|
<el-radio-group v-model="rankingTime" size="mini" @change="getData(rankingTime)">
|
<el-radio-button v-for="item in timeList" :key="item.value" :label="item.value">{{ item.label }}</el-radio-button>
|
</el-radio-group>
|
</div>
|
<div class="grid-title-count">
|
<el-row class="grid-title">
|
<el-col :span="4">排名</el-col>
|
<el-col :span="16">会员</el-col>
|
<el-col :span="4">参与活动数</el-col>
|
</el-row>
|
</div>
|
<div class="grid-list-content">
|
<el-row v-for="(list, index) in listData" :key="index" class="grid-count">
|
<el-col :span="4" class="grid-list">
|
<span :class="'gray'+index" class="navy-blue">{{ index+1 }}</span>
|
</el-col>
|
<el-col class="grid-list d-s-c" :span="16">
|
<img :src="list.avatarUrl" alt>
|
<span>{{ list.nickName }}</span>
|
</el-col>
|
<el-col class="grid-list" :span="4">{{ list.total }}</el-col>
|
</el-row>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import BranchApi from '@/api/branch.js';
|
export default {
|
data() {
|
return {
|
rankingTime: 'year',
|
timeList: [
|
{ value: 'lately7', label: '近7天' },
|
{ value: 'lately30', label: '近30天' },
|
{ value: 'month', label: '本月' },
|
{ value: 'year', label: '本年' }
|
],
|
/*列表数据*/
|
listData: [],
|
};
|
},
|
created() {
|
this.getData();
|
},
|
mounted() {},
|
methods: {
|
getData() {
|
let self = this;
|
let Params = {
|
date: self.rankingTime
|
};
|
BranchApi.getMemberRankData(Params, true)
|
.then(res => {
|
self.loading = false;
|
self.listData = res.data.list;
|
})
|
.catch(error => {});
|
},
|
}
|
};
|
</script>
|
|
<style scoped="scoped">
|
.grid-list img {
|
width: 30px;
|
height: 30px;
|
border-radius: 30px;
|
margin-right: 5px;
|
}
|
</style>
|
