com.kailaimei.carbon/components/tabbar/tabbar.vue

<template>
	<view class="nav-btns">
		<view class="btn" :class="current==index?'active':''" @tap="toPage(index)" v-for="(item,index) in navList" :key="index">
			<image :src="`/static/icon-tabbar-0${index+1}.png`" mode="heightFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tabbar",
		props:{
			// 当前选中项
			current:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				navList:['/pages/count/count','/pages/assess/assess','/pages/eliminate/eliminate']
			};
		},
		methods: {
			//跳转
			toPage(index) {
				switch (index){
					case 0:
						uni.navigateTo({
							url: this.navList[index]
						})
						break;
					case 1:
						if (uni.getStorageSync('subTotal')) {
							uni.navigateTo({
								url: this.navList[index]
							})
						} else {
							uni.showToast({
								title: '请先计算碳足迹',
								icon: 'none',
								duration: 2000
							})
						}
						break;
					case 2:
						if (uni.getStorageSync('average')) {
							uni.navigateTo({
								url: this.navList[index]
							})
						} else {
							uni.showToast({
								title: '请先评估碳足迹',
								icon: 'none',
								duration: 2000
							})
						}
						break;
				}
			}
		}
	}
</script>

<style scoped>
	/* 切换按钮 */
	.calculator .nav-btns{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-top: 46px;
		position: relative;
		z-index: 2;
	}
	.calculator .nav-btns .btn{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 271px;
		height: 73px;
		background-image: url('/static/icon-tabbar.png');
		background-size: cover;
	}
	.calculator .nav-btns .btn.active{
		background-image: url('/static/icon-tabbar-active.png');
	}
	.calculator .nav-btns .btn image{
		height: 27px;
		margin-top: 9px;
	}
</style>