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 64 additions and 21 deletions
...@@ -19,4 +19,5 @@ yarn-error.log* ...@@ -19,4 +19,5 @@ yarn-error.log*
19 *.njsproj 19 *.njsproj
20 *.sln 20 *.sln
21 *.sw? 21 *.sw?
22 config.js
...\ No newline at end of file ...\ No newline at end of file
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>
......