share.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. <template>
  2. <button @click="showShareMenu" type="default" class="phone-white-btn bz-tel-btn">分享</button>
  3. </template>
  4. <script>
  5. export default {
  6. data() {
  7. return {
  8. imageUrl: ''
  9. };
  10. },
  11. methods: {
  12. showShareMenu() {
  13. uni.showActionSheet({
  14. itemList: ['下载图片'],
  15. success: (res) => {
  16. if (res.tapIndex === 0) {
  17. this.downloadImage();
  18. }
  19. }
  20. });
  21. },
  22. downloadImage() {
  23. // #ifdef H5
  24. this.downloadImageForH5();
  25. // #endif
  26. // #ifdef APP-PLUS
  27. this.downloadImageForApp();
  28. // #endif
  29. },
  30. downloadImageForH5() {
  31. const link = document.createElement('a');
  32. link.href = this.imageUrl;
  33. link.download = 'image.jpg';
  34. document.body.appendChild(link);
  35. link.click();
  36. document.body.removeChild(link);
  37. uni.showToast({
  38. title: '图片已下载,请手动保存到相册。',
  39. icon: 'none'
  40. });
  41. },
  42. downloadImageForApp() {
  43. uni.showLoading({
  44. title: '下载中...',
  45. mask: true
  46. });
  47. uni.downloadFile({
  48. url: this.imageUrl,
  49. success: (res) => {
  50. if (res.statusCode === 200) {
  51. const tempFilePath = res.tempFilePath; // 下载后的临时文件路径
  52. this.saveImageToAlbum(tempFilePath); // 保存到相册
  53. } else {
  54. uni.showToast({
  55. title: '下载失败',
  56. icon: 'none'
  57. });
  58. }
  59. },
  60. fail: (err) => {
  61. console.error('下载失败:', err);
  62. uni.showToast({
  63. title: '下载失败',
  64. icon: 'none'
  65. });
  66. },
  67. complete: () => {
  68. uni.hideLoading();
  69. }
  70. });
  71. },
  72. saveImageToAlbum(tempFilePath) {
  73. // #ifdef APP-PLUS
  74. if (uni.getSystemInfoSync().platform === 'android') {
  75. uni.authorize({
  76. scope: 'scope.writePhotosAlbum',
  77. success: () => {
  78. this.saveImage(tempFilePath);
  79. },
  80. fail: () => {
  81. uni.showModal({
  82. title: '提示',
  83. content: '需要相册权限才能保存图片,是否去设置?',
  84. success: (res) => {
  85. if (res.confirm) {
  86. uni.openSetting(); // 打开设置页面
  87. }
  88. }
  89. });
  90. }
  91. });
  92. } else {
  93. this.saveImage(tempFilePath);
  94. }
  95. // #endif
  96. },
  97. saveImage(tempFilePath) {
  98. uni.saveImageToPhotosAlbum({
  99. filePath: tempFilePath,
  100. success: () => {
  101. uni.showToast({
  102. title: '保存成功',
  103. icon: 'success'
  104. });
  105. },
  106. fail: (err) => {
  107. console.error('保存失败:', err);
  108. uni.showToast({
  109. title: '保存失败',
  110. icon: 'none'
  111. });
  112. }
  113. });
  114. }
  115. }
  116. };
  117. </script>
  118. <style>
  119. button {
  120. margin-top: 20px;
  121. padding: 10px 20px;
  122. background-color: #007AFF;
  123. color: white;
  124. border-radius: 5px;
  125. }
  126. </style>