update:优化样式与完善签到福利

.eslintrc.js

@@ -6,7 +6,8 @@ module.exports = {
     parser: 'babel-eslint'
   },
   env: {
-    browser: true
+    browser: true,
+    "node": true
   },
   extends: [
     // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
@@ -28,7 +29,7 @@ module.exports = {
     ],
     // allow async-await
     'generator-star-spacing': 'off',
-    'no-console':  0,
+    'no-console': 0,
     'no-alert': process.env.NODE_ENV === 'production' ? 2 : 0, //禁止使用alert confirm prompt
     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
     // --------------------静态检测-----------------------------

package.json

@@ -103,5 +103,8 @@
     "> 1%",
     "last 2 versions",
     "not ie <= 8"
-  ]
+  ],
+  "env": {
+    "node": true
+  }
 }

src/views/sign/index.vue

@@ -12,6 +12,7 @@ export default {
   },
   created() {
     this.$store.commit('mutations_breadcrumb', [{ name: '门店签到', path: '/signIn' }]);
+    this.$store.commit('aside_handler', false);
   }
 };
 </script>

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

+import qs from 'qs';
+import axios from 'axios';
+const host = window.location.origin;
+const PREFIX = '/api-marketing/';
+const PLUG_PREFIX = '/api-plug/';
+// eslint-disable-next-line
+const router = new VueRouter();
+// 加载最小时间
+const MINI_TIME = 300;
+// 超时时间
+let TIME_OUT_MAX = 20000;
+// 环境value
+// 请求接口host
+let _apiHost = host.indexOf('localhost') !== -1 ? 'http://gicdev.demogic.com' : host;
+// 请求组（判断当前请求数）
+let _requests = [];
+
+//创建一个请求实例
+const instance = axios.create({
+  baseURL: _apiHost,
+  timeout: TIME_OUT_MAX,
+  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+  withCredentials: true // 允许携带cookie
+});
+
+/**
+ * 添加请求，显示loading
+ * @param {请求配置} config
+ */
+function pushRequest(config) {
+  console.log(`${config.url}--begin`);
+  _requests.push(config);
+}
+
+/**
+ * 移除请求，无请求时关闭loading
+ * @param {请求配置} config
+ */
+function popRequest(config) {
+  console.log(`${config.url}--end`);
+  let _index = _requests.findIndex(r => {
+    return r === config;
+  });
+  if (_index > -1) {
+    _requests.splice(_index, 1);
+  }
+}
+/**
+ * 错误的处理
+ * @param {*} code
+ * @param {string} [message='请求错误']
+ */
+function handlerErr(code, message = '请求错误') {
+  switch (code) {
+    case 404:
+      message = '404,错误请求';
+      router.push('/404');
+      break;
+    case 401:
+      message = '登录失效';
+      break;
+    case 403:
+      message = '禁止访问';
+      router.push('/403');
+      break;
+    case 408:
+      message = '请求超时';
+      break;
+    case 500:
+      message = '服务器内部错误';
+      // router.push('/500')
+      break;
+    case 501:
+      message = '功能未实现';
+      break;
+    case 503:
+      message = '服务不可用';
+      break;
+    case 504:
+      message = '网关错误';
+      break;
+  }
+  this.$message({ type: 'warning', message: message });
+}
+
+/**
+ * 请求地址，请求数据，是否静默，请求方法
+ */
+const requests = (url, data = {}, contentTypeIsJSON = false, isSilence = false, method = 'POST') => {
+  let _opts = { method, url };
+  const _query = {};
+  let _timer = null;
+  if (method.toLocaleUpperCase() === 'POST') {
+    if (contentTypeIsJSON) {
+      _opts.data = data;
+      _opts.headers = { 'Content-Type': 'application/json' };
+      _opts.url += '?requestProject=marketing';
+    } else {
+      _opts.data = qs.stringify(Object.assign({ requestProject: 'gic-web' }, data));
+    }
+  } else {
+    _opts.params = _query;
+  }
+  return new Promise((resolve, reject) => {
+    let _random = { stamp: Date.now(), url: `${_apiHost + url}` };
+    if (!isSilence) {
+      _timer = setTimeout(() => {
+        pushRequest(_random);
+      }, MINI_TIME);
+    }
+    instance(_opts)
+      .then(res => {
+        clearTimeout(_timer);
+        popRequest(_random);
+        if (res.data.errorCode !== 0) {
+          reject(res);
+          handlerErr(res.data.errorCode, res.data.message);
+        } else {
+          resolve(res.data);
+        }
+      })
+      .catch(res => {
+        clearTimeout(_timer);
+        popRequest(_random);
+        if (res) {
+          handlerErr(res.response.status, '接口异常');
+        }
+        reject(res);
+      });
+  });
+};
+// 获取营销事件配置信息(类型, 最大条数)
+export const getMarketingEvent = params => requests(PREFIX + 'get-marketing-event', params);
+
+//素材库 图文 图文分页列表
+export const loadImgTextList = params => requests(PREFIX + 'page-marketing-wechat-image-text', params);
+
+//获取卡券列表
+export const getCardList = params => requests(PLUG_PREFIX + 'get-coupon-list', params);
+
+//素材库--图片--图片分页列表
+export const loadImgList = params => requests(PREFIX + 'page-marketing-wechat-image', params);
+
+//素材库--图片--编辑图片名称
+export const updateImgName = params => requests(PREFIX + 'update-marketing-wechat-image-titlename', params);
+
+//素材库--图片--新建图片分组
+export const addGroupService = params => requests(PREFIX + 'save-marketing-wechat-image-group', params);
+
+//素材库--图片--修改图片分组
+export const updateGroupName = params => requests(PREFIX + 'update-marketing-wechat-image-group', params);
+
+//素材库--图片--删除图片分组
+export const deleteGroupService = params => requests(PREFIX + 'delete-marketing-wechat-image-group', params);
+
+// 智能营销--ECM营销引擎-- 新建/修改 --回显营销事件类型详情
+export const getMarketingTypeDetails = params => requests(PREFIX + 'get-marketing-type-details', params);
+
+// 智能营销--新增/修改营销事件类型
+export const saveUpdateMarketingType = params => requests(PREFIX + 'save-update-marketing-type', params);
+
+// 智能营销 --删除营销事件
+export const deleteMarketingType = params => requests(PREFIX + 'delete-marketing-Type', params);
+
+//模板库--分页列表 （有效）
+export const LoadTempList = params => requests(PREFIX + 'load-message-templateList', params);

src/views/sign/marketing-event/assets/emitter.js

+'use strict';
+/* eslint-disable */
+exports.__esModule = true;
+function _broadcast(componentName, eventName, params) {
+  this.$children.forEach(function(child) {
+    var name = child.$options.componentName;
+
+    if (name === componentName) {
+      child.$emit.apply(child, [eventName].concat(params));
+    } else {
+      _broadcast.apply(child, [componentName, eventName].concat([params]));
+    }
+  });
+}
+exports.default = {
+  methods: {
+    dispatch: function dispatch(componentName, eventName, params) {
+      var parent = this.$parent || this.$root;
+      var name = parent.$options.componentName;
+
+      while (parent && (!name || name !== componentName)) {
+        parent = parent.$parent;
+
+        if (parent) {
+          name = parent.$options.componentName;
+        }
+      }
+      if (parent) {
+        parent.$emit.apply(parent, [eventName].concat(params));
+      }
+    },
+    broadcast: function broadcast(componentName, eventName, params) {
+      _broadcast.call(this, componentName, eventName, params);
+    }
+  }
+};

