<template>
	<view class="content" :style="'background-image: url(' + require('@/static/img/merits_back.png') + ')'">
		<view class="list">
			<view class="list-user">
				<view class="list-item">
					<view class="number">
						<text>排名</text>
					</view>
					<view class="user user-header">
						<text>用户名称</text>
					</view>
					<view class="phone">
						<text>联系方式</text>
					</view>
				</view>
				<view class="list-item" v-for="(item, index) in rack" :key="index">
					<view class="number">{{index + 1}}</view>
					<view class="user nowrap">
						<image class="user-avatar" :src="item.user.avatar || require('@/static/imgs/default_myHead.png')"></image>
						{{item.user.nickname}}
					</view>
					<view class="phone">{{item.user.username}}</view>
				</view>
			</view>
			<view class="list-value">
				<view class="list-value-item nowrap">
					<text>捐赠份数</text>
				</view>
				<view class="list-value-item nowrap" v-for="(item, index) in rack" :key="index">
					{{item.total}}份
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { rankMerits } from '@/apis/interfaces/user.js'
	export default {
		data() {
			return {
				rack: []
			};
		},
		onShow() {
			rankMerits().then(res => {
				this.rack = res
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
    .content{
		padding: 10rpx 30rpx 0;
		min-height: 90vh;
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: top center;
		box-sizing: border-box;
		.list{
			position: relative;
			margin-top: 85%;
			background-color: white;
			border-radius: 20rpx 20rpx 0 0;
			box-shadow: 0 0 10rpx 10rpx rgba(0, 0, 0, .02);
			padding: 30rpx;
			.list-user{
				padding-right: 200rpx;
				.list-item{
					color: #231815;
					border-bottom: solid 1rpx #7b7b7b;
					display: flex;
					font-size: 28rpx;
					padding: 20rpx 0;
					align-items: center;
					.number{
						width: 80rpx;
						text-align: center;
						color: #231815;
						font-weight: bold;
					}
					.user{
						width: calc(100% - 250rpx);
						height: 48rpx;
						line-height: 48rpx;
						padding-left: 58rpx;
						position: relative;
						box-sizing: border-box;
						&.user-header{
							padding: 0;
							text-align: center;
						}
						.user-avatar{
							width: 48rpx;
							height: 48rpx;
							border-radius: 50%;
							position: absolute;
							left: 0;
							top: 0;
							background-color: #ddd;
						}
					}
					.phone{
						width: 170rpx;
						text-align: right;
						padding-right: 10rpx;
						box-sizing: border-box;
					}
					text{
						font-weight: normal;
						background: linear-gradient(to top, #aa8a66, #e5cca8, #ab8c68);
						padding: 0 10rpx;
						border-radius: 10rpx;
						line-height: 50rpx;
						display: inline-block;
					}
				}
			}
			.list-value{
				position: absolute;
				top: -20rpx;
				bottom: 0;
				right: 30rpx;
				width: 180rpx;
				background: linear-gradient(to left, #aa8a66, #e5cca8, #ab8c68 );
				text-align: center;
				padding-top: 50rpx;
				border-radius: 20rpx 20rpx 0 0;
				.list-value-item{
					margin: 0 20rpx;
					font-size: 30rpx;
					padding: 20rpx 0;
					line-height: 48rpx;
					border-bottom: solid 1rpx white;
					color: #1f130e;
					text{
						font-weight: normal;
						background: linear-gradient(to top, #bfbfbf, #fefefe, #bfbfbf);
						padding: 0 10rpx;
						border-radius: 10rpx;
						line-height: 48rpx;
						display: inline-block;
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>
