feat: 首页样式调整

components.d.ts

@@ -25,5 +25,6 @@ declare module 'vue' {
         GlobalUpload: typeof import('./src/mocp/components/global-upload/global-upload.vue')['default']
         // 自定义组件
         CustomScore: typeof import('./src/mocp/components/widget/custom-score.vue')['default']
+        CustomTabbar: typeof import('./src/mocp/components/widget/custom-tabbar.vue')['default']
     }
 }

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

@@ -22,7 +22,7 @@
             <view :style="{ height: safeAreaInsets?.top + 'px' }" v-if="custom"></view>
             <!-- 自定义导航栏 -->
             <global-navbar :title="title" v-if="showNavbar">
-                <template #left v-if="pages.length > 1">
+                <template #left v-if="pages.length > 1 && showNavLeft">
                     <up-icon v-if="navLeftType == 'icon'" :name="navLeftIcon" size="16" @tap="handleLeftClick"></up-icon>
                     <view v-if="navLeftType == 'text'" class="cancel" @tap="handleLeftClick">{{ navLeftText }}</view>
                 </template>
@@ -49,6 +49,7 @@
                 <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>
@@ -71,6 +72,16 @@ const ps = defineProps({
         type: [String, Number],
         default: 0
     },
+    //是否显示底部导航
+    showTabbar: {
+        type: Boolean,
+        default: false
+    },
+    //底部导航选中的下标
+    tabbarValue: {
+        type: [Number, String],
+        default: 1
+    },
     //是否自动加载
     auto: {
         type: Boolean,
@@ -81,6 +92,11 @@ const ps = defineProps({
         type: Boolean,
         default: true
     },
+    //是否显示nav左边插槽
+    showNavLeft: {
+        type: Boolean,
+        default: true
+    },
     //nav左边插槽类型:icon,text
     navLeftType: {
         type: String,

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

+<template>
+    <up-tabbar :value="tabbarValue" :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">
+                <template #active-icon>
+                    <image class="u-page__item__slot-icon" :src="item.selectedIconPath" mode="widthFix"></image>
+                </template>
+                <template #inactive-icon>
+                    <image class="u-page__item__slot-icon" :src="item.iconPath" mode="widthFix"></image>
+                </template>
+            </up-tabbar-item>
+        </template>
+    </up-tabbar>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const ps = defineProps({
+    tabbarValue: {
+        type: [Number, String],
+        default: 1
+    }
+})
+
+const list = ref([
+    {
+        pagePath: '/home/index',
+        text: '首页',
+        iconPath: '/static/mocp/image/menu/home.png',
+        selectedIconPath: '/static/mocp/image/menu/home-select.png'
+    },
+    {
+        pagePath: '/panel/index',
+        text: '工作台',
+        iconPath: '/static/mocp/image/menu/panel.png',
+        selectedIconPath: '/static/mocp/image/menu/panel-select.png'
+    },
+    {
+        pagePath: '/chat/index',
+        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)
+    }
+}
+</script>
+<style lang="scss" scoped>
+.u-page__item__slot-icon {
+    width: 48rpx;
+    height: 48rpx;
+}
+</style>

src/mocp/store/base.js

@@ -4,6 +4,7 @@ import { defineStore } from 'pinia'
 const useBaseStore = defineStore('base', {
     state: () => {
         return {
+            isloading: false, //是否加载
             selectList: {
                 deviceNumSelect: [] //机号
             },
@@ -13,6 +14,7 @@ const useBaseStore = defineStore('base', {
     getters: {},
     actions: {
         async initSysData() {
+            if (this.isloading) return
             uni.showLoading({
                 title: '正在加载系统所有基本参数中，请稍后！',
                 mask: true
@@ -21,6 +23,7 @@ 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.navigateTo('/panel/index')
+            uni.$mocpJump.redirectTo('/panel/index')
         },
         //退出登录
         handleLogOut() {

src/pages.json

@@ -42,15 +42,9 @@
 			}
 		},
 		{
-			"path": "pages/modules/mocp/mine/index",
+			"path": "pages/modules/mocp/home/index",
 			"style": {
-				"navigationBarTitleText": "个人中心"
-			}
-		},
-		{
-			"path": "pages/modules/mocp/experience/index",
-			"style": {
-				"navigationBarTitleText": "经验库"
+				"navigationBarTitleText": "首页"
 			}
 		},
 		{

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

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

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

-<template>经验库</template>
-
-<script setup></script>
-
-<style lang="scss"></style>

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

 <template>
-    <global-page title="个人中心">
+    <global-page title="首页" :showNavLeft="false" showTabbar :tabbarValue="0">
         <template #bottom>
             <global-button size="large" type="primary" @tap="handleLogOut">退出登录</global-button>
         </template>

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

 <template>
-    <view class="content" :style="{ height: `calc(100vh - 386rpx - ${safeAreaInsets?.top + 'px'})` }">
+    <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>
         </view>

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

@@ -14,22 +14,20 @@
         </view>
         <view class="navbar-bottom-list">
             <view class="list-item">
-                <image class="list-item-image" src="/static/mocp/image/panel/wdrw.png" />
-                <view class="list-item-title">我的任务</view>
-                <view class="list-item-txt">24</view>
+                <image class="list-item-image" src="/static/mocp/image/panel/wdxx.png" />
+                <view class="list-item-msg">
+                    <view class="list-item-title">我的待办</view>
+                    <view class="list-item-txt">24</view>
+                </view>
             </view>
             <view class="list-item-line"></view>
             <view class="list-item">
-                <image class="list-item-image" src="/static/mocp/image/panel/gjrw.png" />
-                <view class="list-item-title">跟机任务</view>
-                <view class="list-item-txt">24</view>
+                <image class="list-item-image" src="/static/mocp/image/panel/wdxx.png" />
+                <view class="list-item-msg">
+                    <view class="list-item-title">我的消息</view>
+                    <view class="list-item-txt">24</view>
+                </view>
             </view>
-            <!-- <view class="list-item-line"></view>
-            <view class="list-item">
-                <image class="list-item-image" src="static/mocp/image/mocp/panel/AOGrw.png" />
-                <view class="list-item-title">AOG任务</view>
-                <view class="list-item-txt">24</view>
-            </view> -->
         </view>
     </view>
 </template>

src/pages/modules/mocp/panel/constants/panel-navbar.scss

@@ -24,6 +24,7 @@
                 height: 80rpx;
             }
             .info {
+                color: #fff;
                 .place {
                     font-size: 28rpx;
                 }
@@ -42,27 +43,26 @@
         align-items: center;
         margin: 0 32rpx;
         border-radius: 16rpx;
-        padding: 12rpx 128rpx 12rpx 128rpx;
+        padding: 24rpx 44rpx 40rpx 28rpx;
         .list-item {
-            text-align: center;
+            display: flex;
             &-image {
-                width: 84rpx;
-                height: 84rpx;
+                width: 132rpx;
+                height: 132rpx;
             }
-            &-title {
-                font-size: 24rpx;
-                color: $mocp-text-4;
+            &-msg {
+                text-align: center;
+                font-size: 28rpx;
+                color: $mocp-text-5;
+                margin-top: 36rpx;
             }
             &-txt {
                 font-weight: bold;
-                font-size: 40rpx;
-                color: $mocp-text-5;
-                line-height: 56rpx;
             }
             &-line {
                 width: 2rpx;
                 height: 58rpx;
-                background: #e4f1ff;
+                background: #e6f0fe;
             }
         }
     }

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

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