Skip to content

公瑾 / lucky-draw

Go to a project
Toggle navigation
Toggle navigation pinning
d2dc5e3a by zhangyongfeng
Options

audio

1 parent 6c92b0e3
Inline Side-by-side
Showing 11 changed files with 63 additions and 20 deletions
...@@ -20,3 +20,4 @@ yarn-error.log* ...@@ -20,3 +20,4 @@ yarn-error.log*
20 *.sln 20 *.sln
21 *.sw? 21 *.sw?
22 config.js 22 config.js
23 test.js
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
17 17
18 - 开始抽奖，需要选取抽取的奖项、本次抽取的人数和是否开启全员抽奖功能。 18 - 开始抽奖，需要选取抽取的奖项、本次抽取的人数和是否开启全员抽奖功能。
19 - 本次抽取的人数可以选择 1 人、5 人、一次性抽取完或者自定义抽取数量，不能大于奖项剩余的数量 19 - 本次抽取的人数可以选择 1 人、5 人、一次性抽取完或者自定义抽取数量，不能大于奖项剩余的数量
20 - 点击停止抽取完成
20 21
21 ### 重置 22 ### 重置
22 23
......
...@@ -5,6 +5,9 @@ ...@@ -5,6 +5,9 @@
5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 <link rel="icon" href="<%= BASE_URL %>favicon.ico"> 7 <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8 <link
9 rel="stylesheet"
10 href="https://at.alicdn.com/t/font_1594571_5oi8u1hs5fy.css"/>
8 <title>luckydraw</title> 11 <title>luckydraw</title>
9 </head> 12 </head>
10 <body> 13 <body>
......
...@@ -68,6 +68,13 @@ ...@@ -68,6 +68,13 @@
68 </div> 68 </div>
69 </transition> 69 </transition>
70 70
71 <el-button class="audio" type="text" @click="audioPlaying = !audioPlaying">
72 <i
73 class="iconfont"
74 :class="[audioPlaying ? 'iconstop' : 'iconplay1']"
75 ></i>
76 </el-button>
77
71 <LotteryConfig :visible.sync="showConfig" @resetconfig="reloadTagCanvas" /> 78 <LotteryConfig :visible.sync="showConfig" @resetconfig="reloadTagCanvas" />
72 <Tool 79 <Tool
73 @toggle="toggle" 80 @toggle="toggle"
...@@ -81,12 +88,18 @@ ...@@ -81,12 +88,18 @@
81 <span class="copy-right"> 88 <span class="copy-right">
82 Copyright©zhangyongfeng5350@gmail.com 89 Copyright©zhangyongfeng5350@gmail.com
83 </span> 90 </span>
91
92 <audio id="audiobg" :src="audioSrc" preload="auto" controls autoplay loop>
93 你的浏览器不支持audio标签
94 </audio>
84 </div> 95 </div>
85 </template> 96 </template>
86 <script> 97 <script>
87 import LotteryConfig from '@/components/LotteryConfig'; 98 import LotteryConfig from '@/components/LotteryConfig';
88 import Publicity from '@/components/Publicity'; 99 import Publicity from '@/components/Publicity';
89 import Tool from '@/components/Tool'; 100 import Tool from '@/components/Tool';
101 import bgaudio from '@/assets/bg.mp3';
102 import beginaudio from '@/assets/begin.mp3';
90 import { 103 import {
91 getData, 104 getData,
92 configField, 105 configField,
...@@ -197,7 +210,9 @@ export default { ...@@ -197,7 +210,9 @@ export default {
197 showConfig: false, 210 showConfig: false,
198 showResult: false, 211 showResult: false,
199 resArr: [], 212 resArr: [],
200 category: '' 213 category: '',
214 audioPlaying: false,
215 audioSrc: bgaudio
201 }; 216 };
202 }, 217 },
203 watch: { 218 watch: {
...@@ -208,6 +223,9 @@ export default { ...@@ -208,6 +223,9 @@ export default {
208 this.reloadTagCanvas(); 223 this.reloadTagCanvas();
209 }); 224 });
210 } 225 }
226 },
227 audioPlaying(v) {
228 this.playAudio(v);
211 } 229 }
212 }, 230 },
213 mounted() { 231 mounted() {
...@@ -217,6 +235,19 @@ export default { ...@@ -217,6 +235,19 @@ export default {
217 }, 1000); 235 }, 1000);
218 }, 236 },
219 methods: { 237 methods: {
238 playAudio(type) {
239 if (type) {
240 this.$el.querySelector('#audiobg').play();
241 } else {
242 this.$el.querySelector('#audiobg').pause();
243 }
244 },
245 loadAudio() {
246 this.$el.querySelector('#audiobg').load();
247 this.$nextTick(() => {
248 this.$el.querySelector('#audiobg').play();
249 });
250 },
220 getPhoto() { 251 getPhoto() {
221 database.getAll(DB_STORE_NAME).then(res => { 252 database.getAll(DB_STORE_NAME).then(res => {
222 if (res && res.length > 0) { 253 if (res && res.length > 0) {
...@@ -255,6 +286,9 @@ export default { ...@@ -255,6 +286,9 @@ export default {
255 toggle(form) { 286 toggle(form) {
256 const { speed, config } = this; 287 const { speed, config } = this;
257 if (this.running) { 288 if (this.running) {
289 this.audioSrc = bgaudio;
290 this.loadAudio();
291
258 window.TagCanvas.SetSpeed('rootcanvas', speed()); 292 window.TagCanvas.SetSpeed('rootcanvas', speed());
259 this.showRes = true; 293 this.showRes = true;
260 this.running = !this.running; 294 this.running = !this.running;
...@@ -266,6 +300,10 @@ export default { ...@@ -266,6 +300,10 @@ export default {
266 if (!form) { 300 if (!form) {
267 return; 301 return;
268 } 302 }
303
304 this.audioSrc = beginaudio;
305 this.loadAudio();
306
269 const { number } = config; 307 const { number } = config;
270 const { category, mode, qty, remain, allin } = form; 308 const { category, mode, qty, remain, allin } = form;
271 let num = 1; 309 let num = 1;
...@@ -329,6 +367,22 @@ export default { ...@@ -329,6 +367,22 @@ export default {
329 } 367 }
330 } 368 }
331 } 369 }
370 .audio {
371 position: absolute;
372 top: 100px;
373 right: 30px;
374 width: 40px;
375 height: 40px;
376 line-height: 40px;
377 border: 1px solid #fff;
378 border-radius: 50%;
379 padding: 0;
380 text-align: center;
381 .iconfont {
382 position: relative;
383 left: 1px;
384 }
385 }
332 .copy-right { 386 .copy-right {
333 position: absolute; 387 position: absolute;
334 right: 0; 388 right: 0;
......
No preview for this file type
No preview for this file type
...@@ -75,7 +75,7 @@ export default { ...@@ -75,7 +75,7 @@ export default {
75 const formData = new FormData(); 75 const formData = new FormData();
76 formData.append('uploadImg', fileList[0]); 76 formData.append('uploadImg', fileList[0]);
77 const reader = new FileReader(); 77 const reader = new FileReader();
78 const AllowImgFileSize = 1024 * 1024; 78 const AllowImgFileSize = 1024 * 150;
79 const file = fileList[0]; 79 const file = fileList[0];
80 if (file) { 80 if (file) {
81 this.filename = file.name; 81 this.filename = file.name;
...@@ -85,7 +85,7 @@ export default { ...@@ -85,7 +85,7 @@ export default {
85 AllowImgFileSize != 0 && 85 AllowImgFileSize != 0 &&
86 AllowImgFileSize < reader.result.length 86 AllowImgFileSize < reader.result.length
87 ) { 87 ) {
88 return this.$message.error('不允许上传大于1M的图片'); 88 return this.$message.error('不允许上传大于150KB的图片');
89 } else { 89 } else {
90 this.value = reader.result; 90 this.value = reader.result;
91 } 91 }
......
...@@ -9,15 +9,6 @@ const routes = [ ...@@ -9,15 +9,6 @@ const routes = [
9 path: '/', 9 path: '/',
10 name: 'home', 10 name: 'home',
11 component: Home 11 component: Home
12 },
13 {
14 path: '/about',
15 name: 'about',
16 // route level code-splitting
17 // this generates a separate chunk (about.[hash].js) for this route
18 // which is lazy-loaded when the route is visited.
19 component: () =>
20 import(/* webpackChunkName: "about" */ '../views/About.vue')
21 } 12 }
22 ]; 13 ];
23 14
......
1 <template>
2 <div class="about">
3 <h1>This is an about page</h1>
4 </div>
5 </template>
1 <template> 1 <template>
2 <div class="home"> 2 <div class="home"></div>
3 <img alt="Vue logo" src="../assets/logo.png" />
4 </div>
5 </template> 3 </template>
6 4
7 <script> 5 <script>
......