new-greemall-wxapp/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 color="#333333" fontSize="17" 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>
  export default {
    props: {
      bgColor: {
        type: String,
        default: '#F7F8FF',
      },
      refresherBackground: {
        type: String,
        default: '#F7F8FF',
      },
      hasFooter: {
        type: Boolean,
        default: false,
      },
      isScroll: {
        type: Boolean,
        default: false,
      },
      refresherTriggered: {
        type: Boolean,
        default: false,
      },
      isLoading: {
        type: Boolean,
        default: false,
      },
      isWxCustomPage: {
        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/workorder/index' || prevPage.route ===
            'pages/goods/index' || prevPage.route === 'pages/mine/index') {
            return true;
          } else {
            return false;
          }
        }
      },

      aHeight() {
        let num = 0;
        // #ifdef H5
        if(this.isWxCustomPage) {
          num = 50;
        } else if (this.isTabbar) {
          num = 0+50;
        } else {
          num = 0;
        }
        // #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>