!172 fix:修复 tabbar不能传参问题

Merge pull request !172 from steven/hotfix_tabbar_not_allow_query

pages/index/category.vue

@@ -60,7 +60,7 @@
   import sheep from '@/sheep';
   import CategoryApi from '@/sheep/api/product/category';
   import SpuApi from '@/sheep/api/product/spu';
-  import { onLoad } from '@dcloudio/uni-app';
+  import { onLoad, onShow } from '@dcloudio/uni-app';
   import { computed, reactive } from 'vue';
   import { concat } from 'lodash-es';
   import { handleTree } from '@/sheep/helper/utils';
@@ -130,14 +130,20 @@
     state.pagination.pageNo++;
     getGoodsList();
   }
-
-  onLoad(async (params) => {
-    await getList();
-
+  function initMenuIndex() {
+    const appStore = sheep.$store('app');
+    // 处理 tabbar 传参的情况
+    const tabbarParams = appStore.paramsForTabbar || {};
+    const id = tabbarParams.id;
+    appStore.clearParamsForTabbar(); // 使用完后清理，避免影响下次跳转
     // 首页点击分类的处理：查找满足条件的分类
-    const foundCategory = state.categoryList.find((category) => category.id === Number(params.id));
+    const foundCategory = state.categoryList.find((category) => category.id === Number(id));
     // 如果找到则调用 onMenu 自动勾选相应分类，否则调用 onMenu(0) 勾选第一个分类
     onMenu(foundCategory ? state.categoryList.indexOf(foundCategory) : 0);
+  }
+  onShow(async () => {
+    await getList();
+    initMenuIndex();
   });
 
   function handleScrollToLower() {

sheep/router/index.js

@@ -70,8 +70,13 @@ const _go = (
 
   // 跳转底部导航
   if (TABBAR.includes(page)) {
+    // wx.switchTab: url 不支持 queryString
+    // 设置全局变量
+    const params = queryToParams(query);
+    $store('app').setParamsForTabbar(params);
+    // 请记得在业务代码里使用完后，清理掉全局状态，避免影响下次跳转
     uni.switchTab({
-      url,
+      url: page,
     });
     return;
   }
@@ -109,6 +114,19 @@ function paramsToQuery(params) {
   return query.join('&');
 }
 
+function queryToParams(query) {
+  if (isEmpty(query)) {
+    return {};
+  }
+  let params = {};
+  let pairs = query.split('&');
+  for (let i = 0; i < pairs.length; i++) {
+    let pair = pairs[i].split('=');
+    params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
+  }
+  return params;
+}
+
 function back() {
   // #ifdef H5
   history.back();

sheep/store/app.js

@@ -11,6 +11,7 @@ import { baseUrl, h5Url } from '@/sheep/config';
 const app = defineStore({
   id: 'app',
   state: () => ({
+    paramsForTabbar: {}, // 为全局tabbar跳转传参用。原因是 tabbar 无法传参，只能通过全局状态传递
     info: {
       // 应用信息
       name: '', // 商城名称
@@ -113,6 +114,13 @@ const app = defineStore({
         $router.error('InitError', res.msg || '加载失败');
       }
     },
+    // 设置paramsForTabbar
+    setParamsForTabbar(params = {}) {
+      this.paramsForTabbar = params;
+    },
+    clearParamsForTabbar() {
+      this.paramsForTabbar = {};
+    }
   },
   persist: {
     enabled: true,