audio

d2dc5e3a · zhangyongfeng · 6c92b0e3 · d2dc5e3a · d2dc5e3a · d2dc5e3a
Commit d2dc5e3a authored Jan 02, 2020 by zhangyongfeng
11 changed files
--- a/.gitignore
+++ b/.gitignore
@@ -20,3 +20,4 @@ yarn-error.log*
 *.sln
 *.sw?
 config.js
+test.js
\ No newline at end of file
--- a/README.md
+++ b/README.md
@@ -17,6 +17,7 @@

 - 开始抽奖，需要选取抽取的奖项、本次抽取的人数和是否开启全员抽奖功能。
 - 本次抽取的人数可以选择 1 人、5 人、一次性抽取完或者自定义抽取数量，不能大于奖项剩余的数量
+- 点击停止抽取完成

 ### 重置


--- a/public/index.html
+++ b/public/index.html
@@ -5,6 +5,9 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+		  <link
+      rel="stylesheet"
+      href="https://at.alicdn.com/t/font_1594571_5oi8u1hs5fy.css"/>
    <title>luckydraw</title>
  </head>
  <body>

--- a/src/App.vue
+++ b/src/App.vue
@@ -68,6 +68,13 @@
      </div>
    </transition>

+    <el-button class="audio" type="text" @click="audioPlaying = !audioPlaying">
+      <i
+        class="iconfont"
+        :class="[audioPlaying ? 'iconstop' : 'iconplay1']"
+      ></i>
+    </el-button>
+
    <LotteryConfig :visible.sync="showConfig" @resetconfig="reloadTagCanvas" />
    <Tool
      @toggle="toggle"
@@ -81,12 +88,18 @@
    <span class="copy-right">
      Copyright©zhangyongfeng5350@gmail.com
    </span>
+
+    <audio id="audiobg" :src="audioSrc" preload="auto" controls autoplay loop>
+      你的浏览器不支持audio标签
+    </audio>
  </div>
 </template>
 <script>
 import LotteryConfig from '@/components/LotteryConfig';
 import Publicity from '@/components/Publicity';
 import Tool from '@/components/Tool';
+import bgaudio from '@/assets/bg.mp3';
+import beginaudio from '@/assets/begin.mp3';
 import {
  getData,
  configField,
@@ -197,7 +210,9 @@ export default {
      showConfig: false,
      showResult: false,
      resArr: [],
-      category: ''
+      category: '',
+      audioPlaying: false,
+      audioSrc: bgaudio
    };
  },
  watch: {
@@ -208,6 +223,9 @@ export default {
          this.reloadTagCanvas();
        });
      }
+    },
+    audioPlaying(v) {
+      this.playAudio(v);
    }
  },
  mounted() {
@@ -217,6 +235,19 @@ export default {
    }, 1000);
  },
  methods: {
+    playAudio(type) {
+      if (type) {
+        this.$el.querySelector('#audiobg').play();
+      } else {
+        this.$el.querySelector('#audiobg').pause();
+      }
+    },
+    loadAudio() {
+      this.$el.querySelector('#audiobg').load();
+      this.$nextTick(() => {
+        this.$el.querySelector('#audiobg').play();
+      });
+    },
    getPhoto() {
      database.getAll(DB_STORE_NAME).then(res => {
        if (res && res.length > 0) {
@@ -255,6 +286,9 @@ export default {
    toggle(form) {
      const { speed, config } = this;
      if (this.running) {
+        this.audioSrc = bgaudio;
+        this.loadAudio();
+
        window.TagCanvas.SetSpeed('rootcanvas', speed());
        this.showRes = true;
        this.running = !this.running;
@@ -266,6 +300,10 @@ export default {
        if (!form) {
          return;
        }
+
+        this.audioSrc = beginaudio;
+        this.loadAudio();
+
        const { number } = config;
        const { category, mode, qty, remain, allin } = form;
        let num = 1;
@@ -329,6 +367,22 @@ export default {
      }
    }
  }
+  .audio {
+    position: absolute;
+    top: 100px;
+    right: 30px;
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    border: 1px solid #fff;
+    border-radius: 50%;
+    padding: 0;
+    text-align: center;
+    .iconfont {
+      position: relative;
+      left: 1px;
+    }
+  }
  .copy-right {
    position: absolute;
    right: 0;

--- a/src/assets/begin.mp3
+++ b/src/assets/begin.mp3
--- a/src/assets/bg.mp3
+++ b/src/assets/bg.mp3
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/components/Importphoto.vue
+++ b/src/components/Importphoto.vue
@@ -75,7 +75,7 @@ export default {
      const formData = new FormData();
      formData.append('uploadImg', fileList[0]);
      const reader = new FileReader();
-      const AllowImgFileSize = 1024 * 1024;
+      const AllowImgFileSize = 1024 * 150;
      const file = fileList[0];
      if (file) {
        this.filename = file.name;
@@ -85,7 +85,7 @@ export default {
            AllowImgFileSize != 0 &&
            AllowImgFileSize < reader.result.length
          ) {
-            return this.$message.error('不允许上传大于1M的图片');
+            return this.$message.error('不允许上传大于150KB的图片');
          } else {
            this.value = reader.result;
          }

--- a/src/router/index.js
+++ b/src/router/index.js
@@ -9,15 +9,6 @@ const routes = [
    path: '/',
    name: 'home',
    component: Home
-  },
-  {
-    path: '/about',
-    name: 'about',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () =>
-      import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
 ];


--- a/src/views/About.vue
+++ b/src/views/About.vue
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-  </div>
+  <div class="home"></div>
 </template>

 <script>