<template>
    <view class="content">
        <view class="header">
        	<view @click="toLoginPage" class="user-head">
				<view>
					<u-image v-if="!hasLogin" src="/static/def_personal_avatar.png" width="120" height="120"></u-image>
					<open-data v-else type="userAvatarUrl" class="user-photo"></open-data>
				</view>
				<view class="user-info">
					<open-data class="user-info-item" v-if="hasLogin" type="userNickName"></open-data>
					<view class="user-info-item" v-if="hasLogin">{{userInfo.mobile}}</view>
					<view v-if="!hasLogin"  class="user-info-item">
						请点击登录/注册
					</view>
				</view>
				<view>
					<u-icon class="back-img" name="icon_more_little" color="#424D5E" size="32" custom-prefix="custom-icon"></u-icon>
				</view>
        	</view>
        </view>
		<view class="list-container">
			<view class="list-item flex align_center justify_between" @click="callPhone">
				<view class="flex align_center">
					<u-icon class="icon" name="personal_icon_serve" custom-prefix="custom-icon" size="48" color="#515151"></u-icon>
					<text class="container-item">联系客服</text>
				</view>
				<u-icon name="icon_more_little" color="#9DA8B5" size="32" custom-prefix="custom-icon"></u-icon>
			</view>
			<navigator url="/pages/xieyi/index" class="list-item margin-bot flex align_center justify_between">
				<view class="flex align_center">
					<u-icon class="icon" name="personal_icon_agreement" custom-prefix="custom-icon" size="48" color="#515151"></u-icon>
					<text class="container-item">用户协议</text>
				</view>
				<u-icon name="icon_more_little" color="#9DA8B5" size="32" custom-prefix="custom-icon"></u-icon>
			</navigator>
			<navigator url="/pages/about" class="list-item margin-bot flex align_center justify_between">
				<view class="flex align_center">
					<u-icon class="icon" name="personal_icon_about" custom-prefix="custom-icon" size="48" color="#515151"></u-icon>
					<text class="container-item">关于我们</text>
				</view>
				<u-icon name="icon_more_little" color="#9DA8B5" size="32" custom-prefix="custom-icon"></u-icon>
			</navigator>
		</view>
    </view>
</template>

<script>
    import service from '../../service.js';
	import mIcon from '../../components/m-icon/m-icon.vue'
    import {
        mapState,
        mapMutations
    } from 'vuex'
     
    export default {
        components: {
			mIcon
        },
        data() {
            return {
				userInfo:'',
            }
        },
		onLoad() {
			let UserInfo = uni.getStorageSync('userInfo');
			this.userInfo = UserInfo;
			// 开启分享
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		onShow() {
			//检测是否登录
			if(this.hasLogin) {
			}else{
				this.serverCount=0
				this.count = 0
				this.pacrkingCount = 0
			}
		},
		computed: {
			...mapState(['hasLogin'])
		},
        methods: {
			// 联系客服
			callPhone(){
			  uni.makePhoneCall({
				phoneNumber: '400-1616-312'
			  });
			},
			toLoginPage(){
			  let url = this.hasLogin ? '/pages/personData/personData' : '/pages/login/login'
				uni.navigateTo({
					url: url
				})
			}
        },
		
    }
</script>

<style lang="scss">
	.content{
		padding: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: rgb(245,245,245);
	}
	// 顶部
	.header{
		height: auto;
		width: 100%;
		background-image: linear-gradient(#86defa,#ffffff);
		padding: 0rpx 32rpx;
		.user-head{
			display: flex;
			align-items: center;
			width: 100%;
			height: 200rpx;
			.user-info{
				flex-grow: 1;
				padding: 0 20rpx;
				color: #FFFFFF;
				.user-info-item{
					margin: 10rpx 0;
					color: #666666;
					font-size: 32upx;
				}
				:first-child{
					color: #000000;
					font-size: 48upx;
				}
			}
			.user-photo{
				display: block;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				overflow: hidden;
			}
		}
		.check{
			height: 126rpx;
			background-color: #29467D;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			color: #FFE196;
			padding: 0rpx 24rpx;
			font-size: 32rpx;
			.padding-9{
				padding: 0 18rpx;
			}
			.check-item{
				font-size: 24rpx;
				color: #CCB57C;
				margin-top: 6rpx;
			}
			.color{
				color: #CCB57C;
			}
		}
	}
	.tabs-cont{
		width: 100%;
		background-color: #fff;
		padding: 28rpx 0rpx;
		justify-content: space-around;
		margin-bottom: 20rpx;
		text{
			font-size: 26rpx;
			color: #222222;
			margin-top: 10rpx;
		}
		.cart-img{
			position: relative;
		}
	}
	.list-container{
		width: 100%;
		.list-item{
			padding: 32rpx 36rpx;
			background-color: #fff;
			.container-item{
				font-size: 34rpx;
				color: #191919;
				margin-left: 30rpx;
			}
		}
		.margin-bot{
			margin-bottom: 20rpx;
		}
		// .user-list{
		// 	border-radius: 15upx;
		// 	margin: 20upx;
		// 	overflow: hidden;
		// 	box-shadow: 0upx 3upx 6upx #eee;
		// 	.quit{
		// 		margin-top: 20upx;
		// 	}
		// }
		// .border-bottom{
		// 	border-bottom: 1px solid rgb(228,228,228);
		// }
		// .list-item{
		// 	width: 100%;
		// 	height:110rpx ;
		// 	padding:0 30rpx;
		// 	box-sizing:border-box;
		// 	display: flex;
		// 	justify-content: space-between;
		// 	align-items:center;
		// 	.list-item-left{
		// 		display:flex;
		// 		font-size: 36rpx;					
		// 		color: rgb(40,40,40);				
		// 		.icon-box{
		// 			width:40rpx;
		// 			margin-right: 20rpx;
					
		// 		}
				
		// 	}
		// 	.back-img{
		// 		width: 16rpx;
		// 		height: 22rpx;
		// 	}
		// }
	}
</style>
