<template>
	<view class="main">
		<image mode="widthFix" src="../../static/bg_my@2x.png"></image>
		<view class="topImg-btn-bg" :style="{top:titleHeight.statusBarHeight + 8 + 'px'}">
			<view class="title-h" >我的</view>
		</view>		
		<view class="top_view" v-if="showTiele">
			<view class="state-h" :style="{ height: titleHeight.statusBarHeight + 8 + 'px'}"></view>
			<view class="topImg-btn-bg" :style="{top:titleHeight.statusBarHeight + 'px'}">
				<view class="title-h" >我的</view>
			</view>
		</view>
		<view class="myMain">
			<view class="myInfo">
				<image mode="scaleToFill" src="../../static/banner@3x.png"></image>
				<view class="title">王大宝</view>
			</view>
			<view class="myOrder">
				<view class="orderTab">
					<uni-segmented-control :current="current" :values="items.map(v=>v.title)" @clickItem="onClickItem" styleType="text" activeColor="#666"></uni-segmented-control>
				</view>	
				<view class="content">
					<view class="tabCol" v-show="current === 0">
						<view class="orderMenu">
							<view class="menuCol">
								<image src="../../static/icon_daifukuan@2x.png"></image>
								<text>待付款</text>
							</view>
							<view class="menuCol">
								<image src="../../static/icon_daifuwu@2x.png"></image>
								<text>待服务</text>
							</view>
							<view class="menuCol">
								<image src="../../static/icon_yifuwu@2x.png"></image>
								<text>已服务</text>
							</view>
							<view class="menuCol">
								<image src="../../static/icon_daipingjia@2x.png"></image>
								<text>待评价</text>
							</view>
							<view class="menuCol allOrder">
								<image src="../../static/icon_dingdan@2x.png"></image>
								<text>全部订单</text>
								<image class="line" src="../../static/bg_yinying@2x.png"></image>
							</view>																												
						</view>
					</view>
					<view class="tabCol" v-show="current === 1">
						<view class="orderMenu">
							<view class="menuCol">
								<image src="../../static/icon_daifukuan@2x.png"></image>
								<text>待付款</text>
							</view>
							<view class="menuCol">
								<image src="../../static/icon_daifahuo@2x.png"></image>
								<text>待发货</text>
							</view>
							<view class="menuCol">
								<image src="../../static/icon_yishouhuo@2x.png"></image>
								<text>待收货</text>
							</view>
							<view class="menuCol">
								<image src="../../static/icon_daipingjia@2x.png"></image>
								<text>待评价</text>
							</view>
							<view class="menuCol allOrder">
								<image src="../../static/icon_dingdan@2x.png"></image>
								<text>全部订单</text>
								<image class="line" src="../../static/bg_yinying@2x.png"></image>
							</view>																												
						</view>
					</view>
				</view>
			</view>
			<!--更多服务-->
			<view class="introBox">
				<view class="normal_tit">更多服务</view>
				<view class="serviceBox">
					<navigator  class="serviceCol" url="../myCollect/myCollect">
					<view>
						<image src="../../static/icon_shoucang_1@2x.png"></image>
						<text>我的收藏</text>						
					</view>
					</navigator>
					<view class="serviceCol">
						<image src="../../static/icon_pingjia@2x.png"></image>
						<text>评价中心</text>						
					</view>
					<view class="serviceCol">
						<image src="../../static/icon_tousu@2x.png"></image>
						<text>用户投诉</text>						
					</view>
					<view class="serviceCol">
						<image src="../../static/icon_tuikuan@2x.png"></image>
						<text>我的退款</text>						
					</view>
					<view class="serviceCol">
						<image src="../../static/icon_fenxiang@2x.png"></image>
						<text>分享</text>						
					</view>
					<navigator  class="serviceCol" url="../myCoupon/myCoupon">
					<view>
						<image src="../../static/icon_youhuiquan@2x.png"></image>
						<text>优惠券</text>						
					</view>
					</navigator>																									
				</view>
			</view>		
			<!--推广业绩-->
			<view class="introBox">
				<view class="normal_tit">推广业绩</view>
				<view class="serviceBox">
					<navigator class="serviceCol" url="../myspeadOrder/myspeadOrder">
					<view >
						<image src="../../static/icon_daifukuan@2x.png"></image>
						<text>我的订单</text>						
					</view>	
					</navigator>
					<navigator class="serviceCol" url="../speadApply/speadApply">
					<view>
						<image src="../../static/icon_shenqingzhuce@2x.png"></image>
						<text>申请注册</text>						
					</view>	
					</navigator>					
				</view>
			</view>
			<!--推广工具-->
			<view class="introBox">
				<view class="normal_tit">推广工具</view>
				<view class="serviceBox">
					<navigator class="serviceCol" url="../poster/poster">
					<view >
						<image src="../../static/icon_poster@2x.png"></image>
						<text>专属海报</text>						
					</view>
					</navigator>
					<navigator class="serviceCol" url="../speadPro/speadPro">
					<view>
						<image src="../../static/icon_shangpin@2x.png"></image>
						<text>推广商品</text>						
					</view>	
					</navigator>
				</view>
			</view>
			<!--为您精选-->
			<view class="introBox">
				<view class="normal_tit">为您精选</view>
				<view class="intro_row">
					<view class="row_col">
						<view class="imgOuter">
							<image mode="aspectFill" src="../../static/rishang.png"></image>
							<view class="date">2018/11/25 14:00</view>
						</view>
						<view class="title">孕期保健Q&A</view>
						<view class="subTit">苏州·园区星海街188号园区星海街188号</view>
						<view class="price"><text class="font_red">免费</text>130人参与</view>
					</view>
					<view class="row_col">
						<view class="imgOuter">
							<image mode="aspectFill" src="../../static/rishang.png"></image>
							<view class="date">2018/11/25 14:00</view>
						</view>
						<view class="title">孕期保健Q&A</view>
						<view class="subTit">苏州·园区星海街188号园区星海街188号</view>
						<view class="price"><text class="font_red">免费</text></view>
					</view>
				</view>
			</view>		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleHeight:[],
				showTiele:false,
				items:[
					{title:"活动订单"},
					{title:"商品订单"}
				],
				current:0				
			}
		},
		onLoad() {
			this.stytemInfo();
		},
		onPageScroll(e) {
				console.log(e)
				var that = this;
				if(e.scrollTop > 60 ){
						that.showTiele = true;
				}else{
						that.showTiele = false;
				}
		},		
		methods: {
			// 获取系统信息
			stytemInfo:function(){
				var that = this;
				uni.getSystemInfo({
				    success: function (res) {
						that.titleHeight = res;
						console.log(that.titleHeight)
				    }
				})
			},
			onClickItem(e){
				if(this.current !== e.currentIndex)
				{
				this.current = e.currentIndex
				}
			},
			open(){
				this.$refs.calendar.open()
			},
			confirm(e) {
				console.log(e);
			}				
		}
	}
