yizhizan-h5/components/nav-bar/index.vue

<template>
	<view class="nav-bar" :style="{ paddingTop: 12 + BarHeight + 'px' }">
		<view class="go-back">
			<u-icon name="arrow-leftward" :color="color" size="32" @click="goBack"></u-icon>
		</view>
		<view class="nav-title" :style="{color:color}">
			{{ title }}
		</view>
		<view class="go-back">
			<slot name="right"></slot>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			title: "",
			color: '',
			backUrl: {
			    type: String,
			    default: ''
			}
		},
		data() {
			return {
				BarHeight: '',
			};
		},
		mounted() {
			// #ifdef APP-PLUS
			let systemInfo = uni.getSystemInfoSync();
			this.BarHeight = systemInfo.statusBarHeight;
			// #endif
		},
		methods:{
			goBack() {
				if (this.backUrl) {
					const isTabPage = [
						'/pages/index/index',
						'/pages/index/game/gameList',
						'/pages/msg/index',
						'/pages/my/index'
					].includes(this.backUrl)
					if (isTabPage) {
						uni.switchTab({
							url: this.backUrl
						})
					} else {
						uni.redirectTo({
							url: this.backUrl
						})
					}
				} else {
					uni.navigateBack()
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.nav-bar {
		width: 100%;
		padding: 24rpx 32rpx 20rpx 32rpx;
		box-sizing: border-box;
		color: rgba(255, 255, 255, 1);
		font-family: DM Sans;
		font-size: 30rpx;
		font-weight: 700;
		line-height: 26px;
		display: flex;
		// justify-content: center;
		align-items: center;
		position: relative;
		z-index: 9999;

		.go-back {
			width: 32.61px;
			height: 26px;
		}

		.nav-title {
			flex: 1;
			text-align: center;
		}
	}
</style>