Procházet zdrojové kódy

feat(mallApp): 优化首页轮播跳转筛选

- 首页轮播支持图文、单商品、多商品、分类和场景的差异化跳转

- 商品列表支持路由带入 goodsIds 精确筛选,并在筛选确认时保留该条件

- 调整轮播公告区域白底和公告间距,避免页面灰底穿透
shizhongqi před 2 dny
rodič
revize
1eb918fc13

+ 1 - 1
mallApp/src/api/category/index.js

@@ -9,7 +9,7 @@ export const getClass = data => {
 
 /**
  * 获取分类的商品 m
- * 可选筛选:categoryIds、useCaseIds、minPrice、maxPrice、searchText、page、pageSize、requestType
+ * 可选筛选:categoryIds、useCaseIds、goodsIds、minPrice、maxPrice、searchText、page、pageSize、requestType
  */
 export const getList = data => {
 	return https.get('/category/goods-list', data)

+ 25 - 7
mallApp/src/components/home/bannerSwiper.vue

@@ -1,7 +1,7 @@
 <!--
   店铺首页-轮播图
   按 hdApp 后台配置的轮播间隔自动播放;右下角客服悬浮图标根据顶部导航客服开关显隐;
-  点击轮播图按关联类型(商品/分类/场景)跳转对应浏览页
+  点击轮播图按关联类型(图文/商品/分类/场景)跳转对应浏览页
 -->
 <template>
   <view v-if="data && data.enabled == 1 && data.list && data.list.length" class="home-banner-wrap">
@@ -47,19 +47,37 @@ export default {
     }
   },
   methods: {
-    // index 为轮播项下标,避免模板内直接传 item 导致小程序事件参数序列化失败
+    /**
+     * 点击轮播图:按后台关联类型跳转
+     * index 为轮播项下标,避免模板内直接传 item 导致小程序事件参数序列化失败
+     * type=1 图文 → 图文详情;type=2 商品 → 单商品详情 / 多商品列表;
+     * type=3|4 分类/场景 → 商品列表并带初始筛选(与首页金刚区一致)
+     */
     onBannerTap(index) {
       const item = (this.data.list || [])[index]
       if (!item) return
       const ids = String(item.value || '').split(',').filter(Boolean)
       if (!ids.length) return
-      // 商品且仅单个:直达商品详情;分类/场景/多选:先跳店铺分类浏览页(暂未打通精确筛选跳转)
-      if (item.type == 2 && ids.length === 1) {
-        this.pageTo({ url: `/pages/item/detail?id=${ids[0]}&account=${this.account}&hdId=${this.hdId}` })
+      const type = Number(item.type)
+      const account = this.account
+      const hdId = this.hdId
+      // 图文:跳转图文详情页(value 为单个图文ID)
+      if (type === 1) {
+        this.pageTo({ url: `/pages/home/pic-text-detail?id=${ids[0]}&account=${account}` })
         return
       }
-      if (item.type == 3 || item.type == 4 || ids.length > 1) {
-        this.pageTo({ url: `/pages/home/category?account=${this.account}&hdId=${this.hdId}` })
+      // 商品:仅关联一个商品时直达商品详情;关联多个商品时跳转按 goodsIds 精确筛选的商品列表
+      if (type === 2) {
+        if (ids.length === 1) {
+          this.pageTo({ url: `/pages/goods/detail?id=${ids[0]}&account=${account}&hdId=${hdId}` })
+        } else {
+          this.pageTo({ url: `/pages/goods/list?account=${account}&hdId=${hdId}&filterType=2&filterValue=${ids.join(',')}` })
+        }
+        return
+      }
+      // 分类/场景:跳转商品列表页,带上分类ID/场景ID作为初始筛选条件(与首页金刚区导航一致)
+      if (type === 3 || type === 4) {
+        this.pageTo({ url: `/pages/goods/list?account=${account}&hdId=${hdId}&filterType=${type}&filterValue=${ids.join(',')}` })
       }
     },
     goChat() {

+ 1 - 1
mallApp/src/components/home/noticeBar.vue

@@ -94,7 +94,7 @@ export default {
   display: flex;
   align-items: center;
   height: 64upx;
-  margin: 6upx 24upx 6upx;
+  margin: 8upx 24upx 12upx;
   padding: 0 20upx;
   border-radius: 32upx;
   background: #FFF0F3;

+ 15 - 3
mallApp/src/pages/goods/list.vue

@@ -199,10 +199,11 @@ export default {
       useCaseOptions: [],
       deliveryOptions: DELIVERY_OPTIONS,
       pricePresets: PRICE_PRESETS,
-      // 已生效的筛选条件
+      // 已生效的筛选条件;goodsIds 仅由路由 filterType=2 带入,不在筛选弹窗中编辑
       filters: {
         categoryIds: [],
         useCaseIds: [],
+        goodsIds: [],
         minPrice: '',
         maxPrice: '',
         delivery: ''
@@ -217,12 +218,17 @@ export default {
       this.loadFilterOptions()
       this.loadGoods()
     },
-    /** 解析金刚区带入的 filterType / filterValue */
+    /**
+     * 解析路由带入的 filterType / filterValue
+     * type=2 商品ID列表、type=3 分类、type=4 场景(首页轮播/金刚区跳转)
+     */
     applyRouteFilter() {
       const type = parseInt((this.option && this.option.filterType) || 0, 10)
       const value = (this.option && this.option.filterValue) ? String(this.option.filterValue) : ''
       const ids = value.split(',').map((s) => s.trim()).filter(Boolean)
-      if (type === 3 && ids.length) {
+      if (type === 2 && ids.length) {
+        this.filters.goodsIds = ids
+      } else if (type === 3 && ids.length) {
         this.filters.categoryIds = ids
       } else if (type === 4 && ids.length) {
         this.filters.useCaseIds = ids
@@ -255,6 +261,10 @@ export default {
       if (this.filters.useCaseIds.length) {
         params.useCaseIds = this.filters.useCaseIds.join(',')
       }
+      // 轮播等多商品关联:按精确商品ID列表拉取
+      if (this.filters.goodsIds.length) {
+        params.goodsIds = this.filters.goodsIds.join(',')
+      }
       if (this.filters.minPrice !== '' && this.filters.minPrice != null) {
         params.minPrice = this.filters.minPrice
       }
@@ -366,9 +376,11 @@ export default {
           maxPrice = preset.max
         }
       }
+      // goodsIds 不在筛选弹窗编辑,确认时透传以免被清空
       this.filters = {
         categoryIds: [...this.draft.categoryIds],
         useCaseIds: [...this.draft.useCaseIds],
+        goodsIds: [...this.filters.goodsIds],
         minPrice,
         maxPrice,
         delivery: this.draft.delivery

+ 9 - 2
mallApp/src/pages/home/index.vue

@@ -22,7 +22,8 @@
             :account="account"
             :hd-id="hdId"
           />
-          <template v-else-if="mod.key === 'banner'">
+          <!-- 轮播+公告整块白底,与页面灰底区分 -->
+          <view v-else-if="mod.key === 'banner'" class="home-banner-block">
             <home-banner-swiper
               :data="pageData.banner"
               :show-service="showService"
@@ -30,7 +31,7 @@
               :hd-id="hdId"
             />
             <home-notice-bar :account="account" />
-          </template>
+          </view>
           <home-nav-grid
             v-else-if="mod.key === 'navGrid'"
             :data="pageData.navGrid"
@@ -236,6 +237,12 @@ export default {
   min-height: 100vh;
   background: #f5f5f5;
 }
+/* 轮播图与公告条区域:白底;flex 阻断子元素 margin 塌陷,加大公告下边距时仍露白底而非页面灰底 */
+.home-banner-block {
+  display: flex;
+  flex-direction: column;
+  background: #ffffff;
+}
 .home-loading {
   padding: 200upx 0;
   text-align: center;