feat：“更改底部菜单栏组件”

src/App.vue

@@ -4,12 +4,13 @@
       <transition :name="transitionName">
         <!-- 缓存组件，但是进入编辑页面就会有问题 -->
         <!-- <keep-alive include="device,deviceSet,role"><component :is="Component" /></keep-alive> -->
-        <component :is="Component"  v-if="!$route.meta.keepAlive"/>
+        <component :is="Component" v-if="!$route.meta.keepAlive" />
       </transition>
       <keep-alive>
-      <component :is="Component"  v-if="$route.meta.keepAlive"/>
-    </keep-alive>
+        <component :is="Component" v-if="$route.meta.keepAlive" />
+      </keep-alive>
     </router-view>
+    <nav-bar v-if="tabType"></nav-bar>
   </div>
 </template>
 
@@ -17,12 +18,16 @@
 import { reactive, toRefs } from "vue";
 import { useRouter } from "vue-router";
 import { getLocal } from "@/common/js/utils";
+import navBar from "@/components/NavBar";
+import { ref } from "vue";
+
 export default {
   setup() {
     const router = useRouter();
     const state = reactive({
       transitionName: "slide-left",
     });
+    const tabType = ref(true);
     router.beforeEach((to, from, next) => {
       const token = getLocal("token");
       // token为空跳转登陆页面
@@ -39,9 +44,19 @@ export default {
       }
       next();
     });
+    router.afterEach(()=>{
+      let currentRouteName = router.currentRoute.value.name;
+      if (currentRouteName === 'home' || currentRouteName === 'device' || currentRouteName === 'robotranking' || currentRouteName === 'user') {
+        tabType.value = true;
+      } else { 
+        tabType.value = false;
+      }
+    })
+    
 
-    return { ...toRefs(state) };
+    return { ...toRefs(state),tabType };
   },
+  components: { navBar }
 };
 </script>
 
