fix: 页面

zhengyiming

2025-02-20 314dcacdeecec4dff192b78bad5124b1b29a453d

 apps/h5/src/components/Layout/PageLayout.vue

@@ -1,141 +1,68 @@
<template>
  <Portal.Host>
    <div class="page-layout-wrapper" v-bind="$attrs">
      <slot v-if="showNavigationBar" name="navigationBar">
        <CommonNavigationBar v-bind="_commonNavigationBarProps" />
      </slot>

      <slot name="bg">
        <div
          v-if="hasLinearBg"
          class="page-layout-linear-bg"
          :style="{
            height: Taro.pxTransform(props.linearBgHeight),
          }"
        ></div>
      </slot>

      <div class="page-layout-scroll-view-wrapper" :style="{ height: scrollViewHeight }">
        <slot :scrollViewHeight="scrollViewHeight" v-if="isAuth"></slot>
        <!-- <template v-if="isAuth">
          <slot v-if="useView" :scrollViewHeight="scrollViewHeight"></slot>
          <scroll-view
            v-else
            class="page-scrollview"
            :scroll-y="true"
            :style="{ height: scrollViewHeight }"
          >
            <slot :scrollViewHeight="scrollViewHeight"></slot>
          </scroll-view>
        </template> -->
      </div>
      <div v-if="!pageHeightWithTabBar" class="safe-area-bottom"></div>
  <div class="page-layout-wrapper">
    <slot v-if="showNavigationBar" name="navigationBar">
      <CommonNavigationBar v-bind="props" />
    </slot>
    <div class="page-layout-scroll-view-wrapper">
      <slot></slot>
    </div>
  </Portal.Host>
    <div class="safe-area-bottom"></div>
  </div>
</template>

<script setup lang="ts">
// import LoadingLayout from './LoadingLayout.vue';
// import { loadingLayoutProps } from './layout';
import CommonNavigationBar from '../NavigationBar/CommonNavigationBar.vue';
import { commonNavigationBarProps } from '../NavigationBar/commonNavigationBar';
import { useSystemStore } from '@/stores/modules/system';
import Taro from '@tarojs/taro';
import { TabBarPageRouter } from '@/constants';
import { useAuth } from '@/hooks';
import { Portal } from 'senin-mini/components';
import { usePickProps } from 'senin-mini/hooks';

defineOptions({
  name: 'PageLayout',
  inheritAttrs: false,
});

const props = defineProps({
  ...commonNavigationBarProps,
  needAuth: {
    type: Boolean,
    default: true,
  },
  useView: {
    type: Boolean,
    default: false,
  },
  hasLinearBg: {
    type: Boolean,
    default: false,
  },
  linearBgHeight: {
    type: Number,
    default: 388,
  },
});

const _commonNavigationBarProps = usePickProps(props, commonNavigationBarProps);

const { isAuth } = useAuth({
  needAuth: props.needAuth,
});

const systemStore = useSystemStore();
const router = Taro.useRouter();

const pageHeightWithTabBar = computed(() =>
  Object.values(TabBarPageRouter).some((x) => x.toLowerCase() === router.path.toLowerCase())
);

const navigationBarHeight = computed(
  () => systemStore.info.statusBarHeight + systemStore.navigationBarHeight
);

const scrollViewHeight = computed(() => {
  let pageHeight = pageHeightWithTabBar.value
    ? systemStore.pageHeightWithTab
    : systemStore.pageHeight;
  pageHeight = pageHeight + (props.showNavigationBar ? 0 : navigationBarHeight.value);
  return pageHeight + 'px';
});

Taro.getSetting({
  success: function (res) {
    if (!res.authSetting['scope.userLocation']) {
      Taro.authorize({
        scope: 'scope.userLocation',
      });
    }
    default: 199,
  },
});
</script>

<style lang="scss">
@import '@/styles/common.scss';
<style lang="scss" scoped>
@use '@/style/common.scss' as *;

.page-layout-wrapper {
  // background-color: $body-background-color;
  display: flex;
  height: 100%;
  flex-direction: column;

  .navigation-bar {
    height: 88px;
  }

  .page-layout-scroll-view-wrapper {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;

    .page-scrollview {
      box-sizing: border-box;
    :deep() {
      .loading-layout-wrapper {
        display: flex;
        min-height: 0;
        flex: 1;
        flex-direction: column;
      }
    }
  }

  .page-layout-linear-bg {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(
      180deg,
      boleGetCssVar('color', 'primary') 0%,
      #5a86f6 56%,
      #f9f9fb 100%
    );
    filter: blur(0px);
    border-radius: 0px 0px 20px 20px;
  .safe-area-bottom {
    padding-bottom: 20px; /* 默认值 */
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
</style>