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

<template>
	<view class="nav-bar" :class="scrollTop>navHeight?'nav-bg':''" :style="{height:navHeight+'px'}">
		<view class="title"
			:style="{paddingTop:searchMarginTop+'px',height:searchHeight+'px',lineHeight:searchHeight+'px'}">
			<block v-if="isBack && !isAlipay">
				<image :src="`/static/image/icon-back.png`" :style="{height:searchHeight+'px',width:searchHeight+'px'}"
					class="back" @click="back(title,type)"></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: ''
		},
		type: {
			type: String,
			default: ''
		},
		isBack: {
			type: Boolean,
			default: true
		},
		scrollTop: {
			type: Number,
			default: 0
		}
	})
	const back = (title, type) => {
		console.log("555555555", title, type)
		if (title == "九州ETC" && type) {
			uni.redirectTo({
				url: `/subpackage/orders/choice-product?type=${type}`
			})
		} else if (title == "ETC开户新办申请-个人" || title == "ETC开户新办申请-单位" || title == "行驶证信息上传" || title == "微信车主服务" || title == "加购权益产品" || title == "产品详情" || title == "支付账户签约") {
			uni.showModal({
				content: '当前ETC正在办理中，中断后续可在订单管理中继续办理。',
				success: function (res) {
					if (res.confirm) {
						uni.switchTab({
							url: "/pages/order/order"
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		} else {
			uni.navigateBack({
				delta: 1
			})
		}
	}
</script>

<style scoped>
	.nav-bg {
		background: linear-gradient(to right, #13E7C1, #43A1E0);
	}

	.blank {
		width: 100%;
		display: none;
	}

	.nav-bar {
		/* background: linear-gradient(to left, #43A1E0 0%, #13E7C1 100%); */
		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>