NN2022060801/addons/utcapp/components/tabbar.vue

<template>
	<view class="tabbar">
		<view v-for="(item,index) in list" :key="index" class="items" @click="changeMethods(item.pagePath,index)">
			<u-image class="icon" width="56rpx" height="56rpx"
				:src="item.id == currentIndex ? item.selectedIconPath :item.iconPath" style="margin: auto;"></u-image>
			<view :class="{'actives':item.id== currentIndex}">{{item.text}}</view>
		</view>
	</view>
</template>

<script>
	/* 
	 * 自定义底部导航栏
	 */
	export default {
		name: "tabbar",
		props: ['currentIndex'],
		data() {
			return {
				list: [{
						pagePath: "/pages/index/index",
						iconPath: "/static/icons/home.png",
						selectedIconPath: "/static/icons/home_active.png",
						text: this.lang.home,
						id: '1'
					},
					{
						pagePath: "/pages/trade/index",
						iconPath: "/static/icons/switch.png",
						selectedIconPath: "/static/icons/switch_active.png",
						text: this.lang.trade,
						id: '2'
					},
					{
						pagePath: "/pages/center/capital",
						iconPath: "/static/icons/capital.png",
						selectedIconPath: "/static/icons/capital_active.png",
						text: this.lang.capital,
						id: '3'
					}
				],
				list2: [{
						pagePath: "/pages/index/index",
						iconPath: "/static/icons/home.png",
						selectedIconPath: "/static/icons/home_active.png",
						text: this.lang.home,
						id: '1'
					},
					{
						pagePath: "/pages/center/capital",
						iconPath: "/static/icons/capital.png",
						selectedIconPath: "/static/icons/capital_active.png",
						text: this.lang.capital,
						id: '3'
					},
					{
						pagePath: "/pages/trade/advert",
						iconPath: "/static/icons/advert.png",
						selectedIconPath: "/static/icons/advert_active.png",
						text: this.lang.advert,
						id: '4'
					}
				],
			};
		},
		created() {
			let user_type = uni.getStorageSync('otc.user_type')
			user_type = typeof(user_type) != 'undefined' ? user_type : 1;
			user_type = user_type > 0 ? user_type : 1;
			console.log(user_type)
			if (user_type != 1) {
				this.list = this.list2
				this.$forceUpdate()
			}

		},
		methods: {
			//底部导航选择操作
			changeMethods(path, index) {
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style lang="scss">
	.tabbar {
		background-color: #32302e;
		color: #FFFFFF;
		padding: 30rpx;
		position: fixed;
		bottom: 0px;
		width: 100%;
		height: 180rpx;
		border-top-left-radius: 22rpx;
		border-top-right-radius: 22rpx;
		text-align: center;
		display: flex;
		z-index: 99;
	}

	.u-image {
		height: 44rpx !important;
		width: 44rpx !important;
		margin-bottom: 16rpx !important;
	}

	.items {
		width: 33.3%;
		color: #6e6c6b;
		text-align: center;
		// float: left;
	}

	.actives {
		color: #bb955e;
	}
</style>