src/views/sign/marketing-event/assets/img/card.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 fill="#909399"  class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M180.224 610.304c0 76.8-56.32 142.336-132.608 153.088v134.144h928.256v-134.144c-76.288-10.752-133.12-76.288-133.12-153.088s56.32-142.336 133.12-153.088V323.072H47.616v134.144c76.288 10.752 132.608 76.288 132.608 153.088zM3.584 477.696V300.544c0-6.144 2.048-11.264 6.656-15.872 4.096-4.096 9.728-6.656 15.872-6.656H998.4c6.144 0 11.264 2.048 15.872 6.656 4.096 4.096 6.656 9.728 6.656 15.872v176.64c0 6.144-2.048 11.264-6.656 15.872-4.096 4.096-9.728 6.656-15.872 6.656-60.928 0-110.592 49.664-110.592 110.592s49.664 110.592 110.592 110.592c6.144 0 11.264 2.048 15.872 6.656 4.096 4.096 6.656 9.728 6.656 15.872v176.64c0 6.144-2.048 11.264-6.656 15.872-4.096 4.096-9.728 6.656-15.872 6.656H25.6c-6.144 0-11.264-2.048-15.872-6.656-4.096-4.096-6.656-9.728-6.656-15.872v-176.64c0-6.144 2.048-11.264 6.656-15.872 4.096-4.096 9.728-6.656 15.872-6.656 60.928 0 110.592-49.664 110.592-110.592 0-60.928-49.664-110.592-110.592-110.592-6.144 0-11.264-2.048-15.872-6.656-4.096-4.096-6.144-9.728-6.144-15.36z m377.856-223.744c-11.776 3.072-24.064-4.096-27.136-15.872-3.072-11.776 4.096-24.064 15.872-27.136l467.968-124.928c11.776-3.072 24.064 4.096 27.136 15.872l26.112 98.304c3.072 11.776-4.096 24.064-15.872 27.136-11.776 3.072-24.064-4.096-27.136-15.872l-20.48-76.8-446.464 119.296zM666.112 389.12c0-12.288 9.728-22.016 22.016-22.016s22.016 9.728 22.016 22.016v88.576c0 12.288-9.728 22.016-22.016 22.016s-22.016-9.728-22.016-22.016V389.12z m0 176.64c0-12.288 9.728-22.016 22.016-22.016s22.016 9.728 22.016 22.016v88.576c0 12.288-9.728 22.016-22.016 22.016s-22.016-9.728-22.016-22.016v-88.576z m0 176.64c0-12.288 9.728-22.016 22.016-22.016s22.016 9.728 22.016 22.016v88.576c0 12.288-9.728 22.016-22.016 22.016s-22.016-9.728-22.016-22.016V742.4z"  /></svg>
\ No newline at end of file

