<template>
	<view>
		 <car-common   ref="common" ></car-common>
		<!-- <car-common  mytitle="我的" :noback="false" ref="common" ></car-common> -->
		<u-navbar :is-back="false" title="个人中心" :background="{backgroundColor: '#187aff',}" title-color="#fff" :border-bottom="false"></u-navbar>
		<view class="u-flex user-box" v-if="user">
			<view class="u-m-r-20">
				<u-avatar :src="pic" size="100"></u-avatar>
			</view>
			<view class="u-flex-1">
				<view class="user-name u-font-18 u-p-b-20">{{user.name}}</view>
			</view>
			<view class="u-m-l-10 u-p-10">
				<u-button type="primary" plain size="mini" shape="circle"  @click="gotoUrl('/pages/my/user/updateinfo')">修改资料</u-button>
			</view>
		</view>
		  <view class="u-flex user-box" v-if="!user"  @click="gotoUrl('/pages/car/login',true)">
			<view class="u-m-r-20">
				<u-avatar :src="pic" size="100"></u-avatar>
			</view>
			<view class="u-flex-1">
				<view class="user-name u-font-18 u-p-b-20">登录/注册</view>
			</view>
			
		</view>  
		
		<view class="user-cell">
			<view class="user-cell-item" @click="gotoUrl('/pages/my/user/bybusList',true)" >
				<view class="user-cell-title">
					<u-icon name="ze-coupon" custom-prefix="custom-icon" size="40" color="#6eaaff"></u-icon>
					<span>乘车记录</span>
				</view>
				<u-icon name="arrow-right" color="#999" size="28"></u-icon>
			</view>
		</view>
		<view class="user-cell">
			<view class="user-cell-item"  @click="gotoUrl('/pages/my/user/updatephone/index')">
				<view class="user-cell-title">
					<u-icon name="antOutline-mobile" custom-prefix="custom-icon" size="40" color="#ee9a41"></u-icon>
					<span>已绑定手机号</span>
				</view>
				<view class="user-cell-right">
					<span>{{showphone(user.phone)}}</span>
					<u-icon name="arrow-right" color="#999" size="28"></u-icon>
				</view>
			</view>
			 
			<view class="user-cell-item" @click="gotoUrl('/pages/my/user/feedback')">
				<view class="user-cell-title">
					<u-icon name="riLine-feedback-line" custom-prefix="custom-icon" size="40" color="#8fbf7b"></u-icon>
					<span>意见反馈</span>
				</view>
				<view class="user-cell-right">
					<u-icon name="arrow-right" color="#999" size="28"></u-icon>
				</view>
			</view>
			<view class="user-cell-item" @click="makePhoneCall('400-8899-619')">
				<view class="user-cell-title">
					<u-icon name="fasfa-headphonesCopy" custom-prefix="custom-icon" size="40" color="#9cdfff"></u-icon>
					<span>联系客服</span>
				</view>
				<view class="user-cell-right">
					<span>400-8899-619</span>
					<u-icon name="arrow-right" color="#999" size="28"></u-icon>
				</view>			
			</view>
			<view class="user-cell-item"  @click="gotoUrl('/pages/my/platform/about?back=true',true)">
				<view class="user-cell-title">
					<u-icon name="fasfa-exclamation-circleCopy" custom-prefix="custom-icon" size="40" color="#b0bdd0"></u-icon>
					<span>关于东胜掌上通勤</span>
				</view>
				<view class="user-cell-right">
					<span>当前版本 v1.1.10</span>
					<u-icon name="arrow-right" color="#999" size="28"></u-icon>
				</view>
			</view>
			
			<view class="user-cell-item" @click="gotoUrl('/pages/my/platform/help?back=true',true)">
				<view class="user-cell-title">
					<u-icon name="md-live_help" custom-prefix="custom-icon" size="40" color="#ffb589"></u-icon>
					<span>使用指南</span>
				</view>
				<!-- 当前版本V1.1.10 -->
				<view class="user-cell-right">
					<span></span>
					<u-icon name="arrow-right" color="#999" size="28"></u-icon>
				</view>
			</view>
		</view>
		<!-- <u-cell-group>
			<u-cell-item title="乘车记录" @click="gotoUrl('/pages/my/user/bybusList')"></u-cell-item>
			<u-cell-item title="关于东胜掌上通勤"  @click="gotoUrl('/pages/my/platform/about')"></u-cell-item>
		
		</u-cell-group>
		
		<view class="u-m-t-20" v-if="user">
			<u-cell-group>
				<u-cell-item title="意见反馈" @click="gotoUrl('/pages/my/user/feedback')"></u-cell-item>
				<u-cell-item title="已绑定手机号" @click="gotoUrl('/pages/my/user/updatephone/index')">{{showphone(user.phone)}}</u-cell-item>
			</u-cell-group>
		</view>
		 -->
		<view class="u-m-t-20" v-if="user">
			<view class="signOut" @click="signOut">退出账号</view>
		</view>
		<view class="u-m-t-20" v-if="!user">
			<view class="signOut" @click="gotoUrl('/pages/car/login',true)">登录</view>
		</view>
	</view>
</template>

<script>
	import api from './index.js'
	export default api;
</script>

<style lang="scss">
page{
	background-color: #ededed;
}

.camera{
	width: 54px;
	height: 44px;
	
	&:active{
		background-color: #ededed;
	}
}
.user-box{
	background:url(../../static/img/userbg.png) bottom center;
	background-size: 100%;
	padding: 30rpx;
	height:120px;
	.user-name{
		color:#fff;
	}
}
.signOut{
	height: 40px;
	background-color: #fff;
	text-align: center;
	line-height: 40px;
}
.user-cell{
	margin-bottom: 10px;
}
.user-cell-item{
	display: flex;
	flex-direction: row;
	align-items: center;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding: 10px 13px;
	font-size: 11px;
	line-height: 22px;
	color: #606266;
	background-color: #fff;
	text-align: left;
	justify-content: space-between;
	position: relative;
	border-bottom: 0.5px solid #f7f7f7;
	.user-cell-title{
		display: flex;
		align-items: center;
		span{
			font-size: 14px;
			margin-left: 10px;
		}
	}
	.user-cell-right{
		display: flex;
		align-items: center;
		span{
			margin-right: 10px;
			color:#999;
		}
	}
}
</style>
