favorites.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. <template>
  2. <view class="container">
  3. <image @longtap="bc_code" class="backImg" :src="backImg"></image>
  4. <view class="tki-qrcode"><canvas @longtap="bc_code" canvas-id="qrcode" /></view>
  5. </view>
  6. </template>
  7. <script>
  8. import { spreadBanner } from '@/api/user.js';
  9. export default {
  10. // components: { tkiQrcode },
  11. data() {
  12. return {
  13. url: '',
  14. backImg: '',
  15. userInfo: ''
  16. };
  17. },
  18. onLoad() {
  19. this.spread();
  20. uni.setNavigationBarTitle({
  21. title: this.$t("tab.b2"),
  22. });
  23. uni.setNavigationBarColor({
  24. frontColor: '#ffffff',
  25. backgroundColor: '#000000',
  26. });
  27. },
  28. computed: {
  29. cpSize() {
  30. if (this.unit == 'upx') {
  31. return uni.upx2px(this.size);
  32. } else {
  33. return this.size;
  34. }
  35. }
  36. },
  37. methods: {
  38. spread() {
  39. uni.showLoading({
  40. title: '加载中'
  41. });
  42. let obj = this;
  43. spreadBanner({
  44. //#ifdef H5
  45. type: 2,
  46. //#endif
  47. //#ifdef MP
  48. type:1,
  49. //#endif
  50. //#ifdef APP-PLUS
  51. type:2,
  52. //#endif
  53. }).then(({ data }) => {
  54. console.log(data);
  55. //#ifdef MP
  56. obj.backImg = data[0].poster;
  57. //#endif
  58. //#ifdef H5
  59. obj.backImg = data[0].wap_poster;
  60. //#endif
  61. //#ifdef APP-PLUS
  62. obj.backImg = data[0].wap_poster;
  63. //#endif
  64. uni.hideLoading();
  65. });
  66. },
  67. bc_code() {
  68. let that = this;
  69. console.log('保存二维码', this.backImg);
  70. uni.downloadFile({
  71. //获得二维码的临时地址
  72. url: this.backImg,
  73. success: res => {
  74. //console.log('获取url',res)
  75. if (res.statusCode == 200) {
  76. uni.saveImageToPhotosAlbum({
  77. filePath: res.tempFilePath, //传入临时地址
  78. success() {
  79. that.$api.msg('保存成功'); //封装的提示
  80. },
  81. fail() {
  82. that.$api.msg('保存失败');
  83. }
  84. });
  85. }
  86. }
  87. });
  88. }
  89. }
  90. };
  91. </script>
  92. <style lang="scss">
  93. page {
  94. width: 100%;
  95. min-height: 100%;
  96. .container {
  97. width: 100%;
  98. height: 100%;
  99. }
  100. }
  101. .backImg {
  102. position: absolute;
  103. width: 100%;
  104. height: 100%;
  105. }
  106. .portrait {
  107. width: 100%;
  108. text-align: center;
  109. padding-top: 80rpx;
  110. padding-bottom: 30rpx;
  111. image {
  112. width: 250rpx;
  113. height: 250rpx;
  114. }
  115. }
  116. .text {
  117. text-align: center;
  118. width: 100%;
  119. color: #ffffff;
  120. font-size: 55rpx;
  121. letter-spacing: 15rpx;
  122. }
  123. .uid-name {
  124. padding: 50rpx 0rpx;
  125. text-align: center;
  126. width: 100%;
  127. color: #ffffff;
  128. }
  129. .copy-btn {
  130. color: #ffffff;
  131. background-color: #4ba6ed;
  132. border-radius: 50rpx;
  133. width: 170rpx;
  134. line-height: 70rpx;
  135. margin: 0rpx auto;
  136. text-align: center;
  137. }
  138. .tki-qrcode {
  139. position: fixed;
  140. bottom: 10%;
  141. left: 30%;
  142. }
  143. canvas {
  144. width: 150px;
  145. height: 150px;
  146. margin: auto;
  147. }
  148. </style>