src/views/sign/marketing-event/assets/img/integral.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 204.9 200" style="enable-background:new 0 0 204.9 200;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#909399;}
+</style>
+<path class="st0" d="M204,139c0-10-7.5-19-21-26V95.5v-1V93c0-1.5,0-3-0.5-4.5c14-7,21.5-16.5,21.5-26v-18v-1V42
+	c0-22.5-39-39.5-90.5-39.5c-52,0-91,17-91,39.5v20c0,1.5,0,3,0.5,4.5C9,73.5,1.5,83,1.5,92.5v20c0,10,7.5,19,21,26v20
+	c0,22.5,39,39.5,90.5,39.5s90.5-17,90.5-39.5v-18v-1C204,140,204,139.5,204,139L204,139z M190.5,43c-1,4-4,7.5-9.5,11
+	c-14.5,9.5-40,15-68,15c-47,0-75-14.5-77.5-25.5v-1C35.5,29,73,16,113,16s77.5,13,77.5,26.5L190.5,43L190.5,43z M41.5,67
+	c1.5,1,3,1.5,5,2.5l1,0.5c1.5,0.5,2.5,1,4,2l1.5,0.5l4.5,1.5l1,0.5c2,0.5,4,1,6,2L66,77c1.5,0.5,3.5,1,5,1l2,0.5
+	c1.5,0.5,3.5,0.5,5,1l2,0.5c2.5,0.5,4.5,0.5,7,1h1.5c2,0,4,0.5,6,0.5H97c1.5,0,3.5,0,5.5,0.5h21c1.5,0,3.5,0,5-0.5h3
+	c2,0,3.5-0.5,5.5-0.5h2c2.5-0.5,4.5-0.5,7-1l2.5-0.5c1.5-0.5,3-0.5,4.5-1l2.5-0.5c1.5-0.5,3-0.5,4.5-1l2-0.5l6-1.5l1-0.5l4.5-1.5
+	l1.5-0.5c1.5-0.5,3-1,4-2l1-0.5c3.5-1.5,6.5-3.5,9.5-5l1-0.5c0,0,0.5,0,0.5-0.5c-0.5,5.5-7.5,11.5-19.5,16c-15,6.5-36,9.5-58,9.5
+	C73,89.5,44,78,37.5,67c-1-1.5-1.5-2.5-1.5-3.5c0,0,0.5,0,0.5,0.5l1,0.5C38.5,65,40,66,41.5,67L41.5,67z M113,165.5h-11.5
+	c-1.5,0-3.5,0-5-0.5l-4-0.5c-1,0-2.5,0-3.5-0.5h-2l-2.5-0.5c-1,0-2,0-3-0.5c-0.5,0-1,0-2-0.5l-2-0.5c-1,0-2-0.5-3-0.5
+	c-0.5,0-1,0-1.5-0.5l-2-0.5c-1,0-2-0.5-3-0.5h-1.5c-1,0-2-0.5-2.5-0.5l-3-1c-1-0.5-1.5-0.5-2.5-1l-2.5-1c-0.5-0.5-1.5-0.5-2-1l-2-1
+	c-0.5-0.5-1.5-0.5-2-1l-1.5-1c-0.5-0.5-1.5-1-2-1L44,150c-0.5-0.5-1-1-2-1.5l-1.5-1c-0.5-0.5-1-0.5-1-1L39,146c0.5,0,0.5,0,1,0.5
+	l2.5,0.5c1.5,0.5,3,1,5,1.5l3,0.5c1.5,0.5,3,0.5,5,1c1,0,2,0.5,3,0.5c1.5,0.5,3.5,0.5,5,1l3,0.5c1.5,0,3.5,0.5,5.5,0.5l3,0.5
+	c1.5,0,3.5,0,5.5,0.5h23c2,0,3.5,0,5.5-0.5l3-0.5c1.5,0,3-0.5,5-0.5l3-0.5c1.5,0,3-0.5,4.5-0.5l3-0.5c1.5,0,3-0.5,4.5-1l3-0.5
+	c1.5-0.5,2.5-0.5,4-1c1,0,2-0.5,2.5-0.5c1.5-0.5,2.5-0.5,4-1l2.5-0.5c1.5-0.5,2.5-1,3.5-1.5c0.5-0.5,1.5-0.5,2-1
+	c1.5-0.5,2.5-1,4-1.5c0.5,0,1-0.5,1.5-0.5c1.5-0.5,2.5-1,4-2l1.5-0.5c3.5-2,6-3.5,8.5-5.5l0.5-0.5l3-3l1-1c0.5-1,1.5-1.5,2-2.5
+	c0,0,0.5-0.5,0.5-1c7.5,4.5,12,9,12,13.5v1.5C188.5,151,160.5,165.5,113,165.5L113,165.5z M143,100c1,0,2-0.5,3.5-0.5s2.5-0.5,4-0.5
+	c1,0,2.5-0.5,3.5-0.5c1.5-0.5,2.5-0.5,4-1c1-0.5,2.5-0.5,3.5-1c1.5-0.5,2.5-0.5,3.5-1c1-0.5,2-0.5,3-1c0.5,0,1-0.5,1.5-0.5v0.5
+	c0,1-0.5,2-1.5,3.5c-7,11-35.5,22-75.5,22c-26,0-49.5-4.5-64.5-12.5c-7.5-4-12-8.5-13-13v-1c0-5,5.5-10.5,14.5-15L31,80l0.5,0.5
+	c1,1,2,1.5,3,2.5l1,1c1,0.5,1.5,1,2.5,2l1.5,1c1,0.5,2,1,2.5,1.5h2l3,1.5c0.5,0.5,1.5,0.5,2,1c1,0.5,2,1,3,1c0.5,0.5,1.5,0.5,2,1
+	c1,0.5,2,0.5,3,1l2.5,1c1,0.5,2,0.5,3.5,1c1,0,1.5,0.5,2.5,0.5c1,0.5,2,0.5,3.5,1l3,0.5c1,0,2.5,0.5,4,1l2.5,0.5c1,0,2,0.5,3.5,0.5
+	c1,0,2,0.5,3,0.5c1,0,2,0,3,0.5l8.5,1H131c1,0,2.5,0,3.5-0.5h1.5c1,0,2,0,3-0.5c1.5,0,2.5-0.5,4-0.5 M20,117.5l0.5,0.5
+	c1.5,1,3,1.5,4.5,2.5l1.5,0.5c1,0.5,2.5,1,3.5,1.5l2,0.5l4.5,1.5L38,125c2,0.5,4,1,6,2l1.5,0.5c1.5,0.5,3,1,5,1l2,0.5
+	c1.5,0.5,3.5,0.5,5,1l2,0.5c2.5,0.5,4.5,0.5,7.5,1h1c2,0,4,0.5,6,0.5h2.5c2,0,3.5,0,5.5,0.5h20.5c2,0,3.5,0,5.5-0.5h2.5
+	c2,0,4-0.5,6-0.5h1.5c2.5-0.5,4.5-0.5,7-1l2-0.5c1.5-0.5,3.5-0.5,5-1l2.5-0.5c1.5-0.5,3-0.5,4.5-1l2-0.5l6-1.5l1.5-0.5
+	c1.5-0.5,3-1,4-1.5l2-1c1-0.5,2.5-1,3.5-1.5c0.5,0,1-0.5,1.5-0.5c1.5-0.5,3-1.5,4.5-2.5l1-0.5c1-0.5,2-1.5,3-2c0.5-0.5,1-0.5,1.5-1
+	v1c-2.5,10.5-31,25-77,25c-15,0-29.5-1.5-42.5-5c-6.5-1.5-12.5-3.5-17.5-5.5c-10.5-4.5-17-10.5-17.5-15.5c0,0,0.5,0,0.5,0.5H16
+	C17.5,116,18.5,117,20,117.5L20,117.5z M36.5,160.5l1,0.5c1,1,2.5,1.5,4.5,2.5c1.5,1,3,1.5,4.5,2.5l1.5,0.5c1,0.5,2.5,1,4,1.5l2,0.5
+	c1.5,0.5,3,1,5,1.5l1,0.5l6,1.5l1.5,0.5c1.5,0.5,3,1,5,1L74,175c1.5,0.5,3,0.5,5,1l2,0.5c2.5,0.5,4.5,0.5,7,1h2c2,0,3.5,0.5,5.5,0.5
+	h3c1.5,0,3,0,5,0.5h21c1.5,0,3,0,4.5-0.5h3c1.5,0,3-0.5,5-0.5l2.5-0.5c2.5-0.5,4.5-0.5,6.5-1l2.5-0.5c1.5-0.5,3-0.5,4.5-1l2.5-0.5
+	c1.5-0.5,3-0.5,4.5-1l2-0.5l6-1.5l1.5-0.5l4.5-1.5c0.5,0,1-0.5,1.5-0.5c1.5-0.5,2.5-1,4-2l1-0.5c1.5-1,3.5-1.5,5-2.5s3-1.5,4.5-2.5
+	l1-0.5h0.5c-1,11-30.5,26-77.5,26S37.5,171.5,36.5,160.5C36,160,36,160.5,36.5,160.5L36.5,160.5z"/>
+</svg>

src/views/sign/marketing-event/assets/options.js

+// eslint-disable-next-line
+module.exports = [
+  { number: '{1}', name: '{姓名}' },
+  { number: '{2}', name: '{姓名+先生/女士}' },
+  { number: '{3}', name: '{生日日期}' },
+  { number: '{4}', name: '{生日天数}' },
+  { number: '{5}', name: '{关注日期}' },
+  { number: '{6}', name: '{关注天数}' },
+  { number: '{7}', name: '{主门店品牌名称}' },
+  { number: '{8}', name: '{主门店名称}' },
+  { number: '{9}', name: '{主门店电话}' },
+  { number: '{10}', name: '{专属导购姓名}' },
+  { number: '{11}', name: '{专属导购手机号}' },
+  { number: '{12}', name: '{开卡日期}' },
+  { number: '{13}', name: '{开卡天数}' },
+  { number: '{14}', name: '{开卡门店名称}' },
+  { number: '{15}', name: '{会员卡号}' },
+  { number: '{16}', name: '{会员等级名称}' },
+  { number: '{17}', name: '{主门店地址}' },
+  { number: '{18}', name: '{会员等级剩余有效天数}' },
+  { number: '{19}', name: '{积分余额}' },
+  { number: '{20}', name: '{30天内将过期积分额度}' },
+  { number: '{21}', name: '{储值余额}' },
+  { number: '{22}', name: '{消费总额}' },
+  { number: '{23}', name: '{消费次数}' },
+  { number: '{24}', name: '{最近消费日期}' },
+  { number: '{25}', name: '{最近消费间隔}' },
+  { number: '{26}', name: '{最高单笔消费}' },
+  { number: '{27}', name: '{最近消费门店名称}' },
+  { number: '{28}', name: '{最近消费品牌名称}' }
+];

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

