xiaochengxu/components/HeroList/HeroList.vue

<template name="HeroList">
	<view class="list_main">
		<view style="width: 702rpx;height: 222rpx;position: relative;">
			<image :src="HeroListConfig.Configs.image" class="top_image" mode="aspectFill" />
			<!--名字：英雄榜-->
			<u-text :text="HeroListConfig.Configs.name" size="50rpx" lineHeight="70rpx" :bold="true" color="#333333" customStyle="position: absolute;z-index: 1;margin-left: 40rpx;margin-top: 65rpx"/>
			<!--更新日期-->
			<u-text :text="lastUpdateStr" size="20rpx" lineHeight="28rpx" color="#D49B4B" customStyle="position: absolute;z-index: 1;margin-left: 40rpx;margin-top: 8rpx"/>
		</view>
		
		<u-gap height="24rpx"></u-gap>
		<u-tabs :list="TabList" :scrollable="false" 
		lineColor="#D49B4B" 
		:activeStyle="{
			color:'#333333',
			size:'36rpx',
			fontWeight:'bold',
			lineHeight:'50rpx'
		}" 
		:inactiveStyle="{
			color:'#999999',
			size:'32rpx',
			lineHeight:'45rpx',
			fontWeight:'400',
		}" 
		@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;">
			<u-list :enableFlex="true" height="550rpx">
				<view style="height: 110rpx;position: relative;" v-for="(item,index) in datasOfListShowing">
					<view v-if="item.rankIndex <= 3">
						<image :src="item.rankImage" class="rankIndexImage" mode="aspectFill"/>
					</view>
					<view v-else>
						<u-text :text="item.rankIndex" size="24rpx" lineHeight="33rpx" color="#666666" :bold="true" margin="40rpx 0 0 40rpx"/>
					</view>
					<view style="position: absolute;left: 75px;top: 22rpx;">
						<u-avatar :src="item.headUrl" size="67rpx"></u-avatar>
					</view>
					<view style="position: absolute;left: 120px;top: 39rpx;">
						<u-text :text="item.name" size="24rpx" lineHeight="33rpx" color="#333333" :bold="true"/>
					</view>
					<view style="position: absolute;right: 21rpx;top: 39rpx;">
						<u-text :text="item.money" size="24rpx" lineHeight="33rpx" color="#333333" :bold="true" align="right" mode="price"/>
					</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>
	import HeroListConfig from "@/components/HeroList/HeroList.config.js"
	//console.log(HeroListConfig);
	let lastUpdateStr = "更新于：" + HeroListConfig.formatTime(HeroListConfig.Configs.lastUpdateTime);
	let TabList = HeroListConfig.TabList;
	///成交榜单的测试数据
	let heroListDatasOne = HeroListConfig.heroListDatasOne;
	///分佣金额测试数据
	let heroListDatasTwo = HeroListConfig.heroListDatasTwo;
	///当前默认选中英雄榜0->合伙人成交榜
	let currentTabIndex = 0;
	///当前正在显示的内容
	let datasOfListShowing = currentTabIndex == 0 ? heroListDatasOne : heroListDatasTwo;
	export default {
		name:"HeroList",
		data() {
			return {
				HeroListConfig,
				lastUpdateStr,
				TabList,
				currentTabIndex,
				datasOfListShowing,
			};
		},
		methods:{
			///当点击某个标签页时回调触发
			onTableIndexChanged(item){
				//console.log("tab changed to ",item);
				let index = item.index;
				this.datasOfListShowing = index == 0 ? heroListDatasOne : heroListDatasTwo;
				//console.log(datasOfListShowing);
				this.currentTabIndex = index;
			},
		}
	}
</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: #2979FF;
	}
	
	///顶部图片背景
	.top_image{
		width: 702rpx;
		height: 222rpx;
		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;
	}
</style>