fix: 会员卡升级事件

src/views/ecm/marketing-event/assets/style/index.css

@@ -458,6 +458,8 @@
   border-radius:4px;
   display: inline-block;
   position: relative;
+  vertical-align: middle;
+  margin: 0 10px;
 }
 .dm-grade__item__wrap {
   width: 300px;
@@ -466,4 +468,6 @@
   border-radius:4px;
   display: inline-block;
   position: relative;
+  vertical-align: middle;
+  margin: 0 10px;
 }

src/views/ecm/marketing-event/components/opt.vue

 <template>
   <div class="inline-block dm-marketing__opt">
-    <span v-for="(v, i) in options" :key="i" class="dm-marketing__opt__item" @click="addItem(v)">
+    <span v-for="(v, i) in options" :key="i" class="dm-marketing__opt__item" :class="{ 'is-disabled': v.disabled }" @click="addItem(v)">
       <img :src="v.img" alt="" srcset="" /><span> {{ v.name }}</span>
     </span>
   </div>
@@ -19,8 +19,19 @@ export default {
   },
   methods: {
     addItem(item) {
+      if (item.disabled) return;
       this.$emit('addItem', item);
     }
   }
 };
 </script>
+
+<style lang="scss" scoped>
+.is-disabled {
+  span,
+  img {
+    color: #c0c4cc !important;
+  }
+  cursor: not-allowed;
+}
+</style>

src/views/ecm/marketing-event/index.vue

@@ -148,8 +148,9 @@ export default {
     };
   },
   created() {
+    this.allOptions = [...allOptions];
     if (this.useStored) {
-      allOptions.push({ name: '会员卡升级', value: 'grade', key: 9, img: require('./assets/img/grade.svg') }); //eslint-disable-line
+      this.allOptions.push({ name: '会员卡升级', value: 'grade', key: 9, img: require('./assets/img/grade.svg') }); //eslint-disable-line
     }
     this.init();
   },
@@ -157,11 +158,26 @@ export default {
     useStored: {
       handler() {
         if (this.useStored) {
-          this.options = [ ...this.options, { name: '会员卡升级', value: 'grade', key: 9, img: require('./assets/img/grade.svg') }]; //eslint-disable-line
+          this.options = [ ...this.options, { name: '会员卡升级', value: 'grade', key: 9, img: require('./assets/img/grade.svg'), disabled: false }]; //eslint-disable-line
         } else {
           this.options = this.options.filter(item => item.value !== 'grade');
         }
       }
+    },
+    list() {
+      if (this.list.some(item => item.comName === 'item-grade')) {
+        this.options.forEach(item => {
+          if (item.value == 'grade') {
+            item.disabled = true;
+          }
+        });
+      } else {
+        this.options.forEach(item => {
+          if (item.value == 'grade') {
+            item.disabled = false;
+          }
+        });
+      }
     }
   },
   methods: {
@@ -174,7 +190,7 @@ export default {
           this.maxEventCount = Number(res.result.maxEventCount || 0);
           let list = res.result.list || [];
           let optionNameList = list.map(v => v.eventName);
-          allOptions.map(v => {
+          this.allOptions.map(v => {
             if (optionNameList.indexOf(v.name) >= 0) {
               this.options.push(v);
             }
@@ -331,10 +347,10 @@ export default {
         this.$message({ type: 'warning', message: `最多只能添加${this.maxEventCount}个营销事件` });
         return;
       }
-      if (this.list.some(item => item.comName === 'item-grade')) {
-        this.$message({ type: 'warning', message: `已添加会员卡升级营销事件` });
-        return;
-      }
+      // if (v.value === 'grade' && this.list.some(item => item.comName === 'item-grade')) {
+      //   this.$message({ type: 'warning', message: `已添加会员卡升级营销事件` });
+      //   return;
+      // }
       // 判断是否欠费
       if (v.value === 'message' && this.checkAccountState()) return;
       this.dialogCom = 'lib-' + v.value;