增加名单导入功能

src/App.vue

@@ -13,8 +13,14 @@
     <div id="tags">
       <ul v-for="item in datas" :key="item.key">
         <li>
-          <a href="javascript:void(0);" :style="style(item)">
-            {{ item.key }}
+          <a
+            href="javascript:void(0);"
+            :style="{
+              color:
+                !running && allresult.includes(item.key) ? '#ff2200' : '#fff'
+            }"
+          >
+            {{ item.name ? item.name : item.key }}
           </a>
         </li>
       </ul>
@@ -22,6 +28,7 @@
     <transition name="bounce">
       <div id="resbox" v-show="showRes">
         <p @click="showRes = false">{{ categoryName }}抽奖结果：</p>
+        <div class="container">
           <span
             v-for="item in resArr"
             :key="item"
@@ -29,8 +36,32 @@
             :style="resCardStyle"
             @click="showRes = false"
           >
+            <span
+              class="key"
+              :style="{
+                fontSize: list[item] && list[item].name ? '36px' : null,
+                lineHeight: list[item] && list[item].name ? '80px' : null
+              }"
+              v-if="list[item] && list[item].name"
+            >
               {{ item }}
             </span>
+            <span
+              class="cont"
+              :style="{
+                fontSize: list[item] && list[item].name ? '36px' : null,
+                lineHeight: list[item] && list[item].name ? '80px' : null
+              }"
+            >
+              <span v-if="list[item] && list[item].name">
+                {{ list[item].name }}
+              </span>
+              <span v-else>
+                {{ item }}
+              </span>
+            </span>
+          </span>
+        </div>
       </div>
     </transition>
 
@@ -52,7 +83,8 @@ import {
   configField,
   resultField,
   newLotteryField,
-  conversionCategoryName
+  conversionCategoryName,
+  listField
 } from '@/helper/index';
 import { luckydrawHandler } from '@/helper/algorithm';
 import Result from '@/components/Result';
@@ -87,6 +119,9 @@ export default {
         this.$store.commit('setResult', val);
       }
     },
