jufubao-mall 2.0.89-beta2 → 2.0.89-beta3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-mall",
-  "version": "2.0.89-beta2",
+  "version": "2.0.89-beta3",
   "private": false,
   "description": "聚福宝商城业务组件插件包",
   "main": "index.js",

package/src/components/JfbMallCategoryProduct/JfbMallCategoryProduct.vue

@@ -116,7 +116,7 @@
               </view>
             </view>
             <view v-if="filterCondition === 'brand' && showRightMenu === 'Y'" class="brand-filter-bar">
-              <scroll-view scroll-x class="brand-scroll">
+              <scroll-view scroll-x class="brand-scroll" :style="brandScrollStyle">
                 <view class="brand-tag-wrap">
                   <view
                     v-for="(brand, idx) in brandList"
@@ -129,7 +129,7 @@
                   </view>
                 </view>
               </scroll-view>
-              <view class="brand-dropdown-btn" @click="showBrandAll = !showBrandAll">
+              <view v-show="showBrandDropdownBtn" class="brand-dropdown-btn" @click="showBrandAll = !showBrandAll">
                 <xd-font-icon icon="iconxia_down" color="#999" size="24"></xd-font-icon>
               </view>
             </view>
@@ -314,6 +314,7 @@
         brandList: [],
         selectedBrandIds: [],
         showBrandAll: false,
+        showBrandDropdownBtn: false,
       }
     },
     computed: {
@@ -429,6 +430,12 @@
         if (this.sortMenu.length > 1) top += 80;
         return top;
       },
+
+      brandScrollStyle() {
+        return {
+          'padding-right': this.showBrandDropdownBtn ? '60rpx' : '0'
+        };
+      },
     },
     watch: {
       container(value, oldValue) {
@@ -788,6 +795,7 @@
               icon: item.icon ? getServiceUrl(item.icon, 'size3') : ''
             }));
           }
+          this.checkBrandOverflow();
         }).catch(err => {
           this.$xdLog.catch(err);
         });
@@ -807,6 +815,24 @@
         this.getProductList();
       },
 
+      // 检测品牌标签是否溢出容器，控制下拉按钮显示
+      checkBrandOverflow() {
+        this.$nextTick(() => {
+          const query = uni.createSelectorQuery().in(this);
+          query.select('.brand-scroll').boundingClientRect();
+          query.select('.brand-tag-wrap').boundingClientRect();
+          query.exec(res => {
+            if (res && res.length === 2) {
+              const scrollRect = res[0];
+              const wrapRect = res[1];
+              if (scrollRect && wrapRect) {
+                this.showBrandDropdownBtn = wrapRect.width > scrollRect.width;
+              }
+            }
+          });
+        });
+      },
+
       // 计算商品列表区域高度
       getProductWrapHeight() {
         if (this.showRightMenu !== 'Y') return '100%';
@@ -1192,7 +1218,6 @@
             height: 100%;
             white-space: nowrap;
             box-sizing: border-box;
-            padding-right: 60rpx;
           }
 
           .brand-tag-wrap {