@@ -166,12 +181,10 @@ body {
   /* 1 */
   width: 8px;
   height: 8px;
-  background: linear-gradient(
-      to right,
+  background: linear-gradient(to right,
       transparent 3px,
       #565656 4px,
-      transparent 6px
-    ),
+      transparent 6px),
     linear-gradient(to bottom, transparent 3px, #565656 4px, transparent 6px);
 }
 

src/components/NavBar.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 底部横条 -->
-  <div class="nav-bar van-hairline--top">
+  <!-- <div class="nav-bar van-hairline--top">
     <ul class="nav-list">
       <router-link class="nav-list-item active" to="home">
         <div class="nbicon">
@@ -31,11 +31,19 @@
         <span>{{$t('navBar.personalCenter')}}</span>
       </router-link>
     </ul>
-  </div>
+  </div> -->
+  <!-- <div> -->
+  <van-tabbar v-model="active" active-color="#4d6add" inactive-color="#404d74">
+    <van-tabbar-item replace name="home" to="home" icon="home-o">{{ $t('navBar.homePage') }}</van-tabbar-item>
+    <van-tabbar-item replace name="device" to="device" icon="setting-o">{{ $t('navBar.deviceInformation') }}</van-tabbar-item>
+    <van-tabbar-item replace name="robotranking" to="robotranking" icon="bar-chart-o">{{ $t('navBar.machineRanking') }}</van-tabbar-item>
+    <van-tabbar-item replace name="user" to="user" icon="friends-o">{{ $t('navBar.personalCenter') }}</van-tabbar-item>
+  </van-tabbar>
+  <!-- </div> -->
 </template>
 
 <script>
-import { onMounted, computed } from "vue";
+import { onMounted, computed, ref } from "vue";
 import { useStore } from "vuex";
 import homeUrl from "@/assets/navbarLogo/home.png";
 import homeActiveUrl from "@/assets/navbarLogo/homeActive.png";
@@ -45,10 +53,11 @@ import rankingUrl from "@/assets/navbarLogo/ranking.png";
 import rankingActiveUrl from "@/assets/navbarLogo/rankingActive.png";
 import userUrl from "@/assets/navbarLogo/user.png";
 import userActiveUrl from "@/assets/navbarLogo/userActive.png";
+import { useRouter } from "vue-router";
 
 export default {
   setup() {
-    // const route = useRoute()
+    const router = useRouter()
     const store = useStore();
     onMounted(() => {
       // const token = getLocal('token')
@@ -56,10 +65,15 @@ export default {
       // if (token && !['/home', '/category'].includes(path)) {
       //   store.dispatch('updateCart')
       // }
+      
     });
     const count = computed(() => {
       return store.state.cartCount;
     });
+    const active = ref('home');
+    router.afterEach(()=>{
+      active.value = router.currentRoute.value.name;     
+    })
 
     return {
       count,
@@ -70,7 +84,8 @@ export default {
       rankingUrl,
       rankingActiveUrl,
       userUrl,
-      userActiveUrl
+      userActiveUrl,
+      active,
     };
   },
 };
@@ -78,47 +93,70 @@ export default {
 
 <style lang="less" scoped >
 @import "../common/style/mixin";
-.nav-bar {
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  padding: 5px 0;
-  z-index: 1000;
-  background: #fff;
-  transform: translateZ(0);
-  -webkit-transform: translateZ(0);
-  .nav-list {
-    width: 100%;
-    .fj();
-    flex-direction: row;
-    padding: 0;
-    .navIconImage { width: 22px; height: 22px; }
-    .dailyImage { display: inline-block; }
-    .activeImage { display: none; }
-    .nav-list-item {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-      text-align: center;
-      color: #666;
-      &.router-link-active {
-        color: rgba(77,106,221,1);
-        .dailyImage { display: none; }
-        .activeImage { display: inline-block; }
-      }
-      i {
-        text-align: center;
-        font-size: 22px;
-      }
-      span {
-        font-size: 12px;
-      }
-      .van-icon-shopping-cart-o {
-        margin: 0 auto;
-        margin-bottom: 2px;
-      }
-    }
-  }
-}
+
+// .nav-bar {
+//   position: fixed;
+//   left: 0;
+//   bottom: 0;
+//   width: 100%;
+//   padding: 5px 0;
+//   z-index: 1000;
+//   background: #fff;
+//   transform: translateZ(0);
+//   -webkit-transform: translateZ(0);
+
+//   .nav-list {
+//     width: 100%;
+//     .fj();
+//     flex-direction: row;
+//     padding: 0;
+
+//     .navIconImage {
+//       width: 22px;
+//       height: 22px;
+//     }
+
+//     .dailyImage {
+//       display: inline-block;
+//     }
+
+//     .activeImage {
+//       display: none;
+//     }
+
+//     .nav-list-item {
+//       display: flex;
+//       flex: 1;
+//       flex-direction: column;
+//       text-align: center;
+//       color: #666;
+
+//       &.router-link-active {
+//         color: rgba(77, 106, 221, 1);
+
+//         .dailyImage {
+//           display: none;
+//         }
+
+//         .activeImage {
+//           display: inline-block;
+//         }
+//       }
+
+//       i {
+//         text-align: center;
+//         font-size: 22px;
+//       }
+
+//       span {
+//         font-size: 12px;
+//       }
+
+//       .van-icon-shopping-cart-o {
+//         margin: 0 auto;
+//         margin-bottom: 2px;
+//       }
+//     }
+//   }
+// }
 </style>

src/main.js

@@ -4,7 +4,7 @@ import {
   AddressList, Field, CellGroup, Cell, SwipeCell, Icon, Stepper, Card, Checkbox, CheckboxGroup, Button, Swipe, SwipeItem,
   PullRefresh, List, Tab, Tabs, SubmitBar, Toast, Skeleton, RadioGroup, Radio, NoticeBar, ActionSheet, Cascader, Col, Row,
   Slider, DatePicker, Switch, Calendar, Picker, Uploader, Tag, DropdownMenu, DropdownItem, Notify, ConfigProvider, NavBar,
-  Area, Popover, Collapse, CollapseItem, PickerGroup, TimePicker, BackTop, Progress
+  Area, Popover, Collapse, CollapseItem, PickerGroup, TimePicker, BackTop, Progress, Tabbar, TabbarItem
 } from 'vant';
 import { Image as VanImage } from 'vant';
 import App from './App.vue'
@@ -88,6 +88,8 @@ app.use(ActionBarButton)
   .use(TimePicker)
   .use(BackTop)
   .use(Progress)
+  .use(Tabbar)
+  .use(TabbarItem)
 
 app.use(router)
 app.use(store)

src/views/device/index.vue

@@ -1,8 +1,8 @@
 <template>
   <!-- 设备列表 -->
   <div class="devicePage flex-col">
-    <s-header :name="sys ? sys.title : $t('device.managementCenter')" :noback="true"></s-header>
     <div class="listBox">
+      <s-header :name="sys ? sys.title : $t('device.managementCenter')" :noback="true" :isFixed="false"></s-header>
       <van-list v-model:loading="loading" v-model:error="error" :error-text="$t('public.requestFailed')"
         :finished="finished" :finished-text="$t('public.noMore')" offset="100" :immediate-check="false" @load="onLoad">
         <div class="deviceBox1 flex-col">
@@ -256,7 +256,7 @@
     <!-- 搜索弹出框 -->
     <deviceSearch ref="searchRef" @search="search($event)"></deviceSearch>
     <div style="height: 50px;"></div>
-    <nav-bar></nav-bar>
+    <!-- <nav-bar></nav-bar> -->
   </div>
 </template>
 
@@ -267,7 +267,7 @@ import {
 } from "../../service/home";
 import { onMounted, reactive, toRefs, ref, onActivated } from "vue";
 import { showFailToast, showSuccessToast, showToast, showDialog } from "vant";
-import navBar from "../../components/NavBar";
+// import navBar from "../../components/NavBar";
 import sHeader from "../../components/SimpleHeader";
 import { getLoginUser, Format_calcuDecial } from "../../common/js/utils";
 import {
@@ -285,7 +285,7 @@ import { onBeforeUnmount } from "vue";
 
 export default {
   name: "device",
-  components: { sHeader, navBar, deviceSearch, deviceOper },
+  components: { sHeader, deviceSearch, deviceOper },
   setup() {
     const { t } = useI18n();
     const searchRef = ref(null);
@@ -343,7 +343,7 @@ export default {
       id: "", // 用户账户id
       // adminName: '', // 用户登录名
       current: 1, // 页数
-      size: 15, // 页大小
+      size: 10, // 页大小
       todayDate: dateUtil.formateDate(new Date(), "yyyy-MM-dd"), // 当天时间
     });
     // 初始化页面获取列表

src/views/home/index.vue

@@ -111,7 +111,7 @@
         <div class="o-w" style="max-height: 50vh; overflow-y: auto" v-html="noticeContent.note"></div>
       </template>
     </kDialog>
-    <nav-bar></nav-bar>
+    <!-- <nav-bar></nav-bar> -->
   </div>
 </template>
 
@@ -121,7 +121,7 @@ import kNoData from "../../components/commom/kNoData/index.vue";
 import kDialog from "../../components/commom/kDialog/index.vue";
 import { onMounted, ref, nextTick } from "vue";
 import sHeader from "../../components/SimpleHeader";
-import navBar from "../../components/NavBar";
+// import navBar from "../../components/NavBar";
 import dateSelectList from "../../components/dateSelectList";
 import typeSelectList from "../../components/typeSelectList";
 import { getLoginUser, $M_Menus, Format_time, styleUrl } from "../../common/js/utils";
@@ -140,7 +140,7 @@ export default {
   name: "home",
   components: {
     sHeader,
-    navBar,
+    // navBar,
     dateSelectList,
     typeSelectList,
     kDialog,

src/views/robotRanking.vue

@@ -160,7 +160,7 @@
       <van-picker :title="$t('robotRanking.yearPopTitle')" :columns="yearPopList" :columns-field-names="yearPopFieldName"
         @confirm="yearPopConfirm" @cancel="yearShow = false" />
     </van-popup>
-    <nav-bar></nav-bar>
+    <!-- <nav-bar></nav-bar> -->
   </div>
 </template>
 
@@ -169,7 +169,7 @@
 import kNoData from "../components/commom/kNoData/index.vue";
 import { onMounted, ref, reactive, computed, nextTick } from "vue";
 import sHeader from "../components/SimpleHeader";
-import navBar from "../components/NavBar";
+// import navBar from "../components/NavBar";
 import { getRankingList } from "../service/robotRanking";
 import { getLoginUser, styleUrl } from "../common/js/utils";
 import kTabs from "../components/commom/kTabs/index.vue";
@@ -882,7 +882,7 @@ export default {
       isAdmin,
     };
   },
-  components: { sHeader, navBar, kTabs, kDialog, kNoData },
+  components: { sHeader, kTabs, kDialog, kNoData },
 };
 </script>
 

src/views/user.vue

@@ -272,7 +272,7 @@
         </div>
       </div>
     </div>
-    <nav-bar></nav-bar>
+    <!-- <nav-bar></nav-bar> -->
     <!-- 退出登录弹窗 -->
     <kDialog :dialogTitle="$t('user.logOutTips')" :cancelBtnTxt="$t('user.cancelLog')"
       :confirmBtnTxt="$t('user.confirmLog')" ref="kDialogRef" :dialogContent="$t('user.logOutContent')"
@@ -294,7 +294,7 @@ import { updateAdmin } from "@/service/merchantManage";
 import kDialog from "@/components/commom/kDialog/index.vue";
 import { onMounted, reactive, ref } from "vue";
 import sHeader from "@/components/SimpleHeader";
-import navBar from "@/components/NavBar";
+// import navBar from "@/components/NavBar";
 import {
   getLoginUser,
   $M_EmailAvailable,
@@ -307,7 +307,7 @@ import { useI18n } from "vue-i18n";
 import { styleUrl } from "../common/js/utils";
 
 export default {
-  components: { sHeader, navBar, kDialog, kCascader },
+  components: { sHeader, kDialog, kCascader },
   setup() {
     // 引入语言
     const { t } = useI18n();