131 lines
2.8 KiB
Vue
131 lines
2.8 KiB
Vue
<template>
|
|
<view class="image-preview">
|
|
<view class="top">
|
|
<image
|
|
class="Fork"
|
|
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/crossCross.png"
|
|
mode="scaleToFill"
|
|
@click="goBack() "
|
|
/>
|
|
</view>
|
|
<video class="image" :src="url" mode="aspectFill"></video>
|
|
<view class="Localbtn" @click.stop>
|
|
<image
|
|
class="Local"
|
|
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Local.png"
|
|
mode="aspectFit"
|
|
@click="saveImage"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
url: "",
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
this.url = options.url;
|
|
},
|
|
methods: {
|
|
//返回上一页
|
|
goBack() {
|
|
wx.navigateBack({
|
|
delta: 1,
|
|
});
|
|
},
|
|
//保存图片
|
|
saveImage() {
|
|
uni.showLoading({
|
|
title: "正在下载视频...",
|
|
mask: true,
|
|
});
|
|
|
|
// 下载网络图片到临时文件
|
|
uni.downloadFile({
|
|
url: this.url,
|
|
success: (downloadRes) => {
|
|
if (downloadRes.statusCode === 200) {
|
|
// 保存到相册
|
|
uni.saveVideoToPhotosAlbum({
|
|
filePath: downloadRes.tempFilePath,
|
|
success: () => {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: "保存成功",
|
|
icon: "none",
|
|
duration: 2000,
|
|
});
|
|
},
|
|
fail: (saveErr) => {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: "保存失败: " + saveErr.errMsg,
|
|
icon: "none",
|
|
duration: 2000,
|
|
});
|
|
},
|
|
});
|
|
} else {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: "下载失败",
|
|
icon: "none",
|
|
duration: 2000,
|
|
});
|
|
}
|
|
},
|
|
fail: (downloadErr) => {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: "下载失败: " + downloadErr.errMsg,
|
|
icon: "none",
|
|
duration: 2000,
|
|
});
|
|
},
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.image-preview {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: black;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.image {
|
|
width: 100vw;
|
|
object-fit: contain;
|
|
}
|
|
.Localbtn {
|
|
width: 100vw;
|
|
height: 50rpx;
|
|
margin-bottom: 50rpx;
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
}
|
|
.Local {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
margin-right: 50rpx;
|
|
}
|
|
.Fork{
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
margin-left: 50rpx;
|
|
}
|
|
.top{
|
|
margin-top: 110rpx;
|
|
width: 100vw;
|
|
}
|
|
</style>
|