recycle-mobile/src/components/zj-container/zj-page-layout.vue

<template>
	<view
		class="app-container"
		:class="hasFooter || isTabbar ? '':'pb'"
		:style="{background: bgColor, height: 'calc(100vh - ' + aHeight + 'px)'}">
		<u-loading-page
			loading-text="家盛茂工程师"
			color="#333333"
			fontSize="17"
			image="/static/images/logo.png"
			icon-size="44"
			:loading="isLoading">
		</u-loading-page>

		<block v-if="!isLoading">
			<view class="header-container">
				<slot name="header"></slot>
			</view>
			<view class="content-container">
				<template v-if="isScroll">
					<scroll-view
						scroll-y
						enable-flex
						refresher-enabled
						style="width: 100%; height: 100%; box-sizing: border-box;"
						@scrolltoupper="(...p)=>{$emit('scrolltoupper',p)}"
						@scrolltolower="(...p)=>{$emit('scrolltolower',p)}"
						@scroll="(...p)=>{$emit('scroll',p)}"
						@refresherpulling="(...p)=>{$emit('refresherpulling',p)}"
						@refresherrefresh="(...p)=>{$emit('refresherrefresh',p)}"
						@refresherrestore="(...p)=>{$emit('refresherrestore',p)}"
						@refresherabort="(...p)=>{$emit('refresherabort',p)}"
						:refresher-triggered="refresherTriggered">
						<slot></slot>
					</scroll-view>
				</template>
				<template v-else>
					<view style="width: 100%; height: 100%; box-sizing: border-box; overflow-y: scroll;">
						<slot></slot>
					</view>
				</template>
			</view>
			<view class="footer-container" v-if="hasFooter">
				<slot name="footer"></slot>
			</view>
		</block>
	</view>
</template>

<script>
  import { isWeixin } from "@/common/utils/common.js"

	export default {
		props: {
			bgColor: {
				type: String,
				default: '#F3F4F8',
			},
			hasFooter: {
				type: Boolean,
				default: false,
			},
			isScroll: {
				type: Boolean,
				default: false,
			},
			refresherTriggered: {
				type: Boolean,
				default: false,
			},
			isLoading: {
				type: Boolean,
				default: false,
			}
		},

		computed: {
			isTabbar() {
				let pages = getCurrentPages();
				if(pages.length > 0) {
					let prevPage = pages[pages.length - 1];
					if (prevPage.route === 'pages/index/index' || prevPage.route === 'pages/issue/index' || prevPage.route === 'pages/message/index' || prevPage.route === 'pages/mine/index') {
						return true;
					}else {
						return false;
					}
				}
			},

      aHeight() {
        let num = 0;
        // #ifdef H5
        if (isWeixin()) {
          num = 0;
        } else {
          if(this.isTabbar) {
            num = 50;
          }else {
            num = 44;
          }
        }
        // #endif
        return num;
      }
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-loading-page {
		z-index: 999999;
	}
	.app-container {
		width: 100%;
    height: 100vh;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		&.pb {
			padding-bottom: env(safe-area-inset-bottom);
		}
		.header-container {
			flex-shrink: 0;
		}
		.content-container {
			flex: 1;
			height: 0;
		}
		.footer-container {
			flex-shrink: 0;
			padding-bottom: env(safe-area-inset-bottom);
			background: #ffffff;
			box-sizing: border-box;
			box-shadow: $bottom-shadow;
			position: relative;
			z-index: 1;
		}
	}
</style>