jianbing/pages/recharge/balance.vue

<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=" "
					:title="title"
					title-color="#fff"
					backIconColor="#fff"
				>
				</u-navbar>
			</u-sticky>
		<!-- #endif -->

		
		<view class="row-center balance" :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>
		
		<view class="content u-relative u-m-l-32 u-m-r-32" style="margin-top: 132rpx;">
			<view class="input row-center br16">
				<view class="input-money"> 
					<u-input placeholder="输入金额: 0" placeholder-style="color: #254062;" :custom-style="{backgroundColor: 'transparent'}" input-align="center"/>
				</view>
			</view>
			
			<view class="u-m-t-38">
				<view class="sm u-m-b-20 bold-400">选择充值套餐</view>
				<view class="grid-container">
					<view :class="['item', {'active': selectIndex === 0}]">
						<view class="xs text-666">充值</view>
						<view class="text-333 md u-m-t-4">￥5</view>
						<view class="text-666 xxs u-m-t-2">赠送11元</view>
					</view>
				</view>
			</view>
			
			<view class="u-m-t-56">
				<view class="sm u-m-b-20 bold-400">加赠券 价值10元</view>
				<view class="grid-container u-m-t-18">
					<view class="coupon u-text-center">
						<view class="sm text-666">赠券1张</view>
						<view class="text-333 md u-m-t-28">
							<price-format color="#FF0000" :price="10" :subscriptSize="22" :firstSize="52"></price-format>
						</view>
						<view class="text-666 sm u-m-t-30">满10元可用</view>
					</view>
				</view>
			</view>
			
			<view class="u-m-t-70 u-p-10">
				<view class="sm u-m-b-20 bold-400">充值说明</view>
				<view class="text-999">1. 账户充值仅限在线方式支付，充值金额实时到账；</view>
				<view class="text-999">2. 有问题请联系客服；</view>
			</view>
			
			<view class="u-m-t-42 u-p-b-20">
				<u-button @click="mpLogin" hover-class="none" :customStyle="{height: '76rpx', backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '100rpx'}" :hair-line="false">立即充值</u-button>
			</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;
	}
	
	.input {
		height: 124rpx;
		background: #D3E0F1;
		border: 2rpx solid #254062;
	}
	
	.input-money {
		width: 180rpx;
	}
	
	.item {
		width: 209rpx;
		height: 155rpx;
		background: #F5F5F5;
		border: 1rpx solid #F5F5F5;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		padding: 20rpx 20rpx 12rpx 20rpx;
	}
	
	.active {
		background: #F3F8FF;
		border: 1rpx solid #254062;
	}
	
	.grid-container {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 32rpx;
	}
	
	.coupon {
		width: 207rpx;
		height: 196rpx;
		background: url(#{$cloudPath}img/coupon_bg1.png) no-repeat;
		background-size: cover;
		
		& > view:first-child {
			color: #845F2E;
			margin-top: 4rpx;
		}
	}
</style>