<template>
|
<Portal.Host>
|
<div :class="['page-layout-wrapper', { isWeb: isWeb, hasBgColor }]" 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: '100%',
|
}"
|
></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>
|
</Portal.Host>
|
</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, useTabRouteEnhance } from '@/hooks';
|
import { Portal } from 'senin-mini/components';
|
import { usePickProps } from 'senin-mini/hooks';
|
import { isWeb, isInAlipay, isInWeChat } from '@/utils/env';
|
//@ts-ignore
|
import { setPageTitle } from '@/utils';
|
|
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,
|
},
|
hasBgColor: {
|
type: Boolean,
|
default: false,
|
},
|
});
|
|
setPageTitle(props.title);
|
|
useTabRouteEnhance();
|
|
const _commonNavigationBarProps = usePickProps(props, commonNavigationBarProps);
|
|
const _showNavigationBar = computed(() => {
|
if (props.showNavigationBar) {
|
// if (isWeb) {
|
// return !isInAlipay && !isInWeChat;
|
// }
|
return true;
|
} else {
|
return false;
|
}
|
});
|
|
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 || 0) + systemStore.navigationBarHeight
|
);
|
|
const scrollViewHeight = computed(() => {
|
let pageHeight = pageHeightWithTabBar.value
|
? systemStore.pageHeightWithTab
|
: systemStore.pageHeight;
|
pageHeight = pageHeight + (_showNavigationBar.value ? 0 : navigationBarHeight.value);
|
return pageHeight + 'px';
|
});
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.page-layout-wrapper {
|
/* background-color: $body-background-color; */
|
|
&.hasBgColor {
|
background-color: $body-background-color;
|
}
|
|
.page-layout-scroll-view-wrapper {
|
display: flex;
|
flex-direction: column;
|
|
.page-scrollview {
|
box-sizing: border-box;
|
}
|
}
|
|
.page-layout-linear-bg {
|
position: fixed;
|
z-index: -1;
|
top: 0;
|
left: 0;
|
width: 100%;
|
background: linear-gradient(180deg, #7cd0ff 0%, rgba(255, 255, 255, 0) 43%, #ffffff 100%);
|
border-radius: 0px 0px 20px 20px;
|
}
|
|
&.isWeb {
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
|
.page-layout-scroll-view-wrapper {
|
flex: 1;
|
min-height: 0;
|
}
|
}
|
}
|
</style>
|
