fix:营销活动

index.html

@@ -29,7 +29,7 @@
     <script src="//web-1251519181.file.myqcloud.com/components/member-group.2.2.12.js"></script>
     <script src="//web-1251519181.file.myqcloud.com/components/store-card.2.0.18.js"></script>
     <script src="//web-1251519181.file.myqcloud.com/components/confirm-people.2.0.01.js"></script>
-    <script src="//web-1251519181.file.myqcloud.com/components/people.2.0.41.js"></script>
+    <script src="//web-1251519181.file.myqcloud.com/components/people.2.0.42.js"></script>
     <script src="//web-1251519181.file.myqcloud.com/components/export-excel.2.0.13.js"></script>
     <script src="//web-1251519181.file.myqcloud.com/components/input.2.0.00.js"></script>
     <script src="//web-1251519181.file.myqcloud.com/components/delete.2.0.00.js"></script>

package-lock.json

@@ -435,6 +435,16 @@
       "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
     },
+    "animate.css": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-3.7.2.tgz",
+      "integrity": "sha512-0bE8zYo7C0KvgOYrSVfrzkbYk6IOTVPNqkiHg2cbyF4Pq/PXzilz4BRWA3hwEUBoMp5VBgrC29lQIZyhRWdBTw=="
+    },
+    "animated-vue": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/animated-vue/-/animated-vue-0.5.3.tgz",
+      "integrity": "sha1-g7zl06uD/jR2Eib5QQFAyLHOYfs="
+    },
     "ansi-escapes": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz",

package.json

@@ -15,6 +15,8 @@
     "@antv/g2": "^3.2.6",
     "@riophae/vue-treeselect": "^0.0.36",
     "@tinymce/tinymce-vue": "^1.0.8",
+    "animate.css": "^3.7.2",
+    "animated-vue": "^0.5.3",
     "axios": "^0.18.0",
     "echarts": "^4.1.0",
     "element-ui": "^2.4.1",

src/assets/style/base/index.scss

@@ -327,4 +327,13 @@
 }
 .el-table__empty-block{
   min-height: 240px;
+}
+
+/* 数字字体 */
+@font-face {
+  font-family: 'din';
+  src: url('/static/font/DIN-Alternate-Bold.woff') format('woff'), url('/static//font//DIN-Alternate-Bold.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+}
+.roboto {
+  font-family: 'din';
 }
\ No newline at end of file

src/assets/style/components/index.scss

@@ -39,6 +39,10 @@
   display: inline-block;
 }
 
+.dm-input__counter {
+  bottom: 2px !important;
+}
+
 .dm-label-input_80{
   width: calc(100% - 80px);
 }

src/components/count-to/index.vue

+<template>
+  <span>
+    {{ displayValue }}
+  </span>
+</template>
+<script>
+// https://github.com/PanJiaChen/vue-countTo
+import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js';
+export default {
+  props: {
+    startVal: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    endVal: {
+      type: Number,
+      required: false,
+      default: 2017
+    },
+    duration: {
+      type: Number,
+      required: false,
+      default: 3000
+    },
+    autoplay: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    decimals: {
+      type: Number,
+      required: false,
+      default: 0,
+      validator(value) {
+        return value >= 0;
+      }
+    },
+    decimal: {
+      type: String,
+      required: false,
+      default: '.'
+    },
+    separator: {
+      type: String,
+      required: false,
+      default: ','
+    },
+    prefix: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    suffix: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    useEasing: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    easingFn: {
+      type: Function,
+      default(t, b, c, d) {
+        return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b;
+      }
+    }
+  },
+  data() {
+    return {
+      localStartVal: this.startVal,
+      displayValue: this.formatNumber(this.startVal),
+      printVal: null,
+      paused: false,
+      localDuration: this.duration,
+      startTime: null,
+      timestamp: null,
+      remaining: null,
+      rAF: null
+    };
+  },
+  computed: {
+    countDown() {
+      return this.startVal > this.endVal;
+    }
+  },
+  watch: {
+    startVal() {
+      if (this.autoplay) {
+        this.start();
+      }
+    },
+    endVal() {
+      if (this.autoplay) {
+        this.start();
+      }
+    }
+  },
+  mounted() {
+    if (this.autoplay) {
+      this.start();
+    }
+    this.$emit('mountedCallback');
+  },
+  methods: {
+    start() {
+      this.localStartVal = this.startVal;
+      this.startTime = null;
+      this.localDuration = this.duration;
+      this.paused = false;
+      this.rAF = requestAnimationFrame(this.count);
+    },
+    pauseResume() {
+      if (this.paused) {
+        this.resume();
+        this.paused = false;
+      } else {
+        this.pause();
+        this.paused = true;
+      }
+    },
+    pause() {
+      cancelAnimationFrame(this.rAF);
+    },
+    resume() {
+      this.startTime = null;
+      this.localDuration = +this.remaining;
+      this.localStartVal = +this.printVal;
+      requestAnimationFrame(this.count);
+    },
+    reset() {
+      this.startTime = null;
+      cancelAnimationFrame(this.rAF);
+      this.displayValue = this.formatNumber(this.startVal);
+    },
+    count(timestamp) {
+      if (!this.startTime) this.startTime = timestamp;
+      this.timestamp = timestamp;
+      const progress = timestamp - this.startTime;
+      this.remaining = this.localDuration - progress;
+      if (this.useEasing) {
+        if (this.countDown) {
+          this.printVal = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration);
+        } else {
+          this.printVal = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration);
+        }
+      } else {
+        if (this.countDown) {
+          this.printVal = this.localStartVal - (this.localStartVal - this.endVal) * (progress / this.localDuration);
+        } else {
+          this.printVal = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration);
+        }
+      }
+      if (this.countDown) {
+        this.printVal = this.printVal < this.endVal ? this.endVal : this.printVal;
+      } else {
+        this.printVal = this.printVal > this.endVal ? this.endVal : this.printVal;
+      }
+      this.displayValue = this.formatNumber(this.printVal);
+      if (progress < this.localDuration) {
+        this.rAF = requestAnimationFrame(this.count);
+      } else {
+        this.$emit('callback');
+      }
+    },
+    isNumber(val) {
+      return !isNaN(parseFloat(val));
+    },
+    formatNumber(num) {
+      if (typeof num === String) {
+        num = Number(num);
+      }
+      num = num.toFixed(this.decimals);
+      num += '';
+      const x = num.split('.');
+      let x1 = x[0];
+      const x2 = x.length > 1 ? this.decimal + x[1] : '';
+      const rgx = /(\d+)(\d{3})/;
+      if (this.separator && !this.isNumber(this.separator)) {
+        while (rgx.test(x1)) {
+          x1 = x1.replace(rgx, '$1' + this.separator + '$2');
+        }
+      }
+      return this.prefix + x1 + x2 + this.suffix;
+    }
+  },
+  destroyed() {
+    cancelAnimationFrame(this.rAF);
+  }
+};
+</script>

src/components/count-to/requestAnimationFrame.js

