shop_app/components/tabbar/index.vue

<template>
	<!-- 自定义导航栏 -->
	<view class="tabbar">
		<view class="index" v-for="(item, index) in tabbarList" :key="index" @click="jumpTo(item.url, item.id)">
			<view class="icon" :class="index == chooseIndex ? 'choose' : ''">
				<text v-if="index == chooseIndex" class="iconfont" :class="'icon-' + item.fill"></text>
				<text v-else class="iconfont" :class="'icon-' + item.type"></text>
			</view>
			<text :class="index == chooseIndex ? 'choose text' : 'text' ">{{ item.title }}</text>
			
			<up-badge :bgColor="priceColor" max="99" v-if="item.id == 2" :value="num"></up-badge>
			
			<up-badge :bgColor="priceColor" max="99" v-if="item.id == 4 && msgNum" :value="msgNum"></up-badge>
			
		</view>
	</view>
</template>

<script>
	import { ref, reactive, toRefs, onMounted } from 'vue'
	import { whetherLogin } from '@/components/common.js'
	import { get } from '@/api/request.js'
	import { Style } from '@/utils/list.js'
	
	export default {
		props: {
			chooseIndex: {
				type: Number,
				default: 1
			},
			num: {
				type: Number,
				default: 0
			},
			msgNum: {
				type: Number,
				default: 0
			}
		},
		setup(props, context) {
			const data = reactive({
				tabbarList: [
					{
						id: 1,
						title: '首页',
						url: '/pages/index/index',
						type: 'home',
						fill: 'homefill'
					},
					{
						id: 5,
						title: '分类',
						url: '/pages/classify/new',
						type: 'fenlei',
						fill: 'fenleifill'
					},
					{
						id: 4,
						title: '互动',
						url: '/pages/message/index',
						type: 'msg',
						fill: 'msgfill'
					},
					{
						id: 2,
						title: '购物车',
						url: '/pages/cart/index',
						type: 'cart',
						fill: 'cartfill'
					},
					{
						id: 3,
						title: '我的',
						url: '/pages/user/index',
						type: 'mine',
						fill: 'minefill'
					}
				],
				role: uni.getStorageSync('role'),
				Color: '#F14939',
				Theme: '',
				priceColor: '#F14939',
				interval: null,
				has_multi_group: uni.getStorageSync('has_multi_group') || true
			})
			
			const jumpTo = (url, id) => {
				if(id == 5) {
					if(data.has_multi_group) {
						uni.switchTab({
							url: '/pages/classify/new'
						})
					} else {
						uni.switchTab({
							url: '/pages/classify/index'
						})
					}
				} else {
					if((id == 2 || id == 3 || id == 4) && !whetherLogin()) {
						uni.navigateTo({
							url: '/pages/user/login'
						})
					} else {
						uni.switchTab({ url })
					}
				}
			}
			
			function setColor() {
				data.Color = uni.getStorageSync('theme_color')
				data.Theme = uni.getStorageSync('theme_index') * 1
				data.priceColor = Style[uni.getStorageSync('theme_index') * 1] && Style[uni.getStorageSync('theme_index') * 1].priceColor
			}
			
			onMounted(() => {
				setColor()
				if(!data.Color) {
					data.interval = setInterval(() => {
						if(!data.Color) {
							setColor()
						} else {
							clearInterval(data.interval)
							data.interval = null
						}
					}, 300)
				}
				setTimeout(() => {
					setColor()
				}, 1200)
				// #ifdef APP-PLUS
				uni.hideTabBar()
				// #endif
			})
			
			
			return {
				whetherLogin,
				...toRefs(data),
				jumpTo,
				setColor
			}
		},
		onShow() {
			uni.hideTabBar()
		}
	}
</script>

<style lang="scss" scoped>
	.tabbar {
		width: 100%;
		height: 55px;
		position: fixed;
		z-index: 999;
		display: flex;
		background: #fff;
		box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.16);
		//兼容ios底部黑线
		bottom: 0;
		// padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
		.index {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			color: #999;
			font-size: 12px;
			position: relative;
			.text {
				margin-top: 2px;
			}
			.choose {
				color: v-bind('Color');
			}
			.tag{
				position: absolute;
				top: 0;
				transform: translate(60%, 0);
			}
		}
		.icon{
			font-size: 20px;
			width: 20px;
			height: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			.iconfont{
				font-size: 20px;
			}
		}
	}
	
</style>