+/* reset样式 */
+.w100 {
+  width: 100px;
+}
+.w200 {
+  width: 200px;
+}
+.w240 {
+  width: 240px;
+}
+.w400 {
+  width: 400px;
+}
+.w500 {
+  width: 500px;
+}
+.inline-block {
+  /* vertical-align: middle; */
+  display: inline-block !important;
+}
+.block {
+  display: block !important;
+}
+.gray-color,
+.gray {
+  color: #909399;
+}
+.pb22 {
+  padding-bottom: 22px;
+}
+.pb10 {
+  padding-bottom: 10px;
+}
+.pl20 {
+  padding-left: 20px;
+}
+.pl10 {
+  padding-left: 10px;
+}
+.pr10 {
+  padding-right: 10px;
+}
+.fz13 {
+  font-size: 13px;
+}
+.fz12 {
+  font-size: 12px;
+}
+.fl {
+  float: left;
+}
+.fr {
+  float: right;
+}
+
+.clearfix:after {
+  display: block;
+  clear: both;
+  content: '';
+  visibility: hidden;
+  height: 0;
+}
+.clearfix {
+  zoom: 1;
+}
+.vertical-middle {
+  vertical-align: middle;
+}
+.block {
+  display: block;
+  overflow: hidden;
+}
+
+.ellipsis {
+  max-height: 20px;
+  line-height: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+.ellipsis-l2 {
+  max-height: 40px;
+  line-height: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.ellipsis-l3 {
+  max-height: 60px;
+  line-height: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+.blue {
+  color: #1890ff;
+  cursor: pointer;
+}
+.label-hidden .el-checkbox__label,
+.label-hidden .el-radio__label {
+  opacity: 0;
+  position: absolute;
+}
+
+.dm-pagination {
+  text-align: right;
+  margin: 24px 0 10px 0;
+}
+.text-left {
+  text-align: left;
+}
+/* reset样式end */
+.dm-marketing {
+  min-width: 200px;
+  display: inline-block;
+}
+.dm-marketing__opt {
+  background: #ffffff;
+  border: 1px solid rgba(235, 238, 245, 1);
+  -webkit-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.15);
+  box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.15);
+  padding: 0 20px;
+}
+.dm-marketing__opt--label {
+  vertical-align: middle;
+  color: #303133;
+  font-size: 14px;
+}
+.dm-marketing__opt--icon,
+.dm-marketing__opt--icon--bottom {
+  display: inline-block;
+  font-size: 20px;
+  padding: 8px;
+  margin: 0 10px;
+  color: #909399;
+  border: 1px solid #e4e7ed;
+  border-radius: 50%;
+  vertical-align: middle;
+  cursor: pointer;
+}
+.dm-marketing__opt--icon:hover,
+.dm-marketing__opt--icon--bottom:hover {
+  color: #1890ff;
+  border: 1px solid #1890ff;
+}
+.dm-marketing__opt--icon.el-icon-delete:hover {
+  color: #f56c6c;
+  border: 1px solid #f56c6c;
+}
+
+.dm-marketing__opt--icon--bottom {
+  margin: 20px 0 0 60px;
+}
+.dm-marketing__opt__item {
+  display: inline-block;
+  height: 36px;
+  line-height: 36px;
+  margin-right: 30px;
+  cursor: pointer;
+}
+.dm-marketing__opt__item > img {
+  vertical-align: middle;
+  height: 17px;
+  width: auto;
+  overflow: hidden;
+  color: #909399;
+}
+.dm-marketing__opt__item > span {
+  vertical-align: middle;
+  color: #606266;
+  font-size: 14px;
+}
+
+.dm-marketing__content--label {
+  position: relative;
+  top: 40px;
+  left: 0;
+}
+/* .dm-marketing__content--wrap {
+  max-width: 1200px;
+} */
+.dm-marketing__content__item {
+  margin-bottom: 20px;
+}
+
+.dm-marketing__content--index {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  text-align: center;
+  vertical-align: middle;
+  border: 1px solid #e4e7ed;
+  border-radius: 50%;
+  padding: 4px;
+  color: #606266;
+}
+
+/* item */
+/* card */
+.dm-card__item__wrap {
+  display: inline-block;
+  position: relative;
+  width: 298px;
+  height: 142px;
+  margin: 0 10px 0 0;
+  vertical-align: middle;
+  border: 1px solid rgba(228, 231, 237, 1);
+  border-radius: 4px;
+}
+.dm-card__item {
+  padding: 0 15px;
+  background: rgba(72, 170, 3, 0.85);
+  height: 106px;
+  line-height: 106px;
+}
+.dm-card__item__avatar {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  vertical-align: middle;
+}
+
+.dm-card__item__title {
+  vertical-align: middle;
+  margin-left: 8px;
+  max-width: 180px;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 30px;
+  color: #fff;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.dm-card__item__desc {
+  vertical-align: middle;
+  margin-left: 8px;
+  max-width: 200px;
+  font-size: 12px;
+  line-height: 20px;
+  color: #fff;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dm-card__item--bottom {
+  vertical-align: middle;
+  line-height: 106px;
+  color: #909399;
+  font-size: 12px;
+  line-height: 36px;
+  padding-left: 15px;
+}
+
+/* integral */
+.dm-integral__item__wrap {
+  box-sizing: border-box;
+  width: 300px;
+  padding: 18px 20px;
+  margin: 0 10px 0 0;
+  border: 1px solid rgba(228, 231, 237, 1);
+  border-radius: 4px;
+  display: inline-block;
+  position: relative;
+}
+.el-dialog__footer {
+  border: none;
+}

src/views/sign/marketing-event/assets/utils.js

+/**
+ * 补零
+ * @param {String/Number} num
+ */
+export const fillZero = num => {
+  num = num * 1;
+  if (num < 10) {
+    return '0' + num;
+  } else {
+    return num;
+  }
+};
+
+/**
+ * @param {*时间} date
+ * @param {*转换的格式} type
+ */
+export const formatDateTimeByType = (date, type = 'yyyy-MM-dd-HH-mm-ss') => {
+  if (!date) {
+    return '';
+  }
+  if (typeof date === 'number') {
+    date = new Date(date);
+  }
+  if (typeof date === 'string') {
+    return date;
+  } else {
+    let year = type.indexOf('yyyy') >= 0 ? fillZero(date.getFullYear()) : '';
+    let month = type.indexOf('MM') >= 0 ? '-' + fillZero(date.getMonth() + 1) : '';
+    let day = type.indexOf('dd') >= 0 ? '-' + fillZero(date.getDate()) + '' : '';
+    let hours = type.indexOf('HH') >= 0 ? ' ' + fillZero(date.getHours()) : '';
+    let min = type.indexOf('mm') >= 0 ? ':' + fillZero(date.getMinutes()) : '';
+    let sec = type.indexOf('ss') >= 0 ? ':' + fillZero(date.getSeconds()) : '';
+    // console.log(year+month+day+hours+min+sec);
+    return year + month + day + hours + min + sec;
+  }
+};
+
+/*
+ * 限制字数用, 一个汉字算一个字,两个英文/字母算一个字
+ */
+export const getByteVal = (val, max) => {
+  let returnValue = '';
+  let byteValLen = 0;
+  for (let i = 0; i < val.length; i++) {
+    if (val[i].match(/[^\x00-\xff]/gi) != null) byteValLen += 1;
+    else byteValLen += 0.5;
+    if (byteValLen > max) break;
+    returnValue += val[i];
+  }
+  return returnValue;
+};
+
+/*
+ * 一个汉字算一个字,一个英文字母或数字算半个字
+ */
+export const getZhLen = val => {
+  let len = 0;
+  for (let i = 0; i < val.length; i++) {
+    let a = val.charAt(i);
+    if (a.match(/[^\x00-\xff]/gi) != null) {
+      len += 1;
+    } else {
+      len += 0.5;
+    }
+  }
+  return Math.ceil(len);
+};
+
+/*
+ * 一个汉字算一个字,两个英文/字母算一个字
+ */
+export const getByteVal2 = val => {
+  let returnValue = '';
+  // eslint-disable-next-line
+  let byteValLen = 0;
+  for (let i = 0; i < val.length; i++) {
+    if (val[i].match(/[^\x00-\xff]/gi) != null) byteValLen += 1;
+    else byteValLen += 0.5;
+    returnValue += val[i];
+  }
+  return returnValue;
+};

src/views/sign/marketing-event/components/dm-delete.vue

+<template>
+  <el-popover class="el-button el-button--text" placement="top" width="160" v-model="visible">
+    <p style="line-height:1.5;padding:10px 10px 20px;color:#606266;">{{ tips }}</p>
+    <div style="text-align: right; margin: 0">
+      <el-button size="mini" type="text" @click="cancel">取消</el-button>
+      <el-button type="primary" size="mini" @click="confirm">确定</el-button>
+    </div>
+    <span slot="reference"><slot></slot></span>
+  </el-popover>
+</template>
+<script>
+export default {
+  name: 'dm-delete',
+  props: {
+    tips: {
+      type: String,
+      default: '是否删除?'
+    }
+  },
+  data() {
+    return {
+      visible: false
+    };
+  },
+  methods: {
+    cancel() {
+      this.visible = false;
+    },
+    confirm() {
+      this.visible = false;
+      this.$emit('confirm');
+    }
+  }
+};
+</script>

src/views/sign/marketing-event/components/item-card.vue

+<template>
+  <div class="dm-card__item__wrap">
+    <img v-if="item.status === 0" :src="require('../assets/img/delete_icon.png')" draggable="false" class="flag" />
+    <img v-else-if="item.couponStock <= 0" :src="require('../assets/img/stock_icon.png')" draggable="false" class="flag" />
+    <div class="dm-card__item" :style="{ background: item.cardColor }">
+      <img class="dm-card__item__avatar" :src="item.brandLogo || loadErrorImg" alt="" />
+      <div class="inline-block">
+        <el-tooltip open-delay="200" effect="dark" :content="item.coupCardId" placement="top-start">
+          <p class="dm-card__item__title">{{ item.cardName }}</p>
+        </el-tooltip>
+        <p class="dm-card__item__desc" v-if="item.cardEffectiveMode !== 0">领取后{{ (item.startDay === 0 ? '当' : '第' + item.startDay) + '天，有效天数' + item.limitDay }}天</p>
+        <p class="dm-card__item__desc" v-if="item.cardEffectiveMode === 0">{{ formatDateTimeByType(item.beginDate, 'yyyy-MM-dd') }} 至 {{ formatDateTimeByType(item.endDate, 'yyyy-MM-dd') }}</p>
+      </div>
+    </div>
+    <p class="dm-card__item--bottom">
+      <span>适用{{ item.storeMode === 0 ? '所有门店' : item.storeMode === 1 ? '部分分组' : '部分门店' }}</span>
+    </p>
+    <div v-if="overdue" class="danger-color fz12 mt5"><i class="el-icon-warning mr5 fz12"></i>超过投放期限</div>
+  </div>
+</template>
+
+<script>
+import { formatDateTimeByType } from '../assets/utils.js';
+export default {
+  name: 'item-card',
+  data() {
+    return {
+      formatDateTimeByType,
+      // eslint-disable-next-line
+      loadErrorImg: require('../assets/img/loaderror.png')
+    };
+  },
+  props: {
+    item: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  computed: {
+    overdue() {
+      const { putEndDate, putBeginDate, putEffectiveMode } = this.item;
+      if (putEffectiveMode == 0) {
+        return new Date() > new Date(putEndDate) || new Date() < new Date(putBeginDate);
+      }
+      return false;
+    }
+  },
+  mounted() {
+    console.log(this.item);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.dm-card__item__wrap {
+  position: relative;
+  img.flag {
+    position: absolute;
+    right: 0px;
+    top: -2px;
+    z-index: 5;
+    width: 70px;
+  }
+}
+</style>

src/views/sign/marketing-event/components/item-integral.vue

+<template>
+  <div class="dm-integral__item__wrap">
+    <!-- {{ item.integralType }} -->
+    <template>
+      <span class="fz16">赠送积分<span class="fz12 gray ml20">* 仅支持给开卡会员赠送积分</span></span>
+      <p class="mt15">
+        <span class="fz24 mr5 primary-font-color">{{ item.integralCount }}</span>
+        <span>积分</span>
+      </p>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'item-integral',
+  props: {
+    item: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  }
+};
+</script>

src/views/sign/marketing-event/components/lib-card.vue

+<template>
+  <el-dialog title="选择卡券" :visible.sync="show" width="800px" :before-close="close">
+    <div class="clearfix pb10">
+      <div class="fl">
+        <el-input v-model="listParams.searchParam" class="w200 mr10" clearable placeholder="请输入卡券名/备注名" @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
+        <el-select style="width:120px;margin-right:10px;" v-model="listParams.cardTypes" placeholder="卡券类型" @change="refresh">
+          <el-option v-for="item in cardTypesList" :key="item.value" :label="item.label" :value="item.value"></el-option>
+        </el-select>
+        <span class="fz12 gray">{{ limitTips }}{{ total }}张。 </span>
+      </div>
+      <!-- <div class="fr">
+        <el-button type="primary" @click="add">新建卡券</el-button>
+        <el-button @click="refresh">刷新列表</el-button>
+      </div> -->
+    </div>
+    <div style="font-size:12px;color:#909399;line-height:30px;">* 仅能选择卡券模板投放期限有效的卡券</div>
+    <el-table tooltipEffect="light" :data="tableList" row-class-name="cursor-pointer" style="width: 100%" v-loading="loading" @row-click="rowClick">
+      <el-table-column :show-overflow-tooltip="false" width="60" align="center" prop="coupCardId">
+        <template slot-scope="scope">
+          <div class="sms-record_left label-hidden">
+            <el-radio v-model="selectedData" :label="scope.row" class="pr10"></el-radio>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column :show-overflow-tooltip="true" width="140" align="left" prop="cardName" label="卡券名称">
+        <template slot-scope="scope">
+          <p style="line-height:22px;">{{ scope.row.cardName }}</p>
+          <p style="line-height:20px;color:#909399;font-size:13px;">{{ scope.row.subName }}</p>
+        </template>
+      </el-table-column>
+      <el-table-column :show-overflow-tooltip="false" min-width="120" align="left" prop="createTime" label="卡券模板投放期限">
+        <template slot-scope="scope">
+          <span v-if="scope.row.putEffectiveMode == 0"> 固定日期：{{ formatDateTimeByType(scope.row.putBeginDate, 'yyyy-MM-dd') }} 至 {{ formatDateTimeByType(scope.row.putEndDate, 'yyyy-MM-dd') }} </span>
+          <span v-else>长期有效</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="" label="用户使用有效期" :min-width="120" :show-overflow-tooltip="false">
+        <template slot-scope="scope">
+          <div v-if="scope.row.cardEffectiveMode == 0">固定日期：{{ formatDateTimeByType(scope.row.beginDate, 'yyyy-MM-dd') + '至' + formatDateTimeByType(scope.row.endDate, 'yyyy-MM-dd') }}</div>
+          <div v-if="scope.row.cardEffectiveMode == 1">领取后{{ (scope.row.startDay === 0 ? '当' : '第' + scope.row.startDay) + '天，有效天数' + scope.row.limitDay }}天</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="cardLimit" :show-overflow-tooltip="false" label="领取限制" width="90">
+        <template slot-scope="scope"> {{ scope.row.cardLimit }}张/人 </template>
+      </el-table-column>
+      <el-table-column :show-overflow-tooltip="false" :width="90" align="left" prop="storeMode" label="适用门店">
+        <template slot-scope="scope">
+          {{ scope.row.storeMode === 0 ? '所有门店' : scope.row.storeMode === 1 ? '部分分组' : '部分门店' }}
+        </template>
+      </el-table-column>
+      <el-table-column :show-overflow-tooltip="false" :width="100" align="left" prop="couponStock" label="库存"></el-table-column>
+    </el-table>
+    <dm-pagination v-show="tableList.length" class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="listParams.pageSize" layout="prev, pager, next" :total="total"></dm-pagination>
+    <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 { getCardList } from '../assets/api.js';
+import { formatDateTimeByType } from '../assets/utils.js';
+export default {
+  name: 'lib-card',
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    cardLimitType: {
+      type: Number,
+      default: 1
+    }
+  },
+  computed: {
+    limitTips() {
+      if (this.cardLimitType === 2) {
+        return '领取限制领取1~100的卡券，系统已过滤，符合条件共';
+      } else if (this.cardLimitType === 3) {
+        return '领取限制领取<100的卡券不支持选择，系统已过滤，符合条件共';
+      } else if (this.cardLimitType === -1) {
+        return '该选择器可筛选所有领取限制卡券，共';
+      } else {
+        return '领取限制>1的卡券不支持选择，系统已过滤，符合条件共';
+      }
+    }
+  },
+  data() {
+    return {
+      formatDateTimeByType,
+      cardTypesList: [
+        { value: null, label: '全部' },
+        { value: 0, label: '抵金券' },
+        { value: 1, label: '折扣券' },
+        { value: 2, label: '兑换券' }
+      ],
+      listParams: {
+        searchParam: '',
+        currentPage: 1,
+        pageSize: 5,
+        cardTypes: '', // 0：抵金券，1：折扣券，2：兑换券
+        requestProject: 'gic-web',
+        cardLimitType: this.cardLimitType,
+        cardType: ''
+      },
+      total: 0,
+      tableList: [],
+      selectedData: {}
+    };
+  },
+  created() {
+    this.getCardList();
+  },
+  methods: {
+    handleSizeChange(val) {
+      this.listParams.pageSize = val;
+      this.getCardList();
+    },
+    handleCurrentChange(val) {
+      this.listParams.currentPage = val;
+      this.getCardList();
+    },
+    getCardList() {
+      this.loading = true;
+      getCardList(this.listParams).then(res => {
+        if (res.errorCode === 0) {
+          this.tableList = res.result.result || [];
+          this.total = res.result.totalCount;
+        }
+        this.loading = false;
+      });
+    },
+    reset() {
+      this.listParams.searchParams = '';
+      this.getCardList();
+    },
+    close() {
+      this.$emit('update:show', false);
+    },
+    rowClick(row) {
+      row.comName = 'card';
+      this.selectedData = row;
+    },
+    addItem() {
+      if (!this.selectedData.comName) {
+        this.$message({ type: 'warning', message: '未选择卡券' });
+        return;
+      }
+      this.$emit('sendItem', this.selectedData);
+      this.close();
+    },
+    add() {
+      window.open('/marketing/#/card/add');
+    },
+    refresh() {
+      this.listParams.currentPage = 1;
+      this.getCardList();
+    }
+  }
+};
+</script>

src/views/sign/marketing-event/components/lib-integral.vue

+<template>
+  <el-dialog title="赠送积分" :visible.sync="show" width="420px" @closed="close" :close-on-click-modal="false">
+    <el-form :model="form" :rules="rules" ref="form" label-width="0">
+      <template v-if="form.integralType === 1">
+        <p class="regular-font-color mb20">请输入需要赠送的积分<span class="fz12 gray ml10">* 仅支持给认证会员赠送积分</span></p>
+        <el-form-item prop="integralCount">
+          <el-input v-model.number="form.integralCount" maxLength="7" />
+        </el-form-item>
+      </template>
+    </el-form>
+    <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>
+export default {
+  name: 'lib-integral',
+  props: {
+    item: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    show: {
+      type: Boolean,
+      default: false
+    },
+    integralMultiple: {
+      // 积分 是否需要倍数（场景：消费触发）
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    const validInteral = (rule, value, callback) => {
+      if (!Number.isInteger(value)) {
+        callback(new Error('积分值为数字值'));
+      } else if (value <= 0) {
+        callback(new Error('积分值最小为1'));
+      } else if (value > 1000000) {
+        callback(new Error('单次赠送值最大值为1000000'));
+      } else {
+        callback();
+      }
+    };
+    return {
+      ecmMarketingTypeRelationId: '',
+      old: {}, // 旧数据
+      form: {
+        integralCount: '',
+        comName: 'integral',
+        integralType: 1, // 1固定积分  2订单金额倍数
+        multipleNum: undefined // 倍数值
+      },
+      rules: {
+        integralCount: [{ required: true, message: '请输入积分值', trigger: 'blur' }, { validator: validInteral, trigger: 'blur' }], // eslint-disable-line
+        multipleNum: [{ required: true, message: '请输入倍数', trigger: 'blur' }] // eslint-disable-line
+      },
+      loading: false
+    };
+  },
+  watch: {
+    reset() {
+      this.$refs.form.resetFields();
+    },
+    show(val) {
+      if (val) {
+        this.old = { ...this.item };
+        this.form.integralCount = this.item.integralCount;
+        this.form.multipleNum = this.item.multipleNum || undefined;
+        this.form.integralType = this.item.integralType || 1;
+        this.ecmMarketingTypeRelationId = this.item.ecmMarketingTypeRelationId;
+      } else {
+        this.old = {};
+        this.form.integralCount = '';
+        this.form.multipleNum = undefined;
+        this.form.integralType = 1;
+        this.ecmMarketingTypeRelationId = '';
+      }
+    }
+  },
+  methods: {
+    close() {
+      this.$refs.form.resetFields();
+      this.$emit('update:show', false);
+    },
+    addItem() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          if (this.integralMultiple) {
+            this.integralType = this.integralType || 1; // 设置默认1 防止''
+          }
+          this.$emit('sendItem', { ...this.form, ...{ ecmMarketingTypeRelationId: this.ecmMarketingTypeRelationId } });
+          this.close();
+        }
+      });
+    }
+  }
+};
+</script>

