<template>
	<view class="memberStyle" :style="{'height':contentHeight}">
		<view class='memberTop'>
			<view class="memberT_box">
				<view style='display: flex;flex-direction: row;align-items: center;margin-top: 10px;'>
					<u-avatar src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/user_default.jpg" size="100"></u-avatar>
					<view style='margin-left: 30px;display: flex;flex-direction: column;justify-content: space-around;height: 50px;color: #fff;'>
						<Text>哈哈</Text>
						<view class="member">
							<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/user_cardmember-0.png" mode='aspectFill'
							 style="width: 24px;height: 24px;border-radius: 12px;"></image>
							<Text style='margin-right: 10px;'>普通用户</Text>
						</view>
					</view>
				</view>
				<view class='balance'>
					<view class='balance_l'>
						<Text style='font-size: 10px;'>账号余额</Text>
						<Text style='font-size: 22px;'>￥0.5</Text>
					</view>
				</view>
				<view style="width: 100%;height: 200px;border-radius: 10px;overflow: hidden;margin-top: 10px;">
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/user_cardmember-0.png" mode='aspectFill'
					 style="width: 100%;height: 100%;"></image>
				</view>
				<image src="../../../static/images/icon/card-bottom.png" mode='widthFix' style="width: 100%;position: absolute;left: 0;bottom: 0;"></image>
			</view>
		</view>
		<view class="memberC">
			<view class="mc_box" @click="goUrl()">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				contentHeight: 0,
				mainColor: '',
			}
		},
		created() {
			this.contentHeight = this.$utils.calcContentHeight(-40) + 'px';
			this.mainColor = this.$uiConfig.mainColor;
			uni.setNavigationBarTitle({
				title: '会员中心',
			});
		},
		methods: {
			goUrl() {
				uni.navigateTo({
					url: '/pages/member/privilege'
				});
			},
			gobalance() {
				uni.showToast({
					title: '正在开发,敬请期待',
					icon: "none"
				});
			}
		}
	}
</script>

<style>
	.memberStyle {
		background: #fff;
	}

	.memberStyle .memberTop {
		width: 100%;
		height: 350px;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #292A30;
		position: relative;
		overflow: hidden;
	}

	.memberStyle .memberTop .memberT_box {
		width: 90%;
		display: flex;
		flex-direction: column;
	}

	.memberStyle .memberTop .member {
		background: #3B3641;
		width: 80px;
		font-size: 10px;
		color: #fff;
		height: 18px;
		border-radius: 9px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.memberStyle .balance {
		width: 100%;
		height: 80px;
		background: #464954;
		border-radius: 10px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
		margin-top: 10px;
	}

	.memberStyle .balance_l {
		display: flex;
		flex-direction: column;
		color: #fff;
	}

	.memberStyle .balance_r {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80px;
		height: 30px;
		border-radius: 15px;
		border: 1px solid #fff;
		color: #fff;
	}

	.memberStyle .memberC {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.mc_box {
		width: 94%;
		height: 100px;
		border-radius: 10px;
		border: 1px solid #D6C8AB;
		margin-top: 10px;
	}
</style>