fix: 超级订阅订阅管理添加关键词弹窗

Signed-off-by: tangshizhe <48740614+tangshizhe@users.noreply.github.com>

apps/bigmember_pc/src/components/dialog/Dialog.vue

@@ -6,6 +6,7 @@
     :show-close="showClose"
     :visible="visible"
     @update:visible="update"
+    v-component-change-mount="{ selector: comMount }"
     @open="$emit('open')"
     @opened="$emit('opened')"
     @close="$emit('close')"
@@ -41,6 +42,10 @@ export default {
   props: {
     visible: Boolean,
     showClose: Boolean,
+    comMount: {
+      type: String,
+      default: ''
+    },
     showFooter: {
       type: Boolean,
       default() {

apps/bigmember_pc/src/components/subscribe-manager/KeyConfig.vue

@@ -9,6 +9,11 @@
         >
         <p style="font-size: 14px; color: #2cb7ca">
           注：任意1组关键词组匹配成功即推送相关信息
+          <img
+            @click="setClickEvent"
+            src="@/assets/images/icon/help.png"
+            class="icon-help-img"
+          />
         </p>
       </div>
       <div class="add-classify" @click="addClassifyFn">
@@ -83,7 +88,8 @@ export default {
         dialog: false,
         className: ''
       },
-      sort: 1
+      sort: 1,
+      showSetKeyDialog: false
     }
   },
   computed: {
@@ -98,6 +104,9 @@ export default {
     }
   },
   methods: {
+    setClickEvent() {
+      this.$emit('closeDilog')
+    },
     onUpdateKey(data) {
       this.keywordsList = data || []
       this.$emit('update', this.keywordsList)
@@ -172,6 +181,13 @@ export default {
     color: #1d1d1d;
     line-height: 28px;
     border-bottom: 1px solid #ececec;
+    .icon-help-img {
+      display: inline-block;
+      width: 18px;
+      height: 18px;
+      margin: 0 7px 0 8px;
+      cursor: pointer;
+    }
     .add-classify {
       width: 110px;
       height: 38px;

apps/bigmember_pc/src/components/subscribe-manager/index.vue

@@ -17,8 +17,23 @@
       :list="setData.keyList"
       :max-count="setData.maxCount"
       @update="onUpdateKey"
+      @closeDilog="showSetKeyDialog = true"
     >
     </KeyConfig>
+    <common-dialog
+      width="500px"
+      :com-mount="'.drawer-dialog'"
+      class="setkey-dialog"
+      :visible="showSetKeyDialog"
+      :show-footer="false"
+    >
+      <img
+        @click="showSetKeyDialog = false"
+        class="setkey-img"
+        src="@/assets/images/setkey-dialog.png"
+        alt=""
+      />
+    </common-dialog>
     <!-- <PushConfig
       :rateModel="setData.rateModel"
       :mailPush="setData.mailPush"
@@ -33,6 +48,7 @@
 <script>
 import SubConfig from '@/components/subscribe-manager/SubConfig'
 import KeyConfig from '@/components/subscribe-manager/KeyConfig'
+import commonDialog from '@/components/dialog/Dialog'
 // import PushConfig from '@/components/subscribe-manager/PushConfig'
 export default {
   name: 'subscribeManage',
@@ -46,7 +62,8 @@ export default {
   },
   components: {
     SubConfig,
-    KeyConfig
+    KeyConfig,
+    commonDialog
   },
   data() {
     return {
@@ -71,7 +88,8 @@ export default {
         canSetCityCount: -1,
         // 县区
         district: {}
-      }
+      },
+      showSetKeyDialog: false
     }
   },
   watch: {
@@ -439,5 +457,20 @@ export default {
       padding: 0 0 32px;
     }
   }
+  .custom-dialog.setkey-dialog {
+    z-index: 2100 !important;
+    .el-dialog__header {
+      display: none;
+    }
+    .el-dialog__body {
+      padding: 0;
+    }
+  }
+}
+</style>
+<style lang="scss" scoped>
+.setkey-img {
+  position: absolute;
+  cursor: pointer;
 }
 </style>

apps/bigmember_pc/src/views/subscribe/components/key/KeyConfig.vue

@@ -13,7 +13,6 @@
         <img
           @click="showSetKeyDialog = true"
           src="@/assets/images/icon/help.png"
-          style="cursor: pointer"
           class="icon-help-img"
         />
       </div>
@@ -207,6 +206,7 @@ export default {
       width: 18px;
       height: 18px;
       margin: 0 7px 0 8px;
+      cursor: pointer;
     }
     .add-classfily {
       width: 110px;
@@ -292,17 +292,5 @@ export default {
       width: 352px;
     }
   }
-  ::v-deep {
-    .el-dialog__header {
-      display: none;
-    }
-    .el-dialog__body {
-      padding: 0;
-    }
-  }
-}
-.setkey-img {
-  position: absolute;
-  cursor: pointer;
 }
 </style>