114 lines
2.4 KiB
Vue
114 lines
2.4 KiB
Vue
<template>
|
|
<view class="image-preview" @click="goBack">
|
|
<view></view>
|
|
<image class="image" :src="url" mode="aspectFill"></image>
|
|
<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.saveImageToPhotosAlbum({
|
|
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;
|
|
}
|
|
</style> |