erp-ui-m/components/thorui/tui-tabbar/tui-tabbar.vue

<template>
	<view class="gui-tabbar-container" :style="{'---height':!hump?'100rpx':'160rpx'}">
		<view class="gui-tabbar"
			:class="{ 'gui-tabbar-fixed': isFixed }"
			:style="{ background: backgroundColor }">
			<block v-for="(item, index) in tabBar" :key="index">
				<view class="gui-tabbar-item" :class="{ 'gui-item-hump': item.hump }"
					:style="{ backgroundColor: item.hump ? backgroundColor : 'none' }"
					@tap="tabbarSwitch(index, item.hump, item.pagePath, item.verify)">
					<view class="gui-icon-box" :class="{ 'gui-tabbar-hump': item.hump }">
						<image class="img"
							:src="String(current) == String(index) ? appData.imgUrl+item.selectedIconPath : appData.imgUrl+item.iconPath"
							:class="[item.hump ? '' : 'gui-tabbar-icon']"></image>
						<view :class="[item.isDot ? 'gui-badge-dot' : 'gui-badge']"
							:style="{ color: badgeColor, backgroundColor: badgeBgColor }" v-if="item.num">
							{{ item.isDot ? '' : item.num }}
						</view>
					</view>
					<view class="gui-text-scale" :class="{ 'gui-text-hump': item.hump }"
						:style="{ color: String(current) == String(index) ? selectedColor : color }">{{ item.text }}
					</view>
				</view>
			</block>
			<view :style="{ background: backgroundColor }" :class="{ 'gui-hump-box': hump}"
				v-if="hump"></view>
		</view>
		<view class="page-floor"></view>
	</view>
</template>
<script>
	let App = getApp()
	import mixinsPage from "@/common/mixins-model.js"
	export default {
		mixins: [mixinsPage],
		components: {},
		data() {
			return {}
		},
		props: {
			value: {
				type: [String, Number, Object],
				default: null
			},
			//当前索引
			current: {
				type: [Number, String],
				default: 0
			},
			//字体颜色
			color: {
				type: String,
				default: '#888888'
			},
			//字体选中颜色
			selectedColor: {
				type: String,
				default: '#333'
			},
			//背景颜色
			backgroundColor: {
				type: String,
				default: '#FFFFFF'
			},
			//是否需要中间凸起按钮
			hump: {
				type: Boolean,
				default: true
			},
			//固定在底部
			isFixed: {
				type: Boolean,
				default: true
			},
			//角标字体颜色
			badgeColor: {
				type: String,
				default: '#fff'
			},
			//角标背景颜色
			badgeBgColor: {
				type: String,
				default: '#F74D54'
			},
			//tabbar
			// "pagePath": "/pages/my/my", 页面路径
			// "text": "thor", 标题
			// "iconPath": "thor_gray.png", 图标地址
			// "selectedIconPath": "thor_active.png", 选中图标地址
			// "hump": true, 是否为凸起图标
			// "num": 2,   角标数量
			// "isDot": true,  角标是否为圆点
			// "verify": true  是否验证  （如登录）
			tabBar: {
				type: Array,
				default () {
					return [];
				}
			}
		},
		watch: {
			value: {
				handler(nval, oval) {},
				immediate: true,
				deep: true
			}
		},
		created() {
			this.appData = App.globalData ? App.globalData : getApp().globalData;
		},
		methods: {
			tabbarSwitch(index, hump, pagePath, verify) {
				if (verify && !this.$api.isLogin(true)) {
					return false
				}
				// console.log(pagePath, index, this.current)
				if (pagePath && index != this.current) {
					this.$api.href(pagePath)
					return false
				}
				this.$emit('click', {
					index: index,
					hump: hump,
					pagePath: pagePath,
					verify: verify
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	.gui-tabbar-container {
		width: 100%;
		height: var(---height);
		height: calc(constant(safe-area-inset-bottom) + var(---height));
		height: calc(env(safe-area-inset-bottom) + var(---height));
		position: relative;
	}

	.gui-tabbar {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;

		&::before {
			content: ' ';
			width: 100%;
			border-top: 1px solid #eeeeee;
			position: absolute;
			top: 0;
			left: 0;
			transform: scaleY(0.5) translateZ(0);
			transform-origin: 0 0;
			display: block;
			z-index: 3;
		}

		&.gui-tabbar-fixed {
			position: fixed;
			z-index: 66;
			left: 0;
			bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			box-sizing: content-box !important;
		}

		.gui-tabbar-item {
			height: 100%;
			flex: 1;
			display: flex;
			text-align: center;
			align-items: center;
			flex-direction: column;
			justify-content: space-between;
			position: relative;
			padding: 10rpx 0;
			box-sizing: border-box;
			z-index: 5;
		}

		.gui-icon-box {
			position: relative;
		}

		.gui-item-hump {
			height: 98rpx;
		}

		.gui-tabbar-icon {
			width: 52rpx;
			height: 52rpx;
			display: block;
		}

		.gui-hump-box {
			width: 120rpx;
			height: 120rpx;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: -50rpx;
			border-radius: 50%;
			z-index: 4;
		}
		.gui-hump-box::after {
			content: ' ';
			height: 200%;
			width: 200%;
			border: 1px solid #eeeeee;
			position: absolute;
			top: 0;
			left: 0;
			transform: scale(0.5) translateZ(0);
			transform-origin: 0 0;
			border-radius: 120rpx;
			box-sizing: border-box;
			display: block;
		}

		.gui-tabbar-hump {
			width: 100rpx;
			height: 100rpx;
			position: absolute;
			left: 50%;
			-webkit-transform: translateX(-50%) rotate(0deg);
			transform: translateX(-50%) rotate(0deg);
			top: -40rpx;
			-webkit-transition: all 0.2s linear;
			transition: all 0.2s linear;
			border-radius: 50%;
			z-index: 5;
		}

		.gui-tabbar-hump .img {
			width: 100rpx;
			height: 100rpx;
			display: block;
		}

		.gui-hump-active {
			-webkit-transform: translateX(-50%) rotate(135deg);
			transform: translateX(-50%) rotate(135deg);
		}

		.gui-text-scale {
			font-weight: bold;
			transform: scale(0.8);
			font-size: 25rpx;
			line-height: 28rpx;
			transform-origin: center 100%;
		}

		.gui-text-hump {
			position: absolute;
			left: 50%;
			bottom: 10rpx;
			transform: scale(0.8) translateX(-50%);
			transform-origin: 0 100%;
		}

		.gui-badge {
			position: absolute;
			font-size: 24rpx;
			height: 32rpx;
			min-width: 20rpx;
			padding: 0 6rpx;
			border-radius: 40rpx;
			right: 0;
			top: -5rpx;
			transform: translateX(70%);
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.gui-badge-dot {
			position: absolute;
			height: 16rpx;
			width: 16rpx;
			border-radius: 50%;
			right: -4rpx;
			top: -4rpx;
		}

		.gui-header-icon {
			width: 100%;
			position: fixed;
			top: 0;
			padding: 0 12rpx;
			display: flex;
			align-items: center;
			height: 32px;
			transform: translateZ(0);
			z-index: 67;
			box-sizing: border-box;
		}
	}
</style>