uniProject/components/MtaNavbar/MtaNavbar.vue

<template>
	<uni-nav-bar dark :fixed="true" shadow background-color="transparent" title="自定义导航栏" class="dljt-navBar-box">
		<view class="dljt-logo-box"></view>
		<icon class="dljt-menu-box" v-if="hasRight" @click="handleChangeMenu"></icon>
	</uni-nav-bar>

	<!-- 菜单面板 -->
	<uni-collapse class="head-collapse-box" ref="collapse" accordion v-model="data.activeMenu" v-show="data.showMenu">
		<uni-collapse-item class="head-collapse-item" :title="item.title" v-for="item in data.list" :key="item.title"
			:name="item.url">
			<view class="head-item-text" v-for="cIt in item.children" :key="item.title"
				:class="{active: cIt.isActive && cIt.isActive(data.activePath)}" @click="handleClick(cIt)">
				{{cIt.title}}
			</view>
		</uni-collapse-item>
	</uni-collapse>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch,
		onMounted,
		nextTick
	} from "vue"
	const showLeft = ref(null)
	import {
		onLoad
	} from "@dcloudio/uni-app"

	const props = defineProps({
		hasRight: {
			type: Boolean,
			default: true
		}
	})

	const ani = ref(null)

	const data = reactive({
		list: [{
				title: '学校主页',
				url: '/pages/index/index',
				children: [{
					title: '首页',
					url: '/pages/index/index',
					isActive: () => ['/pages/index/index'].some(item => item.includes(data.activePath))
				}]
			},
			{
				title: '学院概况',
				url: '/pages/xygkXueyuanjianjie/xygkXueyuanjianjie',
				children: [{
						title: '学院简介',
						url: '/pages/xygkXueyuanjianjie/xygkXueyuanjianjie',
						isActive: () => ['/pages/xygkXueyuanjianjie/xygkXueyuanjianjie'].some(item => item
							.includes(data.activePath))
					}, {
						title: '机构设置',
						url: '/pages/xygkJigoushezhi/xygkJigoushezhi',
						isActive: () => ['/pages/xygkJigoushezhi/xygkJigoushezhi'].some(item => item
							.includes(data.activePath))
					}, {
						title: '学院荣誉',
						url: '/pages/xygkXueyuanrongyu/xygkXueyuanrongyu',
						isActive: () => ['/pages/xygkXueyuanrongyu/xygkXueyuanrongyu'].some(item => item
							.includes(data.activePath))
					}, {
						title: '学院文化',
						url: '/pages/xygkXueyuanwenhua/xygkXueyuanwenhua',
						isActive: () => ['/pages/xygkXueyuanwenhua/xygkXueyuanwenhua'].some(item => item
							.includes(data.activePath))
					}, {
						title: '校园风光',
						url: '/pages/xygkXiaoyuanfengguang/xygkXiaoyuanfengguang',
						isActive: () => ['/pages/xygkXiaoyuanfengguang/xygkXiaoyuanfengguang'].some(item =>
							item.includes(data.activePath))
					}, {
						title: '联系方式',
						url: '/pages/xygkLianxifangshi/xygkLianxifangshi',
						isActive: () => ['/pages/xygkLianxifangshi/xygkLianxifangshi'].some(item => item
							.includes(data.activePath))
					},

				]
			},
			{
				title: '党群工作',
				url: '/pages/dqgzDangzuzhijiagou/dqgzDangzuzhijiagou',
				children: [{
					title: '党组织架构',
					url: '/pages/dqgzDangzuzhijiagou/dqgzDangzuzhijiagou',
					isActive: () => ['/pages/dqgzDangzuzhijiagou/dqgzDangzuzhijiagou'].some(item =>
						item.includes(data.activePath))
				}, {
					title: '工会组织架构',
					url: '/pages/dqgzGonghuizuzhijiagou/dqgzGonghuizuzhijiagou',
					isActive: () => ['/pages/dqgzGonghuizuzhijiagou/dqgzGonghuizuzhijiagou'].some(
						item => item.includes(data.activePath))
				}, {
					title: '党建工作',
					url: '/pages/dqgzDangjiangongzuo/dqgzDangjiangongzuo',
					isActive: () => ['/pages/dqgzDangjiangongzuo/dqgzDangjiangongzuo',
						'/pages/dqgzDangjiangongzuoInfo/dqgzDangjiangongzuoInfo'
					].some(item => item.includes(data.activePath))
				}, {
					title: '党员风采',
					url: '/pages/dqgzDangyuanfengcai/dqgzDangyuanfengcai',
					isActive: () => ['/pages/dqgzDangyuanfengcai/dqgzDangyuanfengcai',
						'/pages/dqgzXueyuanfengcaiInfo/dqgzXueyuanfengcaiInfo'
					].some(item => item.includes(data.activePath))
				}, {
					title: '工会之家',
					url: '/pages/dqgzGonghuizhijia/dqgzGonghuizhijia',
					isActive: () => ['/pages/dqgzGonghuizhijia/dqgzGonghuizhijia',
						'/pages/dqgzGongzhuizhijiaInfo/dqgzGongzhuizhijiaInfo'
					].some(item => item.includes(data.activePath))
				}]
			},
			{
				title: '校园动态',
				url: '3',
				children: [{
					title: '学院新闻',
					url: '/pages/xydtXueyuanxingwen/xydtXueyuanxingwen',
					isActive: () => ['/pages/xydtXueyuanxingwen/xydtXueyuanxingwen',
						'/pages/xydtXueyuanxinwenInfo/xydtXueyuanxinwenInfo'
					].some(item => item.includes(data.activePath))
				}, {
					title: '通知公告',
					url: '/pages/xydtTongzhigonggao/xydtTongzhigonggao',
					isActive: () => ['/pages/xydtTongzhigonggao/xydtTongzhigonggao',
						'/pages/xydtTongzhigonggaoInfo/xydtTongzhigonggaoInfo'
					].some(item => item.includes(data.activePath))
				}, {
					title: '校务公开',
					url: '/pages/xydtXiaowugongkai/xydtXiaowugongkai',
					isActive: () => ['/pages/xydtXiaowugongkai/xydtXiaowugongkai',
						'/pages/xydtXiaowugongkaiInfo/xydtXiaowugongkaiInfo'
					].some(item => item.includes(data.activePath))
				}, {
					title: '学院风采',
					url: '/pages/xydtXueyuanfengcai/xydtXueyuanfengcai',
					isActive: () => ['/pages/xydtXueyuanfengcai/xydtXueyuanfengcai',
						'/pages/xydtXueyuanfengcaiInfo/xydtXueyuanfengcaiInfo'
					].some(item => item.includes(data.activePath))
				}]
			},
			{
				title: '教育教学',
				url: '/pages/jyjxZhuanyejianshe/jyjxZhuanyejianshe',
				children: [{
						title: '专业建设',
						url: '/pages/jyjxZhuanyejianshe/jyjxZhuanyejianshe',
						isActive: () => ['/pages/jyjxZhuanyejianshe/jyjxZhuanyejianshe',
							'/pages/jyjxZhuanyejiansheInfo/jyjxZhuanyejiansheInfo'
						].some(item => item.includes(data.activePath))
					}, {
						title: '师资队伍',
						url: '/pages/jyjxShiziduiwu/jyjxShiziduiwu',
						isActive: () => ['/pages/jyjxShiziduiwu/jyjxShiziduiwu',
							'/pages/jyjxShiziduiwuInfo/jyjxShiziduiwuInfo'
						].some(item => item.includes(data.activePath))
					}, {
						title: '教研活动',
						url: '/pages/jyjxKeyanhuodong/jyjxKeyanhuodong',
						isActive: () => ['/pages/jyjxKeyanhuodong/jyjxKeyanhuodong',
							'/pages/jyjxKeyanhuodongInfo/jyjxKeyanhuodongInfo'
						].some(item => item.includes(data.activePath))
					}, {
						title: '科研动态',
						url: '/pages/jyjxKeyandongtai/jyjxKeyandongtai',
						isActive: () => ['/pages/jyjxKeyandongtai/jyjxKeyandongtai',
							'/pages/jyjxKeyandongtaiInfo/jyjxKeyandongtaiInfo'
						].some(item => item.includes(data.activePath))
					}, {
						title: '技能鉴定',
						url: '/pages/jyjxJinengjianding/jyjxJinengjianding',
						isActive: () => ['/pages/jyjxJinengjianding/jyjxJinengjianding',
							'/pages/jyjxJinengjiandingInfo/jyjxJinengjiandingInfo'
						].some(item => item.includes(data.activePath))
					}, {
						title: '第二课堂',
						url: '/pages/jyjxDierketang/jyjxDierketang',
						isActive: () => ['/pages/jyjxDierketang/jyjxDierketang',
							'/pages/jyjxDierketangInfo/jyjxDierketangInfo'
						].some(item => item.includes(data.activePath))
					}, {
						title: '大赛风采',
						url: '/pages/jyjxDasaifengcai/jyjxDasaifengcai',
						isActive: () => ['/pages/jyjxDasaifengcai/jyjxDasaifengcai',
							'/pages/jyjxDasaifengcaiInfo/jyjxDasaifengcaiInfo'
						].some(item => item.includes(data.activePath))
					}, {
						title: '重点项目',
						url: '/pages/jyjxZhongdianxiangmu/jyjxZhongdianxiangmu',
						isActive: () => ['/pages/jyjxZhongdianxiangmu/jyjxZhongdianxiangmu',
							'/pages/jyjxZhongdianxiangmuInfo/jyjxZhongdianxiangmuInfo'
						].some(item => item.includes(data.activePath))
					},
					{
						title: '校企合作',
						url: '/pages/jyjxXiaoqihezuo/jyjxXiaoqihezuo',
						isActive: () => ['/pages/jyjxXiaoqihezuoInfo/jyjxXiaoqihezuoInfo',
							'/pages/jyjxXiaoqihezuo/jyjxXiaoqihezuo'
						].some(item => item.includes(data.activePath))
					},
					{
						title: '规章制度',
						url: '/pages/jyjxGuizhangzhidu/jyjxGuizhangzhidu',
						isActive: () => ['/pages/jyjxGuizhangzhidu/jyjxGuizhangzhidu',
							'/pages/jyjxGuizhangzhiduInfo/jyjxGuizhangzhiduInfo'
						].some(item => item.includes(data.activePath))
					},
				]
			}, {
				title: '学生园地',
				url: '/pages/xsydDeyuduiwu/xsydDeyuduiwu',
				children: [{
					title: '德育队伍',
					url: '/pages/xsydDeyuduiwu/xsydDeyuduiwu',
					isActive: () => ['/pages/xsydDeyuduiwu/xsydDeyuduiwu',
						'/pages/xsydDeyuduiwuInfo/xsydDeyuduiwuInfo'
					].some(item => item.includes(data.activePath))
				}, {
					title: '学生活动',
					url: '/pages/xsydXueshenghuodong/xsydXueshenghuodong',
					isActive: () => ['/pages/xsydXueshenghuodong/xsydXueshenghuodong',
						'/pages/xsydXueshenghuodongInfo/xsydXueshenghuodongInfo'
					].some(item => item.includes(data.activePath))
				}, {
					title: '共青团',
					url: '/pages/xsydGongqingtuan/xsydGongqingtuan',
					isActive: () => ['/pages/xsydGongqingtuan/xsydGongqingtuan',
						'/pages/xsydGongqingtuanInfo/xsydGongqingtuanInfo'
					].some(item => item.includes(data.activePath))
				}, {
					title: '资助管理',
					url: '/pages/xsydZizhuguanli/xsydZizhuguanli',
					isActive: () => ['/pages/xsydZizhuguanli/xsydZizhuguanli',
						'/pages/xsydZizhuguanliInfo/xsydZizhuguanliInfo'
					].some(item => item.includes(data.activePath))
				}]
			},
			{
				title: '招生就业',
				url: "pages/zsjyZhaoshengjianzhang/zsjyZhaoshengjianzhang",
				children: [{
					title: '招生简章',
					url: "/pages/zsjyZhaoshengjianzhang/zsjyZhaoshengjianzhang",
					isActive: () => ['/pages/zsjyZhaoshengjianzhang/zsjyZhaoshengjianzhang'].some(
						item => item.includes(data.activePath))
				}, {
					title: '专业介绍',
					url: '/pages/zsjyZhuanyejieshao/zsjyZhuanyejieshao',
					isActive: () => ['/pages/zsjyZhuanyejieshao/zsjyZhuanyejieshao'].some(item => item
						.includes(data.activePath))
				}, {
					title: '升学',
					url: '/pages/zsjyShengxue/zsjyShengxue',
					isActive: () => ['/pages/zsjyShengxue/zsjyShengxue'].some(item => item.includes(
						data.activePath))
				}, {
					title: '报考指南',
					url: '/pages/zsjyBaokaozhinan/zsjyBaokaozhinan',
					isActive: () => ['/pages/zsjyBaokaozhinan/zsjyBaokaozhinan'].some(item => item
						.includes(
							data.activePath))
				}, {
					title: '往年录取分数',
					url: '/pages/zsjyWangnianluqufenshu/zsjyWangnianluqufenshu',
					isActive: () => ['/pages/zsjyWangnianluqufenshu/zsjyWangnianluqufenshu'].some(
						item => item.includes(
							data.activePath))
				}, {
					title: '校企合作',
					url: '/pages/zsjyXiaoqihezuo/zsjyXiaoqihezuo',
					isActive: () => ['/pages/zsjyXiaoqihezuo/zsjyXiaoqihezuo',
						'/pages/zsjyXiaoqihezuoInfo/zsjyXiaoqihezuoInfo'
					].some(item => item.includes(
						data.activePath))
				}, {
					title: '招聘信息',
					url: '/pages/zsjyZhaopinxinxi/zsjyZhaopinxinxi',
					isActive: () => ['/pages/zsjyZhaopinxinxi/zsjyZhaopinxinxi'].some(item => item
						.includes(
							data.activePath))
				}, {
					title: '政策文件',
					url: '/pages/zsjyZhengcewenjian/zsjyZhengcewenjian',
					isActive: () => ['/pages/zsjyZhengcewenjian/zsjyZhengcewenjian',
						'/pages/zsjyZhengcewenhuaInfo/zsjyZhengcewenhuaInfo'
					].some(item => item.includes(
						data.activePath))
				}, {
					title: '优秀毕业生',
					url: '/pages/zsjyYouxiubiyesheng/zsjyYouxiubiyesheng',
					isActive: () => ['/pages/zsjyYouxiubiyesheng/zsjyYouxiubiyesheng',
						'/pages/zsjyYouxiubiyeshengInfo/zsjyYouxiubiyeshengInfo'
					].some(item => item.includes(
						data.activePath))
				}, {
					title: '预报名',
					url: '/pages/zsjyYubaoming/zsjyYubaoming',
					isActive: () => ['/pages/zsjyYubaoming/zsjyYubaoming'].some(item => item.includes(
						data.activePath))
				}]
			}, {
				title: '职业培训',
				url: '/pages/zypxTongzhigonggao/zypxTongzhigonggao',
				children: [{
					title: '线上教育',
					type: 'link',
					url: '',
					isActive: () => {}
				}, {
					title: '课程查询',
					type: 'link',
					url: '',
					isActive: () => {}
				}, {
					title: '通知公告',
					url: '/pages/zypxTongzhigonggao/zypxTongzhigonggao',
					isActive: () => ['/pages/zypxTongzhigonggao/zypxTongzhigonggao',
						'/pages/zypxTongzhigonggaoInfo/zypxTongzhigonggaoInfo'
					].some(item => item.includes(
						data.activePath))
				}]
			}, {
				title: '下载中心',
				url: '/pages/xzzxXiazaizhongxin/xzzxXiazaizhongxin',
				children: [{
					title: '下载',
					url: '/pages/xzzxXiazaizhongxin/xzzxXiazaizhongxin',
					isActive: () => ['/pages/xzzxXiazaizhongxin/xzzxXiazaizhongxin'].some(item => item
						.includes(
							data.activePath))
				}]
			},

		],
		activeMenu: null,
		activePath: '',
		showMenu: false,
	})



	onLoad(() => {
		const pages = getCurrentPages();
		data.activePath = pages[pages.length - 1].route;
		const parentMenu = data.list.find(item => item.children.some(cit => cit.isActive(data.activePath)));
		if (parentMenu) {
			data.activeMenu = parentMenu.url;
		}
	})

	function handleClick(data) {
		console.log(`菜单:${data.title};路径:${data.url}`);
		if (data.type == 'link') {
			if (data.url) {
				window.location.href = data.url;
			}
			return;
		}
		if (data.url) {
			uni.redirectTo({
				url: data.url
			})
		}
	}

	function handleChangeMenu() {
		data.showMenu = !data.showMenu;
		// data.showMenu && scrollToElement('.head-item-text.active')
	}
</script>

<style>
</style>