uniapp【修复】:修复同步导行栏高度

This commit is contained in:
21世纪小八路
2024-10-22 00:27:17 +08:00
parent 5d4fee524a
commit bad96fa0e4
16 changed files with 39 additions and 24 deletions

View File

@@ -1,5 +1,5 @@
<template> <template>
<uv-navbar :bgColor="props.bgColor"> <uv-navbar :bgColor="props.bgColor" placeholder :height="menuButtonHeight+'px'">
<template #left> <template #left>
<view class="page-back"> <view class="page-back">
<image v-if="props.isBack" @click="hanlderBack" class="back" <image v-if="props.isBack" @click="hanlderBack" class="back"
@@ -15,7 +15,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useSystemInfo } from '@/core/hooks';
import { handleStaticResources } from '@/core/utils'; import { handleStaticResources } from '@/core/utils';
const { menuButtonHeight } = useSystemInfo();
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
isBack : boolean, isBack : boolean,

View File

@@ -3,7 +3,7 @@
<coreshop-navbar :isBack="props.isBack" :bgColor="props.bgColor" :mode="props.mode" :title="props.title" <coreshop-navbar :isBack="props.isBack" :bgColor="props.bgColor" :mode="props.mode" :title="props.title"
:titleColor="props.titleColor" :handleCustomRouteJump="props.handleCustomRouteJump"></coreshop-navbar> :titleColor="props.titleColor" :handleCustomRouteJump="props.handleCustomRouteJump"></coreshop-navbar>
<view class="layout-page-content" <view class="layout-page-content"
:style="{ 'padding-top': `${props.isShowStatusBarHeight ? statusBarHeight : 0}px`, ...props.contentStyle }"> :style="{ ...props.contentStyle }">
<slot></slot> <slot></slot>
</view> </view>
<template v-if="props.showLoginModalDom"> <template v-if="props.showLoginModalDom">

View File

