concrete-transportation-uniapp-20250821/pages/index/order.vue

<template>
	<view class="page">
		<navbar :title="pageTitle" />

		<view class="content">
			<!-- 用户/泵司抢单大厅 -->
			<user-hall v-if="Number(role) === 0" ref="us"></user-hall>

			<!-- 企业订单管理 -->
			<enterprise-hall v-if="Number(role) === 1" ref="eh"></enterprise-hall>

			<!-- 员工订单大厅 -->
			<staff-hall v-if="Number(role) === 2" ref="ss"></staff-hall>

			<!-- 区域管理员订单 -->
			<region-hall v-if="Number(role) === 3" ref="rh"></region-hall>
		</view>

		<tabber select="order" />
	</view>
</template>

<script>
import navbar from '@/components/base/navbar.vue'
import tabber from '@/components/base/tabbar.vue'
import UserHall from '@/components/user/hall.vue'
import StaffHall from '@/components/staff/hall.vue'
import EnterpriseHall from '@/components/enterprise/hall.vue'
import RegionHall from '@/components/region/hall.vue'
import { mapState, mapGetters, mapMutations } from 'vuex'

export default {
	components: {
		navbar,
		tabber,
		UserHall,
		StaffHall,
		EnterpriseHall,
		RegionHall
	},
	data() {
		return {
		}
	},
	computed: {
		...mapState(['role']),
		...mapGetters(['currentRoleText']),
		pageTitle() {
			const roleNum = Number(this.role);
			if (roleNum === 0) {
				return '抢单大厅';
			} else if (roleNum === 1) {
				return '企业订单';
			} else if (roleNum === 2) {
				return '员工订单';
			} else if (roleNum === 3) {
				return '区域订单';
			} else {
				return '订单';
			}
		}
	},
	onShow() {
		// 初始化角色
		this.initRole();

		// 设置导航栏标题
		uni.setNavigationBarTitle({ title: this.pageTitle });

		// 监听角色变更事件
		uni.$on('roleChanged', this.handleRoleChange);

		// 刷新对应的组件数据
		this.refreshCurrentComponent();
	},
	onHide() {
		// 移除事件监听
		uni.$off('roleChanged', this.handleRoleChange);
	},
	methods: {
		...mapMutations(['initRole']),
		// 处理角色变更
		handleRoleChange(newRole) {
			console.log('订单页面收到角色变更:', newRole);
			// 更新导航栏标题
			uni.setNavigationBarTitle({ title: this.pageTitle });
			// 刷新对应组件
			this.$nextTick(() => {
				this.refreshCurrentComponent();
			});
		},
		// 刷新当前角色对应的组件
		refreshCurrentComponent() {
			this.$nextTick(() => {
				try {
					const roleNum = Number(this.role);
					if (roleNum === 0) {
						this.$refs.us && this.$refs.us.loadPage && this.$refs.us.loadPage();
					} else if (roleNum === 1) {
						this.$refs.eh && this.$refs.eh.loadPage && this.$refs.eh.loadPage();
					} else if (roleNum === 2) {
						this.$refs.ss && this.$refs.ss.loadPage && this.$refs.ss.loadPage();
					} else if (roleNum === 3) {
						this.$refs.rh && this.$refs.rh.loadPage && this.$refs.rh.loadPage();
					}
				} catch (e) {
					console.log('组件方法调用失败:', e);
				}
			});
		}
	}
}
</script>

<style scoped lang="scss">
	.page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f5f5;
	}
	
	.content {
		flex: 1;
		overflow: hidden;
		padding-bottom: 120rpx; /* 为底部tabbar留出空间 */
	}
</style>