sharePage.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
  1. <template>
  2. <uni-popup ref="popupRef">
  3. <view class="share-box">
  4. <view class="share-status-bar" :style="{'height': `${statusBarHeight}px`}"></view>
  5. <!-- statusBarHeight -->
  6. <view class="share-content">
  7. <shareInvite v-if="shareType === 1">
  8. <template #qrcode>
  9. <tki-qrcode ref="qrcodeRef" :size="100" :showLoading="false" :val="qrcodeVal" />
  10. <!-- <ay-qrcode ref="qrcodeRef" :width="100" :height="100" :url="qrcodeVal"></ay-qrcode> -->
  11. </template>
  12. </shareInvite>
  13. <shareOrder :shareVal="shareVal" v-if="shareType === 2">
  14. <template #qrcode>
  15. <tki-qrcode ref="qrcodeRef" :size="100" :showLoading="false" :val="qrcodeVal" />
  16. </template>
  17. </shareOrder>
  18. </view>
  19. <view class="share-footer">
  20. <view class="share-list">
  21. <view class="share-icons" @click.stop="copyLink()">
  22. <text class="share-icon iconfont" style="color: #00b1ff;">&#xe65b;</text>
  23. <text class="share-text">复制链接</text>
  24. </view>
  25. <view class="share-icons">
  26. <text class="share-icon iconfont" style="color: #029a73;">&#xe631;</text>
  27. <text class="share-text">微信</text>
  28. </view>
  29. <view class="share-icons">
  30. <text class="share-icon iconfont" style="color: #02d9a2;">&#xe623;</text>
  31. <text class="share-text">朋友圈</text>
  32. </view>
  33. <view class="share-icons">
  34. <text class="share-icon iconfont" style="color: #1890ff;">&#xe66a;</text>
  35. <text class="share-text">QQ</text>
  36. </view>
  37. <view class="share-icons" @click="my_js.onclicks">
  38. <text class="share-icon iconfont" style="color: #83a0e5">&#xe63a;</text>
  39. <text class="share-text">保存图片</text>
  40. </view>
  41. </view>
  42. <view class="share-cancel" @click.stop="cancelShare">
  43. 取消
  44. </view>
  45. </view>
  46. </view>
  47. </uni-popup>
  48. </template>
  49. <script>
  50. import {
  51. mapGetters
  52. } from 'vuex'
  53. import shareInvite from "./share_01.vue"
  54. import shareOrder from "./share_02.vue"
  55. export default {
  56. name: "sharePage",
  57. components: {
  58. shareInvite,
  59. shareOrder
  60. },
  61. props: {
  62. tabBar: {
  63. type: Boolean,
  64. default: true
  65. },
  66. shareType: {
  67. type: Number,
  68. default: 1 // 1:邀请分享 2:订单分享
  69. },
  70. },
  71. data() {
  72. return {
  73. shareCode: '',
  74. shareVal:{}
  75. };
  76. },
  77. computed: {
  78. ...mapGetters([
  79. 'statusBarHeight'
  80. ])
  81. },
  82. created() {
  83. this.shareCode = this.$getStorageSync('shareCode')
  84. this.qrcodeVal = `${this.$config.shareLink}${this.shareCode}`;
  85. },
  86. mounted() {
  87. // this.$refs.popupRef.open()
  88. // setTimeout(() => {
  89. // this.$refs.qrcodeRef._makeCode()
  90. // console.log('$config', this.$refs.qrcodeRef)
  91. // },3000)
  92. },
  93. methods: {
  94. copyLink(){
  95. uni.setClipboardData({
  96. data: this.qrcodeVal,
  97. success: res =>{
  98. uni.showToast({
  99. title: '复制成功',
  100. icon: 'none'
  101. })
  102. }
  103. });
  104. },
  105. drawCode() {
  106. if (this.$refs.qrcodeRef) {
  107. // this.$refs.qrcodeRef.crtQrCode()
  108. this.$refs.qrcodeRef._makeCode()
  109. } else {
  110. setTimeout(() => {
  111. this.drawCode()
  112. }, 50)
  113. }
  114. },
  115. openShare(val) {
  116. this.shareVal = val
  117. this.drawCode()
  118. this.$nextTick(() => {
  119. this.showTabBar(false)
  120. this.$refs.popupRef.open()
  121. })
  122. },
  123. cancelShare() {
  124. this.$refs.popupRef.close()
  125. this.showTabBar()
  126. },
  127. showTabBar(type = true) {
  128. if (this.tabBar) {
  129. try {
  130. if (type) {
  131. uni.showTabBar();
  132. } else {
  133. uni.hideTabBar();
  134. }
  135. } catch {}
  136. }
  137. },
  138. saveBase64(imageStr) {
  139. uni.showLoading({
  140. title: "保存中",
  141. })
  142. try {
  143. let bitmap = new plus.nativeObj.Bitmap();
  144. bitmap.loadBase64Data(imageStr, function() {
  145. console.log('加载base64图片数据成功');
  146. //图片名称命名
  147. bitmap.save('_doc/' + new Date().getTime() + '.png', {
  148. quality: 100
  149. }, function(i) {
  150. // 将图片保存到相册
  151. uni.saveImageToPhotosAlbum({
  152. filePath: i.target,
  153. success: function() {
  154. bitmap.clear(); //销毁Bitmap图片
  155. // uni.$u.toast('保存图片成功')
  156. uni.showToast({
  157. title: '保存图片成功',
  158. icon: 'none',
  159. duration: 2000
  160. });
  161. // that.noPhoto = true;
  162. }
  163. });
  164. }, function(e) {
  165. console.log('保存图片失败:' + JSON.stringify(e));
  166. });
  167. }, function(e) {
  168. console.log('截屏绘制图片失败:' + JSON.stringify(e));
  169. });
  170. } catch {
  171. uni.hideLoading()
  172. }
  173. },
  174. }
  175. }
  176. </script>
  177. <script module="my_js" lang="renderjs">
  178. import html2canvas from 'html2canvas';
  179. export default {
  180. data() {
  181. return {}
  182. },
  183. methods: {
  184. onclicks(event, ownerInstance) {
  185. console.log(99)
  186. html2canvas(document.getElementById('share-content'), {
  187. backgroundColor: '#fff',
  188. useCORS: true,
  189. taintTest: true,
  190. timeout: 2000
  191. }).then(canvas => {
  192. let imgurl = canvas.toDataURL('image/jpg');
  193. ownerInstance.callMethod('saveBase64', imgurl)
  194. })
  195. }
  196. }
  197. }
  198. </script>
  199. <style lang="scss" scoped>
  200. .share-box {
  201. width: 750rpx;
  202. height: 100vh;
  203. display: flex;
  204. flex-direction: column;
  205. .share-status-bar {
  206. flex-shrink: 0;
  207. width: 100%;
  208. background-color: rgba(255, 255, 255, 0.5);
  209. }
  210. .share-content {
  211. flex: 1;
  212. padding: 30rpx 40rpx;
  213. }
  214. .share-footer {
  215. flex-shrink: 0;
  216. .share-list {
  217. border-radius: 40rpx 40rpx 0 0;
  218. width: 100%;
  219. padding: 30rpx 30rpx;
  220. display: flex;
  221. justify-content: space-between;
  222. align-items: stretch;
  223. background-color: #f6f7fc;
  224. }
  225. .share-icons {
  226. display: flex;
  227. flex-direction: column;
  228. justify-content: center;
  229. align-items: center;
  230. .share-icon {
  231. font-size: 100rpx;
  232. color: red;
  233. }
  234. .share-text {
  235. font-size: 24rpx;
  236. padding-top: 10rpx;
  237. }
  238. }
  239. .share-cancel {
  240. width: 100%;
  241. height: 100rpx;
  242. line-height: 100rpx;
  243. background-color: #fff;
  244. text-align: center;
  245. font-size: 34rpx;
  246. color: #c0c0c0;
  247. }
  248. }
  249. // <view class="share-content"></view>
  250. // <view class="share-share"></view>
  251. }
  252. </style>