240 lines
5.4 KiB
Markdown
240 lines
5.4 KiB
Markdown
# 前端代码修改说明
|
||
|
||
## 🎯 问题
|
||
|
||
点击音乐库音乐时显示"功能开发中..."，因为前端代码还没有修改。
|
||
|
||
## 🔧 解决方案
|
||
|
||
需要修改 `xuniYou/pages/index/index.vue` 文件。
|
||
|
||
## 📝 修改步骤
|
||
|
||
### 步骤 1: 打开文件
|
||
|
||
使用编辑器打开：`xuniYou/pages/index/index.vue`
|
||
|
||
### 步骤 2: 找到要修改的代码
|
||
|
||
搜索 `selectMusicFromLibrary`，找到约第 2387 行的这段代码：
|
||
|
||
```javascript
|
||
selectMusicFromLibrary(music) {
|
||
// 记录播放次数
|
||
uni.request({
|
||
url: baseURLPy + '/music/' + music.id + '/play',
|
||
method: 'POST',
|
||
header: {
|
||
'Authorization': 'Bearer ' + uni.getStorageSync("token")
|
||
}
|
||
});
|
||
|
||
// 使用音乐库的歌曲生成视频
|
||
if (this.singGenerating) {
|
||
uni.showToast({ title: '视频生成中，请稍候...', icon: 'none', duration: 2000 });
|
||
return;
|
||
}
|
||
|
||
// 这里需要调用唱歌API，传入音乐库的音乐URL
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: `确定让她唱《${music.title}》吗？`,
|
||
success: (modalRes) => {
|
||
if (modalRes.confirm) {
|
||
// TODO: 调用唱歌API，使用 music.music_url
|
||
uni.showToast({ title: '功能开发中...', icon: 'none' }); // ← 这里是问题
|
||
}
|
||
}
|
||
});
|
||
},
|
||
```
|
||
|
||
### 步骤 3: 删除旧代码
|
||
|
||
删除从 `// 这里需要调用唱歌API` 到 `});` 的整段代码（包括 showModal）。
|
||
|
||
### 步骤 4: 添加新代码
|
||
|
||
在原位置添加以下代码：
|
||
|
||
```javascript
|
||
// 检查音乐类型
|
||
if (music.upload_type === 'external') {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '外部平台音乐无法生成视频，请使用直链或上传的音乐',
|
||
showCancel: false
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 确认生成
|
||
uni.showModal({
|
||
title: '生成唱歌视频',
|
||
content: `确定让她唱《${music.title}》吗？`,
|
||
success: (modalRes) => {
|
||
if (modalRes.confirm) {
|
||
this.generateSingVideoFromLibrary(music);
|
||
}
|
||
}
|
||
});
|
||
```
|
||
|
||
### 步骤 5: 添加两个新方法
|
||
|
||
在 `selectMusicFromLibrary` 方法后面（在 `toggleMusicLike` 方法前面），添加两个新方法：
|
||
|
||
```javascript
|
||
// 生成唱歌视频（从音乐库）
|
||
generateSingVideoFromLibrary(music) {
|
||
const that = this;
|
||
|
||
// 显示加载
|
||
uni.showLoading({ title: '准备中...' });
|
||
|
||
// 第 1 步：转换为系统歌曲
|
||
uni.request({
|
||
url: baseURLPy + '/music/convert-to-song',
|
||
method: 'POST',
|
||
header: {
|
||
'Authorization': 'Bearer ' + uni.getStorageSync("token")
|
||
},
|
||
data: {
|
||
music_id: music.id
|
||
},
|
||
success: (res) => {
|
||
if (res.data && res.data.code === 1) {
|
||
const songId = res.data.data.song_id;
|
||
|
||
// 第 2 步：调用现有的唱歌生成 API
|
||
that.generateSingVideoWithSongId(songId, music.title);
|
||
} else {
|
||
uni.hideLoading();
|
||
uni.showModal({
|
||
title: '转换失败',
|
||
content: res.data.message || '未知错误',
|
||
showCancel: false
|
||
});
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
uni.hideLoading();
|
||
console.error('转换失败:', err);
|
||
uni.showModal({
|
||
title: '转换失败',
|
||
content: '网络错误，请重试',
|
||
showCancel: false
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
// 使用 song_id 生成唱歌视频
|
||
generateSingVideoWithSongId(songId, songTitle) {
|
||
const that = this;
|
||
|
||
uni.showLoading({ title: '生成中...' });
|
||
|
||
uni.request({
|
||
url: baseURLPy + '/sing/generate',
|
||
method: 'POST',
|
||
header: {
|
||
'Authorization': 'Bearer ' + uni.getStorageSync("token")
|
||
},
|
||
data: {
|
||
song_id: songId
|
||
},
|
||
success: (res) => {
|
||
uni.hideLoading();
|
||
|
||
if (res.data && res.data.code === 1) {
|
||
const data = res.data.data;
|
||
|
||
if (data.status === 'succeeded') {
|
||
// 立即成功（有缓存）
|
||
uni.showToast({
|
||
title: '生成成功',
|
||
icon: 'success'
|
||
});
|
||
|
||
// 刷新历史记录
|
||
that.getSingHistory();
|
||
|
||
// 切换到历史记录 tab
|
||
that.switchSingTab('history');
|
||
|
||
// 播放视频
|
||
if (data.video_url) {
|
||
that.openVideoPlayer(data.video_url);
|
||
}
|
||
} else {
|
||
// 生成中
|
||
that.singGenerating = true;
|
||
that.singGeneratingTaskId = data.generation_task_id;
|
||
|
||
uni.showToast({
|
||
title: '视频生成中...',
|
||
icon: 'loading',
|
||
duration: 2000
|
||
});
|
||
|
||
// 开始轮询
|
||
that.getSingGenerateTask(data.generation_task_id);
|
||
|
||
// 切换到历史记录 tab
|
||
that.switchSingTab('history');
|
||
}
|
||
} else {
|
||
uni.showModal({
|
||
title: '生成失败',
|
||
content: res.data.message || '未知错误',
|
||
showCancel: false
|
||
});
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
uni.hideLoading();
|
||
console.error('生成失败:', err);
|
||
uni.showModal({
|
||
title: '生成失败',
|
||
content: '网络错误，请重试',
|
||
showCancel: false
|
||
});
|
||
}
|
||
});
|
||
},
|
||
```
|
||
|
||
### 步骤 6: 保存文件
|
||
|
||
保存 `xuniYou/pages/index/index.vue` 文件。
|
||
|
||
### 步骤 7: 重新编译
|
||
|
||
重新编译前端项目。
|
||
|
||
## ✅ 完成后的效果
|
||
|
||
1. 点击音乐库音乐 → 弹出"生成唱歌视频"确认框
|
||
2. 确认后 → 显示"准备中..." → "生成中..."
|
||
3. 生成完成 → 自动切换到"历史记录" tab
|
||
4. 显示并播放生成的视频
|
||
|
||
## ⚠️ 注意事项
|
||
|
||
1. 确保后端服务已启动（运行 `启动后端服务.bat`）
|
||
2. 外部链接音乐会提示无法生成
|
||
3. 生成过程中会自动切换到历史记录 tab
|
||
|
||
## 🔍 如果还是不行
|
||
|
||
1. 检查后端服务是否运行：访问 http://localhost:30101/docs
|
||
2. 检查浏览器控制台是否有错误
|
||
3. 检查 API 地址是否正确（baseURLPy）
|
||
4. 检查 TOKEN 是否有效
|
||
|
||
---
|
||
|
||
**修改说明版本**: 1.0
|
||
**创建时间**: 2026-02-04
|