自定义tabbar

collect_information/package.json

@@ -59,6 +59,7 @@
     "@tarojs/taro": "3.6.25",
     "dayjs": "^1.11.10",
     "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^4.0.1",
     "vue": "^3.0.0"
   },
   "devDependencies": {

collect_information/src/app.config.ts

@@ -22,6 +22,12 @@ export default defineAppConfig({
         iconPath: "assets/mine/punch.png",
         selectedIconPath: "assets/mine/punch-active.png"
       },
+      {
+        pagePath: 'pages/policeManager/index/index',
+        text: '首页',
+        iconPath: "assets/mine/punch.png",
+        selectedIconPath: "assets/mine/punch-active.png"
+      },
       {
         pagePath: 'pages/employeeInfo/employeeInfo',
         text: '员工信息',

collect_information/src/app.ts

@@ -2,7 +2,10 @@ import {createApp} from 'vue'
 import {createPinia} from 'pinia'
 import './app.scss'
 import './assets/scss/colorui.scss'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
+const pinia = createPinia()
+pinia.use(piniaPluginPersistedstate)
 const App = createApp({
   onShow(options) {
     console.log('App onShow.')
@@ -10,6 +13,6 @@ const App = createApp({
   // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖
 })
 
-App.use(createPinia())
+App.use(pinia)
 
 export default App

collect_information/src/custom-tab-bar/index.vue

@@ -1,11 +1,14 @@
 <template>
-  <cover-view class="tab-bar">
+  <!--https://developers.weixin.qq.com/community/develop/doc/000c84de0cc590bbe54b97edf5e414?highLine=%25E8%2587%25AA%25E5%25AE%259A%25E4%25B9%2589tabbar-->
-    <cover-view class="tab-bar-border"></cover-view>
+  <!--微信官方 回复 关于 自定义tabbar切换时会闪烁-->
-    <cover-view v-for="(item, index) in list" :key="index" class="tab-bar-item" @tap="switchTab(index, item.pagePath)">
+
-      <cover-image :src="selected === index ? item.selectedIconPath : item.iconPath"/>
+  <view class="tab-bar">
-      <cover-view :style="{ color: selected === index ? selectedColor : color }">{{ item.text }}</cover-view>
+    <view class="tab-bar-border"></view>
-    </cover-view>
+    <view v-for="(item, index) in list" :key="index" class="tab-bar-item" @tap="switchTab(index, item.pagePath)">
-  </cover-view>
+      <image :src="selected === index ? item.selectedIconPath : item.iconPath"/>
+      <view :style="{ color: selected === index ? selectedColor : color }">{{ item.text }}</view>
+    </view>
+  </view>
 </template>
 
 <script setup>
@@ -15,29 +18,9 @@ import {useCounterStore} from '@/store'
 
 const store = useCounterStore()
 const selected = computed(() => store.getSelected)
-
 const color = '#000000'
 const selectedColor = '#DC143C'
-const list = [
+const list = computed(() => store.getList)
-  {
-    pagePath: '/pages/projectManager/index/index',
-    text: '首页',
-    iconPath: "../assets/mine/punch.png",
-    selectedIconPath: "../assets/mine/punch-active.png"
-  },
-  {
-    pagePath: '/pages/employeeInfo/employeeInfo',
-    text: '员工信息',
-    iconPath: "../assets/mine/punch.png",
-    selectedIconPath: "../assets/mine/punch-active.png"
-  },
-  {
-    pagePath: '/pages/mine/mine',
-    text: '我的',
-    iconPath: "../assets/mine/my.png",
-    selectedIconPath: "../assets/mine/my-active.png"
-  },
-]
 
 function switchTab(index, url) {
   setSelected(index)
@@ -80,12 +63,12 @@ function setSelected(index) {
   flex-direction: column;
 }
 
-.tab-bar-item cover-image {
+.tab-bar-item image {
   width: 54px;
   height: 54px;
 }
 
-.tab-bar-item cover-view {
+.tab-bar-item view {
   font-size: 20px;
 }
 </style>

collect_information/src/pages/login/login.vue

@@ -30,9 +30,11 @@ import "./login.scss";
 import Taro, {useLoad} from "@tarojs/taro";
 import api from "@/request/index";
 
+import {useCounterStore} from '@/store'
 
-
+const store = useCounterStore()
-useLoad(() => {});
+useLoad(() => {
+});
 const onLogin = () => {
   Taro.login({
     success: (res) => {
@@ -43,12 +45,25 @@ const onLogin = () => {
             code: res.code
           }
         }).then(async (resp) => {
+          const {
+            extData: {
+              identity: {value}
+            }
+          } = resp.data
+          if (value === 'police') {
+            store.updateHomePagePath('/pages/policeManager/index/index')  // 公安首页
+          } else {
+            store.updateHomePagePath('/pages/projectManager/index/index')  // 项目经理首页
+          }
+          // 将更新后的 list 存储到 Pinia 和本地存储
+          await Taro.setStorageSync('list', store.list)
           await Taro.setStorage({
             key: "token",
             data: resp.data,
             success(res) {
               Taro.switchTab({
-                url: '/pages/projectManager/index/index'
+                // url: '/pages/projectManager/index/index'
+                url: store.list[0].pagePath
               })
             },
           })
@@ -64,8 +79,5 @@ const onLogin = () => {
   });
 
 
-
-
-
 };
 </script>

collect_information/src/store/index.ts

@@ -1,19 +1,51 @@
 import {defineStore} from 'pinia'
+import Taro from '@tarojs/taro'
 
 export const useCounterStore = defineStore('counter', {
   state: () => {
     return {
       userInfo: {},
-      selected: 0
+      selected: 0,
+      list: Taro.getStorageSync('list') || [
+        {
+          pagePath: '/pages/projectManager/index/index',
+          text: '首页',
+          iconPath: "/assets/mine/punch.png",
+          selectedIconPath: "/assets/mine/punch-active.png"
+        },
+        {
+          pagePath: '/pages/employeeInfo/employeeInfo',
+          text: '员工信息',
+          iconPath: "/assets/mine/punch.png",
+          selectedIconPath: "/assets/mine/punch-active.png"
+        },
+        {
+          pagePath: '/pages/mine/mine',
+          text: '我的',
+          iconPath: "/assets/mine/my.png",
+          selectedIconPath: "/assets/mine/my-active.png"
+        },
+      ]
     }
   },
   actions: {
     setSelected(index: number) {
       this.selected = index
+    },
+    updateHomePagePath(newPath: string) {
+      this.list[0].pagePath = newPath
+      // 更新 list 后存储到小程序本地存储
+      Taro.setStorageSync('list', this.list)
     }
   },
   getters: {
-    getSelected: (state) => state.selected
+    getSelected: (state) => state.selected,
+    getList: (state) => state.list
+  },
+  persist: {
+    // key: 'my-store',  // 存储到 localStorage 的 key
+    // storage: localStorage,  // 持久化方式为 localStorage
+    // paths: ['list']  // 持久化 list
   }
 })