uniProject/pages/admin/Jiazheng/common/share.vue

<template>
 <button @click="showShareMenu" type="default" class="phone-white-btn bz-tel-btn fx-btn-box">分享</button>
 <!-- 答题卡 -->
 <uni-popup ref="downPopupRef" background-color="#fff" :animation="false" :is-mask-click="true" :mask-click="false">
 	<view class="share-haibao-box">
		<view class="phone-line-title">分享</view>
		<view class="share-list-box">
			<view class="share-item-box" @click="downHb">
				<view class="share-icon-box">
					<icon></icon>
				</view>
				<text>下载图片</text>
			</view>
		</view>
 	</view>
 </uni-popup>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '' 
    };
  },
  methods: {
	downHb(){
		console.log('下载图片');
	},
    showShareMenu() {
		this.$refs.downPopupRef.open('bottom')
    /*  uni.showActionSheet({
        itemList: ['下载图片'],
        success: (res) => {
          if (res.tapIndex === 0) {
            this.downloadImage();
          }
        }
      }); */
    },


    downloadImage() {
      // #ifdef H5
      this.downloadImageForH5();
      // #endif

      // #ifdef APP-PLUS
      this.downloadImageForApp();
      // #endif
    },


    downloadImageForH5() {

      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'
      });
    },

    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();
        }
      });
    },


    saveImageToAlbum(tempFilePath) {
      // #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>