share.vue 3.7 KB

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