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

This commit is contained in:
15093570141
2024-10-23 13:51:29 +08:00
parent faef498dc6
commit 6dcd665a41
23 changed files with 109 additions and 107 deletions

View File

@@ -1,5 +1,5 @@
<template>
<uv-navbar :bgColor="props.bgColor" placeholder :height="menuButtonHeight+'px'">
<uv-navbar :bgColor="props.bgColor" :height="menuButtonHeight+'px'" :placeholder="props.placeholder">
<template #left>
<view class="page-back">
<image v-if="props.isBack" @click="hanlderBack" class="back"
@@ -26,13 +26,15 @@
mode : string,
title : string,
handleCustomRouteJump : () => void | null,
placeholder:boolean;
}>(), {
isBack: true,
bgColor: '#EEF3F7',
bgColor: '#eef2f6',
titleColor: '#000',
mode: 'center',
title: '',
handleCustomRouteJump: null,
placeholder:true,
});
const hanlderBack = () => {

View File

@@ -1,23 +1,21 @@
<template>
<view class="layout-page-box page-bg" :style="props.customStyle">
<coreshop-navbar :isBack="props.isBack" :bgColor="props.bgColor" :mode="props.mode" :title="props.title"
:titleColor="props.titleColor" :handleCustomRouteJump="props.handleCustomRouteJump"></coreshop-navbar>
<view class="layout-page-content"
:style="{ ...props.contentStyle }">
<coreshop-navbar :isBack="props.isBack" :bgColor="props.bgColor" :placeholder="props.placeholder"
:mode="props.mode" :title="props.title" :titleColor="props.titleColor"
:handleCustomRouteJump="props.handleCustomRouteJump"></coreshop-navbar>
<view class="layout-page-content" :style="{ ...props.contentStyle }">
<slot></slot>
</view>
<template v-if="props.showLoginModalDom">
<coreshop-login-modal :show="_useLoginStore.showLoginModalTogglePop"
@handleChangePopup="handleChangeLoginPopup" @getUserInfo="_useLoginStore.getUserInfo()"></coreshop-login-modal>
@handleChangePopup="handleChangeLoginPopup"
@getUserInfo="_useLoginStore.getUserInfo()"></coreshop-login-modal>
</template>
</view>
</template>
<script setup lang="ts">
import { useSystemInfo } from '@/core/hooks';
import { useLoginStore } from '@/core/store';
// 获取自定义导航栏高度
const { statusBarHeight } = useSystemInfo();
const _useLoginStore = useLoginStore();
const props = withDefaults(defineProps<{
@@ -31,9 +29,10 @@
contentStyle : any;
handleCustomRouteJump : () => void | null,
showLoginModalDom : boolean;
placeholder : boolean;
}>(), {
isBack: true,
bgColor: '#EEF3F7',
bgColor: '#eef2f6',
titleColor: '#000',
mode: 'center',
title: '',
@@ -41,7 +40,8 @@
customStyle: {},
contentStyle: {},
handleCustomRouteJump: null,
showLoginModalDom: false
showLoginModalDom: false,
placeholder: true,
});
/** 打开获取关闭login弹框 */

View File

@@ -26,11 +26,12 @@
handleCustomRouteJump : () => void | null,
showLoginModalDom : boolean;
needSkeleton : boolean;
skeleton ?: Array<object>;
skeleton ?: Array<any>;
skeletonLoading : boolean;
placeholder : boolean;
}>(), {
isBack: true,
bgColor: '#D33123',
bgColor: '#eef2f6',
titleColor: '#000',
mode: 'center',
title: '',
@@ -46,7 +47,8 @@
gap: '20rpx',
style: ['width: 200rpx;marginBottom: 50rpx;', 'height: 100rpx;', 'width: 500rpx;'],
}],
skeletonLoading: false
skeletonLoading: false,
placeholder: true,
});
</script>
<style lang="scss" scoped>

View File

