crmeb_java-1.4/app/pages/promoter/commission_rank/index.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="urlDomain+'crmebimage/perset/staticImg/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 {
				urlDomain: this.$Cache.get("imgHost"),
				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>