qrcode.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <template>
  2. <view class="qrcode">
  3. <image :src="qrcode_url" mode="widthFix"></image>
  4. <view class="btns-wrap">
  5. <!-- #ifdef MP || APP-PLUS -->
  6. <button class="btn-red" type="default" @click="savePosterImg">保存图片</button>
  7. <!-- #endif -->
  8. <!-- #ifdef H5 -->
  9. <view class="f34 tc ww100" type="default">长按保存图片</view>
  10. <!-- #endif -->
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. export default {
  16. data() {
  17. return {
  18. qrcode_url: ''
  19. }
  20. },
  21. mounted() {
  22. /*获取数据*/
  23. this.getData();
  24. },
  25. methods: {
  26. /*获取数据*/
  27. getData() {
  28. let self = this;
  29. uni.showLoading({
  30. title: '加载中',
  31. });
  32. let source = self.getPlatform();
  33. self._get('plus.agent.qrcode/poster', {
  34. source: source
  35. }, function(data) {
  36. uni.hideLoading();
  37. self.qrcode_url = data.data.qrcode;
  38. });
  39. },
  40. /*保存图片*/
  41. savePosterImg() {
  42. let self = this;
  43. uni.showLoading({
  44. title: '加载中'
  45. });
  46. // 下载海报图片
  47. uni.downloadFile({
  48. url: self.qrcode_url,
  49. success(res) {
  50. uni.hideLoading();
  51. // 图片保存到本地
  52. uni.saveImageToPhotosAlbum({
  53. filePath: res.tempFilePath,
  54. success(data) {
  55. uni.showToast({
  56. title: '保存成功',
  57. icon: 'success',
  58. duration: 2000
  59. });
  60. // 关闭商品海报
  61. self.isCreatedImg = false;
  62. },
  63. fail(err) {
  64. console.log(err.errMsg);
  65. if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
  66. uni.showToast({
  67. title: '请允许访问相册后重试',
  68. icon: 'none',
  69. duration: 1000
  70. });
  71. setTimeout(() => {
  72. uni.openSetting();
  73. }, 1000);
  74. }
  75. },
  76. complete(res) {
  77. console.log('complete');
  78. }
  79. });
  80. }
  81. });
  82. }
  83. }
  84. }
  85. </script>
  86. <style>
  87. .qrcode{
  88. }
  89. .qrcode image {
  90. width: 100%;
  91. }
  92. .btns-wrap {
  93. position: fixed;
  94. height: 88rpx;
  95. right: 0;
  96. bottom: 0;
  97. left: 0;
  98. display: flex;
  99. z-index: 10;
  100. }
  101. .btns-wrap .btn-red{
  102. width: 100%;
  103. height: 88rpx;
  104. line-height: 88rpx;
  105. border-radius: 0;
  106. }
  107. </style>