公司小程序
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.

150 lines
4.8 KiB

3 years ago
<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>