src/views/sign/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)">
+      <img :src="v.img" alt="" srcset="" /><span> {{ v.name }}</span>
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'opt',
+  props: {
+    options: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  methods: {
+    addItem(item) {
+      this.$emit('addItem', item);
+    }
+  }
+};
+</script>

src/views/sign/marketing-event/index.js

+import marketingEvent from './index.vue';
+
+const gicMarketingEvent = {
+  install(Vue, options) {
+    Vue.component(marketingEvent.name, marketingEvent);
+  }
+};
+if (typeof window !== 'undefined' && window.Vue) {
+  window.Vue.use(gicMarketingEvent);
+}
+
+export default gicMarketingEvent;

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

+<template>
+  <section class="dm-marketing">
+    <!-- 操作区 -->
+    <div class="dm-marketing__opt--wrap" v-if="list.length === 0">
+      <i class="el-icon-plus dm-marketing__opt--icon" @click="optTopShow = !optTopShow"></i>
+      <transition name="fade">
+        <opt @addItem="addItem" :options="allOptions" v-if="optTopShow"></opt>
+      </transition>
+    </div>
+    <!-- item组件区 -->
+    <div class="dm-marketing__content--wrap" v-if="list.length">
+      <div class="dm-marketing__content">
+        <!-- 组件 区域 -->
+        <div class="dm-marketing__content__item" v-for="(v, i) in list" :key="i">
+          <component :is="v.comName" :item="v.item"></component>
+          <template v-if="!readOnly">
+            <i class="el-icon-edit dm-marketing__opt--icon" v-if="v.comName === 'item-integral'" @click="editItem(v, i)"></i>
+            <dm-delete @confirm="delItem(v)">
+              <i class="el-icon-delete dm-marketing__opt--icon"></i>
+            </dm-delete>
+          </template>
+        </div>
+      </div>
+    </div>
+    <!-- 弹窗组件 -->
+    <component :is="dialogCom" @sendItem="saveToList" :item="currentItem" :show.sync="dialogShow" :isSupportVar="isSupportVar" :cardLimitType="cardLimitType" :integralMultiple="integralMultiple"></component>
+  </section>
+</template>
+
+<script>
+// saveUpdateMarketingType,getMarketingEvent,getMarketingTypeDetails
+// import { deleteMarketingType } from './assets/api.js';
+// 删除组件
+import dmDelete from './components/dm-delete.vue';
+// 操作组件
+import opt from './components/opt.vue';
+// 页面item组件
+import itemCard from './components/item-card.vue';
+import itemIntegral from './components/item-integral.vue';
+//弹窗组件
+import libCard from './components/lib-card.vue';
+import libIntegral from './components/lib-integral.vue';
+
+// 全部的操作项
+const allOptions = [
+  { name: '卡券', value: 'card', key: 1, img: require('./assets/img/card.svg') },
+  { name: '积分', value: 'integral', key: 2, img: require('./assets/img/integral.svg') }
+];
+export default {
+  name: 'vue-gic-marketing-event',
+  components: {
+    opt: opt,
+    'dm-delete': dmDelete,
+    'item-card': itemCard,
+    'item-integral': itemIntegral,
+    'lib-card': libCard,
+    'lib-integral': libIntegral
+  },
+  props: {
+    //  页面编码——- 1001-智能引擎; 1002-微信营销; 1003-被关注回复; 1004-关键字回复
+    code: {
+      type: String,
+      default: '1001'
+    },
+    ecmPlanId: {
+      type: String,
+      default: ''
+    },
+    // 是否能发短信的flag
+    enabledMessageState: {
+      type: Number,
+      default: 1
+    },
+    isSupportVar: {
+      type: Boolean,
+      default: false
+    },
+    cardLimitType: {
+      type: Number,
+      default: 1
+    },
+    integralMultiple: {
+      // 积分 是否需要倍数（场景：消费触发）
+      type: Boolean,
+      default: false
+    },
+    singleFlag: {
+      // 图文 实时发送这个参数为true，过滤图文仅要单图文
+      type: Boolean,
+      default: false
+    },
+    readOnly: {
+      // 只读
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      list: [],
+      dialogShow: false,
+      dialogCom: '',
+      options: [],
+      allOptions: allOptions,
+      maxEventCount: 1, //item最大数
+      currentItem: {},
+      optShow: false,
+      optTopShow: true
+    };
+  },
+  created() {
+    // this.init();
+  },
+  methods: {
+    // 保存操作
+    saveToList(val) {
+      if (val.comName === 'integral' && this.list.length > 0) {
+        this.list[0].item.integralCount = val.integralCount;
+      } else {
+        this.hasReturn();
+        this.list.push({ comName: 'item-' + val.comName, item: val });
+      }
+    },
+    // 新增前置 不能超过营销事件限制数量
+    addItem(v) {
+      if (this.isOverMaxCount()) {
+        this.$message({ type: 'warning', message: `最多只能添加${this.maxEventCount}个签到福利` });
+        return;
+      }
+      this.dialogCom = 'lib-' + v.value;
+      // 新增的时候设置为空对象
+      this.currentItem = {};
+      this.dialogShow = true;
+    },
+    // 删除操作
+    delItem(item) {
+      const index = this.list.findIndex(v => v.item.coupCardId === item.item.coupCardId);
+      this.list.splice(index, 1);
+      this.hasReturn();
+    },
+    //  判断是否大于最大数量
+    isOverMaxCount() {
+      return this.list.length >= this.maxEventCount;
+    },
+    //判断营销列表里是否包含积分--订单倍数 提供给父级使用
+    hasIntegralMultiple() {
+      return this.list.some(v => v.comName === 'item-integral' && v.item.integralType === 2);
+    },
+    // 积分编辑前置
+    editItem(obj) {
+      this.currentItem = obj.item;
+      this.dialogCom = 'lib-' + obj.item.comName;
+      this.$nextTick(_ => {
+        this.dialogShow = true;
+      });
+    },
+    //判断营销列表里是否有卡券 提供给父级使用
+    hasReturn() {
+      let item = {};
+      try {
+        this.list.forEach(v => {
+          if (v.comName === 'item-card') {
+            item = v;
+            throw new Error();
+          }
+        });
+      } catch (e) {
+        console.log(e);
+      }
+      this.$emit('has-card', item);
+    }
+  }
+};
+</script>
+<style lang="scss">
+@import url('./assets/style/index.css');
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+  transform: translate(0);
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+  display: none;
+}
+.dm-marketing {
+  .dm-marketing__opt {
+    padding-right: 0 !important;
+  }
+}
+</style>

