doumu-pottery-ui/components/footer/footer.vue

<template>
	<view>
		
	
	<view style="height: 100rpx;"></view>
    <view class="com_footer">
		<block v-for="(item,k) in footlist" :key="k" >
			<view class="in_item" v-if="(item.limit&&checkPermi([item.limit]))||!item.limit" @click="gotopage(item)">
				<view class="in_imgs">
					<image  :class="item.imgtype"  v-if="active == item.module" :src="item.icon_checked" mode="scaleToFill"></image>
					<image :class="item.imgtype" v-else :src="item.icon_nochecked" mode="scaleToFill"></image>
				</view>
				<view class="in_txt" v-if="active == item.module" :style="'color: #'+color_checked">{{item.title}}</view>
				<view class="in_txt" v-else :style="'color: #'+color_nochecked">{{item.title}}</view>
			</view>
		</block>
        
    </view>
	</view>
</template>

<script>
	// import api from '../../api/api.js'
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
    export default {
		props:[
			'footlist',
			'footerindex',
			'color_checked',
			'color_nochecked',
			'isHomeIndex'
		],
        data () {
            return{
				active :'',
            }
        },
		mounted() {
			var that = this;
			this.active = this.footerindex;
		},
        methods:{
			checkPermi,checkRole,
            // 跳转底部导航页面
			gotopage(e){
				var that = this;
				let link = e.link, module = e.module, def = e.default, title = e.title;
				if(module == 'home'){
					this.$tab.reLaunch('/pages/index')
				}else if(module == 'mine'){
					this.$tab.reLaunch('/pages/mine/index')
				}else if(module == 'news'){
					this.$tab.reLaunch('/pages/news/index')
				}
			},
			
        }
    }
</script>



<style lang="scss" scoped>
    .com_footer{ display: flex;position: fixed;box-sizing: border-box;z-index: 99;width: 100%;height: 100rpx;bottom: 0;left: 0;background-color: #fff;overflow: hidden;box-shadow: 0px 0px 16rpx 0px rgba(87,87,87,0.41);
		.in_item{ display: block;flex: 1;padding: 12rpx 0 0 0;overflow: hidden; }
		.in_imgs{ display: block;width: 48rpx;height: 48rpx;margin: 0 auto; display: flex;align-items: center;justify-content: center;
			.img1{width: 32rpx;height: 46rpx;}
			.img2{width: 36rpx;height: 38rpx;}
			.img3{width: 40rpx;height: 48rpx;}
		
		}
		.in_txt{ font-size: 22rpx;color: #999;text-align: center; font-weight: bold;}
		.in_txt_on{ color: #20AD20; }
	}
</style>