浏览代码

feat: 优化tabbar切换逻辑

zhangyuhan 1 年之前
父节点
当前提交
aad6509b46
共有 4 个文件被更改,包括 37 次插入65 次删除
  1. 4 8
      src/custom-tab-bar/index.vue
  2. 2 5
      src/pages/tabbar/home/index.vue
  3. 4 50
      src/pages/tabbar/monitor/index.vue
  4. 27 2
      src/store/modules/tabbar.js

+ 4 - 8
src/custom-tab-bar/index.vue

@@ -22,7 +22,7 @@
 
 
 <script>
 <script>
 import { Tabbar, TabbarItem } from "vant";
 import { Tabbar, TabbarItem } from "vant";
-import { mapGetters, mapMutations } from "vuex";
+import {mapActions, mapGetters, mapMutations} from "vuex";
 import Taro from "@tarojs/taro";
 import Taro from "@tarojs/taro";
 import appConfig from "../../project-config";
 import appConfig from "../../project-config";
 
 
@@ -36,15 +36,14 @@ export default {
   },
   },
   data () {
   data () {
     return {
     return {
-      active: 'home',
-      tabbars: appConfig.tabbars
+      active: 'home'
     }
     }
   },
   },
   computed: {
   computed: {
-    ...mapGetters('tabbar', ['activeTabKey'])
+    ...mapGetters('tabbar', ['activeTabKey', 'tabbars'])
   },
   },
   methods: {
   methods: {
-    ...mapMutations('tabbar', ['doSwitchTab']),
+    ...mapActions('tabbar', ['doSwitchTab']),
     checkActiveTabbar ()  {
     checkActiveTabbar ()  {
       const activeKey = this.getComputedActiveKey(this.activeTabKey || this.tabbars[0].key)
       const activeKey = this.getComputedActiveKey(this.activeTabKey || this.tabbars[0].key)
       this.doSwitchTab(activeKey)
       this.doSwitchTab(activeKey)
@@ -62,9 +61,6 @@ export default {
     },
     },
     onSwitchTab (item) {
     onSwitchTab (item) {
       this.doSwitchTab(item.key)
       this.doSwitchTab(item.key)
-      Taro.switchTab({
-        url: item.path
-      })
     }
     }
   }
   }
 }
 }

+ 2 - 5
src/pages/tabbar/home/index.vue

@@ -56,7 +56,7 @@ import Taro from "@tarojs/taro";
 import { Popup } from 'vant'
 import { Popup } from 'vant'
 import AdSwiperList from '@/components/common/AdSwiperList'
 import AdSwiperList from '@/components/common/AdSwiperList'
 import adSingle from '@/components/common/Ad'
 import adSingle from '@/components/common/Ad'
-import { mapState, mapGetters, mapMutations} from "vuex";
+import {mapState, mapGetters, mapMutations, mapActions} from "vuex";
 import TopSearch from "@/components/search/TopSearch.vue";
 import TopSearch from "@/components/search/TopSearch.vue";
 import SearchResultList from '@/components/search/result/list'
 import SearchResultList from '@/components/search/result/list'
 import SearchResultCell from '@/components/search/result/list-item'
 import SearchResultCell from '@/components/search/result/list-item'
@@ -113,7 +113,7 @@ export default {
     this.initSearchReqConf()
     this.initSearchReqConf()
   },
   },
   methods: {
   methods: {
-    ...mapMutations('tabbar', ['doSwitchTab']),
+    ...mapActions('tabbar', ['doSwitchTab']),
     ...mapMutations('user', ['setArea', 'setAddressReload']),
     ...mapMutations('user', ['setArea', 'setAddressReload']),
     initSearchReqConf() {
     initSearchReqConf() {
       const r = useDifferentSearchTypeList({ type: this.searchConf.searchType })
       const r = useDifferentSearchTypeList({ type: this.searchConf.searchType })
@@ -152,9 +152,6 @@ export default {
     },
     },
     goSearch () {
     goSearch () {
       this.doSwitchTab('search')
       this.doSwitchTab('search')
-      Taro.switchTab({
-        url: '/pages/tabbar/search/index'
-      })
     }
     }
   }
   }
 }
 }

