waterElectricityMinApp/pagesRepairs/box/box.vue

<template>
	<view class="container">
		<!-- 首页 -->
		<Home v-if="show === 'home'" />
		<!-- 工单管理 -->
		<Management v-if="show === 'management'" />
		<!-- 接单池 -->
		<Order v-if="show === 'order'" />
		<!-- 通讯录 -->
		<AddressBook v-if="show === 'addressBook'" />
		<!-- 待分配单 -->
		<WaitAllot v-if="show === 'waitAllot'" />
		<!-- 待处理池 -->
		<Pending v-if="show === 'pending'" />
		<!-- 报修 -->
		<Repairs v-if="show === 'repairs'" />
		<!-- 我的报修 -->
		<MyRepairs v-if="show === 'myRepairs'" />
		<!-- 底部导航栏 -->
		<Tabbar :list="list" @changeRouter="handleChangeRouter" />
	</view>
</template>

<script>
import Home from '../home/home.vue'
import Management from '../management/management.vue'
import Order from '../order/order.vue'
import AddressBook from '../addressBook/addressBook.vue'
import WaitAllot from '../waitAllot/waitAllot.vue'
import Pending from '../pending/pending.vue'
import Repairs from '../repairs/repairs.vue'
import MyRepairs from '../myRepairs/myRepairs.vue'
import Tabbar from '../components/tabbar.vue'

export default {
	components: {
		Home,
		Management,
		Order,
		AddressBook,
		WaitAllot,
		Pending,
		Repairs,
		MyRepairs,
		Tabbar
	},
	mounted() {
		this.list = this.userList
		this.show = this.list[0].show
		uni.setNavigationBarTitle({
			title: this.list[0].text
		})
	},
	data() {
		return {
			list: [],
			show: 'home',
			// 用户路由
			userList: [
				{
					text: '报修',
					imgUrl: '../../static/images/repairsImg/repairs.png',
					imgUrlActive: '../../static/images/repairsImg/repairs-active.png',
					show: 'repairs'
				},
				{
					text: '我的报修',
					imgUrl: '../../static/images/repairsImg/myRepairs.png',
					imgUrlActive: '../../static/images/repairsImg/myRepairs-active.png',
					show: 'myRepairs'
				}
			],
			// 师傅路由
			workerList: [
				{
					text: '首页',
					icon: 'home',
					show: 'home'
				},
				{
					text: '工单管理',
					icon: 'list-dot',
					show: 'management'
				},
				{
					text: '待分配单',
					icon: 'clock',
					show: 'waitAllot'
				},
				{
					text: '接单池',
					icon: 'order',
					show: 'order'
				}
			],
			// 后勤路由
			logisticsList: [
				{
					text: '首页',
					icon: 'home',
					show: 'home'
				},
				{
					text: '工单管理',
					icon: 'list-dot',
					show: 'management'
				},
				{
					text: '待处理池',
					icon: 'warning',
					show: 'pending'
				},
				{
					text: '通讯录',
					icon: 'phone',
					show: 'addressBook'
				}
			],
			// 管理者路由
			adminList: [
				{
					text: '首页',
					icon: 'home',
					show: 'home'
				},
				{
					text: '工单管理',
					icon: 'list-dot',
					show: 'management'
				},
				{
					text: '待处理池',
					icon: 'warning',
					show: 'pending'
				},
				{
					text: '通讯录',
					icon: 'phone',
					show: 'addressBook'
				}
			]
		}
	},
	methods: {
		handleChangeRouter(show, text) {
			this.show = show
			uni.setNavigationBarTitle({
				title: text
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	width: 100vw;
	height: calc(100vh - 102rpx);
}
</style>