You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
153 lines
4.9 KiB
153 lines
4.9 KiB
<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',
|
|
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;">
|
|
<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 utils from "../../common/utils.js"
|
|
import HeroListConfig from "@/components/HeroList/HeroList.config.js"
|
|
|
|
//console.log(HeroListConfig);
|
|
let lastUpdateStr = "更新于：" + utils.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>
|
|
|