wechat_yxcl/pages/userCenter/userCenter.vue

<template>
	<view class="information">

	
		<div class="card-user">
			<div class="owner-name">{{getUser.OwnerUnitName}}</div>
			<div class="user-info">
				<image v-if="getUser.Membership_Headimage" :src='getUser.Membership_Headimage' mode="aspectFit" class="headimgurl" />
				<image v-else src="/static/images/publicity/user.png"
				 alt="" class="headimgurl" />
				<div class="base-box" v-if="getUser.Membership_Phone">
					<span class="name">{{getUser.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 { mapGetters } from 'vuex'
	export default {
		data() {
			return {
		
				
			};
		},
		computed: {
			...mapGetters({
				getUser: 'getUser',
				
			}),
			phone(){
				let phoneStr = this.getUser.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;
	
	}
	
	.uni-badge,
	.uni-badge-default {
		font-family: 'Helvetica Neue', Helvetica, sans-serif;
		box-sizing: border-box;
		font-size: 12px;
		line-height: 1;
		display: inline-block;
		padding: 3px 6px;
		color: #333;
		border-radius: 100px;
	}
	
	.uni-badge.uni-badge-inverted {
		padding: 0 5px 0 0;
		color: #929292;
		background-color: transparent
	}
	.uni-badge-danger,
	.uni-badge-red {
		color: #fff;
		background-color: #dd524d
	}
	
	.uni-badge-danger.uni-badge-inverted,
	.uni-badge-red.uni-badge-inverted {
		color: #dd524d;
		background-color: transparent
	}
	.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;
	}
	
	.cell-list {
		margin-top: 40rpx;
		padding: 0 24rpx 0 36rpx;
	}
	.uni-list-cell-navigate {
		background-color: #fff;
		height: 120rpx;
		display: flex;
    	justify-content: flex-start;
		border-bottom: 1px solid #eee;
		padding: 22rpx 0rpx 22rpx 24rpx;
	}
	.icon-quanxian{
		width: 36rpx;
		height: 42rpx;	
		margin-right: 30rpx;
	}
	
	.mt20 {
		margin-top: 26rpx;
	}
	.bor-bottom {
		border-bottom: 1rpx solid #e4e4e4;
	}
	.myshop {
		display: inline-block;
		width: 80%;
		line-height: 94rpx;

	}
	.exit {
		margin-top: 24rpx;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		background-color: #fff;

		
	}
	.version{
		text-align: center;
		color: #666;
		margin-top: 8rpx;
		font-size: 24rpx;
		min-width: 200rpx;
	}
	.myshop-icon{
		display: inline-block;
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #f43530;
	}
</style>