新增自定义奖

src/App.vue

@@ -44,6 +44,7 @@ import {
   getData,
   configField,
   resultField,
+  newLotteryField,
   conversionCategoryName
 } from '@/helper/index';
 import { luckydrawHandler } from '@/helper/algorithm';
@@ -99,6 +100,18 @@ export default {
     if (result) {
       this.$store.commit('setResult', result);
     }
+
+    const newLottery = getData(newLotteryField);
+    if (newLottery) {
+      const config = this.config;
+      newLottery.forEach(item => {
+        this.$store.commit('setNewLottery', item);
+        if (!config[item.key]) {
+          this.$set(config, item.key, 0);
+        }
+      });
+      this.$store.commit('setConfig', config);
+    }
   },
 
   data() {
@@ -115,11 +128,11 @@ export default {
     this.startTagCanvas();
   },
   methods: {
-    style(item) {
+    style() {
       const style = { color: '#fff' };
-      if (this.allresult.includes(item.key)) {
-        style.color = 'yellow';
-      }
+      // if (!this.running && this.allresult.includes(item.key)) {
+      //   style.color = 'yellow';
+      // }
       return style;
     },
     speed() {
@@ -173,11 +186,19 @@ export default {
           num
         );
         this.resArr = resArr;
+
         this.category = category;
+
+        if (this.result[category]) {
+          this.$set(this.result, category, []);
+        }
+
         const oldRes = this.result[category] || [];
-        this.result = {
+        const data = Object.assign({}, this.result, {
           [category]: oldRes.concat(resArr)
-        };
+        });
+
+        this.result = data;
         window.TagCanvas.SetSpeed('rootcanvas', [5, 1]);
       }
       this.running = !this.running;
@@ -206,6 +227,7 @@ export default {
       position: absolute;
       top: 17px;
       padding: 0;
+      z-index: 9999;
       &.con {
         right: 20px;
       }

src/assets/style/animation.scss

 @-webkit-keyframes slowMovingToLeft {
   from {
-    left: 1000px;
+    left: 100%;
   }
 
   to {
-    left: -1500px;
+    left: -400%;
   }
 }
 @keyframes slowMovingToLeft {
   from {
-    left: 1000px;
+    left: 100%;
   }
 
   to {
-    left: -1500px;
+    left: -400%;
   }
 }

src/assets/style/base.scss

@@ -40,3 +40,9 @@ body {
   padding-top: 20px !important;
   padding-bottom: 20px !important;
 }
+.el-dialog {
+  margin-top: 0 !important;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+}

src/components/LotteryConfig.vue

@@ -2,62 +2,88 @@
   <el-dialog
     :visible="visible"
     :append-to-body="true"
-    title="抽奖配置"
     width="400px"
     :lock-scroll="true"
     @close="$emit('update:visible', false)"
     class="c-LotteryConfig"
   >
+    <div class="c-LotteryConfigtitle" slot="title">
+      <span :style="{ fontSize: '16px', marginRight: '20px' }">
+        抽奖配置
+      </span>
+      <el-button size="mini" @click="addLottery">增加奖项</el-button>
+      <el-button size="mini" type="primary" @click="onSubmit"
+        >保存配置</el-button
+      >
+      <el-button size="mini" @click="$emit('update:visible', false)"
+        >取消</el-button
+      >
+    </div>
     <el-form ref="form" :model="form" label-width="100px" size="mini">
       <el-form-item label="抽奖标题">
         <el-input v-model="form.name"></el-input>
       </el-form-item>
       <el-form-item label="抽奖总人数">
-        <el-input v-model="form.number"></el-input>
+        <el-input type="number" v-model="form.number"></el-input>
       </el-form-item>
       <el-form-item label="特等奖人数">
-        <el-input v-model="form.specialAward"></el-input>
+        <el-input type="number" v-model="form.specialAward"></el-input>
       </el-form-item>
       <el-form-item label="一等奖人数">
-        <el-input v-model="form.firstPrize"></el-input>
+        <el-input type="number" v-model="form.firstPrize"></el-input>
       </el-form-item>
       <el-form-item label="二等奖人数">
-        <el-input v-model="form.secondPrize"></el-input>
+        <el-input type="number" v-model="form.secondPrize"></el-input>
       </el-form-item>
       <el-form-item label="三等奖人数">
-        <el-input v-model="form.thirdPrize"></el-input>
+        <el-input type="number" v-model="form.thirdPrize"></el-input>
       </el-form-item>
       <el-form-item label="四等奖人数">
-        <el-input v-model="form.fourthPrize"></el-input>
+        <el-input type="number" v-model="form.fourthPrize"></el-input>
       </el-form-item>
       <el-form-item label="五等奖人数">
-        <el-input v-model="form.fifthPrize"></el-input>
-      </el-form-item>
-      <el-form-item label="追加奖(1)人数">
-        <el-input v-model="form.additionalPrize1"></el-input>
-      </el-form-item>
-      <el-form-item label="追加奖(2)人数">
-        <el-input v-model="form.additionalPrize2"></el-input>
-      </el-form-item>
-      <el-form-item label="追加奖(3)人数">
-        <el-input v-model="form.additionalPrize3"></el-input>
-      </el-form-item>
-      <el-form-item label="追加奖(4)人数">
-        <el-input v-model="form.additionalPrize4"></el-input>
-      </el-form-item>
-      <el-form-item label="追加奖(5)人数">
-        <el-input v-model="form.additionalPrize5"></el-input>
+        <el-input type="number" v-model="form.fifthPrize"></el-input>
       </el-form-item>
 
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">保存配置</el-button>
-        <el-button @click="$emit('update:visible', false)">取消</el-button>
+      <el-form-item
+        :label="newitem.name"
+        v-for="newitem in storeNewLottery"
+        :key="newitem.key"
+      >
+        <el-input
+          type="number"
+          v-model="form[newitem.key]"
+          @change="
+            val => {
+              form[newitem.key] = Number(val);
+            }
+          "
+        ></el-input>
       </el-form-item>
     </el-form>
+
+    <el-dialog
+      :visible.sync="showAddLottery"
+      :append-to-body="true"
+      width="300px"
+      class="dialog-showAddLottery"
+    >
+      <div class="add-title" slot="title">增加奖项</div>
+      <el-form ref="newLottery" :model="newLottery" size="mini">
+        <el-form-item label="奖项名称">
+          <el-input v-model="newLottery.name"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="addHandler">增加奖项</el-button>
+          <el-button @click="showAddLottery = false">取消</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
   </el-dialog>
 </template>
 <script>
 import { setData, configField } from '@/helper/index';
+import { randomNum } from '@/helper/algorithm';
 export default {
   name: 'LotteryConfig',
   props: {
@@ -71,8 +97,17 @@ export default {
       set(val) {
         this.$store.commit('setConfig', val);
       }
+    },
+    storeNewLottery() {
+      return this.$store.state.newLottery;
     }
   },
+  data() {
+    return {
+      showAddLottery: false,
+      newLottery: { name: '' }
+    };
+  },
   methods: {
     onSubmit() {
       setData(configField, this.form);
@@ -82,11 +117,41 @@ export default {
         message: '保存成功',
         type: 'success'
       });
+    },
+    addLottery() {
+      this.showAddLottery = true;
+    },
+    randomField() {
+      const str = 'abcdefghijklmnopqrstuvwxyz';
+      let fieldStr = '';
+      for (let index = 0; index < 10; index++) {
+        fieldStr += str.split('')[randomNum(1, 27) - 1];
+      }
+      return `${fieldStr}${Date.now()}`;
+    },
+    addHandler() {
+      const field = this.randomField();
+      const data = {
+        key: field,
+        name: this.newLottery.name
+      };
+      this.$store.commit('setNewLottery', data);
+
+      this.showAddLottery = false;
     }
   }
 };
 </script>
 <style lang="scss">
 .c-LotteryConfig {
+  .el-dialog__body {
+    height: 340px;
+    overflow-y: auto;
+  }
+}
+.dialog-showAddLottery {
+  .el-dialog {
+    height: 186px;
+  }
 }
 </style>

src/components/Publicity.vue

 <template>
   <div class="c-Publicity">
-    <div class="message">
-      <span class="title">
-        {{ config.name }}
-      </span>
-      <span v-html="message"> </span>
-    </div>
+    <el-carousel
+      height="50px"
+      :autoplay="true"
+      indicator-position="none"
+      arrow="never"
+      :interval="3000"
+    >
+      <el-carousel-item v-for="item in message" :key="item.key">
+        <div class="item" :class="{ actiname: item.key === 0 }">
+          <span v-if="item.title" class="title"> {{ item.title }}</span>
+          <span v-if="item.value" class="value">
+            {{ item.value }}
+          </span>
+        </div>
+      </el-carousel-item>
+    </el-carousel>
   </div>
 </template>
 <script>
@@ -21,39 +31,21 @@ export default {
       return this.$store.state.result;
     },
     message() {
-      const {
-        specialAward,
-        additionalPrize1,
-        additionalPrize2,
-        additionalPrize3
-      } = this.config;
-      const fields = [
-        'firstPrize',
-        'secondPrize',
-        'thirdPrize',
-        'fourthPrize',
-        'fifthPrize'
-      ];
-      if (specialAward > 0) {
-        fields.unshift('specialAward');
-      }
-      if (additionalPrize1 > 0) {
-        fields.push('additionalPrize1');
-      }
-      if (additionalPrize2 > 0) {
-        fields.push('additionalPrize2');
-      }
-      if (additionalPrize3 > 0) {
-        fields.push('additionalPrize3');
-      }
-      const { result } = this;
+      const { result, config } = this;
+      const fields = Object.keys(config);
 
-      let message = '';
-      fields.forEach(item => {
+      let message = [{ key: 0, title: config.name }];
+      fields.forEach((item, index) => {
         let label = conversionCategoryName(item);
-        message += `&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${label}抽奖结果: ${
-          result[item].length > 0 ? result[item].join('、') : '暂未抽取'
-        }`;
+        if (result[item] && config[item] > 0) {
+          message.push({
+            key: index + 1,
+            title: `${label}抽奖结果:`,
+            value: `${
+              result[item].length > 0 ? result[item].join('、') : '暂未抽取'
+            }`
+          });
+        }
       });
 
       return message;
@@ -64,23 +56,26 @@ export default {
 <style lang="scss">
 .c-Publicity {
   height: 100%;
-  width: 1000px;
+  // width: 1000px;
   background-color: rgba(0, 0, 0, 0.2);
   margin: 0 auto;
   position: relative;
   overflow: hidden;
-  .message {
-    font-size: 16px;
+  .item {
+    text-align: center;
     color: #fff;
-    position: absolute;
-    left: 500px;
-    animation-name: slowMovingToLeft;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-    animation-direction: normal;
-    animation-duration: 40s;
+    font-size: 16px;
     .title {
-      color: #ff2200;
+      color: #ccc;
+    }
+    .value {
+      margin-left: 10px;
+    }
+    &.actiname {
+      .title {
+        color: red;
+        font-size: 20px;
+      }
     }
   }
 }

src/components/Result.vue

@@ -2,10 +2,17 @@
   <el-dialog
     :visible="visible"
     @close="$emit('update:visible', false)"
-    title="抽奖结果"
     width="600px"
     class="c-Result"
   >
+    <div class="dialog-title" slot="title">
+      <span :style="{ fontSize: '18px' }">
+        抽奖结果
+      </span>
+      <span :style="{ fontSize: '14px', color: '#999', marginLeft: '10px' }">
+        (点击号码可以删除)
+      </span>
+    </div>
     <div
       v-for="(item, index) in resultList"
       :key="index"
@@ -69,13 +76,16 @@ export default {
   },
   methods: {
     deleteRes(event, row) {
+      const Index = getDomData(event.target, 'res');
+      if (!Index) {
+        return;
+      }
       this.$confirm('此操作将移除该中奖号码，确认删除?', '警告', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       })
         .then(() => {
-          const Index = getDomData(event.target, 'res');
           if (Index) {
             const result = this.result;
             result[row.label] = this.result[row.label].filter(

src/helper/algorithm.js

@@ -3,7 +3,7 @@
  * @param {number} minNum
  * @param {number} maxNum
  */
-function randomNum(minNum = 1, maxNum) {
+export function randomNum(minNum = 1, maxNum) {
   return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
 }
 /**

src/helper/index.js

@@ -35,6 +35,7 @@ export function getDomData(element, dataName) {
 
 export const configField = 'config'; // 配置数据
 export const resultField = 'result'; // 抽奖结果
+export const newLotteryField = 'newLottery'; // 新增奖项
 
 export function conversionCategoryName(key) {
   let name = '';
@@ -76,5 +77,10 @@ export function conversionCategoryName(key) {
     default:
       break;
   }
+  const newLottery = getData(newLotteryField) || [];
+  const findres = newLottery.find(item => item.key === key);
+  if (findres) {
+    name = findres.name;
+  }
   return name;
 }

src/store/index.js

 import Vue from 'vue';
 import Vuex from 'vuex';
-import { setData, resultField } from '@/helper/index';
+import { setData, resultField, newLotteryField } from '@/helper/index';
 
 Vue.use(Vuex);
 
@@ -14,12 +14,7 @@ export default new Vuex.Store({
       secondPrize: 5,
       thirdPrize: 8,
       fourthPrize: 10,
-      fifthPrize: 20,
-      additionalPrize1: 0,
-      additionalPrize2: 0,
-      additionalPrize3: 0,
-      additionalPrize4: 0,
-      additionalPrize5: 0
+      fifthPrize: 20
     },
     result: {
       specialAward: [],
@@ -27,22 +22,25 @@ export default new Vuex.Store({
       secondPrize: [],
       thirdPrize: [],
       fourthPrize: [],
-      fifthPrize: [],
-      additionalPrize1: [],
-      additionalPrize2: [],
-      additionalPrize3: [],
-      additionalPrize4: [],
-      additionalPrize5: []
-    }
+      fifthPrize: []
+    },
+    newLottery: []
   },
   mutations: {
     setConfig(state, config) {
       state.config = config;
     },
     setResult(state, result = {}) {
-      Object.assign(state.result, result);
+      state.result = result;
 
       setData(resultField, state.result);
+    },
+    setNewLottery(state, newLottery) {
+      if (state.newLottery.find(item => item.name === newLottery.name)) {
+        return;
+      }
+      state.newLottery.push(newLottery);
+      setData(newLotteryField, state.newLottery);
     }
   },
   actions: {},