NN2024010801/addons/xlapp/components/tabbar.vue

<template>
	<u-tabbar :value="curIndex" @change="changeMethods" :fixed="true" :inactiveColor="'#999'" :activeColor="'#14ECCC'"
		:placeholder="false" :safeAreaInsetBottom="true" :zIndex="92" :border="false">
		<u-tabbar-item v-for="(item,k) in list" :key="k" :text="$t(item.text)" :badge="item.badge">
			<image :class="'u-page__item__slot-icon icon-'+(item.code)" slot="active-icon" :src="item.selectedIconPath">
			</image>
			<image :class="'u-page__item__slot-icon icon-'+(item.code)" slot="inactive-icon" :src="item.iconPath">
			</image>
		</u-tabbar-item>

	</u-tabbar>
</template>

<script>
	/* 
	 * 自定义底部导航栏
	 */
	export default {
		name: "tabbar",
		props: {
			index: {
				type: Number,
				default: 1,
			}
		},
		data() {
			return {
				curIndex: this.index - 1,
				list: [{
						pagePath: "/pages/index/index",
						iconPath: "/static/icons/home.png",
						selectedIconPath: "/static/icons/home-active.png",
						text: '首页',
						code: 'home',
						badge: 0
					},
					{
						pagePath: "/pages/live/index?live=1",
						iconPath: "/static/icons/imchat.png",
						selectedIconPath: "/static/icons/imchat-active.png",
						text: '蜜聊', // 直播
						code: 'live',
						badge: 0
					},
					{
						pagePath: "/pages/video/index",
						iconPath: "/static/icons/live.png",
						selectedIconPath: "/static/icons/live.png",
						text: '', // 短视频
						code: 'video',
						badge: 0
					},
					{
						pagePath: "/pages/message/index",
						iconPath: "/static/icons/message.png",
						selectedIconPath: "/static/icons/message-active.png",
						text: '消息',
						code: 'message',
						badge: 0
					},
					{
						pagePath: "/pages/user/index",
						iconPath: "/static/icons/my.png",
						selectedIconPath: "/static/icons/my-active.png",
						text: '我的',
						code: 'mine',
						badge: 0
					}
				],
			};
		},
		mounted() {
			let _this = this
			console.log('导航')
			this.getCount()


			uni.$on('load-message', function() {
				console.log('重新加载')
				_this.getCount();
			})
		},
		methods: {
			//底部导航选择操作
			changeMethods(index) {
				this.curIndex = index
				let path = typeof(this.list[index]) != 'undefined' ? this.list[index].pagePath : ''
				let code = typeof(this.list[index]) != 'undefined' ? this.list[index].code : ''
				if (path) {
					if (code == 'live') {
						// this.$emit('showLive', true)
						uni.reLaunch({
							url: path
						})
					} else {
						uni.reLaunch({
							url: path
						})
					}
				}

			},
			// 未读消息
			async getCount() {
				// 消息
				const res = await this.$request.api('/message/unread')
				if (res.success == true) {
					console.log('更新未读消息')
					this.list[3].badge = (res.data >= 100) ? '99' : res.data
					this.$forceUpdate()
				}
			}
		}
	}
</script>

<style scoped>
	.u-page__item__slot-icon {
		width: 42rpx;
		height: 42rpx;
	}

	.u-tabbar__content {
		background-color: #303030;
	}

	.icon-video {
		width: 76rpx;
		height: 76rpx;
		padding-top: 6rpx;
	}

	.u-border-top {
		border-top-width: 0rpx !important;
		border-color: transparent !important;
		border-top-style: solid;
	}
</style>