SxsnWechat/components/CusHeader/index.vue

<template>
	<u-navbar :title="title" :bgColor="bgColor" :titleStyle="titleStyle">
		<view class="u-nav-slot" slot="left" style="display: flex;background-color: transparent;">
			<u-icon v-if="showback" name="arrow-left" size="44" :color="leftIconColor" @tap="toBack(backUrl)"></u-icon>
		</view>
	</u-navbar>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 定义组件属性
const props = defineProps({
	title: {
		type: String,
		default: ''
	},
	showback: {
		type: Boolean,
		default: true
	},
	backUrl: {
		type: String,
		default: ''
	},
	bgColor: {
		type: String,
		default: '#ffffff'
	},
	leftIconColor: {
		type: String,
		default: '#111111'
	},
	titleStyle: {
		type: Object,
		default: () => ({
			fontSize: '36rpx',
			fontWeight: 'bold',
			color: '#111111'
		})
	},
	backAlert: {
		type: Boolean,
		default: false
	}
})

// 定义组件状态
const tabUrls = ref([
	'/pages/home',
	'/pages/nonprofit',
	'/pages/my'
])

// 导出方法供模板使用
const toBack = (url: string) => {
	if (props.backAlert) {
		
	} else {
		dealBack(url)
	}
}

const dealBack = (url: string) => {
	if (!url) {
		if (uni.getStorageSync('options')) {
			const options = JSON.parse(decodeURIComponent(uni.getStorageSync('options')))
			uni.redirectTo(options)
			uni.removeStorageSync('options')
			return
		}
		const pages = getCurrentPages()
		if (pages && pages.length > 1) {
			uni.navigateBack()
		} else {
			uni.reLaunch({ url: '/pages/home' })
		}
	} else {
		if (tabUrls.value.find(u => u === url)) {
			uni.reLaunch({ url })
		} else {
			uni.redirectTo({ url })
		}
	}
}
</script>

<style lang="scss" scoped>
	.u-navbar--fixed {
		z-index: 99999 !important;
	}
</style>