DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/tabbar/tabbar.vue

<template>
    <view class="tab">
         <view v-for="(item,index) in list" :key="index" class="tab-item" @click="switchTab(item, index)">
            <img class="tab_img" :src="selectedPath == item.pagePath ? item.selectedIconPath : item.iconPath"></img>
            <view class="tab_text" :style="{color: selectedPath == item.pagePath ? selectedColor : color}">{{item.text}}</view>
        </view>
    </view>
</template>
 
<script>
    export default {
		name:'tabBar',
        props: {
            selectedPath: { // 当前选中的tab index
                default: '/pages/home'
            },
        },
        data() {
            return {
                color: "#8c8c8c",
                selectedColor: "#3398DC",
                list: [],
                // currentIndex:0,
            }
        },
		watch: {
		  "$store.state.loginUser":{
		    handler:function(newVal,oldVal){
			  this.setList(newVal.Description)
		    }
		  }
		},
        created() {
			// let index = this.list.findIndex(e=>e.pagePath==this.selectedPath)
			// this.currentIndex = index;
			let userInfo = this.GET_GLOBAL("loginUser");
			if(!userInfo)return
			this.setList(userInfo.Description)
        },
        methods: {
			setList(role){
				if (role=="学生") {
				    this.list = [
						{
							"index":0,
							"pagePath": "/pages/home",
							"iconPath": "static/img-bar/tab-home.png",
							"selectedIconPath": "static/img-bar/tab-home-active.png",
							"text": "首页"
						},
						{
							"index":3,
							"pagePath": "/pages/my",
							"iconPath": "static/img-bar/tab-my.png",
							"selectedIconPath": "static/img-bar/tab-my-active.png",
							"text": "我的"
						}
				    ]
				}else{
				  this.list = [
					{
						"index":0,
						"pagePath": "/pages/home",
						"iconPath": "static/img-bar/tab-home.png",
						"selectedIconPath": "static/img-bar/tab-home-active.png",
						"text": "首页"
					},
					// {
					// 	"index":1,
					// 	"pagePath": "/pages/msg",
					// 	"iconPath": "static/img-bar/tab-msg.png",
					// 	"selectedIconPath": "static/img-bar/tab-msg-active.png",
					// 	"text": "消息"
					// },
					{
						"index":2,
						"pagePath": "/pages/contact",
						"iconPath": "static/img-bar/tab-contact.png",
						"selectedIconPath": "static/img-bar/tab-contact-active.png",
						"text": "通讯录"
					}, 
					{
						"index":3,
						"pagePath": "/pages/my",
						"iconPath": "static/img-bar/tab-my.png",
						"selectedIconPath": "static/img-bar/tab-my-active.png",
						"text": "我的"
					}
					  
				  ]
				}
			},
            switchTab(item, index) {
                // this.currentIndex = item.index;
                let url = item.pagePath;
				uni.switchTab({
					url: url
				});
            }
        }
    }
</script>
 
<style lang="scss">
    .tab {
		background: rgb(245, 245, 245);
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
		border-top: 2rpx solid #CDCDCD;
		z-index:999;
 
        .tab-item {
            flex: 1;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            .tab_img {
                width: 48rpx;
                height: 48rpx;
            }
            .tab_text {
                font-size: 20rpx;
                margin-top: 6rpx;
            }
        }
    }
</style>