flying-monkey/components/foot-tabs/foot-tab-one.vue

<template>
	<view class="foot-box"
		: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 -->
		<view @tap="choosefoot(index)" class="item-box" v-for="(item,index) in footList" :key="index">
			<image :class="isIcon==index ? 'bulge' : ''" :style="{width:[40,40,40,40,37][index]+'rpx',height:[40,40,40,40,40][index]+'rpx'}" :src="current == index ? item.selectedIconPath : item.iconPath" mode="widthFix"></image>
			<view class="clips1" :class="current==index ? 'activeclass' : 'defaultclass'">{{item.title}}</view>
		</view>
		<!-- 后台动态改变的icon图 end -->
	</view>
</template>
<script>
    export default {
        name:'foot-tab',
		props:{
			// 当前选中项
			current:{
				type:Number,
				default:0
			},
			// 默认哪个图标突出
			isIcon:{
				type:Number,
				default:2
			},
			// 底部导航背景图片
			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:'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.1
			},
		},
        data() {
            return {
				ifCustomerService:false,//是否存在客服 默认不存在客服
				footList:[
					{
						iconPath: "/static/tabbar/icon-mo-home.png",
						selectedIconPath: "/static/tabbar/icon-select-home.png",
						title:'首页'
					},
					{
						iconPath: "/static/tabbar/icon-mo-fun.png",
						selectedIconPath: "/static/tabbar/icon-select-fun.png",
						title:'项目列表'
					},
					{
						iconPath: "/static/tabbar/icon-scan.png",
						selectedIconPath: "/static/tabbar/icon-scan.png",
						title:'扫码报修'
					},
					{
						iconPath: "/static/tabbar/icon-mo-news.png",
						selectedIconPath: "/static/tabbar/icon-mo-news.png",
						title:'意见反馈'
					},
					{
						iconPath: "/static/tabbar/icon-mo-person.png",
						selectedIconPath: "/static/tabbar/icon-select-person.png",
						title:'我的'
					}
				]
            };
        },
		mounted() {
			
		},
        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/project-list/project-list'})
								break;
							case 2:
							// uni.reLaunch({url:'/pages/tabbar/project-list/project-list'})
								break;
							case 3:
							uni.reLaunch({url:'/pages/tabbar/feedback/feedback'})
								break;
							case 4:
							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: 110rpx;
		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%;
		height: 110rpx;
	}
	/* 图标样式 */
	.item-box image {
		width: 64rpx;
		height: 64rpx;
	}
	.item-box view{
		margin-top: 10rpx;
	}
	/* 字体默认样式 */
	.defaultclass {
		color: #999999;
	}
	/* 字体选中样式 */
	.activeclass {
		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>