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

<template>
	<view class="nav-bar" :style="{ paddingTop: 12 + BarHeight + 'px' }">
		<view class="go-back">
			<slot name="left">
				<u-icon name="arrow-left" :color="color" size="32" @click="goBack" v-if="isBack"></u-icon>
			</slot>
		</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: {
			type: String,
			default: 'rgba(51, 51, 51, 1)'
		},
		backUrl: {
			type: String,
			default: ''
		},
		goMy: {
			type: String,
			default: ''
		},
		isBack: {
			type: Boolean,
			default: true  // 这里默认是 true
		},
	},
	data() {
		return {
			BarHeight: '',
		};
	},
	mounted() {
		// #ifdef APP-PLUS
		let systemInfo = uni.getSystemInfoSync();
		this.BarHeight = systemInfo.statusBarHeight;
		// #endif
	},
	methods: {
		goBack() {
			if (this.goMy) {
				uni.switchTab({
					url: this.goMy
				})
				return;
			}
			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
					})
				}
				console.log(
					'我进第一个了'
				)
			} else {
				console.log('我进eles')
				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: 32rpx;
	font-weight: 400;
	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>