A1300399510/PC-official
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-09-12 16:57:43 +08:00
parent cbcd7a501d
commit 5a957acf3f
5 changed files with 440 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
static/js/index.js
View File

@@ -24,11 +24,6 @@ const search = createApp({
},
];
const text = `中国AIGC产业联盟（AIGCxChina）
温州市社科联
温州市新闻媒体中心
第一届AI音乐春晚 正选节目`;
const audioPlayer = ref(null);
const progress = ref(0); // 播放进度百分比
@@ -68,6 +63,8 @@ const search = createApp({
studentList.value.forEach((item) => {
if (item.playurl == src) item.progress = val;
});
if (zeroOrderStudents.value?.playurl == src) zeroOrderStudents.value["progress"] = val;
};
const introduceRef = ref(null);
@@ -110,9 +107,11 @@ const search = createApp({
let awardAudioList = ref([]);
const init = () => {
ajaxget("https://pujianchaoyin.com/index/api").then((res) => {
ajax("https://pujianchaoyin.com/api/getHomeData").then((res) => {
if (res.code != 200) return;
const data = res.data;
console.log("data", data);
bannerList.value = data.banner;
awardMVList.value = data.awardMVList;
@@ -125,17 +124,14 @@ const search = createApp({
customList.value = data.customAudioList;
studentList.value = data.studentList || [];
console.log("customList", studentList.value[0]);
studentList.value.forEach((item, index) => {
item["title"] = index;
item["order"] = index;
});
zeroOrderStudents.value = studentList.value[0];
nextTick(() => {
bannerSwiper();
});
nextTick(() => bannerSwiper());
});
};
@@ -176,17 +172,24 @@ const search = createApp({
let art = null;
// 开启播放 MV
const openPreview = (url, poster = "") => {
previewState.value = true;
nextTick(() => {
art = new Artplayer({
container: ".artplayer-app",
url,
autoplay: true,
poster,
fullscreen: true,
const openPreview = (id, poster = "") => {
ajax("https://pujianchaoyin.com/api/getMvDetail", {
id,
}).then((res) => {
if (res.code != 200) return;
const data = res.data;
previewState.value = true;
nextTick(() => {
art = new Artplayer({
container: ".artplayer-app",
url: data.playurl,
autoplay: true,
poster,
fullscreen: true,
});
art.play();
});
art.play();
});
};
@@ -198,8 +201,11 @@ const search = createApp({
};
// 快进 和 后退 10秒
const fastForward = (type = "fast", src, area) => {
const fastForward = (type = "fast") => {
if (!audioPlayer.value) return;
const src = playData.value?.playurl || "";
const area = playData.value?.area || "";
if (audioPlayer.value.src != src) {
manageAudio(src, area);
return;
@@ -240,6 +246,11 @@ const search = createApp({
}
});
}
if (area == "student") {
zeroOrderStudents.value["state"] = true;
playData.value = { ...zeroOrderStudents.value, area };
}
});
});
};
@@ -253,13 +264,17 @@ const search = createApp({
const closeAll = () => {
audioPlayer.value.pause();
awardAudioList.value.forEach((item) => {
item["state"] = false;
});
customList.value.forEach((item) => {
item["state"] = false;
});
zeroOrderStudents.value["state"] = false;
console.log("playData", playData);
playData.value && (playData.value.state = false);
@@ -270,16 +285,7 @@ const search = createApp({
let studentIndex = ref(0);
let zeroOrderStudents = ref({});
let studentList = ref([
{
src: "https://app.gter.net/image/miniApp/mp3/1.mp3",
img: "./static/img/student-img.png",
},
{
src: "https://app.gter.net/image/miniApp/mp3/2.mp3",
img: "./static/img/student-img-2.png",
},
]);
let studentList = ref([]);
const cutStudent = (order) => {
// 找到目标元素和第一个元素
@@ -287,7 +293,11 @@ const search = createApp({
// 交换order值
if (target && first && target !== first) [target.order, first.order] = [first.order, target.order];
console.log("studentList.value", studentList.value);
zeroOrderStudents.value = target;
target.playurl ? manageAudio(target.playurl, "student") : getPlayUrl(0, "student");
};
// 响应式数据：音量值、是否静音
@@ -309,7 +319,7 @@ const search = createApp({
volume.value = Math.abs(~~volumePercent);
// 设置音频元素的音量（范围是0-1）
if (audioPlayer.value) audioPlayer.value.volume = volumePercent / 100;
if (audioPlayer.value) audioPlayer.value.volume = volume.value / 100;
};
// 处理音量进度条点击
@@ -322,17 +332,18 @@ const search = createApp({
// 因为是垂直进度条，所以用clientY
const clickPosition = rect.bottom - event.clientY;
const percentage = (clickPosition / rect.height) * 100;
console.log("percentage", percentage);
setVolumePercentage(percentage);
};
let volumeShow = ref(false);
// 处理音量进度条拖拽
let isDragging = false;
const startDrag = (event) => {
isDragging = true;
handleVolumeDrag(event);
// 添加事件监听器
document.addEventListener("mousemove", handleVolumeDrag);
document.addEventListener("mouseup", stopDrag);
@@ -362,40 +373,39 @@ const search = createApp({
document.removeEventListener("mouseup", stopDrag);
};
onMounted(() => {
// 绑定音量控制相关事件
const progressBar = document.querySelector(".sound-control .progress");
if (progressBar) {
progressBar.addEventListener("click", handleVolumeClick);
const handleVolumeShow = () => (volumeShow.value = true);
// 找到进度条内的滑块元素（bar）并绑定拖拽事件
const volumeBar = progressBar.querySelector(".bar");
if (volumeBar) volumeBar.addEventListener("mousedown", startDrag);
}
});
const handleVolumeHide = () => (volumeShow.value = false);
onUnmounted(() => {
// 清理音量控制相关事件
const progressBar = document.querySelector(".sound-control .progress");
if (progressBar) {
progressBar.removeEventListener("click", handleVolumeClick);
const volumeBar = progressBar.querySelector(".bar");
if (volumeBar) volumeBar.removeEventListener("mousedown", startDrag);
}
// 确保移除所有拖拽相关事件
document.removeEventListener("mousemove", handleVolumeDrag);
document.removeEventListener("mouseup", stopDrag);
document.removeEventListener("mousemove", handleBarDragBottomDrag);
document.removeEventListener("mouseup", stopBarDragBottom);
});
const ajax = (url, data = {}) => {
if (["localhost", "127.0.0.1"].includes(location.hostname)) data["authorization"] = "3338bf6a2e53dda872da3664a2560b25";
return new Promise(function (resolve, reject) {
axios
.post(url, data, {
emulateJSON: true,
withCredentials: true,
})
.then(function (res) {
var data = typeof res.data == "string" ? JSON.parse(res.data) : res.data;
resolve(data);
});
});
};
const ajaxget = (url, data) => {
if (!data) data = {};
if (["localhost", "127.0.0.1"].includes(location.hostname)) data["authorization"] = "3338bf6a2e53dda872da3664a2560b25";
url = url.indexOf("https://") == -1 ? projectBaseURL2 + url : url;
return new Promise((resolve, reject) => {
axios
.get(url, {
@@ -404,24 +414,106 @@ const search = createApp({
})
.then((res) => {
var data = typeof res.data == "string" ? JSON.parse(res.data) : res.data;
if (data.code == 401) {
openShowWindow();
reject();
}
if (data.code == 201) creationAlertBox("error", data.message || data.msg);
resolve(data);
})
.catch((error) => {
// console.log("resolve", resolve)
if (error.response?.status == 401) openShowWindow();
resolve("");
});
});
};
return { zeroOrderStudents, rePlay, playData, awardAudioList, changeInterval, awardMVList, bannerList, albumBoxRef, volume, handleVolumeClick, handleVolumeDrag, startDrag, stopDrag, toggleMute, isMuted, volume, cutStudent, studentList, studentIndex, scrollToPrevious, scrollToNext, changePointer, pointerIndex, visibleRef, studentRef, customRef, formatTime, currentTimeFormatted, durationFormatted, worksRef, introduceRef, customList, closeAll, manageAudio, progress, closePreview, openPreview, previewState, audioPlayer, text, trait, fastForward };
// 处理音量进度条拖拽
let isBarBottomDragging = false;
const startBarDragBottom = (event) => {
isBarBottomDragging = true;
handleBarDragBottomDrag(event);
// 添加事件监听器
document.addEventListener("mousemove", handleBarDragBottomDrag);
document.addEventListener("mouseup", stopBarDragBottom);
};
const stopBarDragBottom = () => {
isBarBottomDragging = false;
document.removeEventListener("mousemove", handleBarDragBottomDrag);
document.removeEventListener("mouseup", stopBarDragBottom);
};
const handleBarDragBottomClick = (event) => {
// 获取进度条元素
const progressBar = event.currentTarget;
const rect = progressBar.getBoundingClientRect();
const clickPosition = event.clientX - rect.left;
const percentage = clickPosition / rect.width;
// 限制百分比在0-100之间
const clampedPercentage = Math.max(0, Math.min(100, percentage));
updatePlay(clampedPercentage);
};
const handleBarDragBottomDrag = (event) => {
if (!isBarBottomDragging) return;
// 获取音量进度条元素
const progressBar = document.querySelector(".bottom-play .middle .progress-bar");
if (!progressBar) return;
const rect = progressBar.getBoundingClientRect();
// 计算拖拽位置相对于进度条的比例
let dragPosition = event.clientX - rect.left;
// 限制在进度条范围内
dragPosition = Math.max(0, Math.min(dragPosition, rect.width));
const percentage = dragPosition / rect.width;
updatePlay(percentage);
};
const updatePlay = (percentage) => {
if (!audioPlayer.value) return;
const duration = audioPlayer.value.duration || 0;
let newTime = duration * percentage;
newTime = Math.max(0, Math.min(duration, newTime));
audioPlayer.value.currentTime = newTime;
getProgress();
};
const getPlayUrl = (index, area) => {
console.log("index", index);
let id = null;
if (area == "student") {
const item = zeroOrderStudents.value;
console.log("item", item.id);
id = item.id;
}
ajax("https://pujianchaoyin.com/api/getMusicDetail", {
id,
}).then((res) => {
if (res.code != 200) return;
const data = res.data;
console.log("data", data);
zeroOrderStudents.value = { ...data, ...zeroOrderStudents.value };
manageAudio(data.playurl, area);
console.log(zeroOrderStudents.value, "zeroOrderStudents");
});
};
const cutSong = (type, order) => {
const listLength = studentList.value.length;
let newOrder = 0;
if (type === "up") {
// 上一首：order减1，如果小于0则设置为列表最后一个元素的order
newOrder = order - 1 < 0 ? listLength - 1 : order - 1;
} else if (type === "down") {
// 下一首：order加1，如果大于等于列表长度则设置为0
newOrder = order + 1 >= listLength ? 0 : order + 1;
}
cutStudent(newOrder);
};
return { cutSong, getPlayUrl, handleBarDragBottomClick, startBarDragBottom, volumeShow, handleVolumeHide, handleVolumeShow, zeroOrderStudents, rePlay, playData, awardAudioList, changeInterval, awardMVList, bannerList, albumBoxRef, volume, handleVolumeClick, handleVolumeDrag, startDrag, stopDrag, toggleMute, isMuted, volume, cutStudent, studentList, studentIndex, scrollToPrevious, scrollToNext, changePointer, pointerIndex, visibleRef, studentRef, customRef, formatTime, currentTimeFormatted, durationFormatted, worksRef, introduceRef, customList, closeAll, manageAudio, progress, closePreview, openPreview, previewState, audioPlayer, trait, fastForward };
},
}).mount("#appIndex");