</script>
<style>
	page {
		background-color: #F6F6F6;
	}
</style>
<style lang="scss">
.main {
	display: flex;
	flex-direction: column;
}
.topImg-btn-bg{
	color:#fff;
	font-weight: 400;
	width:100%;
	left:0;
	font-size:34rpx;
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 4;  
	text-align: center;
}

.top_view{
	background-color: #FF578A;
	display: flex;
	width: 100%;
	align-items: center;
	position: fixed;
	left:0;
	z-index:9;
	top:0;
	.state-h{width:100%;background-color:#FF578A;}
	.topImg-btn-bg{background-color: #FF578A;width:100%;height:88rpx;}
}	
.myMain{width:100%;margin-top:-240rpx;}
.myInfo{
	width:100%;display: flex;justify-content: flex-start;align-items: center;align-content: center;padding: 0 36rpx;box-sizing: border-box;
	image{width:112rpx;height:112rpx;border-radius: 50%;margin-right:30rpx;}
	.title{font-size: 36rpx;font-weight: 500;color: #FFFFFF;line-height: 36px;}
}
.myOrder{width:710rpx;background:rgba(255,255,255,0.92);border-radius: 16rpx;margin:30rpx auto 0 auto;}
.orderTab{
	font-size: 32rpx;font-weight: 400;width:60%;margin-left:10rpx;padding-top:15rpx;
}
.segmented-control__item--text{border-color: rgba(255,255,255,0)!important;}
.segmented-control__text{color:#666666;}
.tabCol{width:100%;}
.orderMenu{
	display: flex;justify-content: flex-start;align-items: center;align-content: center;width:100%;
	background: #fff;border-radius: 16rpx;
	.menuCol{
		width:20%;
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;	
		padding:35rpx 0;
		text-align: center;
		image{display: block;width:48rpx;height:48rpx;margin:0 auto;}
		text{display: block;margin-top:18rpx;}
	}
	.allOrder{ 
		position: relative;
		text{color:#FF753E;}
		.line{display: block;position: absolute;width:26rpx;height:96rpx;top:50%;margin-top:-48rpx;left:-10%;}
	}
}
.serviceBox{
	display: flex;
	flex-wrap: wrap;
	.serviceCol{
		width:25%;
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		text-align:center;
		padding:8rpx 0 34rpx 0;
		box-sizing: border-box;
		image{display: block;width:48rpx;height:48rpx;margin:0 auto;}
		text{display: block;margin-top:18rpx;}			
	}
}
	.introBox{
		width:710rpx;
		margin:20rpx auto 0 auto;
		border-radius: 16rpx;
		background: #fff;
		padding:0 35rpx;
		box-sizing: border-box;
	}
	.intro_row{
		display: flex;
		justify-content: space-between;
		width:100%;
	}
	.row_col{
		width:310rpx;
		border-radius: 8rpx;
		padding-bottom:20rpx;
		.imgOuter{
			width:310rpx;
			height:230rpx;
			position: relative;
			image{
				width:310rpx;
				height:230rpx;
				border-radius:8rpx 8rpx 0 0;
			}	
			.date{
				background-color: rgba(0,0,0,0.3);
				font-size:20rpx;
				color:#fff;
				line-height:32rrpx;
				padding:0 8rpx;
				border-radius: 5rpx;
				position: absolute;
				left: 20rpx;
				bottom:20rpx;
				font-weight:500;
			}
		}
		.title{
			width:100%;
			font-size:28rpx;
			color:#333;
			font-weight:500;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			padding-top:20rpx;
		}
		.subTit{
			width:100%;
			font-size:22rpx;
			color:#333;
			font-weight:400;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			padding-top:10rpx;
		}	
		.price{
			margin-top:20rpx;
			font-size:22rpx;
			color:#999;
			text{
				font-size:32rpx;
				font-weight:400;
				padding-right:15rpx;
			}
		}
	}
</style>
