You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

336 lines
38 KiB

<template>
<view :style="colorStyle">
<view class="PromoterRank">
<view class="redBg bg-color">
<view class="header">
<view class="nav acea-row row-center-wrapper">
<view class="item" :class="active == index ? 'font-color' : ''" v-for="(item,index) in navList" :key="index"
@click="switchTap(index)">
{{ $t(item) }}
</view>
</view>
<view class="rank acea-row row-bottom row-around">
<view class="item two" v-if="Two.uid">
<view class="pictrue">
<image :src="Two.avatar"></image>
</view>
<view class="name line1">{{Two.nickname}}</view>
<view class="num">{{Two.count}}{{$t(``)}}</view>
</view>
<view class="item one" v-if="One.uid">
<view class="pictrue">
<image :src="One.avatar"></image>
</view>
<view class="name line1">{{One.nickname}}</view>
<view class="num">{{One.count}}{{$t(``)}}</view>
</view>
<view class="item three" v-if="Three.uid">
<view class="pictrue">
<image :src="Three.avatar"></image>
</view>
<view class="name line1">{{Three.nickname}}</view>
<view class="num">{{Three.count}}{{$t(``)}}</view>
</view>
</view>
</view>
</view>
<view class="list" v-if="rankList.length">
<view class="item acea-row row-between-wrapper" v-for="(item,index) in rankList" :key="index">
<view class="num">{{index+4}}</view>
<view class="picTxt acea-row row-between-wrapper">
<view class="pictrue">
<image :src="item.avatar"></image>
</view>
<view class="text line1">{{item.nickname}}</view>
</view>
<view class="people font-color">{{item.count}}{{$t(``)}}</view>
</view>
</view>
</view>
<!-- #ifdef MP -->
<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
<!-- #endif -->
<!-- #ifndef MP -->
<home></home>
<!-- #endif -->
</view>
</template>
<script>
import {
getRankList
} from '@/api/user.js';
import {
toLogin
} from '@/libs/login.js';
import {
mapGetters
} from "vuex";
// #ifdef MP
import authorize from '@/components/Authorize';
// #endif
import home from '@/components/home';
import colors from '@/mixins/color.js';
export default {
components: {
// #ifdef MP
authorize,
// #endif
home
},
mixins:[colors],
data() {
return {
navList: [this.$t(`周榜`), this.$t(`月榜`)],
active: 0,
page: 1,
limit: 10,
type: 'week',
loading: false,
loadend: false,
rankList: [],
Two: {},
One: {},
Three: {},
isAuto: false, //没有授权的不会自动授权
isShowAuth: false //是否隐藏授权
};
},
computed: mapGetters(['isLogin']),
watch:{
isLogin:{
handler:function(newV,oldV){
if(newV){
this.getRanklist();
}
},
deep:true
}
},
onLoad() {
if (this.isLogin) {
this.getRanklist();
} else {
toLogin();
}
},
// onShow: function () {
// if(this.isClone && app.globalData.isLog){
// this.setData({ loadend: false, page: 1, rankList:[]});
// this.getRanklist();
// }
// },
methods: {
onLoadFun() {
this.getRanklist();
},
// 授权关闭
authColse: function(e) {
this.isShowAuth = e
},
getRanklist: function() {
let that = this;
if (that.loadend) return;
if (that.loading) return;
that.loading = true;
getRankList({
page: that.page,
limit: that.limit,
type: that.type
}).then(res => {
let list = res.data;
that.rankList.push.apply(that.rankList, list);
if (that.page == 1) {
that.One = that.rankList.shift() || {};
that.Two = that.rankList.shift() || {};
that.Three = that.rankList.shift() || {};
}
that.loadend = list.length < that.limit;
that.loading = false;
that.$set(that, 'rankList', that.rankList);
that.One = that.One;
that.Two = that.Two;
that.Three = that.Three;
that.page = that.page + 1;
}).catch(err => {
that.loading = false;
})
},
switchTap: function(index) {
if (this.active === index) return;
this.active = index;
this.type = index ? 'month' : 'week';
this.page = 1;
this.loadend = false;
this.$set(this, 'rankList', []);
this.Two = {};
this.One = {};
this.Three = {};
this.getRanklist();
},
},
onReachBottom: function() {
this.getRanklist();
}
}
</script>
<style scoped lang="scss">
.PromoterRank .redBg {
padding: 45rpx 0 30rpx 0;
}
.PromoterRank .header {
// background: url("data:image/jpeg;base64,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
width: 100%;
height: 460rpx;
// background-size: 100% 100%;
}
.PromoterRank .header .nav {
width: 450rpx;
height: 66rpx;
border: 1px solid #fff;
border-radius: 33rpx;
font-size: 30rpx;
color: #fff;
margin: 0 auto;
}
.PromoterRank .header .nav .item {
width: 223rpx;
height: 100%;
text-align: center;
line-height: 60rpx;
}
.PromoterRank .header .nav .item.font-color:nth-of-type(1) {
background-color: #fff;
border-radius: 33rpx 0 0 33rpx;
color: var(--view-theme) !important;
}
.PromoterRank .header .nav .item.font-color:nth-of-type(2) {
background-color: #fff;
border-radius: 0 33rpx 33rpx 0;
color: var(--view-theme) !important;
}
.PromoterRank .header .rank {
padding: 0 20rpx;
margin-top: 30rpx;
}
.PromoterRank .header .rank .item .pictrue {
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
margin: 0 auto;
}
.PromoterRank .header .rank .item.two .pictrue{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIgAAACxCAYAAAAfz/U3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoxNGUyNzRkOS00YmQ4LTUzNGItYWZkZS02ZTlmMTgxYmZlYWUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODVBODg2MzdEOEU1MTFFOTg4RTM5OTQyQjhDODMzMTciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODVBODg2MzZEOEU1MTFFOTg4RTM5OTQyQjhDODMzMTciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTAxZGU2OWItNWM2My0xOTQ1LTllZmMtMGIzNjcwYTFmNWUxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE0ZTI3NGQ5LTRiZDgtNTM0Yi1hZmRlLTZlOWYxODFiZmVhZSIv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
width: 136rpx;
height: 177rpx;
}
.PromoterRank .header .rank .item .pictrue image {
position: absolute;
display: block;
bottom: 2rpx;
border-radius: 50%;
left: 50%;
margin-left: -65rpx;
}
.PromoterRank .header .rank .item.two .pictrue image{
width: 130rpx;
height: 130rpx;
}
.PromoterRank .header .rank .item.one .pictrue {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJwAAADNCAYAAABNahkfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoxNGUyNzRkOS00YmQ4LTUzNGItYWZkZS02ZTlmMTgxYmZlYWUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NUU1MTlBRjBEOEU1MTFFOUEwRjRGRTQyMUZGNDk5NEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NUU1MTlBRUZEOEU1MTFFOUEwRjRGRTQyMUZGNDk5NEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTAxZGU2OWItNWM2My0xOTQ1LTllZmMtMGIzNjcwYTFmNWUxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE0ZTI3NGQ5LTRiZDgtNTM0Yi1hZmRlLTZlOWYxODFiZmVhZSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvxFTDIAABepSURBVHja7J0JmFTVlccP3TR0Qzdbs4kBFDNWFHAlrriTaBwdU6iA0YnjMgoq4zaYzGQzGTOZmLiNCGrckjFRcSmXxEA04oILBEUENGUUcAO66QaabnoBmp7z73s7vdz7ql5VvffqVdX5f98pmlevXt++91fnbufe26utrY2yoniUsqpILNX0TuXXr7MdxTaAbSBbM9s2tnfZlrI9zLaFckGp/v0eqTeJkoF2Cr/epEGzaRTbgWzfYrue7Xa2O9l2S+YJcKmA1otf/4vteyl8agzbrWynawA3S0Z2V5FkgaMeThG2rprC9irbaMlGAc6Nd/ux9lCZ6Cts90lmCnBu2mw/9OhpX/fwWQJcnuonHj/vu2zjJFsFOJt3O4dfj/H4qWVs/yaZK8DZNNWn505mK5HsFeC6ejcM5h7s09Mn+PhsAS5HNZJtmE/P7ksyRCLA9dAoH4GDhkgWC3Bd1cTW4uPzWyWLwzW1VU5qTnKs9jSYBP+E7W9sNQH8/o1s1T5WfZ8HlI+jdR7ux1bKtk7/7vcFOKViPWyAkf1JtuY8G0IbMCG+wcd0bGLb6hNwOzTMfuoQtst0T3tEj/f2sP2ebQHbbwu5SgVgb5Oa8J7kcE+E1ODpm2zf9i0lkdhOUmFGfugjtg98zMcfsb3MNssCW0c5/xOp+eFntfcrOOCOZ3s+heECRGL8mm2Oj2nya+7zObZdPj37EbYbScXnudGZbAspHh1fOMDFo2O1a0+nV3gz27k+ebnXSAVSeqlaUjFyfgh5MSONz325/UsQjw4rDOCIfsb2pQw+f4ePQxjXsnkZBv1jDZ3XOilDb78v2w/yH7h49FB+nZ7hU/Ziu8onL4e24vUePe0h3dnxo6P17x4850ouj4Py3cOd4dHvPVMPpfgB3W38em+GT3mFbaZPeYipsq95VP6n5DtwJ3r0nIN1D9avXuvlGVQ5aLMhzNyvgWT06L0KBjg534Hbz8O0j/Q1pZHYTdpLuZ0lwGD12bod2Ohjyrz8u8fkO3BeZlYf31Mbid1D7kfpH2N7KoA8LPXwWYPyHbjPPHxWfUBpfsPlfUsDSs8OD5+1Kd+B+9ij5zQFmFl/clGt1uuOQhD6q4fP+jzfgXvbo+dgUnp9QGn+kJLPFOAL8ElA6cHv2Rmy8ggtcM949JzH2RoCSnOVBiqRNgeYn5jzfdaD56BjsyC/gYvElvHrYg8y6q4AU73VhUfZSMHFvGEmZL4Hz3mUy+OjfPdw0GxdiOlqDoVvG4Wg8/Ilttsy+DyiV36U75nU4eXWkIrdSkf/zTYv4BQPpuRDMPtT8CuzrmN7Ms0mwvlcDp8XBnBKT7BdwPapy/uxNdZ3KP39PjIR1juUJbmnLEv5iDy8O4X732E7jWFbUQjVQE8hROk4trdc9KSOJRWOkw0NdeG9+mkvF7TwRUTgJTbcSxYRjXi/E8i/QNPQA0fawyXrudbob2a2hEIqduHhTshiGp928aW4J8CefWiBg7YleR+xX/+QxfQd7/K+47KYRlStyWIEt2a7oMMCXLLGKxrs/5iVlKno5Aku7/4q+RUy5Q64REIQ6BYBTsnNaqx/zVLasOVWpct7EQlzVhbSiKDWE13k8U4BrrMdl2xCGmtWzwnYuyEqI9UwboQzBb388mJS20kkA65ZgFPCtNF6F/dh3KlXgOk6O42242Td5gxK4zRwybSaQrD6PyzAwbu5GRc6mu3CgLwb2o3/keanbwrQy2GoqJ+L+z4OQ0GHaW8Rt3FymGkYGUB6fs6W7trNI9j+M4A0Ttde2I3eF+C6a5XL+7Bi6yGfvRuGN67J8CnfJ+ezHbzQAeR+hqGe/N0mIyeBQ3zbHpf3nsr2C59g+7JHQGMQFlsrfMmHVJbqNLoND0enrFqA6661lFr4OdZlXusxbFhQ8gJ5twk0hkkQtzbYw1RWkNqY5ogUPrOSrU6A667qFKrVDt1KXu01Eo+iXYhFMPt4/HcdqgHxYlcmpA37saS6lnRVWAo5bBsSvpdmL+0u/c1PFzasIX3dxzYXdkbHeodMBoUxvbaQ1LBLKtrjcgSgIIFLN2OuIHXU0BkpgjaQ7Zf80x/I/7MUsJfH0/rLMTaFz2Gr1ls0sOks/K4Nk4frFbLjKxF3tjrDNs/TuvcGj2WLjMCIPDoGl7B9U4MQtLDa7CWdTmy4uJ06ZwEQldJffwGw+v8bKQLaU0utnjtLx1dmDzhnEF9Lo9pwares1j20rRriMboddBglnwoKSvBAWFeAgVnMolRS55apXgwe38Rw/SAsxRvG4ysXeQTcRG1hV6W2I316/uIw/bFh3MX8NRJ5pTo9JCLAJRDCn6uEFU+EjsYWAS6RIjF8K18QVjzRi5yfbQJccv1ZWMlY6PW+HLZEhfXM+5d0VRDccUHFA4j6jCIqGck2nG2YutZuFcrw/exVzP/oFYF7mojaEGK2h6i1Xtt2Zbs2s1Wzcetg5xfqWrBazrZGgHNXrX5K8egSUmcL+PBXDyIqO5CodH+ivvuwjVXXUq4fyroDm0i7txG1fMK2nn3PR0RNf+Vrvh6ws4jzcY8A514LPQOuqB9R/0PYDifqN56914gs5PQgZf27HEsBD9i4mmjHO2wr2FF6tmkm1i48FcZCDd/Ab4fUZPqatKvV3pVEFUcRlR/N3uwrqioMs1A1w+s1vEVU/yZ7v4x22l/G3u1IAS516HDKivuDL4pKGbLjiAaeoKrMQJc/eEofw/c+Ud0rDN9r7PlSXvtyBQM3P4x/
width: 156rpx;
height: 205rpx;
}
.PromoterRank .header .rank .item.one .pictrue image {
width: 150rpx;
height: 150rpx;
margin-left: -75rpx;
}
.PromoterRank .header .rank .item.three .pictrue {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIgAAACxCAYAAAAfz/U3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoxNGUyNzRkOS00YmQ4LTUzNGItYWZkZS02ZTlmMTgxYmZlYWUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTExRTlGRDlEOEU2MTFFOTg0MDg4RjQ5MDM3QjNGRTIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTExRTlGRDhEOEU2MTFFOTg0MDg4RjQ5MDM3QjNGRTIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTAxZGU2OWItNWM2My0xOTQ1LTllZmMtMGIzNjcwYTFmNWUxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE0ZTI3NGQ5LTRiZDgtNTM0Yi1hZmRlLTZlOWYxODFiZmVhZSIv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
width: 136rpx;
height: 177rpx;
}
.PromoterRank .header .rank .item.three .pictrue image {
width: 130rpx;
height: 130rpx;
margin-left: -64rpx;
}
.PromoterRank .header .rank .item .name {
font-size: 30rpx;
color: #fff;
margin-top: 22rpx;
text-align: center;
width: 170rpx;
}
.PromoterRank .header .rank .item .num {
font-size: 30rpx;
color: #fff;
text-align: center;
}
.PromoterRank .list {
width: 710rpx;
background-color: #fff;
border-radius: 20rpx;
margin: -60rpx auto 0 auto;
padding: 0 30rpx;
}
.PromoterRank .list .item {
border-bottom: 1px solid #f3f3f3;
height: 101rpx;
font-size: 28rpx;
}
.PromoterRank .list .item .num {
color: #666;
width: 70rpx;
}
.PromoterRank .list .item .picTxt {
width: 350rpx;
}
.PromoterRank .list .item .picTxt .pictrue {
width: 68rpx;
height: 68rpx;
}
.PromoterRank .list .item .picTxt .pictrue image {
width: 100%;
height: 100%;
display: block;
border-radius: 50%;
}
.PromoterRank .list .item .picTxt .text {
width: 262rpx;
color: #333;
}
.PromoterRank .list .item .people {
width: 175rpx;
text-align: right;
}
</style>