alhj/componet/tabbar/tabbar.vue

<template>
	<view class="wh100 fixed" :style="{'padding-bottom':wagesheight+'rpx'}">
		<view class="tabbar-box">
			<view class="item" @tap="goPage('/pages/index/index','home')">
				<view class="icon-box">
					<image src="/static/icon/home.png" mode="aspectFit" v-if="checked!=='home'"></image>
					<image src="/static/icon/achome.png" mode="aspectFit" v-if="checked=='home'"></image>
				</view>
				<text :class="checked=='home' ? 'active' : 'nomal'">合同列表</text>
			</view>
			<view class="item" @tap="goPage('/pages/acceptor/acceptor','acceptor')" v-if="state==0">
				<view class="icon-box">
					<image src="/static/icon/per.png" mode="aspectFit" v-if="checked!='acceptor'"></image>
					<image src="/static/icon/out.png" mode="aspectFit" v-if="checked=='acceptor'"></image>
				</view>
				<text :class="checked=='acceptor' ? 'active' : 'nomal'">承兑人</text>
			</view>
			<view class="item" @tap="goPage('/pages/drawer/drawer','drawer')" v-if="state==0">
				<view class="icon-box">
					<image src="/static/icon/acsip.png" mode="aspectFit" v-if="checked!='drawer'"></image>
					<image src="/static/icon/biao.png" mode="aspectFit" v-if="checked=='drawer'"></image>
				</view>
				<text :class="checked=='drawer' ? 'active' : 'nomal'">出票人</text>
			</view>
			<view class="item" @tap="goPage('/pages/supplier/supplier','supplier')" v-if="state==0">
				<view class="icon-box">
					<image src="/static/icon/acsup.png" mode="aspectFit" v-if="checked!='supplier'"></image>
					<image src="/static/icon/sup.png" mode="aspectFit" v-if="checked=='supplier'"></image>
				</view>
				<text :class="checked=='supplier' ? 'active' : 'nomal'">供应商</text>
			</view>
			<view class="iconas" @tap="goContract('/pages/alldeatil/upcontract','upcontract')" v-if="state==1" >
				<view class="plusicon" :style="{'bottom':wagesheight+'rpx'}">
					
					
				</view>
			</view>

			<view class="item" @tap="goPage('/pages/mine/mine','my')">
				<view class="icon-box2">
					<image src="/static/icon/my.png" mode="aspectFit" v-if="checked!='my'"></image>
					<image src="/static/icon/acmy.png" mode="aspectFit" v-if="checked=='my'"></image>
				</view>
				<text :class="checked=='my' ? 'active' : 'nomal'">我的</text>
			</view>
		</view>
	</view>
</template>

<script>
	let that
	export default {
		name: 'tabbar',
		data() {
			return {
				state: 0,
				wagesheight:''
			};
		},
		props: {
			checked: {
				type: String,
				default: 'home'
			}
		},
		mounted() {
			that=this
			that.state=that.$store.state.admin
			console.log(that.state,888)
			uni.getSystemInfo({
				success: function(res) {
					let bottom= res.safeArea.bottom
					let height= res.safeArea.height
					let cacl=bottom-height
					that.wagesheight =cacl
				}
			})


		},
		methods: {
			goContract(url, tab) {
				if (this.checked == tab) return;
				uni.navigateTo({
					url: url,
					animationType: 'slide-out-right',
				})
			},
			goPage(url, tab) {
				if (this.checked == tab) return;
				uni.reLaunch({
					url: url,
					animationType: 'slide-out-right',
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.status_height {
		padding-bottom: 80rpx;
		// padding-bottom: env(safe-area-inset-bottom);
		width: 100%;
	}

	.wh100 {
		width: 100%;
		height: 50px;
		// padding-bottom:44rpx;
		background-color: #fff;
		// margin-bottom: 80rpx;
		// background: url("@/static/img/tababr.png");
		background-size: 100%;
		// box-shadow: 0px -2px 10rpx 0px rgba(181, 181, 181, 0.5);
	}

	.fixed {
		position: fixed;
		z-index: 999;
		bottom: 0;
	}

	.tabbar-box {
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #fff;
		border-top: solid 1px #f5f5f5;
		
		.item {
			flex: 1;
			font-size: 12px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 100%;
			text-align: center;

			.icon-box {
				width: 24px;
				height: 24px;
				
				image {
					width: 100%;
					height: 100%;
				}
			}

			.icon-box2 {
				width: 20px;
				height: 20px;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.active {
				font-weight: bold;
				color: $theme-color;
			}

			.nomal {
				font-weight: 500;
				color: #393939;
			}
		}

		.jy {
			// margin-bottom: 20px;
			.icon-box {
				width: 40px;
				height: 40px;
				// background: #fff;
				border-radius: 50%;
				line-height: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 8rpx;
				box-sizing: border-box;
				// box-shadow: 0px -2px 10rpx 0px rgba(181, 181, 181, 0.5);
				// box-shadow: 0px -2px 20px 0px rgba(181, 181, 181, 0.5);

				image {
					width: 40px;
					height: 40px;
				}
			}

		}
	}
	.iconas{
		width: 180rpx;
	}
	.plusicon{
		position: fixed;
		left: 0;
		right: 0;
		margin: 0 auto;
		bottom:-20rpx;
		width: 150rpx;
		height: 150rpx;
		background: url("@/static/img/plusicon.png") no-repeat;
		background-size: 100%;
	}
	
</style>