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)" class="foot-icon"
				: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" :style="{width: [39,41,32,120][index]+'rpx',height: [40,41,38,120][index]+'rpx'}"></image>
						<image :class="index == isIcon ? 'centerImg':'moImg'" v-else :src="itemi.iconPath" :style="{width: [39,41,32,120][index]+'rpx',height: [40,41,38,120][index]+'rpx'}"></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)" class="foot-title"
				: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:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg'
			},
			// 背景颜色
			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:0
			},
			// 默认的标题颜色
			colorMo:{
				type:String,
				default:'#999999'
			},
			// 选中的标题颜色
			colorActive:{
				type:String,
				default:'#000000'
			}
		},
        data() {
            return {
				isCustomerService:false,//是否存在客服 默认不存在客服
            };
        },
		mounted() {
			
		},
        methods:{
            choosefoot(index){
				if(index==0){
					uni.reLaunch({url:'/pages/tabbar/pagehome/pagehome'})
					return
				} else {
					if(uni.getStorageSync('phone_active')) {
						switch (index){
							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;
						}
					} else {
						uni.navigateTo({
							url:'/pages/login/login',
							animationType:'slide-in-bottom'
						})
					}
				}
            }
        }
    }
</script>

<style scoped>
	/* 外框样式 start */
	.foot-boxtwo{
		height: 120rpx;
		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;vertical-align: bottom;}
	/* 公共 end*/
	
	/* 图标-文字外框样式 start */
	.item-box{display: flex;justify-content: space-around;align-items: center;}
	.item-box .foot-icon,.item-box .foot-title{text-align: center;box-sizing: border-box;}
	/* 图标-文字外框样式 end */
	
	/* 突出的图标样式 start */
	.centerBox{display: flex;justify-content: center;align-items: center;vertical-align: bottom;}
	.centerBox-item{margin-top: -80rpx;vertical-align: bottom;margin-left: -50rpx;}
	.centerImg{width: 140rpx;height: 140rpx;vertical-align: bottom;}
	/* 突出的图标样式 end */
	
	.item-box .foot-title{padding-top: 16rpx;}
	.item-box .foot-title:last-child{text-align: left;padding-left: 40rpx;}
</style>