Skip to content

G
goodluck
Commit d2dc5e3a by zhangyongfeng
Options

audio

parent 6c92b0e3
Showing with 65 additions and 22 deletions
.gitignore
...@@ -19,4 +19,5 @@ yarn-error.log* ...@@ -19,4 +19,5 @@ yarn-error.log*
*.njsproj *.njsproj
*.sln *.sln
*.sw? *.sw?
config.js config.js
\ No newline at end of file test.js
\ No newline at end of file
README.md
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
- 开始抽奖，需要选取抽取的奖项、本次抽取的人数和是否开启全员抽奖功能。 - 开始抽奖，需要选取抽取的奖项、本次抽取的人数和是否开启全员抽奖功能。
- 本次抽取的人数可以选择 1 人、5 人、一次性抽取完或者自定义抽取数量，不能大于奖项剩余的数量 - 本次抽取的人数可以选择 1 人、5 人、一次性抽取完或者自定义抽取数量，不能大于奖项剩余的数量
- 点击停止抽取完成
### 重置 ### 重置
......
public/index.html
...@@ -5,6 +5,9 @@ ...@@ -5,6 +5,9 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link
rel="stylesheet"
href="https://at.alicdn.com/t/font_1594571_5oi8u1hs5fy.css"/>
<title>luckydraw</title> <title>luckydraw</title>
</head> </head>
<body> <body>
......
src/App.vue
...@@ -68,6 +68,13 @@ ...@@ -68,6 +68,13 @@
</div> </div>
</transition> </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" /> <LotteryConfig :visible.sync="showConfig" @resetconfig="reloadTagCanvas" />
<Tool <Tool
@toggle="toggle" @toggle="toggle"
...@@ -81,12 +88,18 @@ ...@@ -81,12 +88,18 @@
<span class="copy-right"> <span class="copy-right">
Copyright©zhangyongfeng5350@gmail.com Copyright©zhangyongfeng5350@gmail.com
</span> </span>
<audio id="audiobg" :src="audioSrc" preload="auto" controls autoplay loop>
你的浏览器不支持audio标签
</audio>
</div> </div>
</template> </template>
<script> <script>
import LotteryConfig from '@/components/LotteryConfig'; import LotteryConfig from '@/components/LotteryConfig';
import Publicity from '@/components/Publicity'; import Publicity from '@/components/Publicity';
import Tool from '@/components/Tool'; import Tool from '@/components/Tool';
import bgaudio from '@/assets/bg.mp3';
import beginaudio from '@/assets/begin.mp3';
import { import {
getData, getData,
configField, configField,
...@@ -197,7 +210,9 @@ export default { ...@@ -197,7 +210,9 @@ export default {
showConfig: false, showConfig: false,
showResult: false, showResult: false,
resArr: [], resArr: [],
category: '' category: '',
audioPlaying: false,
audioSrc: bgaudio
}; };
}, },
watch: { watch: {
...@@ -208,6 +223,9 @@ export default { ...@@ -208,6 +223,9 @@ export default {
this.reloadTagCanvas(); this.reloadTagCanvas();
}); });
} }
},
audioPlaying(v) {
this.playAudio(v);
} }
}, },
mounted() { mounted() {
...@@ -217,6 +235,19 @@ export default { ...@@ -217,6 +235,19 @@ export default {
}, 1000); }, 1000);
}, },
methods: { 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() { getPhoto() {
database.getAll(DB_STORE_NAME).then(res => { database.getAll(DB_STORE_NAME).then(res => {
if (res && res.length > 0) { if (res && res.length > 0) {
...@@ -255,6 +286,9 @@ export default { ...@@ -255,6 +286,9 @@ export default {
toggle(form) { toggle(form) {
const { speed, config } = this; const { speed, config } = this;
if (this.running) { if (this.running) {
this.audioSrc = bgaudio;
this.loadAudio();
window.TagCanvas.SetSpeed('rootcanvas', speed()); window.TagCanvas.SetSpeed('rootcanvas', speed());
this.showRes = true; this.showRes = true;
this.running = !this.running; this.running = !this.running;
...@@ -266,6 +300,10 @@ export default { ...@@ -266,6 +300,10 @@ export default {
if (!form) { if (!form) {
return; return;
} }
this.audioSrc = beginaudio;
this.loadAudio();
const { number } = config; const { number } = config;
const { category, mode, qty, remain, allin } = form; const { category, mode, qty, remain, allin } = form;
let num = 1; let num = 1;
...@@ -329,6 +367,22 @@ export default { ...@@ -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 { .copy-right {
position: absolute; position: absolute;
right: 0; right: 0;
......
src/components/Importphoto.vue
...@@ -75,7 +75,7 @@ export default { ...@@ -75,7 +75,7 @@ export default {
const formData = new FormData(); const formData = new FormData();
formData.append('uploadImg', fileList[0]); formData.append('uploadImg', fileList[0]);
const reader = new FileReader(); const reader = new FileReader();
const AllowImgFileSize = 1024 * 1024; const AllowImgFileSize = 1024 * 150;
const file = fileList[0]; const file = fileList[0];
if (file) { if (file) {
this.filename = file.name; this.filename = file.name;
...@@ -85,7 +85,7 @@ export default { ...@@ -85,7 +85,7 @@ export default {
AllowImgFileSize != 0 && AllowImgFileSize != 0 &&
AllowImgFileSize < reader.result.length AllowImgFileSize < reader.result.length
) { ) {
return this.$message.error('不允许上传大于1M的图片'); return this.$message.error('不允许上传大于150KB的图片');
} else { } else {
this.value = reader.result; this.value = reader.result;
} }
......
src/router/index.js
...@@ -9,15 +9,6 @@ const routes = [ ...@@ -9,15 +9,6 @@ const routes = [
path: '/', path: '/',
name: 'home', name: 'home',
component: 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')
} }
]; ];
......
src/views/About.vue deleted 100644 → 0
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
src/views/Home.vue
<template> <template>
<div class="home"> <div class="home"></div>
<img alt="Vue logo" src="../assets/logo.png" />
</div>
</template> </template>
<script> <script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment