update: 会员卡升级营销事件

src/views/ecm/list.vue

@@ -46,7 +46,7 @@
 import activitySelect from '@/components/activity-select/index.vue';
 import { loadEcmList, deleteEcm, offlineEcmPlan } from '@/service/api/ecmApi.js';
 import { formatDateTimeByType } from '@/utils/index.js';
-const marketingTypeOptions = [{ value: '', label: '所有发送类型' }, { value: 'card', label: '卡券营销' }, { value: 'message', label: '短信营销' }, { value: 'teletext', label: '图文营销' }, { value: 'text', label: '文本营销' }, { value: 'teltask', label: '话务' }, { value: 'image', label: '微信图片' }]; // eslint-disable-line
+const marketingTypeOptions = [{ value: '', label: '所有发送类型' }, { value: 'card', label: '卡券营销' }, { value: 'message', label: '短信营销' }, { value: 'teletext', label: '图文营销' }, { value: 'text', label: '文本营销' }, { value: 'teltask', label: '话务' }, { value: 'image', label: '微信图片' }, { value: 'grade', label: '会员卡升级' }]; // eslint-disable-line
 export default {
   name: 'ecm',
   data() {

src/views/ecm/marketing-event/assets/api.js

@@ -164,3 +164,6 @@ export const deleteMarketingType = params => requests(PREFIX + 'delete-marketing
 
 //模板库--分页列表 （有效）
 export const LoadTempList = params => requests(PREFIX + 'load-message-templateList', params);
+
+//会员等级
+export const getCardLevelList = params => requests('api-plug/member-grade-list', params);

src/views/ecm/marketing-event/assets/img/grade.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616486164284" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7879" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.1953125" height="200"><defs><style type="text/css"></style></defs><path d="M833.532723 837.12H22.524723c-7.168 0-14.848-4.096-18.432-9.728-4.608-6.144-5.12-13.824-2.56-20.992l168.96-604.16c3.584-9.216 11.776-14.848 21.504-14.848h810.496c7.168 0 14.848 4.096 18.432 9.728 4.608 6.144 5.12 13.824 2.56 20.992l-168.96 604.16c-3.072 8.704-11.264 14.848-20.992 14.848z m-777.728-46.08h761.856l152.064-558.592H207.868723L55.804723 791.04z" fill="#606266" p-id="7880"></path><path d="M833.532723 837.12H22.524723c-7.168 0-14.848-4.096-18.432-9.728-4.608-6.144-5.12-13.824-2.56-20.992l168.96-604.16c3.584-9.216 11.776-14.848 21.504-14.848h810.496c7.168 0 14.848 4.096 18.432 9.728 4.608 6.144 5.12 13.824 2.56 20.992l-168.96 604.16c-3.072 8.704-11.264 14.848-20.992 14.848z m-777.728-46.08h761.856l152.064-558.592H207.868723L55.804723 791.04z" fill="#606266" p-id="7881"></path><path d="M478.204723 393.216L372.732723 634.88H320.508723L219.132723 393.216H276.988723l70.656 182.272 72.192-182.272h58.368z m25.088 241.664V393.216h51.712V634.88H503.292723z m152.064-83.968V634.88h-51.712V393.216h120.832c22.016 0 37.888 1.536 47.104 4.608 15.872 5.12 28.672 16.384 37.888 33.28 6.656 12.288 10.24 26.624 10.24 40.96 0 12.288-2.048 24.064-6.656 34.816-4.608 11.264-10.752 20.48-18.432 27.136-7.168 6.144-15.36 10.752-23.04 12.8-7.68 2.048-18.944 3.584-33.28 3.584H655.868723l-0.512 0.512z m0-43.52h70.144c12.288 0 21.504-1.536 26.624-5.632 7.168-6.144 11.264-16.384 11.264-31.744 0-16.384-5.632-26.624-16.896-30.72-4.096-1.536-10.752-2.56-19.456-2.56H655.868723v70.656h-0.512z" fill="#606266" p-id="7882"></path></svg>
\ No newline at end of file

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

@@ -458,4 +458,12 @@
   border-radius:4px;
   display: inline-block;
   position: relative;
-}
\ No newline at end of file
+}
+.dm-grade__item__wrap {
+  width: 300px;
+  padding: 18px 20px;
+  border: 1px solid rgba(228,231,237,1);
+  border-radius:4px;
+  display: inline-block;
+  position: relative;
+}

src/views/ecm/marketing-event/components/item-grade.vue

+<template>
+  <div class="dm-grade__item__wrap">
+    <div class="fz16">会员卡升级</div>
+    <p class="mt15 fz24 primary-font-color">
+      {{ item.title }}
+    </p>
+    <p class="minor-font-color mt10 line-height1_5 fz12">*若当前会员卡等级超过该等级，则不会进行会员升级。</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'item-grade',
+  props: {
+    item: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  }
+};
+</script>

src/views/ecm/marketing-event/components/lib-grade.vue

