<!-- 分销排行 -->
|
<template>
|
<view>
|
<u-navbar title="排行榜" safeAreaInsetTop fixed placeholder>
|
<view class="coreshop-navbar-left-slot" slot="left">
|
<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
|
<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
|
<u-icon name="home" size="22" @click="goHome"></u-icon>
|
</view>
|
<view slot="right">
|
</view>
|
</u-navbar>
|
<!-- 排行榜 -->
|
<view class="rankings-wrap coreshop-bg-red">
|
<view class="rankings-list-box">
|
<scroll-view scroll-y="true" @scrolltolower="loadMore" class="scroll-box">
|
<view class="ranking-list coreshop-flex coreshop-justify-between" v-for="(item, index) in rankingsList" :key="index">
|
<view class="list-left coreshop-flex coreshop-align-center">
|
<view class="tag-box coreshop-flex coreshop-justify-center coreshop-align-center">
|
<text class="tag-text" v-if="index >= 3">{{ index }}</text>
|
<image v-else class="tag-icon" :src="rankingsIcon[index]" mode=""></image>
|
</view>
|
<!--<image class="user-avatar" :src="item.user.avatar" mode=""></image>-->
|
<view class="user-info">
|
<view class="name">{{ item.nickname }}</view>
|
<view class="date">{{ $u.timeFormat(item.createtime, 'yyyy年mm月dd日') }}</view>
|
</view>
|
</view>
|
<view class="list-right coreshop-flex coreshop-flex-direction coreshop-align-center coreshop-justify-center">
|
<view class="num">{{ item.totalInCome }}</view>
|
<view class="des">累计收益</view>
|
</view>
|
</view>
|
<!-- 更多 -->
|
<u-loadmore v-if="rankingsList.length" height="40px" :status="loadStatus" icon-type="flower" color="#ccc" />
|
</scroll-view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
components: {},
|
data() {
|
return {
|
rankingsIcon: {
|
0: '/static/images/distribution/01.png',
|
1: '/static/images/distribution/02.png',
|
2: '/static/images/distribution/03.png'
|
},
|
rankingsList: [], //排行榜
|
loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
|
currentPage: 1,
|
limit: 20,
|
hasNextPage: false
|
};
|
},
|
onShow() {
|
},
|
onLoad() {
|
this.getRankings();
|
},
|
methods: {
|
getRankings() {
|
let that = this;
|
let data = {
|
page: this.currentPage,
|
limit: this.limit,
|
}
|
that.loadStatus = 'loading';
|
this.$u.api.getDistributionRanking(data).then(res => {
|
if (res.code === 0) {
|
that.rankingsList = [...that.rankingsList, ...res.data.data];
|
that.hasNextPage = res.data.hasNextPage;
|
if (that.hasNextPage) {
|
that.currentPage++;
|
that.loadStatus = 'loadmore';
|
} else {
|
that.loadStatus = 'nomore';
|
}
|
}
|
});
|
},
|
// 加载更多
|
loadMore() {
|
if (this.hasNextPage) {
|
this.getRankings();
|
}
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
@import "rankings.scss";
|
</style>
|
