<template>
	<view class="my u-relative">
		<view class="my-bg">
			<!-- #ifdef MP-WEIXIN -->
			<view class="u-text-center text-fff lg" :style="{paddingTop: statusBar  + 'px'}">我的</view>
			<!-- #endif -->
			
			<view class="u-p-t-60 px32 row-between" @click="toProfile">
				<view class="row u-col-top text-fff">
					<view>
						<u-avatar :src="cloudPath + 'img/icon_avatar.png'" mode="square" size="112"></u-avatar>
					</view>
					<view class="u-m-l-32 nr u-m-10">
						<view>用户昵称</view>
						<view class="u-m-t-16">18749957626</view>
					</view>
				</view>
				<view>
					<u-icon name="arrow-right" size="40" color="#fff"></u-icon>
				</view>
			</view>
		</view>
		
		<view class="block px32">
			<view class="bg-white u-m-t-34 balance row-between br16 u-p-l-22 u-p-r-22 box-shadown">
				<view class="u-flex u-row-center" @click="toWallet">
					<u-image :src="cloudPath + 'img/icon_balance.png'" width="52" height="52"></u-image>
					<view class="u-m-l-60 u-text-center">
						<view class="nr">0.00</view>
						<view class="xs">余额</view>
					</view>
				</view>
				<view>
					<u-line class="u-line" direction="col" length="47"></u-line>
				</view>
				<view class="u-flex u-row-center">
					<u-image :src="cloudPath + 'img/icon_points.png'" width="52" height="52"></u-image>
					<view class="u-m-l-60 u-text-center">
						<view class="nr">0.00</view>
						<view class="xs">积分</view>
					</view>
				</view>
				<view>
					<u-line class="u-line" direction="col" length="47"></u-line>
				</view>
				<view class="u-flex u-row-center">
					<u-image :src="cloudPath + 'img/icon_coupon.png'" width="52" height="52"></u-image>
					<view class="u-m-l-60 u-text-center">
						<view class="nr">0</view>
						<view class="xs u-text-center">券</view>
					</view>
				</view>
			</view>
			
			<view class="bg-white u-m-t-32 service br16 u-p-t-32 u-p-l-22 u-p-r-22 box-shadown">
				<view class="nr bold-600">服务功能</view>
				<view>
					<u-grid :col="4" :border="false">
						<u-grid-item>
							<u-image :src="cloudPath + 'img/icon_my_points.png'" width="64" height="64"></u-image>
							<view class="grid-text mt10">积分商城</view>
						</u-grid-item>
						<u-grid-item>
							<u-image :src="cloudPath + 'img/icon_my_coupon.png'" width="64" height="64"></u-image>
							<view class="grid-text mt10">我的优惠券</view>
						</u-grid-item>
						<u-grid-item>
							<u-image :src="cloudPath + 'img/icon_my_setting.png'" width="64" height="64"></u-image>
							<view class="grid-text mt10">设置</view>
						</u-grid-item>
						<u-grid-item>
							<u-image :src="cloudPath + 'img/icon_my_service.png'" width="64" height="64"></u-image>
							<view class="grid-text mt10">联系客服</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			
			<!-- 活动图 -->
			<view class="br16 u-m-t-32">
				<u-image :src="cloudPath + 'img/activity.png'" height="264"></u-image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		
		onLoad() {
			console.log(uni.getSystemInfoSync())
		},
		
		methods: {
			// 跳转个人信息
			toProfile() {
				uni.navigateTo({
					url: '/pages/my/profile'
				})
			},
			
			// 跳转我的钱包
			toWallet() {
				uni.navigateTo({
					url: '/pages/my/wallet'
				})
			}
		},
		computed: {
			statusBar() {
				return uni.getSystemInfoSync().statusBarHeight + 10
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}
	
	.my-bg {
		background-image: url(#{$cloudPath}img/my_bg.png);
		height: 588rpx;
	}
	
	.block {
		z-index: 1;
		position: absolute;
		left: 0;
		right: 0;
		
		/* #ifdef MP-WEIXIN*/  
		top: 410rpx;
		/* #endif */
		
		/* #ifndef MP-WEIXIN*/
		top: 228rpx;
		/* #endif */
		
		background-color: #F6F6F6;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
	}
	
	.balance {
		height: 132rpx;
	}
	
	.service {
		height: 249rpx;
	}
	
	.box-shadown {
		box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
	}
</style>