feat(videoView): 添加交付视频下载功能

- 在视频查看页面添加下载按钮
- 实现交付视频下载功能,包括微信浏览器的特殊处理
This commit is contained in:
fhysy 2025-03-11 17:50:16 +08:00
parent 0d06fe8fb6
commit 040ee7a5d8
1 changed files with 65 additions and 0 deletions

View File

@ -25,6 +25,15 @@
@click="showConfirmModal" @click="showConfirmModal"
>确认视频</u-button> >确认视频</u-button>
</view> </view>
<!-- 底部按钮区域 -->
<view class="btn-box one" v-else-if="routeParams.name === '查看交付视频'">
<u-button
class="confirm-btn"
type="primary"
@click="downloadVideo"
>下载交付视频</u-button>
</view>
<!-- 调整建议弹窗 --> <!-- 调整建议弹窗 -->
<u-popup <u-popup
@ -116,6 +125,62 @@ export default {
} }
}, },
downloadVideo(){
if(!this.videoUrl){
this.$u.toast('交付视频为空')
}else{
if(this.isWechat()){
uni.showModal({
title: '下载提示',
content: '微信浏览器不允许下载,请复制视频链接在外部下载,或者右上角打开外部浏览器下载?',
confirmText:'复制视频链接',
success:(res)=>{
if (res.confirm) {
// applyUpdate
uni.setClipboardData({
data: this.videoUrl,
success: function () {
console.log('success');
}
});
}
}
});
}else{
this.downloadFile(this.videoUrl, 'video.mp4');
}
}
},
isWechat(){
return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
},
async downloadFile(videoUrl) {
try {
// 1. Blob
const response = await fetch(videoUrl);
const blob = await response.blob();
// 2. Blob URL
const blobUrl = window.URL.createObjectURL(blob);
// 3. <a>
const link = document.createElement('a');
link.href = blobUrl;
link.download = 'video.mp4'; //
document.body.appendChild(link);
link.click();
// 4. Blob URL
window.URL.revokeObjectURL(blobUrl);
document.body.removeChild(link);
} catch (error) {
console.error('下载失败:', error);
uni.showToast({
title: '下载失败',
icon: 'none'
});
}
},
// //
showAdjustModal() { showAdjustModal() {
this.adjustForm.state = 0; this.adjustForm.state = 0;