+ 4 - 50
src/pages/tabbar/monitor/index.vue

@@ -11,7 +11,7 @@
 <script>
 <script>
 import boxItem from '@/ui/box-item'
 import boxItem from '@/ui/box-item'
 import Taro from "@tarojs/taro";
 import Taro from "@tarojs/taro";
-import {mapGetters} from "vuex";
+import {mapActions, mapGetters} from "vuex";
 import adSingle from "@/components/common/Ad.vue";
 import adSingle from "@/components/common/Ad.vue";
 export default {
 export default {
   components: {
   components: {
@@ -35,58 +35,12 @@ export default {
     return {}
     return {}
   },
   },
   computed: {
   computed: {
-    ...mapGetters('env', ['miniEnv']),
-    ...mapGetters('box', ['list']),
-    formatBoxList () {
-      const result = this.list.map(v => {
-        v.self = v.id === this.miniEnv.appId
-        if (v.self) {
-          v.afterTitle = '您当前所在'
-          v.rightTip = ''
-        }
-        return v
-      })
-
-      return result.sort((a, b) => {
-        if (a?.class === 'light' && b?.class !== 'light') {
-          return -1
-        }
-        if (a?.class !== 'light' && b?.class === 'light') {
-          return 1
-        }
-        if (a?.self && !b?.self) {
-          return -1
-        }
-        if (!a?.self && b?.self) {
-          return 1
-        }
-        return 0
-      })
-    }
+    ...mapGetters('env', ['miniEnv'])
   },
   },
   methods: {
   methods: {
+    ...mapActions('tabbar', ['doSwitchTab']),
     goSearch () {
     goSearch () {
-      Taro.switchTab({
-        url: '/pages/tabbar/search/index'
-      })
-    },
-    doOpenItem ({ path, id, self }) {
-      if (self) {
-        return
-      }
-
-      if (id) {
-        Taro.navigateToMiniProgram({
-          appId: id,
-          path: path,
-          extraData: {},
-          envVersion: 'trial',
-        })
-      } else if (path) {
-        Taro.navigateTo({
-          url: path
-        })
-      }
+      this.doSwitchTab('search')
     }
     }
   }
   }
 }
 }

+ 27 - 2
src/store/modules/tabbar.js

@@ -1,17 +1,42 @@
+import Taro from "@tarojs/taro";
+
 export default {
 export default {
   namespaced: true,
   namespaced: true,
   state: () => ({
   state: () => ({
     activeKey: ''
     activeKey: ''
   }),
   }),
   mutations: {
   mutations: {
-    doSwitchTab (state, key) {
+    setSwitchTab (state, key) {
       state.activeKey = key
       state.activeKey = key
     }
     }
   },
   },
-  actions: {},
+  actions: {
+    getTabbarItem ({ getters }, key) {
+      return getters.tabbars.find(v => v.key === key)
+    },
+    async doSwitchTab({ commit, dispatch }, key) {
+      try {
+        const item =  await dispatch('getTabbarItem', key)
+        if (item?.path) {
+          Taro.switchTab({
+            url: item.path
+          })
+          commit('setSwitchTab', key)
+        }
+      } catch (e) {
+        console.log(e)
+      }
+    }
+  },
   getters: {
   getters: {
+    appConfig (state, getters, rootState, rootGetters) {
+      return rootGetters['config/appConfig']
+    },
     activeTabKey (state) {
     activeTabKey (state) {
       return state.activeKey
       return state.activeKey
+    },
+    tabbars (state, getters) {
+      return getters.appConfig.tabbars
     }
     }
   }
   }
 }
 }