mall-applet1/components/foot-tabs/foot-tab.vue

<template>
	<view class="foot-box"
		:style="{
			background: isGradualChange ? `linear-gradient( to ${direction}, ${colorOne} 0%, ${colorTwo} 100%)` : `url(${backgroundImage}) ${backgroundColor} `,
			boxShadow: `-10rpx 0rpx 20rpx rgba( 0, 0, 0, ${boxShadowNum})`
		}">
		<!-- 后台动态改变的icon与标题 start -->
		<view @tap="choosefoot(index)" class="item-box" v-for="(item,index) in footList" :key="index">
			<view class="item-image-box disjcac" :class="current*1===index ? 'activeImg' : 'moImg'">
				<view class="item-spot disjcac fon24" v-if="index==2 && num*1">{{num}}</view>
				<image :class="isIcon==index ? 'bulge' : ''" :style="{width:[39,41,39,32][index]+'rpx',height:[40,41,38,38][index]+'rpx'}" :src="current == index ? item.selectedIconPath : item.iconPath" mode="widthFix"></image>
			</view>
			<view class="clips1 fon24" :class="current==index ? 'activeclass' : 'defaultclass'">{{item.title}}</view>
		</view>
		<!-- 后台动态改变的icon图 end -->
	</view>
</template>
<script>
    export default {
        name:'foot-tab',
		props:{
			// 当前选中项
			current:{
				type:String,
				default:'0'
			},
			// 点的数量
			num: {
				type:String,
				default:'10'
			},
			// 默认哪个图标突出
			isIcon:{
				type:String,
				default:'-1'
			},
			// 底部导航背景图片
			backgroundImage:{
				type:String,
				default:'http://img.netbian.com/file/2021/1212/232713y3bCy.jpg'
			},
			// 背景颜色
			backgroundColor:{
				type:String,
				default:'#FFFFFF'
			},
			// 是否开启背景颜色渐变
			isGradualChange:{
				type:Boolean,
				default:true
			},
			// 渐变方向
			direction:{
				type:String,
				default:'top'
			},
			// 第一种颜色
			colorOne:{
				type:String,
				default:'#ff3574'
			},
			// 第二种颜色
			colorTwo:{
				type:String,
				default:'#fd5745'
			},
			// 阴影大小0~1之间 0表示没有阴影
			boxShadowNum:{
				type:String,
				default:'0.1'
			},
		},
        data() {
            return {
				ifCustomerService:false,//是否存在客服 默认不存在客服
				footList:[
					{
						iconPath: "/static/tabbar/icon-home.png",
						selectedIconPath: "/static/tabbar/icon-home.png",
						title:'首页'
					},
					{
						iconPath: "/static/tabbar/icon-cate.png",
						selectedIconPath: "/static/tabbar/icon-cate.png",
						title:'分类'
					},
					{
						iconPath: "/static/tabbar/icon-cart.png",
						selectedIconPath: "/static/tabbar/icon-cart.png",
						title:'购物车'
					},
					{
						iconPath: "/static/tabbar/icon-my.png",
						selectedIconPath: "/static/tabbar/icon-my.png",
						title:'我的'
					}
				]
            };
        },
		mounted() {
			// 缓存状态栏+标题栏的高度
			const query = wx.createSelectorQuery().in(this)
			query.select('.foot-box').boundingClientRect((rect) => {
				this.$store.commit('footHeightEv',rect.height);
			}).exec()
		},
        methods:{
            choosefoot(index){
				if(index==0){
					uni.reLaunch({url:'/pages/tabbar/pagehome/pagehome'})
				} else {
					// if(!this.$toolAll.tools.judgeAuth()) {
						// 已授权
						switch (index){
							case 1:
							uni.reLaunch({url:'/pages/tabbar/cate/cate'})
								break;
							case 2:
							uni.reLaunch({url:'/pages/tabbar/cart/cart'})
								break;
							case 3:
							uni.reLaunch({url:'/pages/tabbar/my/my'})
								break;
						}
					// } else {
					// 	// 未授权
					// 	uni.navigateTo({
					// 		url:'/pages/login/login'
					// 	})
					// }
				}
            }
        }
    }
</script>

<style scoped>
	.clips1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
	/* 外框样式 start */
	.foot-box{
		height: 130rpx;
		font-size: 24rpx;
		position: fixed;bottom: 0;left: 0;right: 0;z-index: 10;
		display: flex;justify-content: space-around;
		background-repeat: no-repeat;background-size: 100% 100%;
	}
	/* 外框样式 end */
	.item-box {
		position: relative;
		display: flex;
		justify-content: flex-end;
		flex-direction: column;
		align-items: center;
		padding: 16rpx 10rpx;
		box-sizing: border-box;
		width: 100%;
	}
	.item-image-box{
		position: relative;
		width: 64rpx;
		height: 64rpx;
		border-radius: 30rpx;
	}
	.activeImg {
		background-color: #dd062f;
	}
	.moImg {
		background-color: transparent;
	}
	.item-box .clips1{
		margin-top: 10rpx;
		letter-spacing: 4rpx;
	}
	.item-spot {
		position: absolute;
		right: -14rpx;
		top: -4rpx;
		width: 34rpx;
		height: 34rpx;
		border-radius: 100%;
		background-color: #FFFFFF;
		color: #e4143b;
	}
	/* 字体默认样式 */
	.defaultclass {
		color: #FFFFFF;
	}
	/* 字体选中样式 */
	.activeclass {
		color: #FFFFFF;
	}
	/* 凸出样式 */
	.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>