<template>
	<view class="information">


		<div class="card-user">
			<div class="owner-name">{{user.OwnerUnitName}}</div>
			<div class="user-info">
				<image v-if="user.Membership_Headimage" :src='user.Membership_Headimage' mode="aspectFit" class="headimgurl" />
				<image v-else src="/static/images/publicity/user.png"  class="headimgurl" />
				<div class="base-box" v-if="user.Membership_Phone">
					<span class="name">{{user.Membership_Name}}</span>
					<span class="vipType">{{phone}}</span>
				</div>
				<view class="base-box" @tap="toPage('/pages/register/register')" v-else>
					<text class="name">登录</text>
				</view>
			</div>
		</div>

		<!-- <view class="cell-list">
			<div class="uni-list-cell-navigate uni-navigate-right" @tap="toPage('pages/userCenter/userAuthority')">
				<image src="/static/images/user/quanxian.png" mode="aspectFill" class="icon-quanxian"></image>
				<span class="myshop">我的权限</span>
			</div>
		</view> -->


	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {};
		},
		computed: {
			...mapState({
				user: (state)=>{ return state.userData},
				phone: (state)=>{
					let phoneStr = state.userData.Membership_Phone
					if(phoneStr){
						return phoneStr.substr(0,3)+' **** '+phoneStr.substr(phoneStr.length-2,phoneStr.length-1)
					
					}else {
						return ''
					}
				}
			}),
			
		},
		methods:{
			toPage(url) {

				this.$util.toNextRoute('navigateTo', url)
			}
		},
		onTabItemTap (e) {
			this.$util.addUserBehavior({intoRoute: '/pages/index/index', outtoRoute: '/pages/userCenter/userCenter'})
		}
	}
</script>

<style>
	* {
		box-sizing: border-box;
	}


	.information {
		padding-top: 16rpx;

		height: 100%;
		background-color: #fff;

	}

	.card-user {
		width: 100%;
		height: 298rpx;
		background: url(https://eshangtech.com/ShopICO/uniapp/bg_wo1.png) no-repeat center;
		border-radius: 12rpx;
		background-size: contain;
		padding: 34rpx 60rpx 120rpx 72rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		box-sizing: border-box;
	}
	.owner-name {
		color: #fff;
		font-size: 30rpx;
	}
	.user-info {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-top: 24rpx;
	}
	.headimgurl {
		width: 112rpx;
		height: 112rpx;
		border-radius: 50%;
	}
	.name, .userType {
		font-size: 30rpx;
		color: #D5C8A6;
	}
	.userType {
		display: flex;
    	align-items: baseline;
		justify-content: flex-end;
	}

	.base-box {
		margin-left: 24rpx;
		display: flex;
		flex-direction: column;
	}
	.vipType {
		font-size: 24rpx;
		color: #D5C8A6;
		margin-top: 8rpx;
	}
</style>
