فهرست منبع

feat: 添加音频和视频下载功能

- 在章节详情页添加下载区域
- 支持音频和视频下载(H5和App端)
- H5端:创建下载链接直接下载
- App端:下载后保存到文件/相册
- 优化UI样式,下载按钮使用渐变色
- 保留发布功能但标记为次要功能
MyFramework User 4 ماه پیش
والد
کامیت
d07a157194
1فایلهای تغییر یافته به همراه160 افزوده شده و 0 حذف شده
  1. 160 0
      my-uniapp-vue3/src/pages/book-generator/chapter-detail.vue

+ 160 - 0
my-uniapp-vue3/src/pages/book-generator/chapter-detail.vue

@@ -111,6 +111,29 @@
           </button>
         </view>
 
+        <!-- 下载区域 -->
+        <view v-if="chapterAudioUrl || chapterVideoUrl" class="download-section">
+          <view class="download-header">
+            <text class="download-title">💾 下载</text>
+          </view>
+          <view class="download-buttons">
+            <button 
+              v-if="chapterAudioUrl"
+              class="download-btn audio-download"
+              @click="downloadAudio"
+            >
+              🎵 下载音频
+            </button>
+            <button 
+              v-if="chapterVideoUrl"
+              class="download-btn video-download"
+              @click="downloadVideo"
+            >
+              🎬 下载视频
+            </button>
+          </view>
+        </view>
+
         <!-- 发布到平台按钮 -->
         <view v-if="chapterAudioUrl || chapterVideoUrl" class="publish-section">
           <view class="publish-header">
@@ -370,6 +393,92 @@ function goToPublish() {
   }
 }
 
+// 下载音频
+function downloadAudio() {
+  if (!chapterAudioUrl.value) return;
+  
+  const url = chapterAudioUrl.value;
+  const filename = `${chapterTitle.value || '音频'}.mp3`;
+  
+  // #ifdef H5
+  // H5 平台:创建下载链接
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  a.target = '_blank';
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  uni.showToast({ title: '开始下载', icon: 'success' });
+  // #endif
+  
+  // #ifndef H5
+  // App 平台:下载并保存
+  uni.downloadFile({
+    url: url,
+    success: (res) => {
+      if (res.statusCode === 200) {
+        uni.saveFile({
+          tempFilePath: res.tempFilePath,
+          success: (saveRes) => {
+            uni.showToast({ title: '保存成功', icon: 'success' });
+          },
+          fail: () => {
+            uni.showToast({ title: '保存失败', icon: 'none' });
+          }
+        });
+      }
+    },
+    fail: () => {
+      uni.showToast({ title: '下载失败', icon: 'none' });
+    }
+  });
+  // #endif
+}
+
+// 下载视频
+function downloadVideo() {
+  if (!chapterVideoUrl.value) return;
+  
+  const url = chapterVideoUrl.value;
+  const filename = `${chapterTitle.value || '视频'}.mp4`;
+  
+  // #ifdef H5
+  // H5 平台:创建下载链接
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  a.target = '_blank';
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  uni.showToast({ title: '开始下载', icon: 'success' });
+  // #endif
+  
+  // #ifndef H5
+  // App 平台:下载并保存到相册
+  uni.downloadFile({
+    url: url,
+    success: (res) => {
+      if (res.statusCode === 200) {
+        uni.saveVideoToPhotosAlbum({
+          filePath: res.tempFilePath,
+          success: () => {
+            uni.showToast({ title: '已保存到相册', icon: 'success' });
+          },
+          fail: () => {
+            uni.showToast({ title: '保存失败', icon: 'none' });
+          }
+        });
+      }
+    },
+    fail: () => {
+      uni.showToast({ title: '下载失败', icon: 'none' });
+    }
+  });
+  // #endif
+}
+
 // 切换公开状态
 async function togglePublic() {
   if (!chapterId.value || togglingPublic.value) return;
@@ -891,6 +1000,57 @@ onShow(() => {
   color: #ffffff;
 }
 
+/* 发布区域 */
+/* 下载区域 */
+.download-section {
+  margin-top: 24rpx;
+  padding: 24rpx;
+  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(5, 150, 105, 0.05) 100%);
+  border: 1px solid rgba(16, 185, 129, 0.2);
+  border-radius: 16rpx;
+}
+
+.download-header {
+  margin-bottom: 16rpx;
+}
+
+.download-title {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #333;
+}
+
+.download-buttons {
+  display: flex;
+  gap: 16rpx;
+}
+
+.download-btn {
+  flex: 1;
+  height: 72rpx;
+  line-height: 72rpx;
+  font-size: 26rpx;
+  font-weight: 500;
+  border-radius: 12rpx;
+  border: none;
+  transition: all 0.3s;
+}
+
+.audio-download {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+.video-download {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  color: white;
+}
+
+.download-btn:active {
+  transform: scale(0.98);
+  opacity: 0.9;
+}
+
 /* 发布区域 */
 .publish-section {
   margin-top: 24rpx;