feat: pc搜索权限ui组件调整

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

@@ -5,13 +5,25 @@
     </div>
     <div class="base-power-module vip-module">
       <slot name="vip"></slot>
+      <div v-if="vipMask" class="vip-mask pointer" @click="clickMask"></div>
     </div>
   </section>
 </template>
 
 <script>
 export default {
-  name: 'BasePowerLayout'
+  name: 'BasePowerLayout',
+  props: {
+    vipMask: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    clickMask() {
+      this.$emit('clickMask')
+    }
+  }
 }
 </script>
 
@@ -49,4 +61,12 @@ $gold: #c98f37;
     background-size: contain;
   }
 }
+.vip-mask {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 2;
+}
 </style>

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

@@ -1,17 +1,23 @@
 <template>
   <div class="selector-with-base-power">
-    <BasePowerLayout>
+    <BasePowerLayout @clickMask="clickMask" :vipMask="vipMask">
       <component
         :is="component"
         :value="value"
+        v-bind="{
+          ...commonConf,
+          ...freeConf,
+        }"
         @change="onChange"
-        :options="freeOptions"
       ></component>
       <component
         slot="vip"
+        :value="value"
         :is="component"
-        :options="vipOptions"
-        :beforeChange="() => false"
+        v-bind="{
+          ...commonConf,
+          ...vipConf,
+        }"
       ></component>
     </BasePowerLayout>
   </div>
@@ -30,28 +36,33 @@ export default {
       required: true
     },
     value: {
-      type: Array,
-      default: () => []
+      default: undefined
     },
-    options: {
-      type: Array,
-      default: () => []
-    }
-  },
-  computed: {
-    freeOptions() {
-      return this.options.filter((s) => !s.power)
+    vipMask: {
+      type: Boolean,
+      default: false
+    },
+    commonConf: {
+      type: Object,
+      default: () => {}
+    },
+    freeConf: {
+      type: Object,
+      default: () => {}
     },
-    vipOptions() {
-      return this.options.filter((s) => s.power)
+    vipConf: {
+      type: Object,
+      default: () => {}
     }
   },
-  data() {
-    return {
-      vipModuleValue: []
-    }
+  model: {
+    prop: 'value',
+    event: 'change'
   },
   methods: {
+    clickMask() {
+      this.$emit('clickMask')
+    },
     onChange(value) {
       this.$emit('change', value)
     }
@@ -62,6 +73,12 @@ export default {
 <style lang="scss" scoped>
 .search-scope-selector {
   display: flex;
-  ::v-deep {}
+  ::v-deep {
+    .checkbox-group-selector {
+      .s-container {
+        min-width: unset;
+      }
+    }
+  }
 }
 </style>