zhywpt-sp/components/nav-bar/nav-bar2.vue

<template>
	<view class="nav-bar" :class="scrollTop>navHeight?navbgClass:''" :style="{height:navHeight+'px',color:fontColor}">
		<view class="title"
			:style="{paddingTop:searchMarginTop+'px',height:searchHeight+'px',lineHeight:searchHeight+'px'}">
			<block v-if="isBack && !isAlipay">
				<image :src="navbgClass=='nav-bg'?`/static/image/icon-back.png`:'/static/image/icon-back-white.png'" :style="{height:searchHeight+'px',width:searchHeight+'px'}"
					class="back" @click="back(title,type,userType,orderId)"></image>
			</block>
			<text>{{title}}</text>
		</view>
	</view>
	<view class="blank" :style="{height:navHeight+'px'}"></view>
</template>

<script setup lang="ts">
	import { msg } from "@/utils/utils";
	import {
		onMounted,
		ref
	} from "vue";
	const navHeight = ref(0)
	const searchMarginTop = ref(0)
	const searchHeight = ref(0)
	const searchWidth = ref(0)
	const isAlipay = ref(false)
	onMounted(() => {
		const type = uni.getSystemInfoSync().uniPlatform
		isAlipay.value = type === 'mp-alipay'

		const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		const {
			top,
			width,
			height,
			right
		} = menuButtonInfo
		uni.getSystemInfo({
			success: (res) => {
				const {
					statusBarHeight
				} = res
				const margin = top - statusBarHeight
				navHeight.value = (height + statusBarHeight + (margin * 2)) //导航栏总高
				searchMarginTop.value = statusBarHeight + margin // 状态栏 + 胶囊按钮边距
				searchHeight.value = height // 与胶囊按钮同高
				searchWidth.value = right - width // 胶囊按钮右边坐标 - 胶囊按钮宽度 = 按钮左边可使用宽度
			},
		})
	})

	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		orderId: {
			type: String,
			default: ''
		},
		type: {
			type: String,
			default: ''
		},
		userType: {
			type: String,
			default: ''
		},
		isBack: {
			type: Boolean,
			default: true
		},
		scrollTop: {
			type: Number,
			default: 0
		},
		navbgClass: {
			type: String,
			default: 'nav-bg'
		},
		fontColor: {
			type: String,
			default: '#000'
		},
	})
	const back = (title, type, userType, orderId) => {
		console.log("555555555", title, type, userType, orderId)
		if (title == "九州ETC" && type ) {
			console.log("九州ETC",type,userType)
			uni.navigateBack({
				delta:1
			})
			// uni.redirectTo({
			// 	url: `/subpackage/orders/choice-product?vanType=${type}&&userType=${userType}`
			// })
		} else if (  title == "加购权益产品"  ) {
			uni.showModal({
				content: '当前ETC正在办理中，中断后续可在订单管理中继续办理。',
				success: function (res) {
					if (res.confirm) {
						uni.switchTab({
							url: "/pages/index/index"
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		} else {
			uni.navigateBack({
				delta: 1
			})
		}
	}
</script>

<style scoped>
	.nav-bg {
		background: linear-gradient(to right, #13E7C1, #43A1E0);
	}
	.nav-bgXin {
		background: #01243A;
		color:#fff;
	}
	.blank {
		width: 100%;
		display: none;
	}

	.nav-bar {
		position: fixed;
		width: 100%;
		z-index: 999;

	}

	.nav-bar .title {
		text-align: center;
		width: 100%;
		font-size: 28rpx;
		font-weight: bold;
		position: relative;
	}

	.back {
		position: absolute;
		left: 10rpx;
	}
</style>