Bladeren bron

新增:页面设计分类页链接支持传参分类ID

萤火科技 1 jaar geleden
bovenliggende
commit
5f04580653
7 gewijzigde bestanden met toevoegingen van 85 en 11 verwijderingen
  1. 2 3
      core/app.js
  2. 26 2
      pages/category/components/commodity.vue
  3. 17 2
      pages/category/index.vue
  4. 1 1
      store/getters.js
  5. 3 2
      store/index.js
  6. 2 1
      store/modules/index.js
  7. 34 0
      store/modules/page.js

+ 2 - 3
core/app.js

@@ -115,9 +115,8 @@ export const navTo = (url, query = {}, modo = 'navigateTo') => {
   }
   // tabBar页面, 使用switchTab
   if (util.inArray(url, getTabBarLinks())) {
-    uni.switchTab({
-      url: `/${url}`
-    })
+    store.dispatch('SetQueryParam', query)
+    uni.switchTab({ url: `/${url}` })
     return true
   }
   // 生成query参数

+ 26 - 2
pages/category/components/commodity.vue

@@ -89,6 +89,11 @@
         type: Object,
         default: () => {}
       },
+      // query参数
+      query: {
+        type: Object,
+        default: () => {}
+      },
     },
     data() {
       return {
@@ -113,6 +118,18 @@
         }
       }
     },
+    watch: {
+      // 监听query参数
+      query: {
+        handler({ categoryId1, categoryId2 }) {
+          this.curIndex = this.findCateIndex(categoryId1)
+          this.curIndex2 = this.findCateIndex(categoryId2, this.curIndex)
+          this.showSubCate = false
+          this.onRefreshList()
+        },
+        immediate: true
+      }
+    },
     computed: {
       // 二级分类列表
       subCateList() {
@@ -124,6 +141,13 @@
     },
     methods: {
 
+      // 根据分类ID查找指针
+      findCateIndex(cateId, pIndex = -1) {
+        if (!cateId) return -1
+        const data = pIndex > -1 ? this.list[pIndex].children : this.list
+        return data.findIndex(item => item.category_id == cateId)
+      },
+
       /**
        * 上拉加载的回调 (页面初始化时也会执行一次)
        * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
@@ -172,8 +196,8 @@
       // 一级分类:选中分类
       handleSelectNav(index) {
         this.curIndex = index
-        this.onRefreshList()
         this.showSubCate = false
+        this.onRefreshList()
         this.curIndex2 = -1
       },
 
@@ -235,7 +259,7 @@
     left: var(--window-left);
     bottom: var(--window-bottom);
     width: 173rpx;
-    height: calc(100% - var(--window-top) - var(--window-bottom) - 90rpx) !important; 
+    height: calc(100% - var(--window-top) - var(--window-bottom) - 90rpx) !important;
     background: #f8f8f8;
     color: #444;
   }

+ 17 - 2
pages/category/index.vue

@@ -14,11 +14,13 @@
     <secondary v-if="setting.style == PageCategoryStyleEnum.TWO_LEVEL.value" :list="list" />
 
     <!-- 分类+商品 -->
-    <commodity v-if="setting.style == PageCategoryStyleEnum.COMMODITY.value" ref="mescrollItem" :list="list" :setting="setting" />
+    <commodity v-if="setting.style == PageCategoryStyleEnum.COMMODITY.value" :list="list" :setting="setting" :query="query" />
+
   </view>
 </template>
 
 <script>
+  import store from '@/store'
   import MescrollCompMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-comp'
   import { setCartTabBadge } from '@/core/app'
   import SettingKeyEnum from '@/common/enum/setting/Key'
@@ -50,7 +52,9 @@
         // 分类模板设置
         setting: {},
         // 正在加载中
-        isLoading: true
+        isLoading: true,
+        // query参数
+        query: { categoryId1: undefined, categoryId2: undefined }
       }
     },
 
@@ -66,6 +70,16 @@
      * 生命周期函数--监听页面显示
      */
     onShow() {
+
+      // 监听query参数
+      store.dispatch('OnceQueryParam')
+        .then(res => {
+          if (res !== null) {
+            this.query = res
+          }
+          // console.log('onShow',  this.query, res )
+        })
+
       // 每间隔5分钟自动刷新一次页面数据
       const curTime = new Date().getTime()
       if ((curTime - lastRefreshTime) > 5 * 60 * 1000) {
@@ -121,6 +135,7 @@
         this.list = result.data.list
       },
 
+
     },
 
     /**

+ 1 - 1
store/getters.js

@@ -2,7 +2,7 @@ const getters = {
   platform: state => state.app.platform,
   token: state => state.user.token,
   userId: state => state.user.userId,
-  appTheme: state => state.theme.appTheme
+  pageQuery: state => state.page.query
 }
 
 export default getters

+ 3 - 2
store/index.js

@@ -1,12 +1,13 @@
 import { createStore } from 'vuex'
-import { app, user, theme } from './modules'
+import { app, user, theme, page } from './modules'
 import getters from './getters'
 
 const store = createStore({
   modules: {
     app,
     user,
-    theme
+    theme,
+    page
   },
   state: {
 

+ 2 - 1
store/modules/index.js

@@ -1,5 +1,6 @@
 import app from './app'
 import user from './user'
 import theme from './theme'
+import page from './page'
 
-export { app, user, theme }
+export { app, user, theme, page }

+ 34 - 0
store/modules/page.js

@@ -0,0 +1,34 @@
+// import { isEmpty } from '@/utils/util'
+import { cloneObj } from '@/utils/util'
+
+const page = {
+  state: {
+    // 当前query参数
+    query: null
+  },
+
+  mutations: {
+    SET_QUERY_PARAM: (state, value) => {
+      state.query = value
+    }
+  },
+
+  actions: {
+
+    // 记录query参数 (用于switchTab传参)
+    SetQueryParam({ commit }, value) {
+      commit('SET_QUERY_PARAM', value)
+      return 'sdadadad'
+    },
+
+    // 获取query参数并且清空
+    OnceQueryParam({ commit }, value) {
+      const res = this.getters.pageQuery === null ? null : cloneObj(this.getters.pageQuery)
+      commit('SET_QUERY_PARAM', null)
+      return res
+    },
+
+  }
+}
+
+export default page