<template>
	<view class="user-content">
		<!-- 头部 -->
		<view class="user-head" @click="toUserPage">
			<view class="user-photo">
				<text v-if="hasLogin"><open-data type="userAvatarUrl"></open-data></text>
				<u-image v-else src="/static/logo.png" width="100" height="100"></u-image>
			</view>
			<view class="user-info">
				<text v-if="hasLogin"><open-data type="userNickName"></open-data></text>
				<u-button v-else size="mini" shape="circle" @click="toLoginPage">登录</u-button>
			</view>
			<view v-if="hasLogin">
				<u-icon name="arrow-right" color="#fff"></u-icon>
			</view>
		</view>
		<view class="my-ledou" v-if="hasLogin">
			<view class="user-jifen">
				<view>我的乐豆:<text>345</text></view>
				<u-image mode="scaleToFill" width="35rpx" height="35rpx" src="/static/ledou.png"></u-image>
			</view>
			<view>
				<u-button size="mini" type="warning" shape="circle" @click="toLdPage">查看明细</u-button>
			</view>
		</view>
		<!-- 列表 -->
		<view class="user-list">
			<u-cell-group>
				<u-cell-item icon="order" icon-size="38" :icon-style="{color:'#ff5500'}" index="1" @click="toPage" title="我的订单"></u-cell-item>
				<u-cell-item icon="gift" icon-size="40" :icon-style="{color:'#00aaff'}" index="0" @click="toPage" title="投递记录"></u-cell-item>
				<u-cell-item icon="question-circle" icon-size="40" :icon-style="{color:'#19be6b'}" index="0" @click="toPage" title="常见问题"></u-cell-item>
				<u-cell-item icon="phone" icon-size="40" :icon-style="{color:'#f00'}" index="0" @click="toPage" title="联系客服"></u-cell-item>
				<u-cell-item icon="file-text" icon-size="40" :icon-style="{color:'#ffaa00'}" index="2" @click="toPage" title="服务协议"></u-cell-item>
				<!-- <u-cell-item icon="info-circle" icon-size="38" :icon-style="{color:'#55aa00'}" index="3" @click="toPage" title="关于我们"></u-cell-item> -->
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	import {logout, checkLogin } from '@/api/login.js'
	export default {
		data() {
			return {
				quitButton: {
					borderRadius:'100rpx',
					fontSize:'30rpx',
					background: '#01c9b2'
				},
				hasLogin: false
			};
		},
		onShow() {
			checkLogin().then(res => {
				console.log(res)
				this.hasLogin = res.status == 200
			})
		},
		onLoad() {
		},
		methods:{
			// 打开对应的页面
			toPage(index){
				let pageUrl=[
					'/pages/userCenter/deliveryRecord',
					'/pages/order/order',
					'/pages/agreement/agreement?fromPage=usercenter',
					'/pages/userCenter/aboutUs'
					]
				if(index<2&&this.hasLogin || index>=2){
					uni.navigateTo({
						url: pageUrl[index]
					})
				}else{
					this.toLoginPage()
				}	
			},
			//  跳转
			toUserPage(){
				//  未登录跳转登录,已登录跳转用户信息页
				if(this.hasLogin){
					uni.navigateTo({
						url: '/pages/userCenter/userInfo/userInfo'
					})
				}else{
					this.toLoginPage()
				}
			},
			//  乐豆明细
			toLdPage(){
				uni.navigateTo({
					url: '/pages/userCenter/ldDetailed'
				})
			},
			bindGetUserInfo(res){
				console.log(res)
			},
			toLoginPage(){
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style lang="scss">
	.user-content{
		width: 100%;
		.user-head{
			background: #01c9b2;
			display: flex;
			align-items: center;
			padding: 35rpx 55rpx;
			.user-info{
				flex-grow: 1;
				padding: 0 20rpx;
				color: #FFFFFF;
			}
			.user-photo{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 5rpx;
			}
		}
		.my-ledou{
			background: #FFFFFF;
			border-radius: 15upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20upx;
			margin: 20upx;
			box-shadow: 0upx 3upx 6upx #eee;
			.user-jifen{
				display: flex;
				align-items: center;
				text{
					font-size: 40upx;
					font-weight: bold;
					color: red;
				}
				>view{
					&:first-child{
						display: flex;
						align-items: center;
					}
				}
			}
		}
		.user-list{
			border-radius: 15upx;
			margin: 20upx;
			overflow: hidden;
			box-shadow: 0upx 3upx 6upx #eee;
		}
		.user-btn{
			padding: 85rpx 200rpx;
		}
	}
</style>