<template>
	<view class="app">

<!-- 		<view class="nav-view">
			<text class="nav-title">轻未来</text>
		</view> -->
		
		
		<view>
			<view class="date-item">
				<text class="triangle-bottomright"></text>
				<text class="date-title">时间</text>
				<text class="triangle-topleft"></text>
				<text class="date-txt">2021年</text>
			</view>
			<view @click="toAchievement">
				<view class="service-item">
					<text class="service-number">100.00</text>
					<text class="service-unit">万</text>
				</view>
				<text class="service-title">服务业绩(元)</text>
				<view class="charge-item">
					<text class="charge-item-money">充值业绩：10.00万</text>
					<text class="charge-item-money">本月营业额：8000元</text>
				</view>
			</view>
	
			
			
			<view class="service-item">
				<text class="service-number">1000</text>

			</view>
			<text class="service-title">服务人数 (个)</text>
			<view class="charge-item">
				<text class="charge-item-money">分公司数量：800 (个)</text>
				<text class="charge-item-money">合伙人：900 (个)</text>
			</view>
			
			<view class="separator-section"></view>
			
			<view class="rank-list">
				<view class="rank-title">
					<image class="rank-img" src="/static/home/rank.png"></image>
					<text class="rank-title-txt">4月业绩代理排名</text>
				</view>
				
				<view class="rank-item">
					<view class="rank-top">
						<image class="rank-user-img" src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3832721317,312397218&fm=26&gp=0.jpg"></image>
						<view class="rank-des">
							<view class="rank-des-name">
								<text class="rank-des-name-txt">张三</text>
								<text class="rank-des-nick-name">zhangsan</text>
							</view>
							<text class="rank-des-nick-name rank-des-company">分公司</text>
							
							
						</view>
						<image class="rank-rate-img"  src="/static/home/firstRank.png"></image>
					</view>
					
					<view class="rank-bottom">
						<view class="rank-bottom-item">
							<view class="rank-bottom-item-des">
								<text class="rank-bottom-item-des-number">100.00</text>
								<text class="rank-bottom-item-des-unit"> 万</text>
							</view>
							<text class="rank-bottom-item-name">服务业绩</text>
						</view>
						
						<view class="rank-bottom-item">
							<view class="rank-bottom-item-des">
								<text class="rank-bottom-item-des-number">10.00</text>
								<text class="rank-bottom-item-des-unit"> 万</text>
							</view>
							<text class="rank-bottom-item-name">充值业绩</text>
						</view>
						
						<view class="rank-bottom-item">
							<view class="rank-bottom-item-des">
								<text class="rank-bottom-item-des-number">10000</text>
								<text class="rank-bottom-item-des-unit">  个</text>
							</view>
							<text class="rank-bottom-item-name">服务人数</text>
						</view>
					</view>
					
				</view>
				
				
				
				<view class="rank-item">
					<view class="rank-top">
						<image class="rank-user-img" src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3832721317,312397218&fm=26&gp=0.jpg"></image>
						<view class="rank-des">
							<view class="rank-des-name">
								<text class="rank-des-name-txt">张三</text>
								<text class="rank-des-nick-name">zhangsan</text>
							</view>
							<text class="rank-des-nick-name rank-des-company">分公司</text>
							
							
						</view>
						<image class="rank-rate-img"  src="/static/home/firstRank.png"></image>
					</view>
					
					<view class="rank-bottom">
						<view class="rank-bottom-item">
							<view class="rank-bottom-item-des">
								<text class="rank-bottom-item-des-number">100.00</text>
								<text class="rank-bottom-item-des-unit"> 万</text>
							</view>
							<text class="rank-bottom-item-name">服务业绩</text>
						</view>
						
						<view class="rank-bottom-item">
							<view class="rank-bottom-item-des">
								<text class="rank-bottom-item-des-number">10.00</text>
								<text class="rank-bottom-item-des-unit"> 万</text>
							</view>
							<text class="rank-bottom-item-name">充值业绩</text>
						</view>
						
						<view class="rank-bottom-item">
							<view class="rank-bottom-item-des">
								<text class="rank-bottom-item-des-number">10000</text>
								<text class="rank-bottom-item-des-unit">  个</text>
							</view>
							<text class="rank-bottom-item-name">服务人数</text>
						</view>
					</view>
					
				</view>
				
				<view class="rank-item">
					<view class="rank-top">
						<image class="rank-user-img" src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3832721317,312397218&fm=26&gp=0.jpg"></image>
						<view class="rank-des">
							<view class="rank-des-name">
								<text class="rank-des-name-txt">张三</text>
								<text class="rank-des-nick-name">zhangsan</text>
							</view>
							<text class="rank-des-nick-name rank-des-company">分公司</text>
							
							
						</view>
						<image class="rank-rate-img"  src="/static/home/firstRank.png"></image>
					</view>
					
					<view class="rank-bottom">
						<view class="rank-bottom-item">
							<view class="rank-bottom-item-des">
								<text class="rank-bottom-item-des-number">100.00</text>
								<text class="rank-bottom-item-des-unit"> 万</text>
							</view>
							<text class="rank-bottom-item-name">服务业绩</text>
						</view>
						
						<view class="rank-bottom-item">
							<view class="rank-bottom-item-des">
								<text class="rank-bottom-item-des-number">10.00</text>
								<text class="rank-bottom-item-des-unit"> 万</text>
							</view>
							<text class="rank-bottom-item-name">充值业绩</text>
						</view>
						
						<view class="rank-bottom-item">
							<view class="rank-bottom-item-des">
								<text class="rank-bottom-item-des-number">10000</text>
								<text class="rank-bottom-item-des-unit">  个</text>
							</view>
							<text class="rank-bottom-item-name">服务人数</text>
						</view>
					</view>
					
				</view>
				
			</view>
			
		</view>
	</view>
