feat: 无购物车商品信息时隐藏面板

layouts/module/header/HeaderCart.vue

@@ -5,6 +5,7 @@
     trigger="hover"
     placement="bottom"
     width="330"
+    :disabled="cartCount === 0"
   >
     <div
       slot="reference"
@@ -13,8 +14,8 @@
     >
       <img src="~/assets/img/layout/icon-shop.png" />
       <span>购物车</span>
-      <div v-if="cartProducts.length > 0" class="wrap-right-cart__tip">
-        {{ cartProducts.length }}
+      <div v-if="cartCount > 0" class="wrap-right-cart__tip">
+        {{ cartCount }}
       </div>
     </div>
     <div class="header-cart-products scrollbar-self">
@@ -80,7 +81,7 @@
       </template>
     </div>
     <div class="header-cart-bottom flex flex-middle flex-between">
-      <p>共{{ cartProducts.length }}件商品</p>
+      <p>共{{ cartCount }}件商品</p>
       <UiButton type="red_panel" :radius="true" @click="onJumCartPage"
         >去购物车</UiButton
       >
@@ -102,6 +103,9 @@ export default {
   },
   computed: {
     ...mapState(["cartProducts", "token"]),
+    cartCount() {
+      return this.cartProducts.length;
+    },
   },
   watch: {
     cartProducts: {

layouts/module/header/index.vue

@@ -182,10 +182,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.layout-header-popover {
-  &__cart-content {
-  }
-}
 .sticky-bar-header {
   position: fixed;
   top: 0;