MoeNovaClient/components/tabbar/tabbar.vue

<template>
	<view class="tabbar-area">
		<view class="tabbar-bottom" :style="{ backgroundColor: backgroundColor, height: tabbarHeight + 'px' }">
			<view class="tabbar-bottom-item" ref="tabbarItem" v-for="(item, index) in tabbars" :key="index"
				@click="switchTab(item, index)">
				<image v-if="item.type != 'midButton'"
					:src="currentIndex == index ? item.selectedIconPath : item.iconPath"
					:class="['tabbar-bottom-item-icon']"></image>
				<text class="tabbar-bottom-item-text"
					:style="{ color: currentIndex == index ? textActiveColor : textColor }">{{ item.text }}</text>
				<text class="tabbar-bottom-item-count" v-if="item.count">{{ item.count >= 99 ? '99+' : item.count
				}}</text>
			</view>
		</view>
		<view class="midButton" @click="midButtonGo()">
			<image class="image" src="../../static/tabbar-icon/center.png" mode=""></image>
		</view>
		<view class="safe-bottom-area" style="background-color: #fff;">
			<uv-safe-bottom></uv-safe-bottom>
		</view>
	</view>
</template>
<script>
let animationModule = null;
// #ifdef APP-NVUE
animationModule = weex.requireModule('animation')
// #endif
import { mapActions, mapState, mapMutations } from 'vuex'
export default {
	props: {
		currentIndex: {
			type: Number,
			default: 0
		},
		backgroundColor: {
			type: String,
			default: '#fff'
		},
		textColor: {
			type: String,
			default: '#717171'
		},
		textActiveColor: {
			type: String,
			default: '#000'
		},
		tabbarHeight: {
			type: Number,
			default: 60
		},
		tabbars: {
			type: Array,
			default: () => ([])
		},
		midButton: {
			type: Boolean,
			default: true,
		}
	},
	computed: {
		...mapState('switchingModule', ['status', 'picture', 'name', 'requestData']),
	},
	data() {
		return {}
	},
	mounted() {
		uni.hideTabBar()
	},

	methods: {
		...mapMutations('switchingModule', ['setInformation','deleteInformation']),
		switchTab(item, index) {
			if (!item.pagePath) return;
			if (item.pagePath == '/pages/message/mailMessage') {
				uni.$emit('check_login', () => {
					uni.switchTab({
						url: item.pagePath,
					});
				})
				return;
			}
			uni.switchTab({
				url: item.pagePath,
			});
			// this.payAnimation()
		},
		midButtonGo() {
			console.log('点击了中间按钮');
			// 判断登录
			uni.$emit('check_login', () => {
				let falg = this.status == 1
				console.log(falg,'状态');
				if (falg) { 
					// 如果缓存为true，直接跳转到星球页面
					uni.navigateTo({
						url: '/pages/isLand/homeLand'
					});
					return;
				}

				// 如果缓存不为true，则请求接口
				uni.request({
					url: this.$apiHost + "/AIpipei/getinfo",
					data: {
						uuid: getApp().globalData.uuid,
					},
					header: {
						"content-type": "application/json",
						sign: getApp().globalData.headerSign,
					},
					timeout: 60000,
					success: (res) => {
						if (res && res.data && res.data.info) {
							if (res.data.info.image && res.data.info.status == 1) { 
								this.setInformation(res.data.info) 
								// 跳转到星球页面
								uni.navigateTo({
									url: '/pages/isLand/homeLand'
								});
							} else {
								this.deleteInformation() 
								// 跳转到我的星球页面
								uni.navigateTo({
									url: '/pages/my/myStar'
								});
							}
						} else {
							this.deleteInformation() 
							// 跳转到我的星球页面
							uni.navigateTo({
								url: '/pages/my/myStar'
							});
						}
					},
					fail: (err) => {
						// 请求失败时也跳转到我的星球页面
						uni.navigateTo({
							url: '/pages/my/myStar'
						});
					},
					complete: () => {
					}
				});
			})
		},
		async payAnimation() {
			const active = [{
				dom: this.$refs.tabbarItem[this.currentIndex],
				styles: {
					transform: `scale(1.2)`
				},
				transformOrigin: 'center center',
				timingFunction: 'ease-in-out',
				duration: 100,
			},
			{
				dom: this.$refs.tabbarItem[this.currentIndex],
				styles: {
					transform: `scale(1)`
				},
				transformOrigin: 'center center',
				timingFunction: 'ease-in-out',
				duration: 100,
			}
			]
			for (var i = 0; i < active.length; i++) {
				await this.animationActive(active[i])
			}
		},
		animationActive(active) {
			return new Promise((resolve, reject) => {
				animationModule.transition(active.dom, {
					styles: active.styles || {},
					duration: active.duration,
					timingFunction: active.timingFunction,
					delay: active.delay || 0,
					transformOrigin: active.transformOrigin,
				}, () => {
					resolve()
				})
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.tabbar-area {
	position: fixed;
	bottom: 0rpx;
	width: 750rpx;
	height: 145rpx;
	background-color: transparent;
	padding-top: 25rpx;
	// padding-top: 48rpx;
	// #ifndef APP-NVUE
	box-sizing: border-box;
	// #endif
	display: flex;
	flex-direction: column;
	background: url("@/static/home/taber-bg.png") center top / 100% auto;
	z-index: 99;
}

.tabbar-bottom {
	width: 750rpx;
	flex: 1;
	// #ifndef APP-NVUE
	display: flex;
	// #endif
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	border-top-left-radius: 40rpx;
	border-top-right-radius: 40rpx;
}

.midButton {
	position: absolute;
	top: 10px;
	left: 330rpx;

	.image {
		height: 96rpx;
		width: 96rpx;
	}
}

.tabbar-bottom-item {
	// #ifndef APP-NVUE
	display: flex;
	// #endif
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 120rpx;
	width: 100rpx;
	position: relative;
}

.tabbar-bottom-item-icon {
	height: 68rpx;
	width: 68rpx;
	position: relative;
}


.tabbar-bottom-item-text {
	font-size: 20rpx;
	color: rgb(113, 113, 113);
}

.tabbar-bottom-item-count {
	background-color: #ff4d4d;
	font-size: 20rpx;
	font-weight: bold;
	color: #ffffff;
	padding: 8rpx;
	position: absolute;
	top: 0rpx;
	right: 0rpx;
	border-radius: 100rpx;
	/* 半径为高度的一半 */
	// #ifndef APP-NVUE
	display: flex;
	// #endif
	justify-content: center;
	align-items: center;
}

.safe-bottom-area {
	width: 750rpx;
	background-color: #fff;
}
</style>