+// eslint-disable
+let lastTime = 0;
+const prefixes = 'webkit moz ms o'.split(' '); // 各浏览器前缀
+
+let requestAnimationFrame;
+let cancelAnimationFrame;
+
+const isServer = typeof window === 'undefined';
+if (isServer) {
+  requestAnimationFrame = function() {
+    return;
+  };
+  cancelAnimationFrame = function() {
+    return;
+  };
+} else {
+  requestAnimationFrame = window.requestAnimationFrame;
+  cancelAnimationFrame = window.cancelAnimationFrame;
+  let prefix;
+  // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
+  for (let i = 0; i < prefixes.length; i++) {
+    if (requestAnimationFrame && cancelAnimationFrame) {
+      break;
+    }
+    prefix = prefixes[i];
+    requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame'];
+    cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame'];
+  }
+
+  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
+  if (!requestAnimationFrame || !cancelAnimationFrame) {
+    requestAnimationFrame = function(callback) {
+      const currTime = new Date().getTime();
+      // 为了使setTimteout的尽可能的接近每秒60帧的效果
+      const timeToCall = Math.max(0, 16 - (currTime - lastTime));
+      const id = window.setTimeout(() => {
+        callback(currTime + timeToCall);
+      }, timeToCall);
+      lastTime = currTime + timeToCall;
+      return id;
+    };
+
+    cancelAnimationFrame = function(id) {
+      window.clearTimeout(id);
+    };
+  }
+}
+
+export { requestAnimationFrame, cancelAnimationFrame };

src/config/index.js

 export default {
   // eslint-disable-next-line
-  api: process.env['NODE_ENV'] === 'development' ? '/dmApi/' : window.location.protocol + '//' + window.location.host + '/' || ''
+  api: process.env['NODE_ENV'] === 'development' ? 'http://gicdev.demogic.com/' : window.location.protocol + '//' + window.location.host + '/' || ''
+  // /dmApi/
   // http://gicdev.demogic.com/
   // http://192.168.1.154:86/
 };

src/main.js

@@ -4,7 +4,6 @@ import router from './router';
 import store from './store';
 import { axios } from './service/api/index';
 import directives from './directives';
