149 lines
26 KiB
Vue
149 lines
26 KiB
Vue
|
<template>
|
|||
|
|
<view :style="viewColor">
|
|||
|
|
<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 ? 't-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="`${domain}/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 ? item.avatar : '/static/images/f.png'"></image></view>
|
|||
|
|
<view class="text line1">{{item.nickname}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="people p-color">￥{{item.count}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | Author: CRMEB Team <admin@crmeb.com>
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
import { HTTP_REQUEST_URL } from '@/config/app';
|
|||
|
|
import { getBrokerageRank } from '@/api/user.js';
|
|||
|
|
import { mapGetters } from "vuex";
|
|||
|
|
import authorize from '@/components/Authorize';
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
authorize,
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
domain: HTTP_REQUEST_URL,
|
|||
|
|
navList: ["周排行", "月排行"],
|
|||
|
|
active: 0,
|
|||
|
|
rankList:[],
|
|||
|
|
page:1,
|
|||
|
|
limit:10,
|
|||
|
|
loadend:false,
|
|||
|
|
loading:false,
|
|||
|
|
loadTitle:'加载更多',
|
|||
|
|
type:'week',
|
|||
|
|
position:0,
|
|||
|
|
isAuto: false, //没有授权的不会自动授权
|
|||
|
|
isShowAuth: false, //是否隐藏授权
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
computed: mapGetters(['isLogin','viewColor','keyColor']),
|
|||
|
|
onLoad(){
|
|||
|
|
if(this.isLogin){
|
|||
|
|
this.getBrokerageRankList();
|
|||
|
|
}else{
|
|||
|
|
this.isAuto = true;
|
|||
|
|
this.isShowAuth = true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
onLoadFun:function(){
|
|||
|
|
this.isShowAuth = false;
|
|||
|
|
this.getBrokerageRankList();
|
|||
|
|
},
|
|||
|
|
// 授权关闭
|
|||
|
|
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();
|
|||
|
|
},
|
|||
|
|
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.list;
|
|||
|
|
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.position = res.data.position;
|
|||
|
|
}).catch(err=>{
|
|||
|
|
this.loading = false;
|
|||
|
|
this.loadTitle = '加载更多';
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onReachBottom: function () {
|
|||
|
|
this.page++;
|
|||
|
|
this.getBrokerageRankList();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.CommissionRank .header {
|
|||
|
|
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAAFYCAMAAAA7uIkNAAAARVBMVEVHcEz9xgD5tQD6uwD9xAD/ygD3sAD9wgD9wwD9xQD8wAD3qwD9mAT/xyb+igL6ogD+0D7/tiH/pRz/tQX/dAD/+OH/5Zhuw8b0AAAACnRSTlMA////2v//Onaspq/3NAAAIABJREFUeNrsnYmCqjgUROca47yOYr/R/v9vHSALNxuEzWaposFGZVGPReWC8M8/EARBEARBEARBEARBEARBEARBEARBEARBEARBEARBEARBEARBEARBEARBEARBEARBEARBEARBGf37779//vz5+vq6tpKNiPRIfW/9WP0MvE3QzimvGb+SLFXNfgM+3jjoyJgDe2ivqNeZZTroHvQN83hDoe2SfpVL6wrkoS2iTnIt1T4P5qHNoH6V6wvIQ8d29YTL4x2HfktrZHVkeWibrMvf0heIh07COoiHzsU6iIc+1TbdBusgHvpAHeYqt6UrajXQSiFma6zD4qHVQgzJrQoWDx03scPioROmmMDiATy0RPOU5D6ETAMdPcX4whEG0GlgR4iHTgU7HB46FexweOhUsDcn9fjCJwidBPYWeFRpoEL9kQcQypJQEexXeQxhxxM0mGOOAjvarNDxQ3sIPD5TKKejwY42K3SOHINEA53N2u1+Vny4UFCP4cc9UtDb4YYzixmGa0uo0UDZHOMz7lNOA49/jur+dUmuG5qsUGftCR/vbilDP7HHyczBzIekPz61Z/OhYLm5b2e3XDs1mqxQponqYeKTxem2D1BkveH3Zibv3kI8fCPqKbE14usBg4dsaqce1ihIxiWMUsT/NNYp7fkUrBv53Acub4dI8LD2K0fUZ4f4XV6YSCWXIG7EE4+99WiNlkP8eT7lMvONgcGfnvYku5Rpo1KyPUge4qkkE28hSm7T/k7R9yCmPO3vhBLNyfXlOXfs7YHDeyASN/qodes1F6chL4PYEq4nhamJL5dN4H2V0WI9dZAhhrYbJLIyxaD7WwOKvyFEwfZi3K13X7QcO3//ud1yqb3lXwE9hMGft41KQViglCH6bU4KszMlajrcWr3tQsEtJSuRUYWUoqJ/+NzgHztztFjPGWRIpp052VHPWDyen37odvxcqHhquxVAoDltRcY37mztO2h59tUPu+ThbzxG7zcdrGOGFk7J8bj+jwrN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
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-color: var(--view-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: 20rpx;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.t-color {border-bottom: 4rpx solid var(--view-theme); color: var(--view-theme)}
|
|||
|
|
.p-color{color: var(--view-priceColor);}
|
|||
|
|
.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;}
|
|||
|
|
</style>
|