+    list() {
+      return this.$store.state.list;
+    },
     allresult() {
       let allresult = [];
       for (const key in this.result) {
@@ -100,8 +135,10 @@ export default {
     datas() {
       const datas = [];
       for (let index = 0; index < this.config.number; index++) {
+        const listData = this.list.find(d => d.key === index);
         datas.push({
-          key: index + 1
+          key: index + 1,
+          name: listData ? listData.name : ''
         });
       }
       return datas;
@@ -131,6 +168,11 @@ export default {
       });
       this.$store.commit('setConfig', config);
     }
+
+    const list = getData(listField);
+    if (list) {
+      this.$store.commit('setList', list);
+    }
   },
 
   data() {
@@ -147,13 +189,6 @@ export default {
     this.startTagCanvas();
   },
   methods: {
-    style() {
-      const style = { color: '#fff' };
-      // if (!this.running && this.allresult.includes(item.key)) {
-      //   style.color = 'yellow';
-      // }
-      return style;
-    },
     speed() {
       return [0.1 * Math.random() + 0.01, -(0.1 * Math.random() + 0.01)];
     },
@@ -183,8 +218,10 @@ export default {
       const { speed, config } = this;
       if (this.running) {
         window.TagCanvas.SetSpeed('rootcanvas', speed());
-        this.reloadTagCanvas();
         this.showRes = true;
+        this.$nextTick(() => {
+          this.reloadTagCanvas();
+        });
       } else {
         this.showRes = false;
         const { number } = config;
@@ -270,7 +307,7 @@ export default {
 
 #resbox {
   position: absolute;
-  top: 45%;
+  top: 50%;
   left: 50%;
   width: 1000px;
   transform: translateX(-50%) translateY(-50%);
@@ -280,9 +317,13 @@ export default {
     font-size: 50px;
     line-height: 120px;
   }
+  .container {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
   .itemres {
     background: #fff;
-    display: inline-block;
     width: 160px;
     height: 160px;
     border-radius: 4px;
@@ -292,6 +333,13 @@ export default {
     margin-right: 20px;
     margin-top: 20px;
     cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    .key {
+      color: red;
+    }
   }
 }
 </style>

src/components/LotteryConfig.vue

@@ -150,11 +150,15 @@ export default {
     onSubmit() {
       setData(configField, this.form);
       this.$emit('update:visible', false);
-      this.$emit('resetconfig');
+
       this.$message({
         message: '保存成功',
         type: 'success'
       });
+
+      this.$nextTick(() => {
+        this.$emit('resetconfig');
+      });
     },
     addLottery() {
       this.showAddLottery = true;

src/components/Tool.vue

 <template>
   <div id="tool">
-    <el-button @click="startHandler" size="mini">{{
+    <el-button @click="startHandler" type="primary" size="mini">{{
       running ? '停止' : '开始'
     }}</el-button>
     <el-button size="mini" @click="resetConfig">
       重置
     </el-button>
+    <el-button size="mini" @click="showImport = true">
+      导入名单
+    </el-button>
     <el-dialog
       :append-to-body="true"
       :visible.sync="showSetwat"
@@ -70,6 +73,30 @@
         </el-form-item>
       </el-form>
     </el-dialog>
+
+    <el-dialog
+      :append-to-body="true"
+      :visible.sync="showImport"
+      class="import-dialog"
+      width="400px"
+    >
+      <el-input
+        type="textarea"
+        :rows="10"
+        placeholder="请输入对应的号码和名单(可直接从excel复制)，格式(号码 名字)，导入的名单将代替号码显示在抽奖中。如：
+1 张三
+2 李四
+3 王五
+				"
+        v-model="listStr"
+      ></el-input>
+      <div class="footer">
+        <el-button size="mini" type="primary" @click="transformList"
+          >确定</el-button
+        >
+        <el-button size="mini" @click="showImport = false">取消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -118,12 +145,14 @@ export default {
   data() {
     return {
       showSetwat: false,
+      showImport: false,
       form: {
         category: '',
         mode: 1,
         qty: 1,
         allin: false
-      }
+      },
+      listStr: ''
     };
   },
   methods: {
@@ -136,11 +165,15 @@ export default {
         .then(() => {
           clearData();
           this.$store.commit('setClearStore');
-          this.$emit('resetConfig');
+
           this.$message({
             type: 'success',
             message: '重置成功!'
           });
+
+          this.$nextTick(() => {
+            this.$emit('resetConfig');
+          });
         })
         .catch(() => {
           this.$message({
@@ -181,6 +214,38 @@ export default {
       } else {
         this.showSetwat = true;
       }
+    },
+    transformList() {
+      const { listStr } = this;
+      if (!listStr) {
+        this.$message.error('没有数据');
+      }
+      const list = [];
+      const rows = listStr.split('\n');
+      if (rows && rows.length > 0) {
+        rows.forEach(item => {
+          const rowList = item.split('\t');
+          if (rowList.length >= 2) {
+            const key = Number(rowList[0].trim());
+            const name = rowList[1].trim();
+            key &&
+              list.push({
+                key,
+                name
+              });
+          }
+        });
+      }
+      this.$store.commit('setList', list);
+
+      this.$message({
+        message: '保存成功',
+        type: 'success'
+      });
+      this.showImport = false;
+      this.$nextTick(() => {
+        this.$emit('resetConfig');
+      });
     }
   }
 };
@@ -209,4 +274,11 @@ export default {
     font-weight: bold;
   }
 }
+.import-dialog {
+  .footer {
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+  }
+}
 </style>

src/helper/index.js

@@ -36,6 +36,7 @@ export function getDomData(element, dataName) {
 export const configField = 'config'; // 配置数据
 export const resultField = 'result'; // 抽奖结果
 export const newLotteryField = 'newLottery'; // 新增奖项
+export const listField = 'list'; // 名单
 
 export function conversionCategoryName(key) {
   let name = '';

src/store/index.js

 import Vue from 'vue';
 import Vuex from 'vuex';
-import { setData, resultField, newLotteryField } from '@/helper/index';
+import {
+  setData,
+  resultField,
+  newLotteryField,
+  listField
+} from '@/helper/index';
 
 Vue.use(Vuex);
 
@@ -24,7 +29,8 @@ export default new Vuex.Store({
       fourthPrize: [],
       fifthPrize: []
     },
-    newLottery: []
+    newLottery: [],
+    list: []
   },
   mutations: {
     setClearStore(state) {
@@ -47,6 +53,7 @@ export default new Vuex.Store({
         fifthPrize: []
       };
       state.newLottery = [];
+      state.list = [];
     },
     setConfig(state, config) {
       state.config = config;
@@ -62,6 +69,20 @@ export default new Vuex.Store({
       }
       state.newLottery.push(newLottery);
       setData(newLotteryField, state.newLottery);
+    },
+    setList(state, list) {
+      const arr = state.list;
+      list.forEach(item => {
+        const arrItem = arr.find(data => data.key === item.key);
+        if (arrItem) {
+          arrItem.name === item.name;
+        } else {
+          arr.push(item);
+        }
+      });
+      state.list = arr;
+
+      setData(listField, arr);
     }
   },
   actions: {},