<style lang="scss" scoped>
	.mem-head{ height:280rpx; position: relative; background:#fff;
	  .bg{width:100%; height:280rpx; display:block;}
		.head{ width:120rpx; height:120rpx; margin-right:20rpx; border-radius:50%; }
		.info{ position: absolute; left:0; display:flex; align-items:center; width:100%; top:20rpx; padding-left:50rpx;
		   .text{ flex:1; color:#fff; view{color:#fff;} .name{ font-size:32rpx;} .phone{ padding-top:12rpx; font-size:28rpx;} }
		 }  
	}
	.order{ background:#fff; padding:30rpx 20rpx; display:flex; border-radius:12rpx; margin:0 30rpx; margin-top:-100rpx; position:relative; z-index:1; box-shadow:0rpx 5rpx 10rpx #eee;
	 	.item{ flex:1;color:#555; font-size:30rpx; text-align:center;
		  .img{ width:80rpx; margin:0 auto; margin-bottom:10rpx; height:80rpx; border-radius:50%; background:$main-color; display:flex; align-items: center; justify-content: center;
			  image{ width:40rpx; height:40rpx;}
			}
		}
	}
	.line{height:12rpx; background:#f7f7f7; margin-top:40rpx;}
	.menu{
		.item{ display:flex; color:#555; position: relative; align-items: center; border-bottom:1px solid #f1f1f1; justify-content: space-between; height:100rpx; padding:0 30rpx;
		  image{ width:30rpx; height:30rpx;}
				&:active{ background:#f7f7f7; }
				.button{ border:0; color:#555; font-size:30rpx; height:100rpx; padding:0; width:100%; line-height:100rpx; display:flex; align-items:center; justify-content: space-between; background:none; font-size:30rpx; &:after{border:0;} }
		}
	}
	.dbexit{position:fixed; bottom:30rpx; width:100%; padding:0 30rpx; border-bottom:1px solid #f1f1f1;}
	/* #ifdef H5 */
	.dbexit{bottom:150rpx;}
	/* #endif */
</style>
<template>
	 <view class="member">
		 <view class="mem-head">
			<image src="/static/bg.jpg" class="bg"></image> 
			<view class="info" v-if="isLogin">
				<image :src="userinfo.head" class="head"></image>
				<view class="text">
				<view class="name">尊敬的{{userinfo.name}}，您好！</view>
				<view class="phone">欢迎光临小程序。</view>
				</view>
			</view>
			<view class="info" @tap="util.goLogin()" v-else>
				<image src="/static/head.png" class="head"></image>
				<view class="text"><view class="name">登录</view></view>
			</view>
		 </view>
		 <view class="order">
			 <view class="item" @tap="go('/pages/my/order/index?status=')">
				 <view class="img"><image src="/static/o1.png"></image></view>
				 <text>全部订单</text>
			 </view>				 
			 <view class="item" @tap="go('/pages/my/order/index?status=0')">
					<view class="img"><image src="/static/o2.png"></image></view>
					<text>待付款</text>
			 </view>
				<view class="item" @tap="go('/pages/my/order/index?status=2')">
					<view class="img"><image src="/static/o1.png"></image></view>
					<text>待收货</text>
				</view>
			 <view class="item" @tap="go('/pages/my/order/index?status=3')">
					<view class="img"><image src="/static/o3.png"></image></view>
					<text>已完成</text>
			 </view>
		 </view>
		 <view class="line"></view>
		 <view class="menu">
				<view class="item" @tap="go('/pages/my/coupon/index')">我的优惠券<image src="/static/right.png"></image></view>
				<view class="item" @tap="call">客服电话<image src="/static/right.png"></image></view>
				<view class="item" @tap="go2('/pages/show/index?id=140')">联系我们<image src="/static/right.png"></image></view>
		 </view>
		 <view class="dbexit" v-if="isLogin"><view class="btn" @tap="exitLogin">退出登录</view></view>
	 </view>
</template>

<script>
	export default{
		data(){
			return{
				isLogin:false,
				userinfo:null,
				tel:'13420925611', //客户电话
			}
		},
				
		async onShow(){
			 let info = await uni.getStorage({key:'userInfo'});
			 if(info[1]){
				  this.isLogin = true;
					this.userinfo = info[1].data;
			 }else{
				  this.isLogin = false;
			 }
				console.log(this.isLogin);
		},
		
		
		methods:{
			 go(url){
				 if(this.isLogin){
					 this.api.go(url);
				 }else{
					 this.util.goLogin();
				 }
			 },
								
				go2(url){
					 this.api.go(url);
				},
				
				//拨打电话
				call(){
					  var that = this;
					  uni.makePhoneCall({phoneNumber:that.tel})
				},
				
				exitLogin(){
					 var that = this;
					 uni.showModal({
					  title:"温馨提示",
							content:"确定退出登录吗？",
							success(res){
								 if(res.confirm){									  
									  that.util.goLogin();
								 }
							}
					 })
				}
				
				
		}
		
	}
</script>
