popularize-front/components/base/tabbar.vue

<template>
	<view class="">
		<view class="tabbar-box"></view>
		<view class="tabbar">
			<view
			 :class="{item : true, active : select == item.key}"
			 v-for="(item, index) in list"
			 :key="index"
			 v-if="!item.isNotShop || !userShop"
			 @click="toPath(item, index)">
				<view class="icon">
					<image :src="select == item.key ? 
					item.selectedIconPath : 
					item.iconPath" class="icon-image" mode="widthFix"></image>
				</view>
				<view class="title">
					{{ item.title }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		name:"tabbar",
		props : ['select'],
		computed : {
		},
		data() {
			return {
				list : []
			};
		},
		mounted() {
			// 初始化国际化的 tabbar 数据
			this.list = [
				{
					"selectedIconPath": "/static/image/tabbar/home-a.png",
					"iconPath": "/static/image/tabbar/home.png",
					"pagePath": "/pages/index/index",
					"title": this.$t('components.base.tabbar.home'), // 首页
					key : 'home',
				},
				{
					"selectedIconPath": "/static/image/tabbar/zhaomu-a.png",
					"iconPath": "/static/image/tabbar/zhaomu.png",
					"pagePath": "/pages/index/member",
					"title": this.$t('components.base.tabbar.member'), // 招募
					key : 'member',
				},
				{
					"selectedIconPath": "/static/image/tabbar/order-a.png",
					"iconPath": "/static/image/tabbar/order.png",
					"pagePath": "/pages/index/cart",
					"title": this.$t('components.base.tabbar.cart'), // 订单
					key : 'cart',
				},
				{
					"selectedIconPath": "/static/image/tabbar/center-a.png",
					"iconPath": "/static/image/tabbar/center.png",
					"pagePath": "/pages/index/center",
					"title": this.$t('components.base.tabbar.center'), // 我的
					key : 'center',
				}
			]
		},
		methods : {
			toPath(item, index){
				if(item.key == this.select){
					return
				}
				uni.reLaunch({
					url: item.pagePath
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.tabbar-box{
	height: 120rpx;
	padding-bottom: env(safe-area-inset-bottom);
}
.tabbar{
	position: fixed;
	width: 750rpx;
	background-color: $uni-color-card-background;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	height: 120rpx;
	padding-bottom: env(safe-area-inset-bottom);
	z-index: 9999;
	bottom: 0;
	left: 0;
	color: #4C4C4C;
	border-radius: 67rpx 67rpx 0rpx 0rpx;
	.item{
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.icon{
			width: 49rpx;
			.icon-image{
				width: 49rpx;
			}
		}
		.title{
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-o-text-overflow: ellipsis;
			font-size: 23rpx;
			line-height: 35rpx;
		}
	}
}
.active{
	color: #F85152 !important;
}
</style>