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;"
            :refresher-background="refresherBackground" @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',
      },
      refresherBackground: {
        type: String,
        default: '#FFF',
      },
      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>