<template>
	<view class="nine-content-002">
		<view class="user-header">
			<view class="user-header-top">
				<view class="user-header-top-info">
					<view class="user-header-top-info-logo">
						<image class="user-header-top-info-logo-image" :src="userInfo.avatar || '/static/image/user/yy.png'"></image>
					</view>
					<view class="user-header-top-info-name">
						<view v-if="userInfo.userId" class="user-header-top-info-name-username">
							{{userInfo.userName}}
						</view>
						<view v-else class="user-header-top-info-name-username"
							@click="openUrl('/pages/user/login')">未登录</view>
					</view>
				</view>			
				<view v-if="userInfo.userId" class="user-header-top-message">
					<image class="user-header-top-message-image" src="/static/image/user/message.png"></image>
				</view>
			</view>
			<view class="user-header-recommend">
				<span v-if="userInfo.userId">昵称：{{userInfo.nickName}}</span>
				<span v-else>昵称：无</span>
				<span class="pr10">普通用户</span>
			</view>
			<view class="user-header-member">
				<view v-if="userInfo.userId" class="user-header-member-rank">
					等级：{{array[1]}}
				</view>
				<view v-else class="user-header-member-rank">
					等级：无
				</view>
				<view class="user-header-member-note">
					会员等级越高权益越高
				</view>
			</view>
		</view>
			
		<view class="nine-nav-001 pa5">
			<view class="nine-nav-001-item mt10" @click="openUrl('/pages/setting/setting')">
				<view class="nine-nav-001-item-left">
					<image class="image35" mode="scaleToFill" src="/static/image/user/uset.png"></image>
					<text class="nine-nav-001-item-left-text">设置</text>
				</view>
				<view class="nine-nav-001-item-right">			
					<image class="nine-nav-001-item-right-image" mode="scaleToFill" src="/static/image/user/cc.png">
					</image>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
import store from '@/store'
import storage from '@/utils/storage'
import constant from '@/utils/constant'
import { getToken } from '@/utils/token'
export default {
	data() {
		return {
			array: [
				"普通会员",
				"高级会员",
				"超级会员"
			],
			
			userInfo: {},
			
		}
	},
	onLoad(options){
		this.userInfo = store.state.user.userInfo;
	}
}
</script>

<style scoped>
	.user{
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f1f1f1;
	}
	.user-header {
		width: 100%;
		background-color: #00aaff;
		position: relative;
	}
	.user-header-top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.user-header-top-info{
		display: flex;
		flex-direction: row;
		padding: 20rpx 40rpx 10rpx 40rpx;
	}
	.user-header-top-info-logo{
	}
	.user-header-top-info-logo-image{
		width: 165rpx;
		height: 165rpx;
		border-radius: 50%;
		will-change: transform;
	}
	.user-header-top-info-name{
		padding: 20rpx;
	}
	.user-header-top-info-name-username{
		font-size: 20px;
	}
	.user-header-top-message{
	}
	.user-header-top-message-image{
		padding-right: 40rpx;
		padding-top: 40rpx;
		width: 45rpx;
		height: 55rpx;
	}
	.user-header-recommend{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 10rpx 30rpx 70rpx 40rpx;
		font-size: 12px;
	}
	.user-header-member{
		position: absolute;
		height: 40rpx;
		bottom: 0rpx;
		left: 40rpx;
		right: 40rpx;
		padding: 10rpx; 
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: #474747;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
	}
	.user-header-member-rank{
		padding: 10rpx 10rpx;
		font-size: 10px;
		color: #ffaa00;
	}
	.user-header-member-note{
		font-size: 10px;
		padding: 8rpx 20rpx;
		color: #919191;
		background-color: #2e2e2e;
		border-radius: 80rpx;
	}
</style>
