perry-mall/components/foot-tab.vue

<template>
    <view>
		<view class="foot-boxtwo"
			:style="{
				background: isGradualChange ? `linear-gradient( to ${direction}, ${colorOne} 0%, ${colorTwo} 20%, ${colorThree} 80%, ${colorFour} 100%)` : `url(${backgroundImage}) ${backgroundColor} `,
				boxShadow: `-10rpx 0rpx 20rpx rgba( 0, 0, 0, ${boxShadowNum})`
			}">
			<!-- 后台动态改变的icon与标题 start -->
			<!-- tab-图标列表 -->
			<view class="item-box" :style="{marginBottom: marginBottomNum +'px'}">
				<view @tap="choosefoot(index)" 
				:style="{width: 100 / imgList.length +'%'}"
				:class="index == isIcon ? 'centerBox' : ''"
				v-for="(itemi,index) in imgList" :key="index">
					<view class="posir" :class="index == isIcon ? 'centerBox-item':''">
						<image :class="index == isIcon ? 'centerImg':'moImg'" v-if="newcurrent == index" :src="itemi.selectedIconPath"></image>
						<image :class="index == isIcon ? 'centerImg':'moImg'" v-else :src="itemi.iconPath"></image>
						<button v-if="index == isIcon && isCustomerService" class="fon24 posia" style="opacity: 0;top: 0;left: 0;right: 0;bottom: 0;" open-type="contact">客服</button>
					</view>
				</view>
			</view>
			<!-- tab-标题列表 -->
			<view class="item-box">
				<view @tap="choosefoot(index)" 
				:style="{width:100 / imgList.length +'%', color:newcurrent == index ? colorActive : colorMo}"
				 v-for="(itemt,index) in titleList" :key="index">{{itemt}}</view>
			</view>
			<!-- 后台动态改变的icon图 end -->
		</view>
    </view>
</template>
<script>
    export default {
        name:'foot-tab',
		props:{
			// 当前选中项
			newcurrent:{
				type:Number,
				default:0
			},
			// 标题内容
			titleList:{
				type:Array,
				default:function(){
					return uni.getStorageSync('footTitle')
				}
			},
			// icon图标
			imgList:{
				type:Array,
				default:function(){
					return uni.getStorageSync('imgList');
				}
			},
			// 默认哪个图标突出
			isIcon:{
				type:Number,
				default:3
			},
			// 底部导航背景图片
			backgroundImage:{
				type:String,
				default:'/static/public/member-head.png'
			},
			// 背景颜色
			backgroundColor:{
				type:String,
				default:'#FFFFFF'
			},
			// 是否开启背景颜色渐变
			isGradualChange:{
				type:Boolean,
				default:true
			},
			// 渐变方向
			direction:{
				type:String,
				default:'right top'
			},
			// 第一种颜色
			colorOne:{
				type:String,
				default:'#FFFFFF'
			},
			// 第二种颜色
			colorTwo:{
				type:String,
				default:'#FFFFFF'
			},
			// 第三种颜色
			colorThree:{
				type:String,
				default:'#FFFFFF'
			},
			// 第四种颜色
			colorFour:{
				type:String,
				default:'#FFFFFF'
			},
			// 阴影大小0~1之间 0表示没有阴影
			boxShadowNum:{
				type:Number,
				default:0
			},
			// 图标与文字的间距
			marginBottomNum:{
				type:Number,
				default:4
			},
			// 默认的标题颜色
			colorMo:{
				type:String,
				default:'#999999'
			},
			// 选中的标题颜色
			colorActive:{
				type:String,
				default:'#000000'
			}
		},
        data() {
            return {
				isCustomerService:false,//是否存在客服 默认不存在客服
            };
        },
		mounted() {
			
		},
        methods:{
            choosefoot(index){
				switch (index){
					case 0:
					uni.reLaunch({url:'/pages/tabbar/pagehome/pagehome'})
						break;
					case 1:
					uni.reLaunch({url:'/pages/tabbar/cate/cate'})
						break;
					case 2:
					uni.reLaunch({url:'/pages/tabbar/my/my'})
						break;
					case 3:
					uni.reLaunch({url:'/pages/tabbar/cart/cart'})
						break;
				}
            }
        }
    }
</script>

<style>
	/* 外框样式 start */
	.foot-boxtwo{
		height: 140rpx;
		font-size: 24rpx;
		position: fixed;bottom: 0;left: 0;right: 0;z-index: 10;
		display: flex;flex-direction: column;justify-content: center;
		background-repeat: no-repeat;background-size: 100% 100%;
	}
	/* 外框样式 end */
	
	/* 公共 start*/
	.moImg{width: 64rpx;height: 64rpx;}
	/* 公共 end*/
	
	/* 图标-文字外框样式 start */
	.item-box{display: flex;justify-content: space-around;align-items: center;}
	.item-box>view{text-align: center;}
	/* 图标-文字外框样式 end */
	
	/* 突出的图标样式 start */
	.centerBox{display: flex;justify-content: center;align-items: center;}
	.centerBox-item{margin-top: -80rpx;}
	.centerImg{width: 140rpx;height: 140rpx;}
	/* 突出的图标样式 end */
</style>