计算购物车钱之前

components/CustomNavbar.vue

@@ -33,19 +33,22 @@
 		reactive,
 		watch,
 		onMounted,
-		computed
+		computed,
+		toRefs
 	} from 'vue';
 
 	const store = useNavbarStore();
 	const {
 		showBack,
 		rightText,
+		showSearch,
+		title,
 		isTransparent,
 		height,
-		hasPlaceholder
-	} = store;
-	const showSearch = computed(() => store.showSearch);
-	const title = computed(() => store.title);
+		hasPlaceholder,
+		scrollTop
+	} = toRefs(store);
+
 	const keyword = ref()
 
 	const goBack = () => {
@@ -60,7 +63,7 @@
 
 	const navbarStyle = computed(() => {
 		return {
-			height: `${height}px`,
+			// height: `${height}px`,
 			backgroundColor: store.scrollTop >= 44 ? '#fff' : 'transparent'
 		};
 	});
@@ -70,21 +73,21 @@
 		towStyle: {}
 	});
 	onMounted(() => {
-		// #ifdef MP-WEIXIN
+		// #ifdef MP-WEIXIN || MP-ALIPAY
 		const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
 		const systemInfo = uni.getSystemInfoSync();
 		const statusBarHeight = systemInfo.statusBarHeight;
-		console.log(menuButtonInfo)
 		// 计算标题的垂直偏移量
+		const verticalOffset = menuButtonInfo.top;
 		// const verticalOffset = menuButtonInfo.top - statusBarHeight;
-		const verticalOffset = menuButtonInfo.top > menuButtonInfo.height ? menuButtonInfo.height : Math.abs(
-			menuButtonInfo.top - menuButtonInfo.height)
+		// const verticalOffset = menuButtonInfo.top > menuButtonInfo.height ? menuButtonInfo.height : Math.abs(
+		// 	menuButtonInfo.top - menuButtonInfo.height)
 		const titleHeight = menuButtonInfo.height;
 		centerContentStyle.oneStyle = {
 			paddingTop: `${verticalOffset}px`,
 			paddingRight: `${menuButtonInfo.width +20}px`,
 			// paddingTeft: `${menuButtonInfo.width +20}px`,
-			height: `${height}px`,
+			// height: `${height}px`,
 			boxSizing: 'border-box',
 		};
 		centerContentStyle.towStyle = {

components/indexnav.vue

@@ -29,16 +29,16 @@
 </template>
 
 <script setup>
-	import {
-		useNavbarStore
-	} from '@/stores/navbarStore';
 	import {
 		ref,
 		watch,
 		onMounted,
-		computed
+		computed,
+		toRefs
 	} from 'vue';
-
+	import {
+		useNavbarStore
+	} from '@/stores/navbarStore';
 	const store = useNavbarStore();
 	const {
 		showBack,
@@ -49,7 +49,7 @@
 		height,
 		hasPlaceholder,
 		scrollTop
-	} = store;
+	} = toRefs(store);
 
 	const keyword = ref()
 
@@ -62,30 +62,30 @@
 	const onRightTextClick = () => {
 		console.log('右边文字被点击');
 	};
-
 	const navbarStyle = computed(() => {
 		return {
-			height: `${height}px`,
-			backgroundColor: store.scrollTop >= 44 ? '#F9F9F9' : 'transparent'
+			// height: `${height.value}px`,
+			backgroundColor: scrollTop.value >= 44 ? '#F9F9F9' : 'transparent'
 		};
 	});
 	// 小程序单独胶囊的样式
 	const centerContentStyle = ref({});
 	onMounted(() => {
-		// #ifdef MP-WEIXIN
+		// #ifdef MP-WEIXIN || MP-ALIPAY
 		const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
 		const systemInfo = uni.getSystemInfoSync();
 		const statusBarHeight = systemInfo.statusBarHeight;
 		// 计算标题的垂直偏移量
+		const verticalOffset = menuButtonInfo.top;
 		// const verticalOffset = menuButtonInfo.top - statusBarHeight;
-		const verticalOffset = menuButtonInfo.top > menuButtonInfo.height ? menuButtonInfo.height : Math.abs(
-			menuButtonInfo.top - menuButtonInfo.height)
+		// const verticalOffset = menuButtonInfo.top > menuButtonInfo.height ? menuButtonInfo.height : Math.abs(
+		// 	menuButtonInfo.top - menuButtonInfo.height)
 		const titleHeight = menuButtonInfo.height;
 		centerContentStyle.value = {
 			paddingTop: `${verticalOffset}px`,
 			paddingRight: `${menuButtonInfo.width +20}px`,
-			height: `${height}px`,
-			lineHeight: `${height}px`,
+			// height: `${height.value}px`,
+			// lineHeight: `${height.value}px`,
 			boxSizing: 'border-box',
 		};
 		// #endif