@@ -4,16 +4,20 @@ export const useSystemInfo = () => {
const state = reactive<{ const state = reactive<{
systemInfo : any; systemInfo : any;
statusBarHeight : number; statusBarHeight : number;
menuButtonHeight : number;
}>({ }>({
systemInfo: {}, systemInfo: {},
statusBarHeight: 0, statusBarHeight: 0,
menuButtonHeight: 44
}); });
onMounted(async () => { onMounted(async () => {
const menuButton = uni.getMenuButtonBoundingClientRect();
const systemInfo = await uni.getSystemInfo(); const systemInfo = await uni.getSystemInfo();
state.systemInfo = systemInfo; state.systemInfo = systemInfo;
state.statusBarHeight = systemInfo.statusBarHeight + systemInfo.safeArea.top; state.menuButtonHeight = menuButton.height + (menuButton.top - systemInfo.statusBarHeight) * 2;
state.statusBarHeight = systemInfo.statusBarHeight + state.menuButtonHeight;
}) })
return toRefs(state); return toRefs(state);

View File

@@ -38,7 +38,7 @@
} }
.data-box { .data-box {
padding-top: 100rpx; padding-top: 60rpx;
.item-box { .item-box {
margin-bottom: 30rpx; margin-bottom: 30rpx;

View File

@@ -1,7 +1,7 @@
<template> <template>
<coreshop-navbar :isBack="false" mode="left" title="购物车"> </coreshop-navbar> <coreshop-navbar :isBack="false" mode="left" title="购物车"> </coreshop-navbar>
<view class="content-box p-25 page-bg" :style="{ 'padding-top': `${statusBarHeight}px` }"> <view class="content-box p-25 page-bg">
<view class="cart-box" v-if="state.cartList.length > 0"> <view class="cart-box" v-if="state.cartList.length > 0">
<view class="all-select" :style="{ 'top': `${statusBarHeight}px` }"> <view class="all-select" :style="{ 'top': `${statusBarHeight}px` }">
<view class="icon-box" @click="hanldeChangeAllSelect"> <view class="icon-box" @click="hanldeChangeAllSelect">

View File

@@ -16,7 +16,7 @@
</template> </template>
</uv-navbar> </uv-navbar>
<view class="content-box" :style="{ 'padding-top': `${statusBarHeight}px`, 'height': `${state.height}px` }"> <view class="content-box" :style="{'height': `${state.height}px` }">
<classifyOne v-if="shopConfigStore.config.cateStyle == GoodsListEnum.one" :data="state.categoriesList"> <classifyOne v-if="shopConfigStore.config.cateStyle == GoodsListEnum.one" :data="state.categoriesList">
</classifyOne> </classifyOne>
<classifyTwo v-else-if="shopConfigStore.config.cateStyle == GoodsListEnum.two" <classifyTwo v-else-if="shopConfigStore.config.cateStyle == GoodsListEnum.two"

View File

@@ -1,6 +1,6 @@
<template> <template>
<coreshop-page bgColor="rgba(0,0,0,0)" :isShowStatusBarHeight="false" showLoginModalDom> <coreshop-page bgColor="rgba(0,0,0,0)" :isShowStatusBarHeight="false" showLoginModalDom>
<view class=" goods-detail"> <view class=" goods-detail" :style="{ 'margin-top': `-${statusBarHeight}px` }">
<!-- 商品详情 --> <!-- 商品详情 -->
<GoodsDetail :goodsId="state.goodsDetailData?.id" :goodsDetailData="state.goodsDetailData" <GoodsDetail :goodsId="state.goodsDetailData?.id" :goodsDetailData="state.goodsDetailData"
:swiperBanner="state.swiperBanner" :goodsDetailContent="state.goodsDetailContent" :swiperBanner="state.swiperBanner" :goodsDetailContent="state.goodsDetailContent"
@@ -38,6 +38,7 @@
import GoodsDetailSkuPopup from '@/pages/components/goods-detail/components/goods-detail-sku/goods-detail-sku.vue'; import GoodsDetailSkuPopup from '@/pages/components/goods-detail/components/goods-detail-sku/goods-detail-sku.vue';
import GoodsDetailRecommend from '@/pages/components/goods-detail/components/goods-detail-recommend/goods-detail-recommend.vue'; import GoodsDetailRecommend from '@/pages/components/goods-detail/components/goods-detail-recommend/goods-detail-recommend.vue';
import { useLoginStore } from '@/core/store'; import { useLoginStore } from '@/core/store';
import { useSystemInfo } from '@/core/hooks';
interface QueryParams { interface QueryParams {
id : number; id : number;
@@ -49,6 +50,8 @@
/** 购物车store */ /** 购物车store */
const _useCartStore = useCartStore(); const _useCartStore = useCartStore();
const { statusBarHeight } = useSystemInfo();
const state = reactive<{ const state = reactive<{
goodsDetailData : any; goodsDetailData : any;
swiperBanner : Array<string>; swiperBanner : Array<string>;

View File

@@ -10,7 +10,7 @@
</template> </template>
</uv-navbar> </uv-navbar>
<view class="content-box p-25" :style="{ 'padding-top': `${statusBarHeight + 10}px` }"> <view class="content-box p-25">
<CustomPage ref="homePage" :coreshopData="state.coreshopData"></CustomPage> <CustomPage ref="homePage" :coreshopData="state.coreshopData"></CustomPage>
</view> </view>

View File

@@ -2,14 +2,14 @@
position: relative; position: relative;
.memeber-bg{ .memeber-bg{
display: block; display: block;
width: 750rpx; width: 100%;
height: 600rpx; height: 400rpx;
} }
} }
.head-box { .head-box {
position: absolute; position: absolute;
bottom: 13rpx; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
.user-info { .user-info {

View File

@@ -1,6 +1,6 @@
<template> <template>
<coreshop-page :title="state.isScrollToTop ? '' : userInfoStore.userInfo?.nickName || ''" titleColor="#fff" <coreshop-page :title=" userInfoStore.userInfo?.nickName || ''" titleColor="#fff"
mode="left" :bgColor=" state.isScrollToTop ? 'rgba(0,0,0,0)':'#d33123'" :isShowStatusBarHeight="false" mode="left" bgColor="#d33123" :isShowStatusBarHeight="false"
:isBack="false" showLoginModalDom> :isBack="false" showLoginModalDom>
<view class="layout-member-page"> <view class="layout-member-page">
<view class="member-head"> <view class="member-head">

View File

@@ -449,7 +449,7 @@
} }
.btn { .btn {
width: 200rpx; width: 240rpx;
text-align: center; text-align: center;
height: 90rpx; height: 90rpx;
line-height: 90rpx; line-height: 90rpx;

View File

@@ -1,6 +1,6 @@
<template> <template>
<coreshop-page bgColor="rgba(0,0,0,0)" :isShowStatusBarHeight="false" showLoginModalDom> <coreshop-page bgColor="rgba(0,0,0,0)" :isShowStatusBarHeight="false" showLoginModalDom>
<view class="goods-detail"> <view class="goods-detail" :style="{ 'margin-top': `-${statusBarHeight}px` }">
<!-- 商品详情 --> <!-- 商品详情 -->
<GoodsDetail :goodsId="state.goodsDetailData?.id" :goodsDetailData="state.goodsDetailData" <GoodsDetail :goodsId="state.goodsDetailData?.id" :goodsDetailData="state.goodsDetailData"
:swiperBanner="state.swiperBanner" :spesDesc="state.spesDesc" :swiperBanner="state.swiperBanner" :spesDesc="state.spesDesc"
@@ -73,7 +73,7 @@
import GoodsDetailRecommend from '@/pages/components/goods-detail/components/goods-detail-recommend/goods-detail-recommend.vue'; import GoodsDetailRecommend from '@/pages/components/goods-detail/components/goods-detail-recommend/goods-detail-recommend.vue';
import GoodsDetailSkuPopup from '@/pages/components/goods-detail/components/goods-detail-sku/goods-detail-sku.vue'; import GoodsDetailSkuPopup from '@/pages/components/goods-detail/components/goods-detail-sku/goods-detail-sku.vue';
import GoodsDetailBottomTabbar from '@/pages/components/goods-detail/components/goods-detail-bottom-tabbar/goods-detail-bottom-tabbar.vue'; import GoodsDetailBottomTabbar from '@/pages/components/goods-detail/components/goods-detail-bottom-tabbar/goods-detail-bottom-tabbar.vue';
import { useLoadingFn } from '@/core/hooks'; import { useLoadingFn, useSystemInfo } from '@/core/hooks';
interface QueryParams { interface QueryParams {
id : number; id : number;
} }
@@ -84,6 +84,8 @@
/** 购物车store */ /** 购物车store */
const cartStore = useCartStore(); const cartStore = useCartStore();
const { statusBarHeight } = useSystemInfo();
const state = reactive<{ const state = reactive<{
goodsDetailData : any, goodsDetailData : any,
swiperBanner : Array<string>; swiperBanner : Array<string>;

View File

@@ -1,6 +1,6 @@
<template> <template>
<coreshop-page bgColor="rgba(0,0,0,0)" :isShowStatusBarHeight="false" showLoginModalDom> <coreshop-page bgColor="rgba(0,0,0,0)" :isShowStatusBarHeight="false" showLoginModalDom>
<view class="goods-detail"> <view class="goods-detail" :style="{ 'margin-top': `-${statusBarHeight}px` }">
<!-- 商品详情 --> <!-- 商品详情 -->
<GoodsDetail :goodsId="state.goodsDetailData?.id" :goodsDetailData="state.goodsDetailData" <GoodsDetail :goodsId="state.goodsDetailData?.id" :goodsDetailData="state.goodsDetailData"
:swiperBanner="state.swiperBanner" :shareType="ShareEnum.pinTuan" :swiperBanner="state.swiperBanner" :shareType="ShareEnum.pinTuan"
@@ -83,7 +83,7 @@
import GoodsDetailRecommend from '@/pages/components/goods-detail/components/goods-detail-recommend/goods-detail-recommend.vue'; import GoodsDetailRecommend from '@/pages/components/goods-detail/components/goods-detail-recommend/goods-detail-recommend.vue';
import GoodsDetailSkuPopup from '@/pages/components/goods-detail/components/goods-detail-sku/goods-detail-sku.vue'; import GoodsDetailSkuPopup from '@/pages/components/goods-detail/components/goods-detail-sku/goods-detail-sku.vue';
import GoodsDetailBottomTabbar from '@/pages/components/goods-detail/components/goods-detail-bottom-tabbar/goods-detail-bottom-tabbar.vue'; import GoodsDetailBottomTabbar from '@/pages/components/goods-detail/components/goods-detail-bottom-tabbar/goods-detail-bottom-tabbar.vue';
import { useLoadingFn } from '@/core/hooks'; import { useLoadingFn,useSystemInfo } from '@/core/hooks';
interface QueryParams { interface QueryParams {
id : number; id : number;
@@ -95,6 +95,8 @@
/** 获取购物车数据 */ /** 获取购物车数据 */
const cartStore = useCartStore(); const cartStore = useCartStore();
const { statusBarHeight } = useSystemInfo();
const state = reactive<{ const state = reactive<{
id : number; id : number;

View File

@@ -11,8 +11,7 @@
.content-box { .content-box {
position: relative; position: relative;
margin: 25rpx; margin: 25rpx;
padding-top: 200rpx;
.title-box { .title-box {
display: flex; display: flex;
align-items: center; align-items: center;

View File

@@ -1,6 +1,6 @@
<template> <template>
<coreshop-page bgColor="rgba(0,0,0,0)" :isShowStatusBarHeight="false" showLoginModalDom> <coreshop-page bgColor="rgba(0,0,0,0)" :isShowStatusBarHeight="false" showLoginModalDom>
<view class="goods-detail"> <view class="goods-detail" :style="{ 'margin-top': `-${statusBarHeight}px` }">
<!-- 商品详情 --> <!-- 商品详情 -->
<GoodsDetail :goodsId="state.goodsDetailData?.id" :goodsDetailData="state.goodsDetailData" <GoodsDetail :goodsId="state.goodsDetailData?.id" :goodsDetailData="state.goodsDetailData"
:swiperBanner="state.swiperBanner" :spesDesc="state.spesDesc" :swiperBanner="state.swiperBanner" :spesDesc="state.spesDesc"
@@ -73,7 +73,7 @@
import GoodsDetailRecommend from '@/pages/components/goods-detail/components/goods-detail-recommend/goods-detail-recommend.vue'; import GoodsDetailRecommend from '@/pages/components/goods-detail/components/goods-detail-recommend/goods-detail-recommend.vue';
import GoodsDetailSkuPopup from '@/pages/components/goods-detail/components/goods-detail-sku/goods-detail-sku.vue'; import GoodsDetailSkuPopup from '@/pages/components/goods-detail/components/goods-detail-sku/goods-detail-sku.vue';
import GoodsDetailBottomTabbar from '@/pages/components/goods-detail/components/goods-detail-bottom-tabbar/goods-detail-bottom-tabbar.vue'; import GoodsDetailBottomTabbar from '@/pages/components/goods-detail/components/goods-detail-bottom-tabbar/goods-detail-bottom-tabbar.vue';
import { useLoadingFn } from '@/core/hooks'; import { useLoadingFn, useSystemInfo } from '@/core/hooks';
interface QueryParams { interface QueryParams {
id : number; id : number;
@@ -83,6 +83,8 @@
const _useLoginStore = useLoginStore(); const _useLoginStore = useLoginStore();
const cartStore = useCartStore(); const cartStore = useCartStore();
const { statusBarHeight } = useSystemInfo();
const state = reactive<{ const state = reactive<{
goodsDetailData : any, goodsDetailData : any,

View File

@@ -1,3 +1,6 @@
.layout-seckill-box{
padding-top: 80rpx;
}
.navbar-box { .navbar-box {
position: fixed; position: fixed;
left: 0; left: 0;
@@ -31,8 +34,6 @@
} }
.seckill-box { .seckill-box {
padding-top: 100rpx;
.card-box { .card-box {
margin-bottom: 35rpx; margin-bottom: 35rpx;
margin: 25rpx; margin: 25rpx;