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*
*.sln
*.sw?
config.js
test.js
\ No newline at end of file
......
......@@ -17,6 +17,7 @@
- 开始抽奖，需要选取抽取的奖项、本次抽取的人数和是否开启全员抽奖功能。
- 本次抽取的人数可以选择 1 人、5 人、一次性抽取完或者自定义抽取数量，不能大于奖项剩余的数量
- 点击停止抽取完成
### 重置
......
......@@ -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>
......
......@@ -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;
......
No preview for this file type
No preview for this file type
......@@ -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;
}
......
......@@ -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')
}
];
......
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" />
</div>
<div class="home"></div>
</template>
<script>
......