<template>
	<view class="index home-bg" :style="[navBackground]">
		<!-- #ifdef MP-WEIXIN -->
			<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent" :enable="true">
				<u-navbar
					:border-bottom="false"
					:is-fixed="false"
					custom-class="home-bg"
					:background="navBackground"
					:is-back="true"
					:backText="backText"
					:title="title"
					title-color="#fff"
					backIconColor="#fff"
				>
				</u-navbar>
			</u-sticky>
		<!-- #endif -->
		
		<view class="row-center balance u-relative" :style="{paddingTop: topSpace + 'px'}">
			<view class="u-text-center w-full">
				<view class="text-fff" style="font-size: 96rpx;">0</view>
				<view class="text-fff nr">积分</view>
			</view>
			
			<view class="u-absolute right-0">
				<view class="excharge row-center text-default">
					<text class="xs">兑换商品</text>
					<u-icon name="arrow-right" size="22" :color="themeColor" class="u-m-l-10"></u-icon>
				</view>
			</view>
		</view>
		
		<view class="u-p-b-40" style="margin-top: 132rpx;">
			<view class="list bg-white br16 u-p-32">
				<view class="lg">积分明细</view>
				<view class="u-m-t-16">
					<view class="u-m-b-16">
						<view class="nr row-between">
							<view>积分</view>
							<view class="deduct">-2000</view>
						</view>
						<view class="date xs u-m-t-16">2022-12-24 16:32:44</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '积分',
				statusBarHeight: 0, // 状态栏高度
				bgImageHeight: 244 ,// 背景图高度，单位px，根据实际情况调整
				selectIndex: 0,
				backText: '',
				topSpace: 0
			}
		},

		onLoad() {
			const systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight
			
			// #ifdef MP-WEIXIN
				this.topSpace = (80 - this.statusBarHeight)
			// #endif
			
			
			// #ifndef MP-WEIXIN
				this.topSpace = (80 + 44)
			// #endif
		},

		methods: {
			// 跳转个人信息
			toProfile() {
				uni.navigateTo({
					url: '/pages/my/profile'
				})
			},

			// 跳转我的钱包
			toWallet() {
				uni.navigateTo({
					url: '/pages/my/wallet'
				})
			}
		},
		computed: {
		    navBackground() {
		        return {
					'background-image': `url(${this.cloudPath}img/icon_recharge_bg.png)`
				}
		    }
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	
	.index {
		background-size: 100% auto;
	}
	
	.home-bg {
		background: url(#{$cloudPath}img/icon_recharge_bg.png) no-repeat;
		background-size: 100% auto;
	}

	.list {
		margin: 22rpx 34rpx;
		height: 962rpx;
		box-shadow: 0rpx 6rpx 28rpx 4rpx rgba(0, 0, 0, 0.05);
	}
	
	.date {
		color: rgba(0, 0, 0, .4);
	}
	 
	.excharge {
		width: 180rpx;
		height: 56rpx;
		background-color: #DBE7F6;
		border-top-left-radius: 100rpx;
		border-bottom-left-radius: 100rpx;
	}
</style>