<template>
	<view>
		<view class="page">
			<view class="w100 h-180 relative">
				<uni-nav-bar left-icon="back" title="销售额排行" :border="false" backgroundColor="transparent" class="fw-b" color="#fff" @clickLeft="$tools.goBack()"></uni-nav-bar>
			</view>
			<view class="w100 h-350 rows rowsm rowsa" v-if="lists.length>0">
				<view class="w-210 h-306 rows rowsl rowsm br-20 mt-100" style="background: linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%)">
					<view class="w-114 h-114 br-100" style="border: 2rpx solid #fff;margin-top: -30rpx;">
						<image class="w100 h100 br-100" :src="$tools.oss(lists[1].avatar)" mode="aspectFill"></image>
					</view>
					<view class="fs-30 fw-b mt-20 mb-20 pl-10 pr-10 two_overflow">{{lists[1].nickname}}</view>
					<view class="w-170 h-72 br-20 rows rowsm rowsc fs-26" style="background-color: rgba(255,255,255,.1);">
						{{lists[1].accumulative||0}}
					</view>
				</view>
				<view class="w-210 h-306 rows rowsl rowsm br-20" style="background: linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%)">
					<view class="w-114 h-114 br-100" style="border: 2rpx solid #fff;margin-top: -30rpx;">
						<image class="w100 h100 br-100" :src="$tools.oss(lists[0].avatar)" mode="aspectFill"></image>
					</view>
					<view class="fs-30 fw-b mt-20 mb-20 pl-10 pr-10 two_overflow">{{lists[0].nickname}}</view>
					<view class="w-170 h-72 br-20 rows rowsm rowsc fs-26" style="background-color: rgba(255,255,255,.1);">
						{{lists[0].accumulative||0}}
					</view>
				</view>
				<view class="w-210 h-306 rows rowsl rowsm br-20 mt-150" style="background: linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%)">
					<view class="w-114 h-114 br-100" style="border: 2rpx solid #fff;margin-top: -30rpx;">
						<image class="w100 h100 br-100" :src="$tools.oss(lists[2].avatar)" mode="aspectFill"></image>
					</view>
					<view class="fs-30 fw-b mt-20 mb-20 pl-10 pr-10 two_overflow">{{lists[2].nickname}}</view>
					<view class="w-170 h-72 br-20 rows rowsm rowsc fs-26" style="background-color: rgba(255,255,255,.1);">
						{{lists[2].accumulative||0}}
					</view>
				</view>
			</view>
			<view class="w100 h-350 rows rowsm rowsc" v-else>
				<text class="fs-36 fw-b colfff">暂无排行</text>
			</view>
			<view class="w100 rows rowsc mt-30">
				<view class="w-710 p-all-20 rows rowsl rowsm br-24 pl-10 pr-10 bgff">
					<scroll-view scroll-y="true" style="height: calc(100vh - 600rpx);">
						<view v-if="list.length>0">
							<view class="w-646 h-154 rows rowsm rowsb" style="border-bottom: 1rpx solid #ccc;" v-for="(item,index) in list" :key="index">
								<view class="rows rowsm">
									<view class="w-38 h-38 rows rowsm rowsc colfff br-100 fs-22 bg">
										{{index+4}}
									</view>
									<image class="w-80 h-80 br-100 mr-20 ml-20" :src="$tools.oss(item.avatar)" mode="aspectFill"></image>
									<view class="fs-28 fw-b w-300 one_overflow">{{item.nickname}}</view>
								</view>
								<text class="fs-28">{{item.accumulative||0}}</text>
							</view>
						</view>
						<view class="w100 rows rowsc h-600 rowsm" v-else>
							<image class="w-436 h-366" src="/static/other/5.png" mode=""></image>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				lists:[]
			}
		},
		onShow() {
			this.promoterMoney()
		},
		methods: {
			promoterMoney(){
				this.$tools.axiosFromToken("POST","user/promoterMoney").then(res => {
					console.log(res)
					this.list = res.data
					this.lists = this.list.splice(0, 3)
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F7F6FA;
	}
	.page{
		width: 750rpx;
		height: 678rpx;
		background: linear-gradient( 180deg, #E73232 0%, rgba(231,50,50,0.94) 30.45%, rgba(231,50,50,0.91) 53.88%, rgba(231,50,50,0.8) 69.29%, rgba(231,50,50,0.54) 81.67%, rgba(231,50,50,0.26) 90.37%, rgba(231,50,50,0) 100%);
	}
	.box{
		border: 2rpx solid #E73232;
	}
</style>