feat: pc端筛选vip布局组件扩展

apps/bigmember_pc/src/components/filter-items/BasePowerLayout.vue

@@ -2,10 +2,15 @@
   <section class="base-power-layout">
     <div class="base-power-module default-module">
       <slot name="default"></slot>
+      <div v-if="baseMaskShow" class="base-mask" @click="clickBaseMask"></div>
     </div>
-    <div class="base-power-module vip-module" v-if='vipShow'>
+    <div class="base-power-module vip-module" v-if="vipModuleShow">
       <slot name="vip"></slot>
-      <div v-if="vipMask" class="vip-mask pointer" @click="clickMask"></div>
+      <div
+        v-if="vipMaskShow"
+        class="vip-mask pointer"
+        @click="clickVipMask"
+      ></div>
     </div>
   </section>
 </template>
@@ -14,18 +19,25 @@
 export default {
   name: 'BasePowerLayout',
   props: {
-    vipMask: {
+    baseMaskShow: {
       type: Boolean,
       default: false
     },
-    vipShow: {
+    vipMaskShow: {
+      type: Boolean,
+      default: false
+    },
+    vipModuleShow: {
       type: Boolean,
       default: false
     }
   },
   methods: {
-    clickMask() {
-      this.$emit('clickMask')
+    clickBaseMask() {
+      this.$emit('clickBaseMask')
+    },
+    clickVipMask() {
+      this.$emit('clickVipMask')
     }
   }
 }
@@ -40,6 +52,7 @@ $gold: #c98f37;
   flex-wrap: wrap;
 }
 .base-power-module {
+  position: relative;
   display: flex;
   align-items: center;
   padding: 0 12px 0 6px;
@@ -49,7 +62,6 @@ $gold: #c98f37;
   margin-right: 8px;
 }
 .vip-module {
-  position: relative;
   border: 1px dashed $gold;
   background: linear-gradient(90deg, #fff7dC 0%, rgba(255, 247, 220, 0) 100%);
   &::after {
@@ -65,6 +77,7 @@ $gold: #c98f37;
     background-size: contain;
   }
 }
+.base-mask,
 .vip-mask {
   position: absolute;
   left: 0;
@@ -72,5 +85,6 @@ $gold: #c98f37;
   top: 0;
   bottom: 0;
   z-index: 2;
+  cursor: pointer;
 }
 </style>

apps/bigmember_pc/src/components/filter-items/SelectorWithBasePower.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="selector-with-base-power">
-    <BasePowerLayout @clickMask="clickMask" :vipMask="vipMask" :vipShow='vipShow'>
+    <BasePowerLayout
+      @clickVipMask="clickVipMask"
+      @clickBaseMask="clickBaseMask"
+      :vipMaskShow="vipMaskShow"
+      :baseMaskShow="baseMaskShow"
+      :vipModuleShow="vipModuleShow"
+    >
       <component
         :is="component"
         :value="value"
@@ -35,14 +41,18 @@ export default {
     component: {
       required: true
     },
+    baseMaskShow: {
+      type: Boolean,
+      default: false
+    },
     value: {
       default: undefined
     },
-    vipMask: {
+    vipMaskShow: {
       type: Boolean,
       default: false
     },
-    vipShow: {
+    vipModuleShow: {
       type: Boolean,
       default: false
     },
@@ -64,8 +74,11 @@ export default {
     event: 'change'
   },
   methods: {
-    clickMask() {
-      this.$emit('clickMask')
+    clickVipMask() {
+      this.$emit('clickVipMask')
+    },
+    clickBaseMask() {
+      this.$emit('clickBaseMask')
     },
     onChange(value) {
       this.$emit('change', value)