-
 Vue.config.productionTip = false;
 
 if (process.env.NODE_ENV == 'development') { // eslint-disable-line

src/router/modules/activity.js

+// 营销活动
+export default {
+  path: 'activity',
+  name: '营销活动管理',
+  component: () => import(/* webpackChunkName: "activity" */ '../../views/activity/index.vue'),
+  redirect: '/activity/list',
+  children: [
+    {
+      path: 'list',
+      name: '营销活动列表',
+      component: () => import(/* webpackChunkName: "activity" */ '../../views/activity/list.vue'),
+      meta: {
+        path: '/activity/list'
+      }
+    },
+    {
+      path: 'edit/:id',
+      name: '营销活动编辑',
+      component: () => import(/* webpackChunkName: "activity" */ '../../views/activity/form.vue'),
+      meta: {
+        type: 'edit',
+        path: '/activity/list'
+      }
+    },
+    {
+      path: 'add',
+      name: '营销活动新增',
+      component: () => import(/* webpackChunkName: "activity" */ '../../views/activity/form.vue'),
+      meta: {
+        type: 'add',
+        path: '/activity/list'
+      }
+    },
+    {
+      path: 'history-list',
+      name: '历史营销活动列表',
+      component: () => import(/* webpackChunkName: "activity" */ '../../views/activity/history-list.vue'),
+      meta: {
+        path: '/activity/list'
+      }
+    },
+    {
+      path: 'data-view/:id',
+      name: '营销活动数据概览',
+      component: () => import(/* webpackChunkName: "activity" */ '../../views/activity/data-view.vue'),
+      meta: {
+        path: '/activity/list'
+      }
+    }
+    // {
+    //   path: 'currentlist/:id',
+    //   name: '实时发送记录',
+    //   component: () => import(/* webpackChunkName: "activity" */ '../../views/activity/current-list.vue'),
+    //   meta: {
+    //     path: '/activity/list'
+    //   }
+    // }
+  ]
+};

src/router/routes.js

@@ -24,6 +24,8 @@ import evaluation from './modules/evaluation';
 import recharge from './modules/recharge';
 //e袋洗
 import ewash from './modules/ewash';
+//营销活动
+import activity from './modules/activity';
 
 export default [
   {
@@ -31,7 +33,7 @@ export default [
     name: 'layout',
     component: Layout,
     redirect: '/wechat/record',
-    children: [card, ecm, game, message, wechat, msg, calllog, recharge, evaluation, ewash]
+    children: [card, ecm, game, message, wechat, msg, calllog, recharge, evaluation, ewash, activity]
   },
   {
     path: '/401',

src/service/api/activityApi.js

+import { requests } from './index';
+const PREFIX = 'api-marketing/';
+
+import config from '@/config';
+export const url = config.api + PREFIX;
+
+// 营销活动分页列表
+export const activityList = params => requests(PREFIX + 'marketing-activity-page', params);
+
+// 营销活动-- 删除
+export const delActivity = params => requests(PREFIX + 'del-marketing-activity', params);
+
+// 营销活动 - 获取详情
+export const getActivityInfo = params => requests(PREFIX + 'get-marketing-activity-detail', params);
+
+// 智能营销--ECM营销引擎-- 新建/修改 [保存]计划信息
+export const saveActivity = params => requests(PREFIX + 'save-edit-marketing-activity', params);
+
+// // 智能营销--下线
+// export const offlineEcmPlan = params => requests(PREFIX + 'ecm-plan-offline', params);
+
+// // 智能营销--记录--批次记录页面
+// export const ecmBatchSendInfos = params => requests(PREFIX + 'ecm-batch-send-infos', params);
+
+// // 智能营销--记录--批次人员列表
+// export const ecmBatchSendDetails = params => requests(PREFIX + 'ecm-batch-send-details', params);
+
+// // 智能营销--实时发送记录类型
+// export const ecmCurrentSendInfos = params => requests(PREFIX + 'ecm-current-send-infos', params);
+
+// // 智能营销--实时发送人员列表
+// export const ecmCurrentSendDetails = params => requests(PREFIX + 'ecm-current-send-details', params);
+
+// // 智能营销--记录--批次人员列表 导出csv
+// export const exportBatchSendDetails = config.api + PREFIX + 'export-batch-send-details';
+
+// // 智能营销--实时人员列表--导出csv
+// export const exportCurrentSendDetails = config.api + PREFIX + 'export-current-send-details';

src/views/activity/form.vue

+<template>
+  <div class="dm-wrap" v-loading="loading">
+    <el-form ref="form" :model="ruleForm" label-width="140px" :rules="rules" style="padding-bottom:400px;">
+      <el-form-item prop="name" label="活动名称">
+        <dm-input v-model="ruleForm.name" class="w300" placeholder="请输入活动名称" :byteType="1" :maxlength="10"></dm-input>
+      </el-form-item>
+      <el-form-item prop="dateTime" label="活动时间">
+        <el-date-picker v-model="ruleForm.beginDate" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="开始日期"></el-date-picker>
+        <span style="color:#909299;margin-left:5px;margin-right:5px;">~</span>
+        <el-date-picker v-model="ruleForm.endDate" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="结束日期"></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submit">确认{{ isAdd ? '新建' : '保存' }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { formatDateTimeByType } from '@/utils/index.js';
+import { saveActivity, getActivityInfo } from '@/service/api/activityApi';
+export default {
+  name: 'activity-form',
+  data() {
+    const validateDateLessYear = (rule, value, callback) => {
+      const date1 = this.ruleForm.beginDate;
+      const date2 = this.ruleForm.endDate;
+      if (!date1 || !date2) {
+        callback(new Error('活动时间不能为空'));
+      }
+      // if (new Date(date2).getTime() < new Date()) {
+      //   callback(new Error('结束时间不能小于当前时间'));
+      // }
+      if (new Date(date2).getTime() - new Date(date1).getTime() > 60 * 60 * 24 * 365 * 1000) {
+        callback(new Error(rule.message || '时间跨度不能超过一年'));
+      }
+      callback();
+    };
+    return {
+      loading: false,
+      marketingActivityId: this.$route.params.id,
+      ruleForm: {
+        name: '',
+        beginDate: '',
+        endDate: ''
+      },
+      rules: {
+        name: [{ required: true, message: '请输入活动名称', trigger: 'change' }],
+        dateTime: [{ required: true, validator: validateDateLessYear, trigger: 'change' }]
+      },
+      isAdd: this.$route.meta.type === 'add',
+      isEdit: this.$route.meta.type === 'edit'
+    };
+  },
+  methods: {
+    submit() {
+      this.$refs.form.validate(valid => {
+        if (!valid) {
+          return;
+        }
+        let params = { ...this.ruleForm };
+        if (this.isEdit) {
+          params.marketingActivityId = this.marketingActivityId;
+        }
+        this.loading = true;
+        saveActivity(params)
+          .then(res => {
+            this.loading = false;
+            this.$tips({ type: 'success', message: '操作成功' });
+            this.$router.push('/activity/list');
+          })
+          .catch(() => {
+            this.loading = false;
+          });
+      });
+    },
+    getInfo() {
+      this.loading = true;
+      getActivityInfo({ marketingActivityId: this.marketingActivityId })
+        .then(res => {
+          const result = res.result || {};
+          const { name, beginDate, endDate } = result;
+          this.ruleForm.name = name;
+          this.ruleForm.beginDate = formatDateTimeByType(beginDate, 'yyyy-MM-dd-HH-mm-ss');
+          this.ruleForm.endDate = formatDateTimeByType(endDate, 'yyyy-MM-dd-HH-mm-ss');
+          this.ruleForm.name = name;
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    }
+  },
+  mounted() {
+    if (this.isEdit) {
+      this.getInfo();
+    }
+  },
+  created() {
+    // 设置面包屑
+    let breadcrumbName = '智能营销编辑';
+    if (this.isAdd) {
+      breadcrumbName = '智能营销新增';
+    }
+    this.$store.commit('mutations_breadcrumb', [{ name: '营销活动列表', path: '/activity/list' }, { name: breadcrumbName, path: '' }]); // eslint-disable-line
+  }
+};
+</script>

src/views/activity/index.vue

+<template>
+  <div>
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'activity'
+  // created() {}
+};
+</script>

src/views/activity/list.vue

+<template>
+  <section class="dm-wrap">
+    <div class="clearfix pb22">
+      <el-date-picker class="w400" v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="refresh"></el-date-picker>
+      <el-input v-model="listParams.search" class="w300" placeholder="请输入活动名称/创建人" clearable @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
+      <el-button class="fr" type="primary" @click="$router.push('/activity/add')">新建营销活动</el-button>
+      <el-button class="fr mr10" @click="$router.push('/activity/history-list')">查看历史活动</el-button>
+    </div>
+    <el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-loading="loading">
+      <el-table-column v-for="(v, i) in tableHeader" :show-overflow-tooltip="v.tooltip" :width="v.width" :min-width="v.minWidth" :align="v.align" :key="i" :prop="v.prop" :label="v.label" :formatter="v.formatter">
+        <template slot-scope="scope">
+          <span v-if="v.formatter" v-html="v.formatter(scope.row)"></span>
+          <span v-else>{{ scope.row[v.prop] || '--' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="left" width="210px" fixed="right">
+        <template slot-scope="scope">
+          <el-button type="text" @click="$router.push(`/activity/data-view/${scope.row.marketingActivityId}`)">数据概览</el-button>
+          <el-button type="text" @click="$router.push(`/activity/edit/${scope.row.marketingActivityId}`)">编辑</el-button>
+          <dm-delete @confirm="stopData(scope.row)" tips="是否下线该营销活动？">
+            <el-button type="text">下线</el-button>
+          </dm-delete>
+          <dm-delete @confirm="delData(scope.row)" tips="是否删除该营销活动？">
+            <el-button type="text">删除</el-button>
+          </dm-delete>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination v-show="tableList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></el-pagination>
+  </section>
+</template>
+<script>
+import talbeMethods from '@/mixins/tableMethods.js';
+import { activityList, delActivity } from '@/service/api/activityApi.js';
+import { formatDateTimeByType } from '@/utils/index.js';
+// import { enableAccessControl, confirmInfo } from '@/utils/auth.js';
+export default {
+  name: 'activity-list',
+  data() {
+    return {
+      loading: false,
+      tableList: [],
+      dateTime: '',
+      tableHeader: [
+        { label: '活动名称', prop: 'name', minWidth: '150', tooltip: true, align: 'left' },
+        {
+          label: '创建时间',
+          minWidth: '100',
+          align: 'left',
+          formatter: function(row) {
+            return `<p class="cell-time">
+                      ${formatDateTimeByType(row.createTime, 'yyyy-MM-dd-HH-mm-ss', true).y}<br />
+                      <span>${formatDateTimeByType(row.createTime, 'yyyy-MM-dd-HH-mm-ss', true).h}</span>
+                    </p>`;
+          }
+        },
+        {
+          label: '活动时间',
+          minWidth: '160',
+          align: 'left',
+          formatter: function(row) {
+            return `<p class="cell-time">
+                      ${formatDateTimeByType(row.beginDate, 'yyyy-MM-dd-HH-mm-ss')}<br />
+                      <span>${formatDateTimeByType(row.endDate, 'yyyy-MM-dd-HH-mm-ss')}</span>
+                    </p>`;
+          }
+        },
+        { label: '创建人', prop: 'creatorName', minWidth: '120', align: 'left' },
+        { label: '状态', prop: 'stateDesc', minWidth: '120', align: 'left' },
+        { label: '昨日营销人次', prop: 'aa', minWidth: '120', tooltip: true, align: 'left' },
+        { label: '本月营销人次', prop: 'aa', minWidth: '120', tooltip: true, align: 'left' },
+        { label: '合计营销人次', prop: 'aa', minWidth: '120', tooltip: true, align: 'left' }
+      ],
+      listParams: {
+        beginTime: '',
+        endTime: '',
+        search: '', //否	String	输入发送人搜索
+        currentPage: 1, //是	Number	当前页面
+        pageSize: 20 //是	Number	每页显示条数
+      },
+      total: 0
+    };
+  },
+  mixins: [talbeMethods],
+  created() {
+    this.$store.commit('aside_handler', false);
+    this.$store.commit('mutations_breadcrumb', [{ name: '营销活动列表', path: '' }]); // eslint-disable-line
+    this.getTableList();
+  },
+  methods: {
+    async getTableList() {
+      try {
+        this.loading = true;
+        this.dataTimeFormat();
+        let res = await activityList(this.listParams);
+        if (res.errorCode === 0 && res.result) {
+          this.tableList = res.result.result || [];
+          this.total = res.result.totalCount;
+        } else {
+          this.tableList = [];
+          this.total = 0;
+        }
+      } catch (err) {}
+      this.loading = false;
+    },
+    stopData({ marketingActivityId }) {
+      return;
+      this.loading = true;
+      delActivity({ marketingActivityId })
+        .then(res => {
+          this.loading = false;
+          this.$tips({ type: 'success', message: '操作成功!' });
+          this.getTableList();
+        })
+        .catch(err => {
+          this.loading = false;
+          this.$tips({ type: 'error', message: '操作失败!' });
+        });
+    },
+    delData({ marketingActivityId }) {
+      this.loading = true;
+      delActivity({ marketingActivityId })
+        .then(res => {
+          this.loading = false;
+          this.$tips({ type: 'success', message: '删除成功!' });
+          this.getTableList();
+        })
+        .catch(err => {
+          this.loading = false;
+          this.$tips({ type: 'error', message: '删除失败!' });
+        });
+    },
+    /**-------辅助方法---------- */
+    dataTimeFormat() {
+      if (this.dateTime) {
+        this.listParams.beginTime = formatDateTimeByType(this.dateTime[0], 'yyyy-MM-dd');
+        this.listParams.endTime = formatDateTimeByType(this.dateTime[1], 'yyyy-MM-dd');
+      } else {
+        this.listParams.beginTime = '';
+        this.listParams.endTime = '';
+      }
+    }
+  }
+};
+</script>

src/views/activity/module/item.vue

+<template>
+  <ul class="view-item" :class="{ invert }">
+    <template v-if="!invert">
+      <li class="text">{{ text }}</li>
+      <li class="num" :class="{ blue: numBlue }">
+        <template v-if="!run">{{ num | famount }}</template>
+        <count-to v-else :startVal="0" :endVal="num" :duration="duration" />
+      </li>
+    </template>
+    <template v-else>
+      <li class="num" :class="{ blue: numBlue }">
+        <template v-if="!run">{{ num | famount }}</template>
+        <count-to v-else :startVal="0" :endVal="num" :duration="duration" />
+      </li>
+      <li class="text">{{ text }}</li>
+    </template>
+  </ul>
+</template>
+
+<script>
+import countTo from '@/components/count-to';
+export default {
+  name: 'item',
+  props: {
+    text: String,
+    num: [String, Number],
+    numBlue: {
+      default: false,
+      type: Boolean
+    },
+    invert: {
+      // 是否颠倒
+      type: Boolean,
+      default: false
+    },
+    run: {
+      // 是否数字转动变化
+      type: Boolean,
+      default: false
+    },
+    duration: {
+      type: Number,
+      default: 2000
+    }
+  },
+  filters: {
+    famount(s) {
+      var str = s.toString();
+      var reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
+      return str.replace(reg, '$1,');
+    }
+  },
+  components: {
+    countTo
+  }
+};
+</script>
+
+<style lang="scss">
+.view-item {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  &:hover .num {
+    transform: scale(1.2);
+  }
+  &.invert {
+    .text {
+      margin-bottom: 0px;
+    }
+    .num {
+      margin-bottom: 10px;
+    }
+  }
+  .num,
+  .text {
+    padding: 0 20px 0;
+    text-align: center;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 100%;
+    white-space: nowrap;
+    word-wrap: normal;
+    width: auto;
+    &.blue {
+      color: #1890ff;
+    }
+  }
+  .text {
+    margin-bottom: 10px;
+    height: 20px;
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(96, 98, 102, 1);
+    line-height: 20px;
+  }
+  .num {
+    height: 37px;
+    font-size: 32px;
+    font-family: 'din';
+    font-weight: bold;
+    color: rgba(48, 49, 51, 1);
+    line-height: 37px;
+    transition: all 0.25s;
+    cursor: pointer;
+  }
+}
+</style>

src/views/card/merge-form.vue

@@ -73,7 +73,6 @@ export default {
   name: 'merge-form',
   data() {
     const validateSendType = (rule, value, callback) => {
-      console.log(this.dateTime);
       if (this.ruleForm.effectiveMode) {
         if ((this.dateTime && !this.dateTime[0]) || !this.dateTime) {
           callback(new Error('请选择发送时间'));

src/views/game/ptyx/form.vue

@@ -22,9 +22,9 @@
             </template>
           </el-table-column>
           <el-table-column prop="winnerCount" label="奖品数量" align="left" width="220">
-            <template slot-scope="scope">
-              <el-input-number controls-position="right" v-model="scope.row.winnerCount" :precision="0" :min="1" size="small" class="w150" :disabled="isInfo"></el-input-number> 个
-            </template>
+            <template slot-scope="scope"
+              ><el-input-number controls-position="right" v-model="scope.row.winnerCount" :precision="0" :min="1" size="small" class="w150" :disabled="isInfo"></el-input-number> 个</template
+            >
           </el-table-column>
           <el-table-column prop="prizeName" label="商品名称" align="left" :min-width="180">
             <template slot-scope="scope">