waterElectricityMinApp/pagesRepairs/box/box.vue

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

<script>
import Home from '../home/home.vue'
import Management from '../management/management.vue'
import AddressBook from '../addressBook/addressBook.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,
		AddressBook,
		Pending,
		Repairs,
		MyRepairs,
		Tabbar
	},
	data() {
		return {
			// 展示的路由
			routes: [],
			// 所有的路由
			list: [
				{
					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'
				},
				{
					text: '首页',
					imgUrl: '../../static/images/repairsImg/home.png',
					imgUrlActive: '../../static/images/repairsImg/home-active.png',
					show: 'home'
				},
				{
					text: '工单管理',
					imgUrl: '../../static/images/repairsImg/management.png',
					imgUrlActive: '../../static/images/repairsImg/management-active.png',
					show: 'management'
				},
				{
					text: '待处理池',
					imgUrl: '../../static/images/repairsImg/myRepairs.png',
					imgUrlActive: '../../static/images/repairsImg/myRepairs-active.png',
					show: 'pending'
				},
				{
					text: '通讯录',
					imgUrl: '../../static/images/repairsImg/addressBook.png',
					imgUrlActive: '../../static/images/repairsImg/addressBook-active.png',
					show: 'addressBook'
				}
			],
			// box页面展示哪个组件
			show: '',
			// 当前显示组件的index
			currentRouter: 0,
			// 未读信息总数
			msgTotal: 0
		}
	},
	mounted() {
		// 获取权限路由
		const repairsUserInfo = uni.getStorageSync('repairsUserInfo')
		if (repairsUserInfo.routes) {
			this.routes = this.filterRoute(this.list, repairsUserInfo.routes)
		}
		// 获取当前激活的路由
		const currentIndexRepairs = uni.getStorageSync('currentIndexRepairs')
		if (currentIndexRepairs) {
			this.currentRouter = currentIndexRepairs
			this.show = this.routes[currentIndexRepairs].show
			uni.setNavigationBarTitle({
				title: this.routes[currentIndexRepairs].text
			})
		} else {
			this.currentRouter = 0
			this.show = this.routes[0].show
			uni.setNavigationBarTitle({
				title: this.routes[0].text
			})
		}
	},
	onShow() {
		// 获取未读信息条数
		this.getUnreadMsgCount()
	},
	onLoad() {
		uni.$on('goToRepairs', this.goToRepairs)
		uni.$on('goToMyRepairs', this.goToMyRepairs)
	},
	onUnload() {
		// 移除全局自定义事件监听器
		uni.$off()
	},
	methods: {
		// 获取未读信息条数数据
		async getUnreadMsgCount() {
			const res = await this.$myRequest_repairs({
				url: '/repairSystemMessages/queryMessageUnreadCount',
				data: {
					userId: uni.getStorageSync('repairsUserInfo').userId
				}
			})
			// console.log(res)
			if (res.code === '200') {
				this.msgTotal = res.data.count
			}
		},
		// 全局自定义事件
		goToRepairs(e) {
			// console.log(e)
			this.show = e.show
			uni.setNavigationBarTitle({
				title: e.title
			})
		},
		goToMyRepairs(e) {
			// console.log(e)
			this.show = e.show
			this.currentRouter = 1
			uni.setNavigationBarTitle({
				title: e.title
			})
		},
		// 底部导航栏切换回调
		handleChangeRouter(show, text, e) {
			uni.setStorageSync('currentIndexRepairs', e)
			this.show = show
			this.currentRouter = e
			uni.setNavigationBarTitle({
				title: text
			})
		},
		// 路由过滤方法
		filterRoute(arr1, arr2) {
			return arr1.filter((item) => {
				return arr2.includes(item.text)
			})
		}
	}
}
</script>

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