@@ -1,6 +1,6 @@
<template>
<view class="layout-classify-page">
<uv-navbar bgColor="#fff">
<uv-navbar bgColor="#fff" :height="`${menuButtonHeight}px`">
<template #left>
<view class="search-box">
<image @click="hanlderBack" class="back" :src="handleStaticResources('/static/images/back.png')">
@@ -143,7 +143,7 @@
}
// 获取自定义导航栏高度
const { statusBarHeight } = useSystemInfo();
const { statusBarHeight ,menuButtonHeight} = useSystemInfo();
const state = reactive<{
searchKey : string;

View File

@@ -1,7 +1,6 @@
.layout-classify {
position: relative;
}
.big-classify {
display: flex;
align-items: center;

View File

@@ -226,7 +226,6 @@
nextTick(async () => {
state.bigClassifyH = ((await getDomInfo('.big-classify', instance.proxy)) as { height : number }).height;
setTimeout(async () => {
state.rightTabH = ((await getDomInfo('.right-tab-box', instance.proxy)) as { height : number }).height;
}, 100)

View File

@@ -60,8 +60,13 @@
width: 550rpx;
padding: 20rpx 0;
}
.right-data-list{
position: relative;
flex: 1;
}
.scroll-view {
position: absolute;
height: 100%;
padding: 0 20rpx 0;
width: calc(100% - 40rpx);

View File

@@ -13,43 +13,43 @@
<view class="right-tab-box">
<coreshop-tabs :list="state.rightTabList" @hanldeClickTab="hanldeChangeRightTab"></coreshop-tabs>
</view>
<scroll-view class="scroll-view" :style="{ 'height': `${props.height - 50}px` }" :scroll-y="true"
@scrolltolower="handleScrolltolower">
<view class="advert-box radius-15">
<coreshop-advert :code="advertPosition.goodsClassifyBanner"></coreshop-advert>
</view>
<view class="data-box" v-if="state.goodsList.length > 0">
<view class="item-box" v-for="item in state.goodsList" :key="item.id">
<coreshop-goods-card imgWidth="150rpx" imgHeight="150rpx"
:goodsData="hanldeCombinationGoodsData(item)" @hanldeClickGoods="hanldeClickGoods">
<template #goodPrice>
<view class="price-msg">
<view class="price-box">
<view class="price">
<text class="symbol"></text>
<text class="num">{{ item.price }}</text>
<view class="right-data-list">
<scroll-view class="scroll-view" :scroll-y="true" @scrolltolower="handleScrolltolower">
<view class="advert-box radius-15">
<coreshop-advert :code="advertPosition.goodsClassifyBanner"></coreshop-advert>
</view>
<view class="data-box" v-if="state.goodsList.length > 0">
<view class="item-box" v-for="item in state.goodsList" :key="item.id">
<coreshop-goods-card imgWidth="150rpx" imgHeight="150rpx"
:goodsData="hanldeCombinationGoodsData(item)" @hanldeClickGoods="hanldeClickGoods">
<template #goodPrice>
<view class="price-msg">
<view class="price-box">
<view class="price">
<text class="symbol"></text>
<text class="num">{{ item.price }}</text>
</view>
<view class="underlin-price">{{ item.mktprice }}</view>
</view>
<view class="btn" @click="handleSelectSku(item.id)">
<image class="img" :src="handleStaticResources('/static/images/cart.png')">
</image>
</view>
<view class="underlin-price">{{ item.mktprice }}</view>
</view>
<view class="btn" @click="handleSelectSku(item.id)">
<image class="img" :src="handleStaticResources('/static/images/cart.png')">
</image>
</view>
</view>
</template>
</coreshop-goods-card>
</template>
</coreshop-goods-card>
</view>
<view class="no-more">
<uv-divider :dashed="true"
:text="state.totalPages > state.page ? '下滑加载更多' : '没有更多了'"></uv-divider>
</view>
</view>
<view class="no-more">
<uv-divider :dashed="true"
:text="state.totalPages > state.page ? '下滑加载更多' : '没有更多了'"></uv-divider>
<view v-else>
<coreshop-empty></coreshop-empty>
</view>
</view>
<view v-else>
<coreshop-empty></coreshop-empty>
</view>
</scroll-view>
</scroll-view>
</view>
</view>
<view class="shopping-box">
<view class="shopping-Bag">
<view class="bag-box">
@@ -75,8 +75,7 @@
</template>
<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { onMounted, reactive, ref, watch, nextTick } from 'vue';
import { UserToken, advertPosition, onClassifyPageHide } from '@/core/consts';
import { queryGoodsPageList, queryCartNumAndMoney, queryGoodsDetailByToken, queryGoodsDetail, queryAddCart } from '@/core/api';
import type { CategoriesType, Response, GoodsListType, GoodsType } from '@/core/models';
@@ -147,7 +146,7 @@
}
})
onShow(() => {
onMounted(() => {
if (uni.getStorageSync(UserToken)) {
getCartNumAndMoney();
}

View File

@@ -4,6 +4,7 @@
display: flex;
align-items: center;
justify-content: space-between;
max-width: 500rpx;
.page-name {
font-size: 32rpx;
margin-right: 20rpx;

View File

@@ -1,7 +1,7 @@
<template>
<coreshop-page :isBack="false" bgColor="rgba(0,0,0,0)" :isShowStatusBarHeight="false" showLoginModalDom>
<view class="layout-classify-page">
<uv-navbar bgColor="#EEF3F7">
<uv-navbar bgColor="#EEF3F7" :height="menuButtonHeight+'px'">
<template #left>
<view class="search-box">
<view class="page-name">分类</view>
@@ -55,7 +55,7 @@
const shopConfigStore : ShopConfigStoreType = useShopConfigStore();
// 获取自定义导航栏高度
const { statusBarHeight, systemInfo } = useSystemInfo();
const { statusBarHeight, systemInfo, menuButtonHeight } = useSystemInfo();
const state = reactive<{
categoriesList : Array<CategoriesType>,
@@ -70,8 +70,8 @@
onMounted(async () => {
getAllCategories();
nextTick(() => {
// 屏幕总高度 - 顶部tab栏高度 - 顶部安全高度 - 底部安全高度 - 底部tabBar的默认高度50如果修改了配置高度这里也要同步修改
state.height = systemInfo.value.screenHeight - systemInfo.value.statusBarHeight - (systemInfo.value.system?.includes('iOS') ? 44 : 48) - systemInfo.value.safeAreaInsets?.bottom - 50;
// 屏幕总高度 - 顶部高度 - 底部安全高度 - 底部tabBar的默认高度50如果修改了配置高度这里也要同步修改
state.height = systemInfo.value.screenHeight - statusBarHeight.value - systemInfo.value.safeAreaInsets?.bottom - 50;
})
})

View File

@@ -8,7 +8,7 @@
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { handleShowToast, handleRouteNavigateTo } from '@/core/utils';
import { handleRouteNavigateTo } from '@/core/utils';
const props = withDefaults(defineProps<{
data : any,

View File

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

View File

@@ -1,5 +1,5 @@
<template>
<coreshop-page :isBack="false" bgColor="rgba(0,0,0,0)" :isShowStatusBarHeight="false" showLoginModalDom>
<coreshop-page :isBack="false" bgColor="rgba(0,0,0,0)" :isShowStatusBarHeight="false" showLoginModalDom>
<view class="layout-home-page page-bg">
<image class="home-bg" :src="handleStaticResources('/static/images/home-bg.jpg')"></image>
<uv-navbar :title="shopConfigStore.config?.shopName"

View File

@@ -1,17 +1,17 @@
.member-head{
.member-head {
position: relative;
.memeber-bg{
.memeber-bg {
display: block;
width: 100%;
height: 400rpx;
height: 600rpx;
}
}
.head-box {
position: absolute;
bottom: 0;
bottom: 12rpx;
left: 0;
width: 100%;
width: 100%;
.user-info {
display: flex;
align-items: center;

View File

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

View File

@@ -1,6 +1,6 @@
<template>
<coreshop-page bgColor="rgba(0,0,0,0)" :isShowStatusBarHeight="false" showLoginModalDom>
<view class="goods-detail" :style="{ 'margin-top': `-${statusBarHeight}px` }">
<coreshop-page bgColor="rgba(0,0,0,0)" :isShowStatusBarHeight="false" :placeholder="false" showLoginModalDom>
<view class="goods-detail">
<!-- 商品详情 -->
<GoodsDetail :goodsId="state.goodsDetailData?.id" :goodsDetailData="state.goodsDetailData"
:swiperBanner="state.swiperBanner" :spesDesc="state.spesDesc"

View File

@@ -1,6 +1,6 @@
<template>
<coreshop-page bgColor="rgba(0,0,0,0)" :isShowStatusBarHeight="false" showLoginModalDom>
<view class="goods-detail" :style="{ 'margin-top': `-${statusBarHeight}px` }">
<coreshop-page bgColor="rgba(0,0,0,0)" :isShowStatusBarHeight="false" :placeholder="false" showLoginModalDom>
<view class="goods-detail">
<!-- 商品详情 -->
<GoodsDetail :goodsId="state.goodsDetailData?.id" :goodsDetailData="state.goodsDetailData"
:swiperBanner="state.swiperBanner" :shareType="ShareEnum.pinTuan"
@@ -62,28 +62,28 @@
<!-- 商品sku弹框 -->
<GoodsDetailSkuPopup :showSku="state.showSku" :goodsDetailData="state.goodsDetailData"
:isShowAddCartBtn="false" :buyNowNowloading="loading" @handleChangePopup="handleChangePopup" @handleBuyNow="handleBuyNow"
:btnBuyTitlt="state.btnBuyTitlt">
:isShowAddCartBtn="false" :buyNowNowloading="loading" @handleChangePopup="handleChangePopup"
@handleBuyNow="handleBuyNow" :btnBuyTitlt="state.btnBuyTitlt">
</GoodsDetailSkuPopup>
</view>
</coreshop-page>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { onLoad ,onShareAppMessage,onShareTimeline} from '@dcloudio/uni-app';
import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
import { queryPinTuanGoodsDetail, queryCartNum, queryAddCart, queryOrderPinTuanTeamInfo } from '@/core/api';
import type { Response } from '@/core/models';
import { UserToken,shareUrl } from '@/core/consts'
import { UserToken, shareUrl } from '@/core/consts'
import { useCartStore, useLoginStore } from '@/core/store';
import { PaymentTypeEnum, ShareEnum,ShareClientEnum,ShareModelEnum } from '@/core/enum';
import { handleRouteNavigateTo, handleShowToast ,getShareUrl} from '@/core/utils';
import { PaymentTypeEnum, ShareEnum, ShareClientEnum, ShareModelEnum } from '@/core/enum';
import { handleRouteNavigateTo, handleShowToast, getShareUrl } from '@/core/utils';
import { deepClone } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
import GoodsDetail from '@/pages/components/goods-detail/index.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 GoodsDetailBottomTabbar from '@/pages/components/goods-detail/components/goods-detail-bottom-tabbar/goods-detail-bottom-tabbar.vue';
import { useLoadingFn,useSystemInfo } from '@/core/hooks';
import { useLoadingFn, useSystemInfo } from '@/core/hooks';
interface QueryParams {
id : number;
@@ -111,7 +111,7 @@
isSingleBuy : boolean;
btnBuyTitlt : string;
teamInfo : any;
shareUrl:string;
shareUrl : string;
}>({
id: 0,
goodsDetailData: {},
@@ -125,7 +125,7 @@
isSingleBuy: true,
btnBuyTitlt: "发起拼团",
teamInfo: {},
shareUrl:"",
shareUrl: "",
});
const loading = ref(false);

View File

@@ -1,6 +1,6 @@
<template>
<coreshop-page bgColor="rgba(0,0,0,0)" :isShowStatusBarHeight="false" showLoginModalDom>
<view class="goods-detail" :style="{ 'margin-top': `-${statusBarHeight}px` }">
<coreshop-page bgColor="rgba(0,0,0,0)" :isShowStatusBarHeight="false" :placeholder="false" showLoginModalDom>
<view class="goods-detail">
<!-- 商品详情 -->
<GoodsDetail :goodsId="state.goodsDetailData?.id" :goodsDetailData="state.goodsDetailData"
:swiperBanner="state.swiperBanner" :spesDesc="state.spesDesc"

View File

@@ -9,7 +9,7 @@
display: flex;
align-items: center;
justify-content: space-between;
z-index: 99;
.item {
position: relative;
width: 33.33%;

View File

@@ -11,7 +11,6 @@
display: flex;
align-items: center;
justify-content: space-between;
z-index: 99;
.collection {
display: flex;
align-items: center;

View File

@@ -11,7 +11,6 @@
display: flex;
align-items: center;
justify-content: space-between;
z-index: 99;
.collection,
.delete {
display: flex;

View File

@@ -1,5 +1,5 @@
<template>
<coreshop-page bgColor="rgba(0,0,0,0)" :isShowStatusBarHeight="false" showLoginModalDom>
<coreshop-page bgColor="rgba(0,0,0,0)" :isShowStatusBarHeight="false" :placeholder="false" showLoginModalDom>
<view class="layout-goods-detail">
<GoodsDetail :goodsId="state.goodsDetailData?.id" :goodsDetailData="state.goodsDetailData"
:swiperBanner="state.swiperBanner" :goodsDetailContent="state.goodsDetailContent"

View File

@@ -1,5 +1,5 @@
<template>
<coreshop-page title="门店列表" mode="left" bgColor="rgba(0,0,0,0)" :isShowStatusBarHeight="false">
<coreshop-page title="门店列表" mode="left" bgColor="rgba(0,0,0,0)" :placeholder="false" :isShowStatusBarHeight="false">
<view class="layout-store-box">
<view class="map-box">
<map style="width: 100%;height: 100%;" id="map" :scale="11" :enable-3D="true" :show-compass="true"