sharePage.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356
  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. <view class="content" id="share-content">
  8. <view class="share-top">
  9. <image class="share-logo" src="@/static/share/img_02.png" mode="aspectFit"></image>
  10. <text class="share-title">注册会员</text>
  11. <text class="share-title">获取高额奖励</text>
  12. <view class="share-list">
  13. <view class="share-list-item"><text class="item-icon"></text><text
  14. class="item-text">安全的钱包技术</text></view>
  15. <view class="share-list-item"><text class="item-icon"></text><text
  16. class="item-text">交易流畅顶级风控</text></view>
  17. <view class="share-list-item"><text class="item-icon"></text><text
  18. class="item-text">丰富的加密资产业务</text></view>
  19. <view class="share-list-item"><text class="item-icon"></text><text
  20. class="item-text">分布在世界各地的客户</text></view>
  21. </view>
  22. </view>
  23. <view class="footer">
  24. <image class="share-code" src="@/static/share/img_03.png" mode="aspectFit"></image>
  25. <view class="share-btns">
  26. <view class="share-btn">
  27. 邀请您加入[币王]
  28. </view>
  29. <view class="share-btn-hint">
  30. <<<长按识别二维码 </view>
  31. </view>
  32. </view>
  33. </view>
  34. </view>
  35. <view class="share-footer">
  36. <view class="share-list">
  37. <view class="share-icons">
  38. <text class="share-icon iconfont" style="color: #00b1ff;">&#xe754;</text>
  39. <text class="share-text">复制链接</text>
  40. </view>
  41. <view class="share-icons">
  42. <text class="share-icon iconfont" style="color: #029a73;">&#xe654;</text>
  43. <text class="share-text">微信</text>
  44. </view>
  45. <view class="share-icons">
  46. <text class="share-icon iconfont" style="color: #02d9a2;">&#xe602;</text>
  47. <text class="share-text">朋友圈</text>
  48. </view>
  49. <view class="share-icons">
  50. <text class="share-icon iconfont" style="color: #1890ff;">&#xe887;</text>
  51. <text class="share-text">QQ</text>
  52. </view>
  53. <view class="share-icons" @click="my_js.onclicks">
  54. <text class="share-icon iconfont" style="color: #83a0e5">&#xe6b4;</text>
  55. <text class="share-text">保存图片</text>
  56. </view>
  57. </view>
  58. <view class="share-cancel" @click.stop="cancelShare">
  59. 取消
  60. </view>
  61. </view>
  62. </view>
  63. </uni-popup>
  64. </template>
  65. <script>
  66. import {
  67. mapGetters
  68. } from 'vuex'
  69. export default {
  70. name: "sharePage",
  71. props: {
  72. tabBar: {
  73. type: Boolean,
  74. default: true
  75. }
  76. },
  77. data() {
  78. return {
  79. };
  80. },
  81. computed: {
  82. ...mapGetters([
  83. 'statusBarHeight'
  84. ])
  85. },
  86. mounted() {
  87. // this.openShare()
  88. // this.$refs.popupRef.open()
  89. },
  90. methods: {
  91. openShare() {
  92. this.$nextTick(() => {
  93. this.showTabBar(false)
  94. this.$refs.popupRef.open()
  95. })
  96. },
  97. cancelShare() {
  98. this.$refs.popupRef.close()
  99. this.showTabBar()
  100. },
  101. showTabBar(type = true) {
  102. if (this.tabBar) {
  103. try {
  104. if (type) {
  105. uni.showTabBar();
  106. } else {
  107. uni.hideTabBar();
  108. }
  109. } catch {}
  110. }
  111. },
  112. saveBase64(imageStr) {
  113. uni.showLoading({
  114. title: "保存中"
  115. })
  116. try {
  117. let bitmap = new plus.nativeObj.Bitmap();
  118. bitmap.loadBase64Data(imageStr, function() {
  119. console.log('加载base64图片数据成功');
  120. //图片名称命名
  121. bitmap.save('_doc/' + new Date().getTime() + '.png', {
  122. quality: 100
  123. }, function(i) {
  124. // 将图片保存到相册
  125. uni.saveImageToPhotosAlbum({
  126. filePath: i.target,
  127. success: function() {
  128. bitmap.clear(); //销毁Bitmap图片
  129. // uni.$u.toast('保存图片成功')
  130. uni.showToast({
  131. title: '保存图片成功',
  132. duration: 2000
  133. });
  134. // that.noPhoto = true;
  135. }
  136. });
  137. }, function(e) {
  138. console.log('保存图片失败:' + JSON.stringify(e));
  139. });
  140. }, function(e) {
  141. console.log('截屏绘制图片失败:' + JSON.stringify(e));
  142. });
  143. } catch {
  144. uni.hideLoading()
  145. }
  146. },
  147. }
  148. }
  149. </script>
  150. <script module="my_js" lang="renderjs">
  151. import html2canvas from 'html2canvas';
  152. export default {
  153. data() {
  154. return {}
  155. },
  156. methods: {
  157. onclicks(event, ownerInstance) {
  158. html2canvas(document.getElementById('share-content'), {
  159. backgroundColor: '#fff',
  160. useCORS: true,
  161. taintTest: true,
  162. timeout: 2000
  163. }).then(canvas => {
  164. let imgurl = canvas.toDataURL('image/jpg');
  165. ownerInstance.callMethod('saveBase64', imgurl)
  166. })
  167. }
  168. }
  169. }
  170. </script>
  171. <style lang="scss" scoped>
  172. .share-box {
  173. width: 750rpx;
  174. height: 100vh;
  175. display: flex;
  176. flex-direction: column;
  177. .share-status-bar {
  178. flex-shrink: 0;
  179. width: 100%;
  180. background-color: rgba(255, 255, 255, 0.5);
  181. }
  182. .share-content {
  183. flex: 1;
  184. padding: 30rpx 40rpx;
  185. .content {
  186. flex-shrink: 0;
  187. width: 100%;
  188. height: 100%;
  189. background: url("@/static/share/img_01.png") no-repeat center center;
  190. background-size: 100% 100%;
  191. display: flex;
  192. flex-direction: column;
  193. justify-content: space-between;
  194. padding: 30rpx 30rpx 20rpx;
  195. .share-top {
  196. display: flex;
  197. flex-direction: column;
  198. align-items: flex-start;
  199. .share-logo {
  200. display: inline-block;
  201. width: 322rpx;
  202. height: 80rpx;
  203. // margin-bottom: 14rpx;
  204. }
  205. .share-title {
  206. font-size: 56rpx;
  207. font-family: PingFang SC, PingFang SC-Bold;
  208. font-weight: 700;
  209. color: #ffffff;
  210. line-height: 1.1;
  211. letter-spacing: 1.2px;
  212. }
  213. .share-list {
  214. width: 100%;
  215. padding-top: 20rpx;
  216. display: flex;
  217. flex-direction: column;
  218. .share-list-item {
  219. font-size: 20rpx;
  220. font-family: PingFang SC, PingFang SC-Regular;
  221. font-weight: 400;
  222. color: #ffffff;
  223. line-height: 1.5;
  224. // transform: scale(0.8);
  225. display: flex;
  226. align-items: center;
  227. justify-content: flex-start;
  228. .item-icon {
  229. display: inline-block;
  230. width: 14rpx;
  231. height: 14rpx;
  232. border-radius: 50%;
  233. background-color: #fff;
  234. }
  235. .item-text {
  236. padding-left: 3px;
  237. }
  238. }
  239. }
  240. }
  241. .footer {
  242. width: 100%;
  243. display: flex;
  244. align-items: center;
  245. padding: 0 20rpx;
  246. .share-code {
  247. width: 130rpx;
  248. height: 130rpx;
  249. }
  250. .share-btns {
  251. width: calc(100% - 130rpx);
  252. padding-left: 45rpx;
  253. color: #fff;
  254. .share-btn {
  255. width: 100%;
  256. height: 50rpx;
  257. background: linear-gradient(180deg, #faae3d, #f9d159);
  258. border-radius: 29rpx;
  259. text-align: center;
  260. line-height: 50rpx;
  261. font-size: 24rpx;
  262. font-family: PingFang SC, PingFang SC-Regular;
  263. font-weight: 400;
  264. }
  265. .share-btn-hint {
  266. padding-top: 22rpx;
  267. font-size: 24rpx;
  268. font-family: PingFang SC, PingFang SC-Regular;
  269. font-weight: 400;
  270. color: #ffffff;
  271. letter-spacing: 0.56rpx;
  272. }
  273. }
  274. }
  275. }
  276. }
  277. .share-footer {
  278. flex-shrink: 0;
  279. .share-list {
  280. border-radius: 40rpx 40rpx 0 0;
  281. width: 100%;
  282. padding: 30rpx 30rpx;
  283. display: flex;
  284. justify-content: space-between;
  285. align-items: stretch;
  286. background-color: #f6f7fc;
  287. }
  288. .share-icons {
  289. display: flex;
  290. flex-direction: column;
  291. justify-content: center;
  292. align-items: center;
  293. .share-icon {
  294. font-size: 100rpx;
  295. color: red;
  296. }
  297. .share-text {
  298. font-size: 24rpx;
  299. padding-top: 10rpx;
  300. }
  301. }
  302. .share-cancel {
  303. width: 100%;
  304. height: 100rpx;
  305. line-height: 100rpx;
  306. background-color: #fff;
  307. text-align: center;
  308. font-size: 34rpx;
  309. color: #c0c0c0;
  310. }
  311. }
  312. // <view class="share-content"></view>
  313. // <view class="share-share"></view>
  314. }
  315. </style>