+<template>
+  <el-dialog title="会员卡升级" :visible.sync="show" width="340px" @closed="close">
+    等级：
+    <el-select style="width:220px" v-model="cardLevel" placeholder="等级选择">
+      <el-option v-for="(el, i) in cardLevelList" :key="i" :label="el.value" :value="el.key"></el-option>
+    </el-select>
+    <p class="minor-font-color mt10 line-height1_5 fz12">*若当前会员卡等级超过该等级，则不会进行会员升级。</p>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="close">关 闭</el-button>
+      <el-button type="primary" @click="addItem">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { getCardLevelList } from '../assets/api.js';
+export default {
+  name: 'lib-grade',
+  props: {
+    item: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    show: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      cardLevelList: [],
+      cardLevel: ''
+    };
+  },
+  mounted() {
+    getCardLevelList({ requestProject: 'marketing', key: 'memberGrade' }).then(res => {
+      if (res.errorCode === 0) {
+        this.cardLevelList = res.result;
+      } else {
+        this.$message({ type: 'warning', message: '接口异常' });
+      }
+    });
+  },
+  watch: {
+    show(val) {
+      if (val) {
+        this.cardLevel = this.item.relationId || '';
+      } else {
+        this.cardLevel = '';
+      }
+    }
+  },
+  methods: {
+    close() {
+      this.$emit('update:show', false);
+    },
+    addItem() {
+      if (!this.cardLevel) {
+        return this.$message({ type: 'warning', message: '未选择会员卡等级' });
+      }
+      let title = this.cardLevelList.find(item => item.key === this.cardLevel).value;
+      this.$emit('sendItem', { title, relationId: this.cardLevel, comName: 'grade' });
+      this.close();
+    }
+  }
+};
+</script>

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

@@ -51,6 +51,7 @@ import itemImage from './components/item-image.vue';
 import itemMessage from './components/item-Message.vue';
 import itemTeltask from './components/item-teltask.vue';
 import itemIntegral from './components/item-integral.vue';
+import itemGrade from './components/item-grade';
 //弹窗组件
 import libTeletext from './components/lib-teletext.vue';
 import libMessage from './components/lib-Message.vue';
@@ -60,10 +61,11 @@ import libWxa from './components/lib-wxa.vue';
 import libImage from './components/lib-image.vue';
 import libTeltask from './components/lib-teltask.vue';
 import libIntegral from './components/lib-integral.vue';
+import libGrade from './components/lib-grade';
 
 // 全部的操作项
 // eslint-disable-next-line
-const allOptions = [{ name: '图文', value: 'teletext', key: 1, img: require('./assets/img/teletext.svg') }, { name: '文本', value: 'text', key: 2, img: require('./assets/img/text.svg') }, { name: '小程序', value: 'wxa', key: 3, img: require('./assets/img/wxa.svg') }, { name: '图片', value: 'image', key: 4, img: require('./assets/img/image.svg') }, { name: '卡券', value: 'card', key: 5, img: require('./assets/img/card.svg') }, { name: '短信', value: 'message', key: 6, img: require('./assets/img/message.svg') }, { name: '话务', value: 'teltask', key: 7, img: require('./assets/img/teltask.svg')}, { name: '积分', value: 'integral', key: 8, img: require('./assets/img/integral.svg') }];
+const allOptions = [{ name: '图文', value: 'teletext', key: 1, img: require('./assets/img/teletext.svg') }, { name: '文本', value: 'text', key: 2, img: require('./assets/img/text.svg') }, { name: '小程序', value: 'wxa', key: 3, img: require('./assets/img/wxa.svg') }, { name: '图片', value: 'image', key: 4, img: require('./assets/img/image.svg') }, { name: '卡券', value: 'card', key: 5, img: require('./assets/img/card.svg') }, { name: '短信', value: 'message', key: 6, img: require('./assets/img/message.svg') }, { name: '话务', value: 'teltask', key: 7, img: require('./assets/img/teltask.svg')}, { name: '积分', value: 'integral', key: 8, img: require('./assets/img/integral.svg') }, { name: '会员卡升级', value: 'grade', key: 9, img: require('./assets/img/grade.svg') }];
 export default {
   name: 'vue-gic-marketing-event',
   components: {
@@ -86,7 +88,9 @@ export default {
     'lib-wxa': libWxa,
     'lib-image': libImage,
     'lib-teltask': libTeltask,
-    'lib-integral': libIntegral
+    'lib-integral': libIntegral,
+    'item-grade': itemGrade,
+    'lib-grade': libGrade
   },
   props: {
     //  页面编码——- 1001-智能引擎; 1002-微信营销; 1003-被关注回复; 1004-关键字回复
@@ -201,6 +205,9 @@ export default {
                 this.list.push({ comName: 'item-integral', item: { multipleNum: v.multipleNum, integralType: v.integralType, integralCount: v.integralCount, ecmMarketingTypeRelationId: v.ecmMarketingTypeRelationId, relationId: v.relationId, ecmPlanId: v.ecmPlanId } });
                 // this.list.push({ comName: 'item-teltask', item: { ...v.teltask, ecmMarketingTypeRelationId: v.ecmMarketingTypeRelationId, relationId: v.relationId, ecmPlanId: v.ecmPlanId } });
                 break;
+              case 'grade': // 8 积分
+                this.list.push({ comName: 'item-grade', item: { title: v.title } });
+                break;
             }
           });
           this.hasReturnCard();
@@ -285,6 +292,12 @@ export default {
           params.title = `${val.multipleNum}倍积分`;
         }
       }
+
+      //9.会员卡升级
+      if (val.comName === 'grade') {
+        params.title = val.title;
+        params.relationId = val.relationId;
+      }
       // 接口请求 保存
       saveUpdateMarketingType({ marketingType: JSON.stringify(params) })
         .then(res => {
@@ -300,6 +313,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 === 'message' && this.checkAccountState()) return;
       this.dialogCom = 'lib-' + v.value;