f/web-kboss/src/views/product/allProduct/index.vue

@@ -134,7 +134,7 @@
 
               <div class="token-price-grid">
                 <div
-                  v-for="(price, priceIndex) in parseBillingMethod(product.billing_method)"
+                  v-for="(price, priceIndex) in getBillingPreview(product.billing_method)"
                   :key="`${product.id}-billing-${priceIndex}`"
                   class="token-price-item"
                 >
@@ -142,6 +142,9 @@
                   <strong>{{ price.price }}</strong>
                   <em>{{ price.desc }}</em>
                 </div>
+                <div v-if="getBillingMoreCount(product.billing_method)" class="billing-more-tip">
+                  + {{ getBillingMoreCount(product.billing_method) }} 条计费规则，进入详情查看
+                </div>
               </div>
 
               <!-- <div class="token-description">
@@ -413,6 +416,14 @@ export default {
         });
     },
 
+    getBillingPreview(value) {
+      return this.parseBillingMethod(value).slice(0, 3);
+    },
+
+    getBillingMoreCount(value) {
+      return Math.max(this.parseBillingMethod(value).length - 3, 0);
+    },
+
     // 供应商头像取首字，避免没有 logo 时卡片显得空。
     getProviderInitial(provider) {
       return provider ? provider.slice(0, 1) : 'M';
@@ -1493,21 +1504,10 @@ export default {
     .token-price-grid {
       position: relative;
       z-index: 1;
-      max-height: 178px;
       display: flex;
       flex-direction: column;
       gap: 5px;
       margin-bottom: 10px;
-      padding-right: 4px;
-      overflow-y: auto;
-      scrollbar-width: none;
-      -ms-overflow-style: none;
-
-      &::-webkit-scrollbar {
-        display: none;
-        width: 0;
-        height: 0;
-      }
     }
 
     .token-price-item {
@@ -1547,6 +1547,15 @@ export default {
       }
     }
 
+    .billing-more-tip {
+      padding: 5px 9px;
+      color: #2563eb;
+      font-size: 11px;
+      font-weight: 700;
+      background: #eff6ff;
+      border-radius: 999px;
+    }
+
     .token-description {
       position: relative;
       z-index: 1;