alipay-emulator/pages/balance/index.nvue

<template>
	<view class="container" :style="{ height: data.windowHeight + 'px' }">
		<NavBar class="nav-bar" title="" :backgroundColor="data.navBar.bgColor">
			<template v-slot:left>
				<view class="nav-bar-left">
					<image class="nav-icon" src="/static/image/nav-bar/back-white.png" mode=""></image>
					<text class="nav-text">余额</text>
				</view>
			</template>
		</NavBar>
		<view class="background-container" :style="{ 'padding-top': `${data.statusBarHeight * 2 + 124}rpx` }">
			<view class="balance-box">
				<view class="top-box">
					<image class="img" src="/static/image/balance/safe-icon-blue.png" mode=""></image>
					<text class="text">资金安全有保障</text>
					<image class="img" src="/static/image/balance/right-blue.png" mode=""></image>
				</view>
				<view class="balance-title flex-cneter">
					<text>可用余额(元)</text>
					<image class="img" src="/static/image/balance/eye.png" mode=""></image>
				</view>
				<view class="balance flex-cneter">
					<text class="text">{{ Number(balance).toFixed(2) }}</text>
				</view>
				<view class="button-group">
					<view class="flex-1 btn-box">
						<view class="left btn flex-cneter">
							<text class="text">提现</text>
						</view>
					</view>
					<view class="flex-1 btn-box">
						<view class="right btn flex-cneter">
							<text class="text">充值</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="menu-box">
			<view class="item" v-for="item in menuList">
				<image class="menu-icon" :src="`/static/image/balance/menu-icon/${item.imgLabel}.png`" mode=""></image>
				<text class="icon-name">{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import NavBar from '@/components/nav-bar/nav-bar'

	import {
		deviceUtil
	} from '@/utils/common';

	import {
		reactive,
		ref,
		onMounted,
		watch,
		toRefs
	} from 'vue'

	import {
		onLoad
	} from '@dcloudio/uni-app'

	// 导入状态管理
	import {
		useStore
	} from '@/store'

	// 获取store
	const {
		store
	} = useStore()

	const menuList = [{
		imgLabel: "zhuanzhang",
		name: "转账"
	}, {
		imgLabel: "yinhangka",
		name: "银行卡"
	}, {
		imgLabel: "qinqingka",
		name: "亲情卡"
	}, {
		imgLabel: "xiaohebao",
		name: "小荷包"
	}, {
		imgLabel: "zhuanyongjin",
		name: "专用金"
	}]

	const data = reactive({
		navBar: {
			bgColor: "#00000000"
		},
		statusBarHeight: 0,
		balance: 0,
		windowHeight: 0
	})

	let {
		balance
	} = toRefs(data)

	onLoad(async () => {
		// 初始获取状态栏高度和屏幕高度
		updateStatusBarHeight()
		data.windowHeight = await deviceUtil.getScreenHeight()
	})

	onMounted(() => {
		// 组件挂载后再次获取，确保信息已更新
		updateStatusBarHeight()
	})

	// 更新状态栏高度
	const updateStatusBarHeight = () => {
		uni.getSystemInfo({
			success: (res) => {
				data.statusBarHeight = res.statusBarHeight || 0
				console.log('直接获取状态栏高度:', data.statusBarHeight)
			}
		})
	}

	// 监听store中系统信息的变化
	watch(() => store.systemInfo, (newVal) => {
		if (newVal && newVal.statusBarHeight !== undefined) {
			data.statusBarHeight = newVal.statusBarHeight
			console.log('监听状态管理变化，更新状态栏高度:', data.statusBarHeight)
		}
	}, {
		deep: true
	})
</script>

<style scoped>
	.container {
		background-color: #F0F3F8;
	}

	.flex-cneter {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.flex-1 {
		flex: 1;
	}

	.nav-bar {
		position: absolute;
		width: 100%;
	}

	.nav-bar-left {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.nav-icon {
		width: 24px;
		height: 24px;
	}

	.nav-text {
		font-size: 18px;
		margin-right: 4px;
		color: #FFFFFF;
		height: 24px;
		line-height: 24px;
	}

	::v-deep .uni-navbar__header-btns-left {
		flex: 1;
	}

	::v-deep .uni-navbar__header-btns-right {
		flex: 1;
	}

	.background-container {
		background: linear-gradient(181deg, #1E76FE 0%, rgba(30, 118, 254, 0.74) 39%, rgba(240, 243, 248, 0.84) 90%, #F0F3F8 100%);
		padding: 12px;
		padding-bottom: 0;
		padding-top: 62px;
	}

	.balance-box {
		background-color: #FFFFFF;
		border-radius: 12px;
		padding-bottom: 20px;
	}

	.top-box {
		background-color: #E3EFFF;
		border-radius: 12px 12px 0 0;
		text-align: center;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 6px;
	}

	.top-box>.text {
		color: #2977E6;
		font-size: 12px;
	}

	.top-box>.img {
		width: 14px;
		height: 14px;
	}

	.balance-title {
		margin-top: 20px;
	}

	.balance-title>.img {
		width: 16px;
		height: 16px;
		margin-left: 4px;
	}

	.balance-title>.text {
		font-size: 14px;
		color: #1A1A1A;
	}

	.balance {
		margin-top: 21px;
	}

	.balance>.text {
		color: #1A1A1A;
		font-size: 40px;
		font-weight: 500;
		line-height: 32px;
	}

	.button-group {
		margin: 0 12px;
		margin-top: 60px;
		display: flex;
		flex-direction: row;
		align-items: center;
		/* box-sizing: border-box; */
	}

	.btn-box {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.btn {
		border-radius: 24px;
		height: 49px;
		width: 150px;
		font-size: 18px;
	}

	.btn>.text {
		color: #1A1A1A;
	}

	.left {
		border: 1px solid #E2E2E2;
		color: #1A1A1A;
	}

	.right {
		color: #fff;
		background-color: #1777FF;
	}

	.right>.text {
		color: #fff;
	}

	.menu-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 8px;
		border-radius: 12px;
		background-color: #FFFFFF;
		padding: 20px;
		margin-left: 12px;
		margin-right: 12px;
	}
	
	.item{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.menu-icon{
		width: 48rpx;
		height: 48rpx;
	}
	
	.icon-name{
		font-size: 24rpx;
		color: var(--text-color);
		margin-top: 8px;
	}
</style>