luban-mall/components/foot-tab/foot-tab.vue

<template>
	<view class="foot-box">
		<view class="item-box" @tap="chooseFootTab(index)" v-for="(item,index) in footBarList" :key="index">
			<view class="item-icon flex" :class="current*1===index ? 'active' : ''">
				<image :style="{width:[38,40,38,37,40][index]+'rpx',height:[39,40,38,39,40][index]+'rpx'}" :src="item.iconPath" mode="widthFix"></image>
			</view>
			<view class="foot-title" :class="current==index ? 'active' : ''">{{item.title}}</view>
		</view>
	</view>
</template>
<script>
    export default {
        name:'foot-tab',
		props:{
			// 当前选中项
			current:{
				type:String,
				default:'0'
			},
			// 默认哪个图标突出
			isIcon:{
				type:String,
				default:'-1'
			},
		},
        data() {
            return {
				ifCustomerService:true,//是否存在客服 默认不存在客服
				footBarList:[], //底部列表
            };
        },
		mounted() {
			// 缓存状态栏+标题栏的高度
			const query = wx.createSelectorQuery().in(this)
			query.select('.foot-box').boundingClientRect((rect) => {
				this.$store.commit('footHeightEv',rect.height);
			}).exec()
			// 获取底部信息
			this.getTabbarList();
		},
        methods:{
			// 获取底部信息
			getTabbarList(){
				this.$requst.get('/api/index/tarbar').then(res=>{
					if(res.code == 0){
						console.log(res,'底部信息')
						let tabbarArr = [];
						res.data.footBar.forEach(item=>{
							let obj = {
								iconPath:this.$hostHttp+item.icon,
								title:item.name,
							}
							tabbarArr.push(obj)
						})
						this.footBarList = tabbarArr;
					}
				})
			},
			// 跳转
            chooseFootTab(index){
				if(index==0){
					uni.reLaunch({url:'/pages/tabbar/index/index'})
				}else if(index==1){
				 	uni.reLaunch({url:'/pages/tabbar/cate/cate'})
				}else if(index==2){
				 	uni.reLaunch({url:'/pages/tabbar/kit/kit'})
				}else if(index==3){
				 	uni.reLaunch({url:'/pages/tabbar/news/news'})
				}else {
					if(this.$toolAll.tools.judgeAuth()) {
						// 已授权
						switch (index){
							case 4:
							uni.reLaunch({url:'/pages/tabbar/my/my'})
								break;
						}
					}
				}
            }
        }
    }
</script>

<style scoped>
	/* 外框样式 start */
	.foot-box{
		display: flex;
		justify-content: space-around;
		height: 130rpx;
		font-size: 24rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10;
		
	}
	/* 外框样式 end */
	.item-box {
		display: flex;
		justify-content: flex-end;
		flex-direction: column;
		align-items: center;
		padding: 16rpx 10rpx;
		width: 100%;
	}
	.item-icon{
		justify-content: center;
		align-items: center;
		width: 65rpx;
		height: 60rpx;
		border-radius: 10rpx;
	}
	.item-icon.active {
		background-color: #0073bc;
	}
	.item-icon.active image{
		-webkit-filter: brightness(1000%);
		-moz-filter: brightness(1000%);
		-ms-filter: brightness(1000%);
		-o-filter: brightness(1000%);
		filter: brightness(1000%); 
	}
	.foot-title{
		margin-top: 10rpx;
		letter-spacing: 4rpx;
		font-size: 24rpx;
		color: #999999;
	}
	.foot-title.active{
		color: #000000;
	}
	/* 凸出样式 */
	.bulge {
		position: absolute;
		top: -30rpx;
		width: 80rpx!important;
		height: 80rpx!important;
		border: 8rpx solid #FFFFFF;
		border-radius: 100%;
		vertical-align: middle;
		box-shadow: 0rpx -3rpx 6rpx rgba(0,0,0,.1);
		background-color: #FFFFFF;
	}
</style>