PunchSettle-MiniProgram/components/main-layout/main-layout.vue

<template>
	<view class="layout-container">
		<!-- 顶部填充区 -->
		<view :style="statusBarStyle"></view>
		
		<!-- 顶部胶囊区 -->
		<view class="capsule-box" :style="capsuleBarStyle">
			<view class="icon-wrap" v-if="showBack || showHome">
				<view v-if="showBack" class="icon-box" :style="iconBoxStyle" @click="goBackPage">
					<uni-icons type="back" color="#FFFFFF" :size="iconSize"></uni-icons>		
				</view>
				<view v-if="showHome" class="icon-box" :style="iconBoxStyle" @click="goIndexPage">
					<uni-icons type="home" color="#FFFFFF" :size="iconSize"></uni-icons>	
				</view>
			</view>
		</view>
		
		<!-- 内容区 -->
		<view class="content-box">
			<slot></slot>
		</view>
		
		<!-- 底部填充区 -->
		<view :style="bottomBoxStyle"></view>

	</view>
</template>

<script setup>
	import { computed, ref } from 'vue';
	import { useSafeAreaStore } from '@/stores/safeArea.js';
	import router from '@/common/constants/router';
	
	defineProps({
		showHome: {
			type: Boolean,
			default: false
		},
		showBack: {
			type: Boolean,
			default: false
		}
	});
	
	/**
	 * 安全区
	 */
	const safeAreaStore = useSafeAreaStore();
	
	/**
	 * 状态栏样式
	 */
	const statusBarStyle = computed(() => {
		return {
			height: safeAreaStore.statusBarHeight+'px'
		}
	});
	
	/**
	 * 胶囊区样式
	 */
	const capsuleBarStyle = computed(() => {
		return {
			height: safeAreaStore.capsuleBarHeight+'px',
			width: safeAreaStore.capsuleBarLeft+'px',
			'padding-top': safeAreaStore.capsuleBarMarginTop+'px', 
			'padding-bottom': safeAreaStore.capsuleBarMarginBottom+'px'
		}
	});
	
	/**
	 * 图标容器样式
	 */
	const iconBoxStyle = computed(() => {
		return {
			width: safeAreaStore.capsuleBarContentHeight-5+'px',
			height: safeAreaStore.capsuleBarContentHeight-5+'px'
		}
	});
	
	/**
	 * 图标大小
	 */
	const iconSize = computed(() => safeAreaStore.capsuleBarContentHeight-10);
	
	/**
	 * 底部填充区样式
	 */
	const bottomBoxStyle = computed(() => {
		return {
			height: safeAreaStore.bottomHeight+'px'
		}
	});
	
	/**
	 * 返回主页
	 */
	const goIndexPage = () => {
		uni.reLaunch({
			url: router.INDEX_URL
		});
	};
	
	/**
	 * 返回上一页
	 */
	const goBackPage = () => {
		uni.navigateBack();
	};
</script>

<style lang="scss" scoped>
	.layout-container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background: linear-gradient(180deg, #B9D3FF 0%, #F2F7FF 22.23%);
		
		.capsule-box {
			padding-left: 24rpx;
			padding-right: 24rpx;
			
			.icon-wrap {
				display: flex;
				justify-content: left;
				height: 100%;
				align-items: center;
				
				.icon-box {
					margin-left: 16rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					opacity: 0.2;
					background: rgba(0, 0, 0, 1);
				}
						
				.icon-box:first-child {
					margin-left: 0rpx;
				}
			}
		}
		
		.content-box {
			/* 内容区域占满剩余空间 */
			flex-grow: 1;
			padding: 0 24rpx 16rpx 24rpx;
		}
	}
</style>