rt_fhyx_user_miniapp/pages_user/user/userShareList.vue

<template>
	<view class="content">
		<view class="fixed-top-box">
			<view class="status_bar" :style="{height: statusBarHeight}"></view>
			<view class="back-box" @click="back">
				<image src="../../static/images/back_white.png" mode=""></image>
				<text class="title">排行榜</text>
				<text></text>
			</view>
		</view>
		<view class="promoter-list"  >
			
			<view class="status_bar" :style="{height: statusBarHeight}"></view>
			<view class="tab-box">
				<view @click="changeType(1)" :class="type==1?'tab-item active':'tab-item'">
					周榜
				</view>
				<view @click="changeType(2)"  :class="type==2?'tab-item active':'tab-item'">
					月榜
				</view>
				<view @click="changeType(0)"  :class="type==0?'tab-item active':'tab-item'">
					总榜
				</view>
			</view>
			<view class="top-box" >
				<view class="bg">
					<image src="../../static/images/top-bg.png"></image>
				</view>
				<view class="top-item top2" >
					<view class="name" v-if="list.length>=2">{{list[1].nickname}}</view>
					<view class="money" v-if="list.length>=2">{{list[1].tuiMoney.toFixed(2)}}</view>
					<view class="head" v-if="list.length>=2">
						<image class="head-bg" src="../../static/images/top1.png"></image>
						<image class="bg" :src="list[1].avatar==null?'/static/images/detault_head.jpg':list[1].avatar"></image>
					</view>
				</view>
				<view class="top-item top1"  >
					<view class="name" v-if="list.length>=1">{{list[0].nickname}}</view>
					<view class="money" v-if="list.length>=1">{{list[0].tuiMoney.toFixed(2)}}</view>
					<view class="head" v-if="list.length>=1">
						<image class="head-bg" src="../../static/images/top1.png"></image>
						<image class="bg" :src="list[0].avatar==null?'/static/images/detault_head.jpg':list[0].avatar"></image>
					</view>
				</view>
				<view class="top-item top2" >
					<view class="name" v-if="list.length>=3">{{list[2].nickname}}</view>
					<view class="money" v-if="list.length>=3">{{list[2].tuiMoney.toFixed(2)}}</view>
					<view class="head" v-if="list.length>=3">
						<image class="head-bg" src="../../static/images/top1.png"></image>
						<image class="bg" :src="list[2].avatar==null?'/static/images/detault_head.jpg':list[2].avatar"></image>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="item" v-if="index>2" v-for="(item, index) in list">
					<view class="left">
						<view class="num">{{index+1}}</view>
						<view class="head">
							<image :src="item.avatar==null?'/static/images/detault_head.jpg':item.avatar"></image>
						</view>
						<view class="name">{{item.nickname}}</view>
					</view>
					<view class="right">
						<view class="money">¥{{item.tuiMoney.toFixed(2)}}</view>
					</view>
				</view>
			</view>
			<Loading :loaded="loaded" :loading="loading"></Loading>
		</view>
	</view>
  
</template>
<script>
	
  import {getUserShareList} from "@/api/user.js";
  import Loading from "@/components/Loading";
  export default {
    name: "tuiList",
    components: {
      Loading
    },
    props: {},
    data: function () {
      return {
		total:0,
		type:0,
		page: {
		  page: 1,
		  pageSize: 10
		},
		list: [],
		loaded: false,
		loading: false,
		statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
      };
    },
    mounted: function () {
      this.getUserShareList();
    },
	onReachBottom() {
	  !this.loading && this.getUserShareList();
	},
    methods: {
		changeType(type){
			console.log(type)
			this.type=type;
			this.list=[];
			this.page.page=1
			this.loaded=false;
			this.loading=false;
			this.getUserShareList();
		},
		getUserShareList: function () {
			let that = this;
			if (that.loaded || that.loading) return;
			that.loading = true;
			this.page.type=this.type;
			getUserShareList(this.page).then(
			  res => {
				that.total=res.data.total;
				that.list.push.apply(that.list, res.data.list);
				that.loading = false;
				that.loaded = !res.data.hasNextPage;
				that.page.page = that.page.page + 1;
				uni.hideLoading()
			  },
			  err => {
				uni.showToast({
				  title: err.msg || err.response.data.msg || err.response.data.message,
				  icon: "none",
				  duration: 2000
				});
			  },
			  300
			);
		},
    }
  };
</script>
<style lang="less">
	.page{
		height: 100%;
	}
	.content{
		height: 100%;
		background-image: linear-gradient(#35E1B1,#C7FFF2);
	}
	.fixed-top-box{
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		.back-box{
			height: 88upx;
			padding-left: 22upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20upx;
			image{
				width: 40upx;
				height: 40upx;
			}
			.title{
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
	.promoter-list{
		width: 100%;
		padding-top: 88rpx;
		.tab-box{
			margin: 30rpx 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color:#FFFFFF ;
			border-radius: 36rpx;
			height: 60rpx;
			padding: 5rpx;
			.tab-item{
				height: 100%;
				border-radius: 30rpx;
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #16967F;
				background-color:none ;
				font-size: 28rpx;
				
			}
			.active{
				color: #FFFFFF;
				background-color:#43CABC ;
			}
			
		}
		.top-box{
			z-index: 0;
			height: 450rpx;
			margin: 0rpx 60rpx;
			display: flex;
			align-items: flex-start;
			justify-content: center;
			position: relative;
			.bg{
				z-index: 0;
				bottom: -150rpx;
				position: absolute;
				height: 400rpx;
				width: 100%;
				image{
					height: 400rpx;
					width: 100%;
				}
			}
			.top-item{
				width: 33.33%;
				z-index: 10;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				.head{
					position: relative;
					.head-bg{
						width: 120rpx;
						height:140rpx;
					}
					.bg{
						top:35rpx;
						left:10rpx;
						position: absolute;
						width: 100rpx;
						height:100rpx;
						border-radius: 50%;
					}
				}
				.name{
					font-size: 28rpx;
					font-weight: bold;
					color:#fff;
				}
				.money{
					margin-top: 10rpx;
					background-color: #B4FFF1;
					border-radius: 30rpx;
					padding:10rpx 15rpx;
					font-size: 24rpx;
					color:#16967F;
				}
			}
			.top1{
				margin-top: 40rpx;
			}
			.top2{
				margin-top: 120rpx;
			}
		}
		.list{
			position: relative;
			min-height: 800rpx;
			z-index: 101;
			background-color: #FFFFFF;
			margin: 0rpx 30rpx 30rpx;
			border-radius: 30rpx;
			.item{
				padding: 10rpx 30rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				.left{
					flex:1;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					.num{
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 50%;
						background-color: #4FCBC1;
						width: 40rpx;
						height:40rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #fff;
					}
					.head{
						margin-left: 10rpx;
						width: 80rpx;
						height:80rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						image{
							border-radius: 50%;
							width: 100%;
							height:100%;
						}
					}
					.name{
						margin-left: 10rpx;
						font-size: 32rpx;
						color: #111;
						font-weight: bold;
					}
					
				}
				.right{
					.money{
						font-size: 28rpx;
						color: #40403F ;
						font-weight: bold;
					}
				}
			}
		}
	}
	 
</style>