wechat_yxcl/pages/userCenter/userCenter.vue

<template>
	<view>

		<div class="information">
			<div class="card-user">
				<div class="user-info">
					<image v-if="getUser.WeChat_UserHeadimage" :src='getUser.WeChat_UserHeadimage' mode="aspectFit" class="headimgurl" />
					<image v-else src="http://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTINUplUqd1AQYbn8spd2FI4XDXPibE6FFsy7jEqbk4Z5M09YD0aFXGmQMMtOhQFRicu2R23Fl3AQ9dw/0"
					 alt="" class="headimgurl" />
					<div class="base-box" v-if="getUser.Membership_Phone">
						<span class="name">{{getUser.Membership_Name}}</span>
						<span class="vipType">{{getUser.Membership_Phone}}</span>
					</div>
					<view class="base-box" @tap="toLogin" v-else>
						<text class="name">登录</text>
					</view>
				</div>
			</div>
		</div>
	
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
		
				
			};
		},
		computed: {
			...mapGetters({
				getUser: 'getUser',
				
			})
			
		}, 
		onTabItemTap (e) {
			this.$util.addUserBehavior({intoRoute: '/pages/index/index', outtoRoute: '/pages/userCenter/userCenter'})
		}
	}
</script>

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

	/* #ifdef H5 */
	.information {
		padding-top: 16upx;
		/* background-color: #fff; */
		/* box-shadow: 0 0 8upx #eee; */
		padding-left: 24upx;
		background-color: #fff;
		padding-right: 24upx;
	}
	/* #endif */
	.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: 298upx;
		background: url(https://eshangtech.com/ShopICO/uniapp/bg_wo1.png) no-repeat center;
		border-radius: 12upx;
		background-size: contain;
		padding: 60upx 60upx 80upx 60upx;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		box-sizing: border-box;
	}
	.user-info {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.headimgurl {
		width: 112upx;
		height: 112upx;
		border-radius: 50%;
	}
	.name, .userType {
		font-size: 32upx;
		color: #D5C8A6;
	}
	.userType {
		display: flex;
    	align-items: baseline;
		justify-content: flex-end;
	}
	
	.base-box {
		margin-left: 24upx;
		display: flex;
		flex-direction: column;
	}
	.vipType {
		font-size: 24upx;
		color: #D5C8A6;
		
	}
	i {
		font-size: 60upx;
		display: flex;
    	align-items: center;
		
	}
	.icon-quanxian1{
		color: #666667;
		padding-right: 0upx;
		font-size: 50upx;
		width: 72upx;
		overflow: hidden;
		box-sizing: border-box;
		margin: 0;
	}

	.icon-quanxian1 {
		font-size: 40upx;
	
	}
	.icon-yijian {
		font-size: 54upx;
		color: #666667;
		width: 80upx;
	}
	
	.ico-ysxx:before,
	.ico-xfjl:before,
	.ico-bbh:before {
		height: 40upx;
		width: 40upx;
		margin-right: 32upx;
	}
	
	.icon-ico,.icon-ico:before {
		color: #666667;
		height: 70upx;
		line-height: 35px;
	}
	.about-vip {
		display: flex;
		justify-content: space-between;
		padding: 0 60upx;
		height: 150upx;
	}
	.about-vip li {
		flex: 1;
		/* text-align: center; */
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #7d8184;
	}
	.uni-list-cell-navigate {
		background-color: #fff;
		height: 120upx;
		display: flex;
    	justify-content: flex-start;
		border-bottom: 1px solid #eee;
	}
	.mt20 {
		margin-top: 26upx;
	}
	.bor-bottom {
		border-bottom: 1upx solid #e4e4e4;
	}
	.myshop {
		display: inline-block;
		width: 80%;
		line-height: 94upx;

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

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