inviteImg.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. <template>
  2. <view class="box">
  3. <view class="maBoximg">
  4. <image :src="qrImg" mode="" class="QR"></image>
  5. </view>
  6. <image src="../../static/img/saveBtn.png" mode="" class="saveBtn" @click="saveEwm"></image>
  7. </view>
  8. </template>
  9. <script>
  10. export default {
  11. data() {
  12. return {
  13. qrImg: '',
  14. openSettingBtnHidden: true,//是否授权
  15. }
  16. },
  17. onLoad() {
  18. this.getQR();
  19. },
  20. methods: {
  21. getQR() {
  22. uni.showLoading({
  23. title: '加载中'
  24. })
  25. let uidStr = uni.getStorageSync("logodata").uid.replace(/\-/g, "");
  26. let url = 'worldKeepCar/worldDistribution/createMiniAppQrCode',
  27. params = {
  28. path: 'pages/homePage/homePage',
  29. scene: uidStr,
  30. }
  31. this.$httpBinary(url, params, 'GET').then(res => {
  32. uni.hideLoading();
  33. this.qrImg = 'data:image/png;base64,' + uni.arrayBufferToBase64(res)
  34. })
  35. },
  36. toSave() {
  37. uni.showModal({
  38. title: '图片保存',
  39. content: '确定要保存图片吗',
  40. success: e => {
  41. if (e['confirm']) {
  42. this.saveImgFile();
  43. }
  44. }
  45. });
  46. },
  47. //微信小程序保存到相册
  48. saveEwm:function(e){
  49. let that = this;
  50. //获取相册授权
  51. uni.getSetting({
  52. success(res) {
  53. if (!res.authSetting['scope.writePhotosAlbum']) {
  54. uni.authorize({
  55. scope: 'scope.writePhotosAlbum',
  56. success() {
  57. //这里是用户同意授权后的回调
  58. that.saveBase64Img(that.qrImg);
  59. },
  60. fail() {//这里是用户拒绝授权后的回调
  61. that.openSettingBtnHidden=false
  62. }
  63. })
  64. } else {//用户已经授权过了
  65. that.saveBase64Img(that.qrImg);
  66. }
  67. }
  68. })
  69. },
  70. saveBase64Img(base64) {
  71. //#ifdef APP-PLUS
  72. const bitmap = new plus.nativeObj.Bitmap('test');
  73. bitmap.loadBase64Data(
  74. base64,
  75. function() {
  76. const url = '_doc/' + new Date() + '.png'; // url建议用时间戳命名方式
  77. console.log('url:', url);
  78. bitmap.save(
  79. url,
  80. {
  81. overwrite: true ,// 是否覆盖
  82. quality: 'quality' , // 图片清晰度
  83. },
  84. i => {
  85. uni.saveImageToPhotosAlbum({
  86. filePath: url,
  87. success: function() {
  88. console.log('保存成功');
  89. bitmap.clear();
  90. }
  91. });
  92. },
  93. e => {
  94. console.log('保存失败', e);
  95. bitmap.clear();
  96. }
  97. );
  98. },
  99. e => {
  100. console.log('保存失败', e);
  101. bitmap.clear();
  102. }
  103. );
  104. //#endif
  105. }
  106. }
  107. }
  108. </script>
  109. <style>
  110. .box {
  111. min-height: 100vh;
  112. width: 100%;
  113. background-image: url('http://123.56.219.146:10086/keepCar/yqyl.png');
  114. background-size: 100% 100%;
  115. display: flex;
  116. flex-direction: column;
  117. justify-content: center;
  118. align-items: center;
  119. }
  120. .maBoximg {
  121. width: 377rpx;
  122. height: 377rpx;
  123. border-radius: 19rpx;
  124. background-color: #FFFFFF;
  125. padding: 20rpx;
  126. }
  127. .QR{
  128. width: 100%;
  129. height: 100%;
  130. }
  131. .saveBtn {
  132. width: 411rpx;
  133. height: 115rpx;
  134. margin-top: 60rpx;
  135. }
  136. </style>