</template>

<script>
	import tabbarMixin from './mixin/tabbar' 
	import homeMixin from './mixin/home'
	import pageHeader from './components/page-header.vue'
	import banner from './components/banner.vue'
	import productList from '@/pages/product/components/product-list.vue'
	import homeAdvertModal from './components/home-advert-modal.vue'
	export default {
		components: {
			pageHeader,
			banner,
			productList,
			homeAdvertModal
		},
		mixins: [homeMixin, tabbarMixin],
		data() {
			return {
				navList: [],//导航列表
				advertList: [],//广告列表
				hotList: [],//热门推荐
			}
		},
		computed: {
			midAdvert(){
				if(this.advertList.length === 0) return {};
				const res = this.advertList.filter(item=> item.advert_type === 'middle');
				return res.length > 0 ? res[0]: {};
			},
			carousel(){
				return this.advertList.filter(item=> item.advert_type === 'carousel');
			}
		},
		onLoad() {
			this.loadAdvert();
			this.loadNavList();
			
			setTimeout(()=>{
				//this.navTo('/pages/address/list')
			}, 1000)
		},
		methods: {
			toAchievement(){
				this.navTo('/pages/qHome/achievement')
				
			},
			//加载广告 缓存10分钟
			async loadAdvert(){
				const res = await this.$request('advert', 'getAdvertList', {}, {
					cache: 10*60
				});
				this.advertList = res.data;
				this.log(res);
			},
			//加载导航 缓存1小时
			async loadNavList(){
				const res = await this.$request('advert', 'getNavList', {}, {
					cache: 60*60*0,
				});
				this.navList = res.data;
			},
		}
	}
</script>

<style>
	page{
		background-color: white;
	}
