xiaochengxu/components/HeroList/HeroList.vue

<template name="HeroList">
	<view class="list_main">
		<view style="width: 702rpx;height: 222rpx;position: relative;">
			<image :src="getTopImageUrl()" class="top_image" mode="widthFix" />
			<!--名字：英雄榜-->
			<text class="big_title">英雄榜</text>
			<!--更新日期-->
			<text class="updateTime_text">{{getUpdateTimeStr()}}</text>
		</view>
		
		<u-gap height="24rpx"></u-gap>
		<u-tabs :list="TabList" :scrollable="false" 
		lineColor="#D49B4B" 
		:activeStyle="{
			color:'#333333',
			fontSize:'36rpx',
			fontWeight:'bold',
			lineHeight:'50rpx',
			transform: 'scale(1.05)'
		}" 
		:inactiveStyle="{
			color:'#999999',
			fontSize:'32rpx',
			lineHeight:'45rpx',
			fontWeight:'400',
			transform: 'scale(1)'
		}" 
		@click="onTableIndexChanged" :current="currentTabIndex"
		/>
		<u-line color="#E2E2E2" length="662rpx" customStyle="position: relative;left: 20rpx" :hairline="true" margin="0 0 0 0" :dashed="true"></u-line>
		<!--排名，用户名，金额-->
		<view class="ranking_title">
			<u-text text="排名" size="28rpx" lineHeight="40rpx" color="#333333" margin="18rpx 0 0 18rpx"/>
			<u-text text="用户名" size="28rpx" lineHeight="40rpx" color="#333333" margin="18rpx 0 0 100rpx"/>
			<u-text text="金额" size="28rpx" lineHeight="40rpx" color="#333333" margin="18rpx 0 0 313rpx"/>
		</view>
		<u-line color="#E2E2E2" length="662rpx" customStyle="position: relative;left: 20rpx" :hairline="true" margin="0 0 0 0" :dashed="true"></u-line>
		<!-- 列表-->
		<view style="position: relative;top: 0rpx;height: 550rpx;background-color: #FFFFFF;border-radius: 20rpx;" :key="mainPageData.ranklist.length">
			<u-skeleton v-if="mainPageData.ranklist.length == 0"
				rows="4"
				:loading="true"
				:title="false"
				rowsHeight="110rpx"
				rowsWidth="702rpx"
			></u-skeleton>
			<u-list v-else
				:enableFlex="true"
				height="550rpx"
			>
				<view style="height: 110rpx;position: relative;" v-for="(item,index) in getTargetShowingData()" :key="getUdidKeyOfItem(index)">
					<view v-if="index < 3">
						<image :src="getRankIndexImage(index)" class="rankIndexImage" mode="aspectFill"/>
					</view>
					<view v-else>
						<u-text :text="(index + 1)" size="24rpx" lineHeight="33rpx" color="#666666" :bold="true" margin="40rpx 0 0 40rpx"/>
					</view>
					<view style="position: absolute;left: 75px;top: 22rpx;">
						<image :src="item.headurl" style="width: 67rpx;height: 67rpx;border-radius: 50%;" mode="aspectFill"/>
					</view>
					<view style="position: absolute;left: 120px;top: 39rpx;">
						<u-text :text="item.nickname" size="24rpx" lineHeight="33rpx" color="#333333" :bold="true"/>
					</view>
					<view style="position: absolute;right: 21rpx;top: 39rpx;">
						<u-text :text="getMoneyFormat(item.score)" size="24rpx" lineHeight="33rpx" color="#333333" :bold="true" align="right"/>
					</view>
					<u-line color="#E2E2E2" length="662rpx" :hairline="true" margin="0 0 0 20rpx" :dashed="true" customStyle="position: absolute;bottom:1rpx;"></u-line>
				</view>
			</u-list>
		</view>
	</view>
</template>

<script>	
	///当前默认选中英雄榜0->合伙人成交榜
	let currentTabIndex = 0;
	export default {
		name:"HeroList",
		data() {
			return {
				mainPageData : getApp().globalData.mainPageData,
				TabList : [
					{
						name:"大富翁成交榜",
					},{
						name:"分佣榜",
					}
				],
				currentTabIndex,
			};
		},
		methods:{
			///当点击某个标签页时回调触发
			onTableIndexChanged(item){
				let index = item.index;
				this.currentTabIndex = index;
			},
			///获取当前需要显示的内容
			getTargetShowingData(){
				return this.mainPageData.ranklist[this.currentTabIndex].rankitem;
			},
			/**
			 * 获取顶部需要显示的图片信息
			 */
			getTopImageUrl(){
				if(!this.mainPageData.ranklist[this.currentTabIndex]){
					return "../../static/images/mainview/banner_yingxiongbang.png";
				}
				return this.mainPageData.ranklist[this.currentTabIndex].picurl;
			},
			/**
			 * @param {Object} index 获取列表每一个指定位置的item的唯一key
			 */
			getUdidKeyOfItem(index){
				return this.currentTabIndex + "_" + index;
			},
			/**
			 * 获取排名的特殊图片，只有1，2，3名有
			 * @param {Object} index 从0开始的排位
			 */
			getRankIndexImage(index){
				return "../../static/images/mainview/p_"+(index+1)+".png";
			},
			
			getMoneyFormat(num){
				num = num / 100;
				var str = this.$utils.formatMoney(num);
				return "￥"+str;
			},
			/**
			 * 获取更新时间需要显示的内容
			 */
			getUpdateTimeStr(){
				if(this.mainPageData.ranklist.length == 0){
					return '';
				}
				var data 	= this.mainPageData.ranklist[this.currentTabIndex];
				var time	= data.updatetime;
				return "更新于："+ this.$utils.formatTime(time);
			}
		}
	}
</script>

<style lang="scss" scoped>
	///英雄榜背景
	.list_main{
		width: 702rpx;
		height: 952rpx;
		background-color: #FFFFFF;
		opacity: 1;
		border-radius: 20rpx;
		position: relative;
		margin-left: 24rpx;
		margin-right: 24rpx;
	}
	
	.top{
		width: 702rpx;
		height: 222rpx;
		position: absolute;
		background-color: #FFFFFF;
	}
	
	///顶部图片背景
	.top_image{
		width: 702rpx;
		height: auto;
		position: absolute;
		z-index: 0;
	}
	
	.divider{
		color: #E2E2E2;
	}
	///排名，用户，金额的view的class
	.ranking_title{
		@include flex(row)
		position: relative;
		//top: 21rpx;
		display: flex;
		flex-direction: row;
		height: 80rpx;
		//left: 18rpx;
		//background-color: #0081FF;
	}
	///排名前三名的图片
	.rankIndexImage{
		width: 41rpx;
		height: 47rpx;
		position: relative;
		left: 26rpx;
		top: 32rpx;
	}
	///英雄榜这几个字
	.big_title{
		height: 70rpx;
		font-size: 50rpx;
		font-weight: bold;
		color: #333333;
		opacity: 1;
		position: absolute;
		left: 40rpx;
		top: 65rpx;
	}
	///更新于时间的字体格式
	.updateTime_text{
		height: 28rpx;
		font-size: 20rpx;
		font-weight: 400;
		color: #D49B4B;
		opacity: 1;
		position: absolute;
		z-index: 1;
		left: 40rpx;
		top: 143rpx
	}
</style>