wdt_erp_process_h5/pages/index/index.vue

<template>
	<view>
		<addressbook v-if="PageCur=='addressbook'"></addressbook>
		<message v-if="PageCur=='message'"></message>
		<workbench v-if="PageCur=='workbench'"></workbench>
		<apps v-if="PageCur=='apps'"></apps>
		<person v-if="PageCur=='my'"></person>
		<view class="cu-bar tabbar bg-white shadow foot">
			<!--<view class="action" @click="NavChange" data-cur="addressbook">
				<view :class="PageCur=='addressbook'?'text-blue':'text-gray'">
					<text class="lg" :class="PageCur=='addressbook'?'cuIcon-addressbook':'cuIcon-addressbook'"></text>
					<text>通讯录</text>
				</view>
			</view>-->
			<view class="action" @click="NavChange" data-cur="message">
				<view :class="PageCur=='message'?'text-blue':'text-gray'">
					<text class="lg" :class="PageCur=='message'?'cuIcon-messagefill':'cuIcon-message'">
						<text class='cu-tag badge'>{{notificationCount}}</text>
					</text>
					<text>消息</text>
				</view>
			</view>
			<view class="action text-gray add-action"  @click="NavChange" data-cur="workbench">
				<button class="cu-btn  shadow" :class="PageCur=='workbench'?'cuIcon-homefill bg-blue':'cuIcon-home bg-grey'"></button>
				工作台
			</view>
			
			<!--<view class="action" @click="NavChange" data-cur="apps">
				<view :class="PageCur=='apps'?'text-blue':'text-gray'">
					<text class="lg" :class="PageCur=='apps'?'cuIcon-circlefill':'cuIcon-circle'"></text>
					<text>应用</text>
				</view>
			</view>-->
			
			<view class="action" @click="NavChange" data-cur="my">
				<view :class="PageCur=='my'?'text-blue':'text-gray'">
					<text class="lg" :class="PageCur=='my'?'cuIcon-profilefill':'cuIcon-profile'"></text>
					<text>我的</text>
				</view>
			</view>
	
		</view>
	</view>
</template>

<script>
	import { mapState, mapActions } from 'vuex';
	import addressbook from '@/pages/addressbook/addressbook.vue';
	import person from '@/pages/user/person/person.vue';
	import message from '@/pages/message/message.vue';
	import workbench from '@/pages/workbench/workbench.vue';
	import apps from '@/pages/apps/apps.vue';
	import { EventBus } from '@/store/eventBus.js';

	export default {
		components: {
			addressbook,
			person,
			message,
			workbench,
			apps
		},
		data() {
			return {
				PageCur: 'workbench',
				notificationCount: 0
			};
		},
		computed: {
			...mapState({
				messageDataList: state => state.messageDataList // 映射 Vuex state 到组件的计算属性
			})
		},
		mounted() {
			EventBus.$on('dataFromMessage', (data) => {
				this.handleMessageData(data); // 处理接收到的数据
			});
		},
		methods: {
			NavChange: function(e) {
				let newPageCur = e.currentTarget.dataset.cur;
				// 清空当前导航项
				this.PageCur = '';

				// 使用 setTimeout 确保下一帧将新值设回去，强制页面更新
				setTimeout(() => {
					this.PageCur = newPageCur;
				}, 0);
			},
			handleMessageData(data) {
				// 处理 message.vue 传递过来的参数
				this.notificationCount = data
			}
		}
	};
</script>

<style>
	.cu-tag.badge {
		right: 4px;
	}
</style>