feat: 处理自定义菜单

src/mocp/components/global-navbar/global-navbar.vue

 <template>
     <!-- 全局自定义navbar -->
     <view class="mocp-navbar">
-        <up-navbar :title="title" :fixed="false" :bgColor="bgColor" :safeAreaInsetTop="false" :titleStyle="getTitleStyle">
+        <up-navbar :title="title" :fixed="false" :bgColor="bgColor" :safeAreaInsetTop="false" :titleStyle="getTitleStyle" :leftIconSize="0">
             <template #left>
                 <slot name="left"></slot>
             </template>

src/mocp/components/global-page/global-page.vue

@@ -49,7 +49,6 @@
                 <global-button type="primary" size="large" @tap="handleFooterClick">{{ footerBtnText }}</global-button>
             </view>
             <slot name="bottom"></slot>
-            <custom-tabbar :tabbarValue="tabbarValue"></custom-tabbar>
         </template>
     </z-paging>
 </template>
@@ -72,16 +71,6 @@ const ps = defineProps({
         type: [String, Number],
         default: 0
     },
-    //是否显示底部导航
-    showTabbar: {
-        type: Boolean,
-        default: false
-    },
-    //底部导航选中的下标
-    tabbarValue: {
-        type: [Number, String],
-        default: 1
-    },
     //是否自动加载
     auto: {
         type: Boolean,

src/mocp/components/global-tabs/global-tabs.vue

@@ -74,6 +74,10 @@ const ps = defineProps({
     keyName: {
         type: String,
         default: 'name'
+    },
+    scrollable: {
+        type: Boolean,
+        default: true
     }
 })
 

src/mocp/components/widget/custom-tabbar.vue

 <template>
-    <up-tabbar :value="tabbarValue" :fixed="false" :placeholder="false" :safeAreaInsetBottom="true" activeColor="#165dff" inactiveColor="#4e5969">
+    <up-tabbar :value="modelValue" :fixed="false" :placeholder="false" :safeAreaInsetBottom="true" activeColor="#165dff" inactiveColor="#4e5969">
         <template v-for="item in list" :key="item.name">
-            <up-tabbar-item :text="item.text" @click="handleClickTabbar">
+            <up-tabbar-item :text="item.text" @click="handleClickTabbar" :name="item.name">
                 <template #active-icon>
                     <image class="u-page__item__slot-icon" :src="item.selectedIconPath" mode="widthFix"></image>
                 </template>
@@ -16,38 +16,38 @@
 <script setup>
 import { ref } from 'vue'
 
+const es = defineEmits(['update:modelValue', 'change'])
 const ps = defineProps({
-    tabbarValue: {
-        type: [Number, String],
-        default: 1
+    modelValue: {
+        type: String,
+        default: ''
     }
 })
 
 const list = ref([
     {
-        pagePath: '/home/index',
+        name: 'home',
         text: '首页',
         iconPath: '/static/mocp/image/menu/home.png',
         selectedIconPath: '/static/mocp/image/menu/home-select.png'
     },
     {
-        pagePath: '/panel/index',
+        name: 'panel',
         text: '工作台',
         iconPath: '/static/mocp/image/menu/panel.png',
         selectedIconPath: '/static/mocp/image/menu/panel-select.png'
     },
     {
-        pagePath: '/chat/index',
+        name: 'chat',
         text: '沟通',
         iconPath: '/static/mocp/image/menu/chat.png',
         selectedIconPath: '/static/mocp/image/menu/chat-select.png'
     }
 ])
 
-const handleClickTabbar = (index) => {
-    if (ps.tabbarValue != index) {
-        uni.$mocpJump.reLaunch(list.value[index].pagePath)
-    }
+const handleClickTabbar = (name) => {
+    es('update:modelValue', name)
+    es('change', name)
 }
 </script>
 <style lang="scss" scoped>

src/mocp/store/base.js

@@ -4,7 +4,6 @@ import { defineStore } from 'pinia'
 const useBaseStore = defineStore('base', {
     state: () => {
         return {
-            isloading: false, //是否加载
             selectList: {
                 deviceNumSelect: [] //机号
             },
@@ -14,7 +13,6 @@ const useBaseStore = defineStore('base', {
     getters: {},
     actions: {
         async initSysData() {
-            if (this.isloading) return
             uni.showLoading({
                 title: '正在加载系统所有基本参数中，请稍后！',
                 mask: true
@@ -23,7 +21,6 @@ const useBaseStore = defineStore('base', {
                 await this.getAircraftNumbers()
                 await this.getBasicParamsList()
                 uni.hideLoading()
-                this.isloading = true
             } catch (error) {
                 uni.hideLoading()
             }

src/mocp/store/user.js

@@ -69,7 +69,7 @@ const useUserStore = defineStore('user', {
                 })
             }
             //跳转工作台
-            uni.$mocpJump.redirectTo('/panel/index')
+            uni.$mocpJump.redirectTo('/tab/index')
         },
         //退出登录
         handleLogOut() {

src/mocp/utils/jump.js

@@ -81,8 +81,7 @@ export const reLaunch = (url, params = {}) => {
 
 /**
  * 封装 uni.navigateBack 为 Promise 版本
- * @param {string} url 要跳转的页面路径
- * @param {Object} params 要传递的参数对象
+ * @param {string} delta 要回退的数量
  * @returns {Promise} 返回一个 Promise 对象，resolve 表示跳转成功，reject 表示跳转失败
  */
 export const navigateBack = (delta = 1) => {
@@ -99,3 +98,24 @@ export const navigateBack = (delta = 1) => {
         })
     })
 }
+
+/**
+ * 封装 uni.switchTab 为 Promise 版本
+ * @param {string} name 要跳转的tab页面名称
+ * @returns {Promise} 返回一个 Promise 对象，resolve 表示跳转成功，reject 表示跳转失败
+ */
+export const switchTab = (name) => {
+    return new Promise((resolve, reject) => {
+        // 调用 uni.redirectTo 并处理结果
+        const fullUrl = 'tab/index?name=' + name
+        uni.redirectTo({
+            url: '/pages/modules/mocp' + fullUrl,
+            success: () => {
+                resolve()
+            },
+            fail: (err) => {
+                reject(err)
+            }
+        })
+    })
+}

src/pages.json

@@ -124,6 +124,12 @@
 			"style": {
 				"navigationBarTitleText": "跟踪批示"
 			}
+		},
+		{
+			"path": "pages/modules/mocp/tab/index",
+			"style": {
+				"navigationBarTitleText": "tab页面"
+			}
 		}
 	],
 	"globalStyle": {
@@ -142,7 +148,7 @@
 		"list": [
 			{
 				"name": "test", //模式名称
-				"path": "pages/modules/mocp/panel/index" //启动页面，必选
+				"path": "pages/modules/mocp/tab/index" //启动页面，必选
 			},
 			{
 				"name": "login", //模式名称

src/pages/modules/mocp/chat/index.vue

 <template>
-    <global-page title="沟通" :showNavLeft="false" showTabbar :tabbarValue="2"></global-page>
+    <global-page title="沟通" :showNavLeft="false"></global-page>
 </template>
 
 <script setup></script>

src/pages/modules/mocp/home/index.vue

 <template>
-    <global-page title="首页" :showNavLeft="false" showTabbar :tabbarValue="0">
-        <template #bottom>
-            <global-button size="large" type="primary" @tap="handleLogOut">退出登录</global-button>
-        </template>
-    </global-page>
+    <global-page title="首页" :showNavLeft="false"></global-page>
 </template>
 
-<script setup>
-import useUserStore from 'mocp/store/user'
-
-//退出登录
-const userStore = useUserStore()
-const handleLogOut = () => {
-    userStore.handleLogOut()
-}
-</script>
+<script setup></script>
 
 <style lang="scss"></style>

src/pages/modules/mocp/panel/components/panel-menu.vue

 <template>
     <view class="content" :style="{ height: `calc(100vh - 344rpx - ${safeAreaInsets?.top + 'px'} - ${safeAreaInsets?.bottom + 'px'} - 50px)` }">
         <view class="tab-nav">
-            <global-tabs :list="tabNav" @handleClick="handleClick"></global-tabs>
+            <global-tabs :list="tabNav" @handleClick="handleClick" :scrollable="false"></global-tabs>
         </view>
         <scroll-view class="tab-content" scroll-y="true">
             <view class="tab-content-item" v-if="activeIndex == 0">

src/pages/modules/mocp/panel/components/panel-navbar.vue

@@ -14,7 +14,7 @@
         </view>
         <view class="navbar-bottom-list">
             <view class="list-item">
-                <image class="list-item-image" src="/static/mocp/image/panel/wdxx.png" />
+                <image class="list-item-image" src="/static/mocp/image/panel/wddb.png" />
                 <view class="list-item-msg">
                     <view class="list-item-title">我的待办</view>
                     <view class="list-item-txt">24</view>

src/pages/modules/mocp/panel/index.vue

 <template>
-    <global-page :showNavbar="false" showTabbar :tabbarValue="1">
+    <global-page :showNavbar="false">
         <!-- 导航栏 -->
         <template #top>
             <image class="page-bg" src="/static/mocp/image/panel/page-bg.png" />

src/pages/modules/mocp/tab/index.vue

+<template>
+    <global-page>
+        <home v-show="tabbarValue == 'home'"></home>
+        <panel v-show="tabbarValue == 'panel'"></panel>
+        <chat v-show="tabbarValue == 'chat'"></chat>
+        <template #bottom>
+            <global-button size="large" type="primary" @tap="handleLogOut" v-show="tabbarValue == 'home'">退出登录</global-button>
+            <custom-tabbar v-model="tabbarValue"></custom-tabbar>
+        </template>
+    </global-page>
+</template>
+
+<script setup>
+import home from '../home/index.vue'
+import panel from '../panel/index.vue'
+import chat from '../chat/index.vue'
+import { ref } from 'vue'
+import useUserStore from 'mocp/store/user'
+
+const query = defineProps(['name'])
+const tabbarValue = ref(query.name || 'panel')
+//退出登录
+const userStore = useUserStore()
+const handleLogOut = () => {
+    userStore.handleLogOut()
+}
+</script>
+
+<style lang="scss"></style>