249 lines
29 KiB
Vue
249 lines
29 KiB
Vue
|
<template>
|
||
|
|
<view :data-theme="theme">
|
||
|
|
<view class="CommissionRank">
|
||
|
|
<view class="header">
|
||
|
|
<view class="rank" v-if="position">您目前的排名<text class="num">{{position}}</text>名</view>
|
||
|
|
<view class="rank" v-else>您目前暂无排名</view>
|
||
|
|
</view>
|
||
|
|
<view class="wrapper">
|
||
|
|
<view class="nav acea-row row-around">
|
||
|
|
<view class="item" :class="active == index ? 'font_color' : ''" v-for="(item,index) in navList" :key="index"
|
||
|
|
@click="switchTap(index)">
|
||
|
|
{{ item }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="list">
|
||
|
|
<view class="item acea-row row-between-wrapper" v-for="(item,index) in rankList" :key="index">
|
||
|
|
<view class="num" v-if="index <= 2">
|
||
|
|
<image :src="'/static/images/medal0'+(index+1)+'.png'"></image>
|
||
|
|
</view>
|
||
|
|
<view class="num" v-else>
|
||
|
|
{{index+1}}
|
||
|
|
</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.brokeragePrice}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class='noCommodity' v-if="rankList.length == 0 && isShow">
|
||
|
|
<emptyPage title="暂无排行～"></emptyPage>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
getBrokerageRank,
|
||
|
|
brokerageRankNumber
|
||
|
|
} from '@/api/user.js';
|
||
|
|
import {toLogin} from '@/libs/login.js';
|
||
|
|
import emptyPage from '@/components/emptyPage.vue'
|
||
|
|
import {mapGetters} from "vuex";
|
||
|
|
import {setThemeColor} from '@/utils/setTheme.js'
|
||
|
|
const app = getApp();
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
emptyPage
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
navList: ["周排行", "月排行"],
|
||
|
|
active: 0,
|
||
|
|
rankList: [],
|
||
|
|
page: 1,
|
||
|
|
limit: 20,
|
||
|
|
loadend: false,
|
||
|
|
loading: false,
|
||
|
|
loadTitle: '加载更多',
|
||
|
|
type: 'week',
|
||
|
|
position: 0,
|
||
|
|
isShow: false,
|
||
|
|
isAuto: false, //没有授权的不会自动授权
|
||
|
|
isShowAuth: false, //是否隐藏授权
|
||
|
|
theme:app.globalData.theme,
|
||
|
|
bgColor:'#e93323'
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: mapGetters(['isLogin']),
|
||
|
|
watch:{
|
||
|
|
isLogin:{
|
||
|
|
handler:function(newV,oldV){
|
||
|
|
if(newV){
|
||
|
|
this.getBrokerageRankList();
|
||
|
|
this.getBrokerageRankNumber(this.type);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
deep:true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
if (this.isLogin) {
|
||
|
|
this.getBrokerageRankList();
|
||
|
|
this.getBrokerageRankNumber(this.type);
|
||
|
|
} else {
|
||
|
|
toLogin();
|
||
|
|
}
|
||
|
|
let that = this;
|
||
|
|
that.bgColor = setThemeColor();
|
||
|
|
uni.setNavigationBarColor({
|
||
|
|
frontColor: '#ffffff',
|
||
|
|
backgroundColor:that.bgColor,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
onLoadFun: function() {
|
||
|
|
this.getBrokerageRankList();
|
||
|
|
this.getBrokerageRankNumber(this.type);
|
||
|
|
},
|
||
|
|
// 授权关闭
|
||
|
|
authColse: function(e) {
|
||
|
|
this.isShowAuth = e
|
||
|
|
},
|
||
|
|
switchTap: function(index) {
|
||
|
|
this.active = index;
|
||
|
|
this.type = index ? 'month' : 'week';
|
||
|
|
this.page = 1;
|
||
|
|
this.loadend = false;
|
||
|
|
this.$set(this, 'rankList', []);
|
||
|
|
this.getBrokerageRankList();
|
||
|
|
this.getBrokerageRankNumber(this.type);
|
||
|
|
},
|
||
|
|
getBrokerageRankNumber(type) {
|
||
|
|
brokerageRankNumber({
|
||
|
|
type: type
|
||
|
|
}).then(res => {
|
||
|
|
this.position = res.data;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
getBrokerageRankList: function() {
|
||
|
|
if (this.loadend) return;
|
||
|
|
if (this.loading) return;
|
||
|
|
this.loading = true;
|
||
|
|
this.loadTitle = '';
|
||
|
|
getBrokerageRank({
|
||
|
|
page: this.page,
|
||
|
|
limit: this.limit,
|
||
|
|
type: this.type
|
||
|
|
}).then(res => {
|
||
|
|
let list = res.data || [];
|
||
|
|
let loadend = list.length <= this.limit;
|
||
|
|
this.rankList.push.apply(this.rankList, list);
|
||
|
|
this.loading = false;
|
||
|
|
this.loadend = loadend;
|
||
|
|
this.loadTitle = loadend ? '😕我也是有底线的' : '加载更多';
|
||
|
|
this.$set(this, 'rankList', this.rankList);
|
||
|
|
this.isShow = true;
|
||
|
|
//this.position = res.data.position;
|
||
|
|
}).catch(err => {
|
||
|
|
this.loading = false;
|
||
|
|
this.loadTitle = '加载更多';
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onReachBottom: function() {
|
||
|
|
this.getBrokerageRankList();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.CommissionRank .header {
|
||
|
|
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAAFZCAMAAADw5FqoAAAC/VBMVEUAAAD////////////////////////////////+1mz7wgD+ygD////8wgD8wwD7wAD+yAD+yQD8xQD9xwD8xAD+ygD9xQD8wgD+yQD7vgD////4tQD////////5uAD6ugD7vgD////////+yAD////////////////////////////4swD5tgD////5uAD////2rwD7vQD////////9xgD////9yAD8xAD+yQD1qwD7wQD+ywD1rQD5uQD6vQD4tgD8wwD+0D/3sgD2rwD7vwD2sAD3swD3tAD2rgD2sQD/yij5uwD6uwD5vwD4tAD0qQD/nQD/yyv4uAD1sgD/uAb/+OH/zTX0sAD/0UT5vQD/zzv4uwD1tQD/zC/roADzpwD/zjj3uQDyrgDzrADzqgD/0EH/zz7qngDtowD/zDL0rgDxqgD3twD/0kjpmgD/yy3wpgDwpwDyqQD/yUr/00vvpADmlQD1twD/uQn1tADnmQDxqQDtnwDrogD/007upwDxrADvogD/wy3/ykz/xTXypQDtpQD/xTHxpAD/y07vqAD/vhrtogDpnAD/wir/wSbomADnlgD/vBXrnwDonQH/1FD/xkD/yEbkkgD/ugzvoQD/uxD/xzn4ugD/1VP6wiLrnAD/uxv/1lj/yD3/wB/snQD9zzrlkwD/yUL/y1H/xTv/x0P/wjXjkAD/wCPtpgD9zTf5vzH/uhf/vCD/wTD9xDv4uCT/+eX/113/tAD0syT/ySP9yjLyrgz+zTH/twL4uBL/++r7xSb5wjfqmQD3tR/soRHtphTwrhvwqhb/vAD/y0f1tyr5uyj9xwr/vyb0sRj/02f/1VX8xh75vRT/ogD+xhT/uhD0sQzwqQnroAn3tAr9yx37wzT7xi35vQv/zVT8ySr7whnkkQD3uy/8vyz7wgnnmgf+zkX+zSX5vBn/rgDuown+yxX//PD/yB3+yw3/xB37yT//9db7whH/8sj/7bn/2mX/xCX/4Yr/pwL/5pz/3Hj/6qv/vhCX1E/RAAAANHRSTlMAIJ9Av3/fYD8GE9HuI5OA7vdW3nKsRDfBTqvUFQ67YC65jWbYbMo4TFgw3qiY9R3t6Hhzmm/h5QAAQsBJREFUeNrs2kuKAyEUQFGn8aHlv8ys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
|
||
|
|
@include main_bg_color(theme);
|
||
|
|
width: 100%;
|
||
|
|
height: 344rpx;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.CommissionRank .header .rank {
|
||
|
|
font-size: 33rpx;
|
||
|
|
color: #fff;
|
||
|
|
position: absolute;
|
||
|
|
top: 160rpx;
|
||
|
|
left: 48rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.CommissionRank .header .rank .num {
|
||
|
|
font-size: 51rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
margin: 0 10rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.CommissionRank .wrapper {
|
||
|
|
width: 710rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 14rpx;
|
||
|
|
margin: -76rpx auto 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.CommissionRank .wrapper .nav {
|
||
|
|
height: 99rpx;
|
||
|
|
border-bottom: 2.5rpx solid #f3f3f3;
|
||
|
|
font-size: 30rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #999;
|
||
|
|
line-height: 99rpx;
|
||
|
|
}
|
||
|
|
.CommissionRank .wrapper .nav .item.font_color {
|
||
|
|
@include main_color(theme);
|
||
|
|
@include tab_border_bottom(theme);
|
||
|
|
margin-top: -2rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.CommissionRank .wrapper .list {
|
||
|
|
padding: 0 30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.CommissionRank .wrapper .list .item {
|
||
|
|
border-bottom: 1px solid #f3f3f3;
|
||
|
|
height: 101rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.CommissionRank .wrapper .list .item .num {
|
||
|
|
color: #666;
|
||
|
|
width: 70rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.CommissionRank .wrapper .list .item .num image {
|
||
|
|
width: 34rpx;
|
||
|
|
height: 40rpx;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.CommissionRank .wrapper .list .item .picTxt {
|
||
|
|
width: 350rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.CommissionRank .wrapper .list .item .picTxt .pictrue {
|
||
|
|
width: 68rpx;
|
||
|
|
height: 68rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.CommissionRank .wrapper .list .item .picTxt .pictrue image {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: block;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.CommissionRank .wrapper .list .item .picTxt .text {
|
||
|
|
width: 262rpx;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.CommissionRank .wrapper .list .item .people {
|
||
|
|
width: 175rpx;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
.font_color{
|
||
|
|
@include price_color(theme);
|
||
|
|
}
|
||
|
|
</style>
|