From aa45de802c9980656dc6a85dd3417cd0f77f7292 Mon Sep 17 00:00:00 2001
From: zhengyiming <540361168@qq.com>
Date: 星期五, 21 三月 2025 15:49:55 +0800
Subject: [PATCH] fix: 三期需求
---
apps/h5/src/components/Layout/PageLayout.vue | 135 ++++++++++----------------------------------
1 files changed, 31 insertions(+), 104 deletions(-)
diff --git a/apps/h5/src/components/Layout/PageLayout.vue b/apps/h5/src/components/Layout/PageLayout.vue
index 474d352..263cd68 100644
--- a/apps/h5/src/components/Layout/PageLayout.vue
+++ b/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>
--
Gitblit v1.9.1