</style>
<style scoped lang="scss">
	/* 分类 */
	
	.nav-view{
		height: 64rpx;
		border-bottom: 1rpx solid #E6E6E6;
	}
	.nav-title{
		display: block;
		font-size: 20px;
		color:#333333 ;
		text-align: center;
		line-height: 64rpx;
		
	}
	
	.date-item{
		margin: 25rpx 0rpx 30rpx;
	}
	.date-title{
		background-color:#EDAF8B ;
		color: white;
		margin: 10rpx 10rpx 0rpx 20rpx;
		font-size: 13px;
	}
	.date-txt{
		font-size: 15px;
		color: #333333;
	}
	
	.triangle-topleft {
		position: relative;
		top: 42rpx;
		left: -12rpx;
		width: 0;
		height: 0;
		border-top: 36rpx solid #EDAF8B;
		border-right: 36rpx solid transparent;
	}
	
	.triangle-bottomright {
		position: relative;
		top: -38rpx;
		left: 20rpx;
	    width: 0;
	    height: 0;
	    border-bottom: 36rpx solid #EDAF8B;
	    border-left: 36rpx solid transparent;
	}
	
	.service-item{
		margin: 35rpx 10rpx 0rpx 30rpx;
	}
	
	.service-number{
		color: #EDAF8B;
		font-size: 36px;
		margin: 0rpx 5rpx 0rpx 0rpx;
	}
	
	.service-unit{
		color: #EDAF8B;
		font-size: 18px;
		margin: 0rpx 0rpx 20rpx 0rpx;
	}
	.service-title{
		font-size: 15px;
		color: #999999;
		margin: 0rpx 0rpx 10rpx 30rpx;
	}
	
	.charge-item{
		margin: 34rpx 20rpx 50rpx 30rpx;
		padding:15rpx 20rpx;
		background-color:#F5F5F5 ;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.charge-item-money{
		color: #999999;
		font-size: 13px;
	}
	
	.separator-section{
		height: 20rpx;
		background: #F5F5F5;
	}
	
	.rank-list{
		padding: 10rpx 60rpx;
	}
	.rank-title{
		border-bottom: 1rpx solid $separatorColor;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.rank-img{
		display: inline-block;
		width: 44rpx;
		height: 44rpx;
		margin: 0rpx 28rpx 0rpx -10rpx;
	}
	.rank-title-txt{
		color: #333333;
		font-size: 16px;
		font-weight: bold;
		height: 110rpx;
		line-height: 110rpx;
	}
	
	.rank-item{
		border-bottom: 1rpx solid $separatorColor; 
	}
	.rank-top{
		margin: 20rpx 0rpx;
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		// vertical-align: middle;
	}
	.rank-user-img{
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		display: inline-block;
	
		margin-right: 28rpx;
	}
	.rank-des{
		display: inline-block;
	}
	.rank-des-name{
		font-size: 15px;
		font-weight: bold;
	}
	.rank-des-name-txt{
		font-size: 15px;
		font-weight: bold;
		color: #333333;
		margin:0rpx 10rpx 0rpx 0rpx
	}
	.rank-des-nick-name{
		font-size: 13px;
		font-weight: 500;
		color: #999999;
	}
	.rank-des-company{
		position: relative;
		top: -0rpx;
	}
	
	.rank-bottom{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx 0rpx;
	}
	.rank-bottom-item{
		text-align: center;
	}
	.rank-bottom-item-des{
		
	}
	.rank-bottom-item-des-number{
		font-size: 18px;
		font-weight: bold;
		color: #333333;
	}
	.rank-bottom-item-des-unit{
		font-size: 13px;
		font-weight: 500;
		color: #333333;
		margin: 0rpx 4rpx;
	}
	
	.rank-bottom-item-name{
		position: relative;
		top: -4rpx;
		font-size: 13px;
		font-weight: 500;
		color: #999999;
	}
	.rank-rate-img{
		position: absolute;
		// top: 18rpx;
		right: 0rpx;
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

	
	.cate-section {
		display: flex;
		align-items: center;
		flex-wrap:wrap;
		padding: 10rpx 16rpx; 
		background: #fff;
		
		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 20%;
			padding: 20rpx 0;
			font-size: 24rpx;
			color: #333;
		}
		.icon {
			width: 84rpx;
			height: 84rpx;
			margin-bottom: 14rpx;
			border-radius: 50%;
		}
	}
	.mid-ad{
		width: 100%;
		height: 208rpx;
		padding: 0 20rpx 20rpx;
		background: #fff;
		
		image{
			width:100%;
			height: 100%; 
		}
	}
	.floor-header{
		padding: 6rpx 30rpx 8rpx 24rpx;
		font-size: 24rpx;
		color: #999;
		background-color: #fff;
		
		.icon{
			flex-shrink: 0;
			width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
		}
		.tit-box{
			flex: 1;
			display: flex;
			flex-direction: column;
		}
		.tit{
			margin-bottom: 10rpx;
			font-size: 32rpx;
			color: #333;
			font-weight: 700;
		}
		.icon-you{
			font-size: 28rpx;
			color: #999;
		}
	}
	.hot-wrap{
		padding-top: 20rpx;
		background: linear-gradient(to bottom, #fff 10rpx, #f7f7f7);
		opacity: 0;
		transition: opacity .2s;
		
		&.show{
			opacity: 1;
		}
		.floor-header{
			padding-bottom: 30rpx;
		}
		/deep/ .list-item{
			box-shadow: 4rpx 0 10rpx rgba(0,0,0,.06);
		}
	}
	
</style>
