|
|
@@ -0,0 +1,145 @@
|
|
|
+<template>
|
|
|
+ <button @click="showShareMenu">分享</button>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ imageUrl: 'https://example.com/path/to/your/image.jpg' // 后端提供的图片地址
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 显示分享菜单
|
|
|
+ showShareMenu() {
|
|
|
+ uni.showActionSheet({
|
|
|
+ itemList: ['下载图片'],
|
|
|
+ success: (res) => {
|
|
|
+ if (res.tapIndex === 0) {
|
|
|
+ this.downloadImage(); // 点击“下载图片”
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 下载图片
|
|
|
+ downloadImage() {
|
|
|
+ // #ifdef H5
|
|
|
+ this.downloadImageForH5();
|
|
|
+ // #endif
|
|
|
+
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ this.downloadImageForApp();
|
|
|
+ // #endif
|
|
|
+ },
|
|
|
+
|
|
|
+ // H5 环境下载图片
|
|
|
+ downloadImageForH5() {
|
|
|
+ // 创建一个隐藏的 <a> 标签
|
|
|
+ const link = document.createElement('a');
|
|
|
+ link.href = this.imageUrl;
|
|
|
+ link.download = 'image.jpg'; // 设置下载文件名
|
|
|
+ document.body.appendChild(link);
|
|
|
+ link.click(); // 触发下载
|
|
|
+ document.body.removeChild(link);
|
|
|
+
|
|
|
+ // 提示用户手动保存
|
|
|
+ uni.showToast({
|
|
|
+ title: '图片已下载，请手动保存到相册。',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // APP 环境下载图片
|
|
|
+ downloadImageForApp() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '下载中...',
|
|
|
+ mask: true
|
|
|
+ });
|
|
|
+
|
|
|
+ // 下载图片
|
|
|
+ uni.downloadFile({
|
|
|
+ url: this.imageUrl, // 图片地址
|
|
|
+ success: (res) => {
|
|
|
+ if (res.statusCode === 200) {
|
|
|
+ const tempFilePath = res.tempFilePath; // 下载后的临时文件路径
|
|
|
+ this.saveImageToAlbum(tempFilePath); // 保存到相册
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '下载失败',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.error('下载失败:', err);
|
|
|
+ uni.showToast({
|
|
|
+ title: '下载失败',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ complete: () => {
|
|
|
+ uni.hideLoading();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 保存图片到相册（APP 环境）
|
|
|
+ saveImageToAlbum(tempFilePath) {
|
|
|
+ // 检查权限（仅 Android 需要）
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ if (uni.getSystemInfoSync().platform === 'android') {
|
|
|
+ uni.authorize({
|
|
|
+ scope: 'scope.writePhotosAlbum',
|
|
|
+ success: () => {
|
|
|
+ this.saveImage(tempFilePath);
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ // 无权限，提示用户去设置
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '需要相册权限才能保存图片，是否去设置？',
|
|
|
+ success: (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ uni.openSetting(); // 打开设置页面
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.saveImage(tempFilePath);
|
|
|
+ }
|
|
|
+ // #endif
|
|
|
+ },
|
|
|
+ saveImage(tempFilePath) {
|
|
|
+ uni.saveImageToPhotosAlbum({
|
|
|
+ filePath: tempFilePath,
|
|
|
+ success: () => {
|
|
|
+ uni.showToast({
|
|
|
+ title: '保存成功',
|
|
|
+ icon: 'success'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.error('保存失败:', err);
|
|
|
+ uni.showToast({
|
|
|
+ title: '保存失败',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+button {
|
|
|
+ margin-top: 20px;
|
|
|
+ padding: 10px 20px;
|
|
|
+ background-color: #007AFF;
|
|
|
+ color: white;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+</style>
|
wangguoyu