great_distribution/pages/main/index.vue

<template>
	<view class="main-content">
		<view>
			<indexBox v-if=" pageAction == 'index' " />
			<meBox v-if=" pageAction == 'me' " />
		</view>
		<view class="main-tabar">
			<view class="main-tabar-info">
				<view class="main-tabar-item" @click="clickTabbar('index')">
					<view>
						<image :src="pageAction=='index'?(staticUrl+'tabar/index_1.png'):(staticUrl+'tabar/index_0.png')"></image>
					</view>
					<text :style="{ color: pageAction=='index'? '#ED0000':'#595D60'  }">{{ '首页' }}</text>
				</view>
				<view class="main-tabar-item"> 
					<view>
						<image :src="pageAction=='me'?(staticUrl+'tabar/me_1.png'):(staticUrl+'tabar/me_0.png')"  @click="clickTabbar('me')"></image>
					</view>
					<text :style="{ color: pageAction=='me'? '#ED0000':'#595D60'  }">{{ '我的' }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import indexBox from "../index/index.vue"
	import meBox from "../me/index.vue"
	export default {
		components: {
			indexBox,
			meBox
		},
		data() {
			return {
				title: '主页',
				pageAction: 'index',
				staticUrl:this.$commonConfig.staticUrl,
			}
		},
		onLoad(e) {
			this.pageAction = e.router || 'index'
			// window.history.pushState(null, null, document.URL + '#1') //往浏览器历史中添加一次记录
			// window.onhashchange = (e) => {
			// 	console.log(e);
			// 	uni.showModal({
			// 		title: '提示',
			// 		content: '返回后此页面的操作将不作保留！',
			// 		cancelText: '确定返回',
			// 		confirmText: '留在此页',
			// 		success: (res) => {
			// 			if (res.confirm) {
			// 				window.history.pushState(null, null, document.URL + '#1')
			// 			} else if (res.cancel) {
			// 				window.history.back();
			// 				window.onhashchange = null //这里不取消监听那么上面的history.back（）也会触发一次uni.showModal，就会有两个弹窗
			// 			}
			// 		}
			// 	});
			// }
			
		},
		onUnload() {
			console.log("dsfasfasdf======")
			//window.removeEventListener("popstate", this.browserBack);
		},
		onShow() {
			
		},
		
		methods: {
			/**
			 * @author ygh
			 * @data 2023-12-19
			 * @param {Object} type
			 */
			clickTabbar(type){
				if( this.pageAction == type ) return
				this.pageAction = type
				//this.$u.route('/pages/main/index',{router:this.pageAction});
				uni.reLaunch({
					url: "/pages/main/index?router="+type
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main-content {
		width: 100%;
		height: 100%;
		position: relative;
	}
	
	/** tabar  */
	.main-tabar {
		width: 80vw;
		height: 100rpx;
		position: fixed;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
		box-sizing: border-box;
		.main-tabar-info {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: space-between;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(181,179,179,0.5);
			border-radius: 40rpx;
			.main-tabar-item {
				flex: 1;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				image {
					width: 50rpx;
					height: 50rpx;
				}
				text {
					font-size: 24rpx;
				}
			}
		}
	}
</style>