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

210 lines
5.7 KiB

3 years ago
<template name="HeroList">
<view class="list_main">
<view style="width: 702rpx;height: 222rpx;position: relative;">
<image src="../../static/images/mainview/banner_yingxiongbang.png" class="top_image" mode="aspectFill" />
3 years ago
<!--名字英雄榜-->
<text class="big_title">英雄榜</text>
3 years ago
<!--更新日期-->
<text class="updateTime_text">{{getUpdateTimeStr()}}</text>
3 years ago
</view>
<u-gap height="24rpx"></u-gap>
<u-tabs :list="TabList" :scrollable="false"
lineColor="#D49B4B"
:activeStyle="{
color:'#333333',
fontSize:'36rpx',
3 years ago
fontWeight:'bold',
lineHeight:'50rpx',
transform: 'scale(1.05)'
3 years ago
}"
:inactiveStyle="{
color:'#999999',
fontSize:'32rpx',
3 years ago
lineHeight:'45rpx',
fontWeight:'400',
transform: 'scale(1)'
3 years ago
}"
@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"/>
3 years ago
</view>
<view v-else>
<u-text :text="(index + 1)" size="24rpx" lineHeight="33rpx" color="#666666" :bold="true" margin="40rpx 0 0 40rpx"/>
3 years ago
</view>
<view style="position: absolute;left: 75px;top: 22rpx;">
<image :src="item.headurl" style="width: 67rpx;height: 67rpx;border-radius: 50%;" mode="aspectFill"/>
3 years ago
</view>
<view style="position: absolute;left: 120px;top: 39rpx;">
<u-text :text="item.nickname" size="24rpx" lineHeight="33rpx" color="#333333" :bold="true"/>
3 years ago
</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"/>
3 years ago
</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>
3 years ago
///当前默认选中英雄榜0->合伙人成交榜
let currentTabIndex = 0;
export default {
name:"HeroList",
data() {
return {
mainPageData : getApp().globalData.mainPageData,
TabList : [
{
name:"大富翁成交榜",
},{
name:"分佣榜",
}
],
3 years ago
currentTabIndex,
};
},
methods:{
///当点击某个标签页时回调触发
onTableIndexChanged(item){
let index = item.index;
this.currentTabIndex = index;
},
///获取当前需要显示的内容
getTargetShowingData(){
return this.mainPageData.ranklist[this.currentTabIndex].rankitem;
},
/**
* @param {Object} index 获取列表每一个指定位置的item的唯一key
*/
getUdidKeyOfItem(index){
return this.currentTabIndex + "_" + index;
},
/**
* 获取排名的特殊图片只有123名有
* @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);
}
3 years ago
}
}
</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;
3 years ago
}
///顶部图片背景
.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;
}
///英雄榜这几个字
.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
}
3 years ago
</style>