src/views/sign/setting.vue

 <template>
   <section class="dm-wrap" v-loading="loading">
-    <div>
-      <el-form :model="form" ref="form" :rules="rules" label-suffix="：" label-width="110px">
-        <el-form-item label="签到开关" prop="value1">
-          <el-switch v-model="form.value1" active-color="rgba(47, 84, 235, 1)"></el-switch>
-        </el-form-item>
-        <el-form-item label="签到日期" prop="value2">
-          <el-radio-group v-model="form.value2" class="pick-radio">
-            <el-radio :label="0">长期生效</el-radio>
-            <el-radio :label="1">指定日期</el-radio>
-          </el-radio-group>
-          <el-date-picker v-if="form.value2" v-model="form.value3" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
-        </el-form-item>
-        <!-- 签到日期选择指定日期 -->
-        <el-form-item label="签到时段" prop="value4">
-          <el-radio-group v-model="form.value4" class="pick-radio">
-            <el-radio :label="0">长期生效</el-radio>
-            <el-radio :label="1">指定时段</el-radio>
-          </el-radio-group>
-          <!-- 签到时段选择指定时段 -->
-          <el-time-picker v-if="form.value4" v-model="form.value5" is-range range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"></el-time-picker>
-        </el-form-item>
-        <el-form-item label="签到间隔" prop="value6">
-          <el-radio-group v-model="form.value6" class="sign-time">
-            <el-radio :label="0">每天<span v-if="form.value6 === 0" class="tips">每个用户每天可在门店签到一次。每天0:00刷新签到次数</span></el-radio>
-            <el-radio :label="1">每周<span v-if="form.value6 === 1" class="tips">每个用户每周可在门店签到一次。每周一0:00刷新签到次数</span></el-radio>
-            <el-radio :label="2">每月<span v-if="form.value6 === 2" class="tips">每个用户每月可在门店签到一次。每月1日0:00刷新签到次数</span></el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="签到门店" prop="value7">
-          <vue-gic-store-new :options="options" :isAdd="isAdd" :uuid.sync="uuid" ref="storeNew" @store-change="storeChange"></vue-gic-store-new>
-        </el-form-item>
-        <el-form-item label="签到距离" prop="value8">
-          <el-input-number v-model="form.value8" controls-position="right" class="shortInput" @change="handleChange" :min="100" :max="5000"></el-input-number><span style="margin-left:9px;">米</span>
-          <span class="tips">*为了保证用户体验，建议设置签到距离为100米，设置范围为100-5000米。</span>
-        </el-form-item>
-        <el-form-item label="签到人群" prop="value9">
-          <div style="width:984px">
-            <p class="people">在此权限下进行条件筛选<i>（不进行筛选则默认是您权限下的所有用户）</i></p>
-            <vue-gic-people :projectName="projectName" :useId="useId" :hasSearchData="hasSearchData" :sceneValue="sceneValue" ref="peopleFilter" :isAdd="operateType" @findFilter="findFilter" @getBackData="getBackData" @editHide="editHide" @editShow="editShow" />
-            <div class="gic-people--button" v-show="toggleTag">
-              <el-button size="small" type="primary" @click="getData">确 定</el-button>
-              <el-button size="small" @click="cancelFilter">取 消</el-button>
-            </div>
+    <el-form :model="form" ref="form" :rules="rules" label-suffix="：" label-width="110px">
+      <el-form-item label="签到开关" prop="value1">
+        <el-switch v-model="form.value1" active-color="rgba(47, 84, 235, 1)"></el-switch>
+      </el-form-item>
+      <el-form-item label="签到日期" prop="value2">
+        <el-radio-group v-model="form.value2" class="pick-radio">
+          <el-radio :label="0">长期生效</el-radio>
+          <el-radio :label="1">指定日期</el-radio>
+        </el-radio-group>
+        <el-date-picker v-if="form.value2" v-model="form.value3" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+      </el-form-item>
+      <!-- 签到日期选择指定日期 -->
+      <el-form-item label="签到时段" prop="value4">
+        <el-radio-group v-model="form.value4" class="pick-radio">
+          <el-radio :label="0">长期生效</el-radio>
+          <el-radio :label="1">指定时段</el-radio>
+        </el-radio-group>
+        <!-- 签到时段选择指定时段 -->
+        <el-time-picker v-if="form.value4" v-model="form.value5" is-range range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"></el-time-picker>
+      </el-form-item>
+      <el-form-item label="签到间隔" prop="value6">
+        <el-radio-group v-model="form.value6" class="sign-time">
+          <el-radio :label="0">每天<span v-if="form.value6 === 0" class="tips">每个用户每天可在门店签到一次。每天0:00刷新签到次数</span></el-radio>
+          <el-radio :label="1">每周<span v-if="form.value6 === 1" class="tips">每个用户每周可在门店签到一次。每周一0:00刷新签到次数</span></el-radio>
+          <el-radio :label="2">每月<span v-if="form.value6 === 2" class="tips">每个用户每月可在门店签到一次。每月1号0:00刷新签到次数</span></el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="签到门店" prop="value7">
+        <vue-gic-store-new :options="options" :isAdd="isAdd" :uuid.sync="uuid" ref="storeNew" @store-change="storeChange"></vue-gic-store-new>
+      </el-form-item>
+      <el-form-item label="签到距离" prop="value8">
+        <el-input-number v-model="form.value8" controls-position="right" class="shortInput" @change="handleChange" :min="100" :max="5000"></el-input-number><span style="margin-left:9px;">米</span>
+        <span class="tips">*为了保证用户体验，建议设置签到距离为100米，设置范围为100-5000米。</span>
+      </el-form-item>
+      <el-form-item label="签到人群" prop="value9">
+        <div style="width:984px">
+          <p class="people">在此权限下进行条件筛选<i>（不进行筛选则默认是您权限下的所有用户）</i></p>
+          <vue-gic-people :projectName="projectName" :useId="useId" :hasSearchData="hasSearchData" :sceneValue="sceneValue" ref="peopleFilter" :isAdd="operateType" @findFilter="findFilter" @getBackData="getBackData" @editHide="editHide" @editShow="editShow" />
+          <div class="gic-people--button" v-show="toggleTag">
+            <el-button size="small" type="primary" @click="getData">确 定</el-button>
+            <el-button size="small" @click="cancelFilter">取 消</el-button>
           </div>
