作者 xiaoqiu

完成背景音乐

不能预览此文件类型
不能预览此文件类型
... ... @@ -16,3 +16,11 @@ export const getUseBg = () => {
method: 'get',
})
}
// 获取应用背景
export const getUseBgMusic = () => {
return request({
url: '/system/bgMusic/getUsedBgMusic',
method: 'get',
})
}
\ No newline at end of file
... ...
不能预览此文件类型
... ... @@ -16,6 +16,7 @@
<!-- 每层的图片 -->
<img
v-for="(childen, number) in item"
:key="number + index"
:src="childen"
alt="图片"
@click.stop="handleClick($event, childen)"
... ... @@ -46,9 +47,12 @@
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getSignatureList, getUseBg } from '@/api/signature'
import { getSignatureList, getUseBg, getUseBgMusic } from '@/api/signature'
let imgList = import.meta.glob('../assets/img/*.*', { eager: true })
let imgArr = Object.values(imgList).map((item) => item.default)
// 导入音乐文件
let musicList = import.meta.glob('../assets/music/*.*', { eager: true })
let musicArr = Object.values(musicList).map((item) => item.default)
let spanBoxList = ref([]) // 图片列表
let aEls = ref([]) // 图片元素
let radius = ref(760)
... ... @@ -201,6 +205,11 @@ onMounted(async () => {
if (!localStorage.getItem('crgx_server')) {
return openServer(true)
}
document.addEventListener('keydown', (e) => {
if (e.key == 'j') {
openServer()
}
})
getImgList()
const bgRes = await getUseBg() // 获取背景图片
bgImgUrl.value = server_base + bgRes.data.path
... ... @@ -214,21 +223,40 @@ onMounted(async () => {
//鼠标滚动事件
document.addEventListener('mousewheel', handleMouseWheel)
// 监听键盘按下事件
document.addEventListener('keydown', (e) => {
if (e.key == 'j') {
openServer()
}
})
//暂停开始旋转
function playSpin(yes) {
spinDom1.style.animationPlayState = yes ? 'running' : 'paused'
}
// 音频播放逻辑
if (musicArr.length > 0) {
let currentIndex = 0
const audio = new Audio()
async function playNext() {
if (currentIndex >= musicArr.length) {
currentIndex = 0
}
audio.src = musicArr[currentIndex]
const resMusic = await getUseBgMusic()
if (resMusic.code == 200) {
audio.src = server_base + resMusic.data.path
}
audio.play().catch((err) => {
console.error('播放失败:', err)
})
currentIndex++
}
audio.addEventListener('ended', playNext)
playNext()
}
//鼠标移动事件
document.onpointerdown = function (e) {
//清除惯性定时器
clearInterval(dragBoxDom.value.timer)
e = e || ewindow.event
e = e || window.event
//鼠标点击位置
;(startX.value = e.clientX), (startY.value = e.clientY)
this.onpointermove = function (e) {
... ...