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="staticUrl+'/img/tabbar-home.png'"></image>
					</view>
					<text>{{ '首页' }}</text>
				</view>
				<view class="main-tabar-item"> 
					<view>
						<image :src="staticUrl+'/img/tabbar-my.png'"  @click="clickTabbar('me')"></image>
					</view>
					<text>{{ '我的' }}</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:'https://miniores.hw.hongweisoft.com/greattransition/staticfile',
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.pageAction = uni.getStorageSync('page_action') || 'index'
			console.log('this.pageAction===',uni.getStorageSync('page_action'),this.pageAction)
		},
		methods: {
			/**
			 * @author ygh
			 * @data 2023-12-19
			 * @param {Object} type
			 */
			clickTabbar(type){
				this.pageAction = type
				uni.setStorageSync('page_action',this.pageAction)
				
			}
		}
	}
</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;
			box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px 0px;
			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>