-        </el-form-item>
-        <el-form-item label="签到规则说明" prop="value10">
-          <el-input v-model="form.value10" class="long-input" type="textarea" resize="none" rows="4" maxlength="200" show-word-limit></el-input>
-        </el-form-item>
-        <el-form-item label="签到福利" prop="value11">
-          <el-checkbox-group v-model="form.value11">
-            <el-checkbox-button label="积分">积分</el-checkbox-button>
-            <el-checkbox-button label="卡券">卡券</el-checkbox-button>
-          </el-checkbox-group>
-          <span class="tips">*支持每人限领张数≥100张的卡券。</span>
-        </el-form-item>
-        <el-button type="primary" @click="onSubmit('form')" style="margin:24px 0 50px 111px;">保存</el-button>
-      </el-form>
-    </div>
+        </div>
+      </el-form-item>
+      <el-form-item label="签到规则说明" prop="value10">
+        <el-input v-model="form.value10" class="long-input" type="textarea" resize="none" rows="4" maxlength="200" show-word-limit></el-input>
+      </el-form-item>
+      <el-form-item label="签到福利" prop="value11">
+        <!-- 营销事件组件 -->
+        <!-- 只有实时才是单图文 -->
+        <marketing-event ref="marketingEvent" @has-card="hasCard" :integralMultiple="true"></marketing-event>
+        <span class="tips">*支持每人限领张数≥100张的卡券。</span>
+      </el-form-item>
+      <el-button type="primary" @click="onSubmit('form')" style="margin:24px 0 50px 111px;">保存</el-button>
+    </el-form>
   </section>
 </template>
 
 <script>
+import marketingEvent from './marketing-event/index.vue';
 export default {
   name: 'sign-setting',
+  components: {
+    'marketing-event': marketingEvent
+  },
   data() {
     return {
       loading: false,
@@ -98,7 +99,8 @@ export default {
       rules: {
         // giveContent: { validator: validGiveContent, message: '请输入转赠对话框文字', trigger: 'blur' },
         // giveRule: { required: true, message: '请输入卡券转赠规则', trigger: 'blur' }
-      }
+      },
+      couponAutoGetStock: null
     };
   },
   created() {
@@ -152,6 +154,10 @@ export default {
       console.log('editShow');
       that.toggleTag = true;
       that.saveTag = false;
+    },
+    hasCard(card) {
+      console.log(card);
+      this.couponAutoGetStock = card;
     }
   }
 };