shareEx.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. <template>
  2. <view class="content">
  3. <image src="../../static/img/share-card.jpg" mode="" class="bg"></image>
  4. <view class="">
  5. </view>
  6. <view class="share-user-logo">
  7. <image :src="userlogo" mode=""></image>
  8. </view>
  9. <view class="good">
  10. <image :src="goodimg" mode=""></image>
  11. </view>
  12. <view class="good-tit">
  13. 子臣鸭汤兑换券
  14. </view>
  15. <button class="share-btn" open-type="share" v-if="couldshare == 1">
  16. 立即分享
  17. </button>
  18. <view class="share-btn" v-if="couldshare == 2" @click="getGift">
  19. {{jsspan}}
  20. </view>
  21. </view>
  22. </template>
  23. <script>
  24. import { getGift } from '@/api/order.js'
  25. export default {
  26. data() {
  27. return {
  28. userlogo: '',
  29. shareId: '',
  30. nickname: '',
  31. goodimg: '',
  32. couldshare: 0,
  33. jsspan: '立即领取'
  34. }
  35. },
  36. onLoad(opt) {
  37. this.userlogo = opt.logo
  38. this.shareId = opt.shareid
  39. this.nickname = opt.nickname
  40. this.goodimg = opt.goodimg
  41. this.couldshare = opt.type
  42. // #ifdef MP
  43. if(opt.type == 2 ) {
  44. if (opt.scene) {
  45. // 存储小程序邀请人
  46. uni.setStorage({
  47. key: 'spread_code',
  48. data: opt.scene
  49. });
  50. }
  51. }
  52. // #endif
  53. },
  54. // 分享
  55. onShareAppMessage(options) {
  56. let obj = this
  57. // 设置菜单中的转发按钮触发转发事件时的转发内容
  58. let pages = getCurrentPages(); //获取加载的页面
  59. let currentPage = pages[pages.length - 1]; //获取当前页面的对象
  60. let url = currentPage.route; //当前页面url
  61. let item = currentPage.options; //如果要获取url中所带的参数可以查看options
  62. // let name = this.goodsObjact.store_name || this.goodsObjact.title;
  63. let shareObj = {
  64. title: obj.nickname + '分享您一张子臣鸭汤兑换券', // 默认是小程序的名称(可以写slogan等)
  65. path: url + '?shareid=' + item.shareid + '&scene=' + item.scene + '&goodimg=' + item.goodimg + '&logo=' + item.logo + '&type=2' + '&nickname='+ item.nickname, // 默认是当前页面,必须是以‘/’开头的完整路径
  66. imageUrl: item.goodimg,
  67. success: function(res) {
  68. console.log(shareObj.path, 'path+++++++++++++++++++');
  69. // 转发成功之后的回调
  70. if (res.errMsg == 'shareAppMessage:ok') {
  71. }
  72. },
  73. fail: function() {
  74. // 转发失败之后的回调
  75. if (res.errMsg == 'shareAppMessage:fail cancel') {
  76. // 用户取消转发
  77. } else if (res.errMsg == 'shareAppMessage:fail') {
  78. // 转发失败,其中 detail message 为详细失败信息
  79. }
  80. }
  81. };
  82. return shareObj;
  83. },
  84. methods: {
  85. getGift() {
  86. let obj = this
  87. console.log('ddd')
  88. getGift({},this.shareId).then(res => {
  89. console.log(res)
  90. uni.showToast({
  91. title:'领取成功',
  92. duration:2000
  93. });
  94. obj.jsspan = '已领取'
  95. setTimeout(()=> {
  96. uni.switchTab({
  97. url: '/pages/index/index'
  98. })
  99. },1500)
  100. }).catch(err => {
  101. console.log(err)
  102. })
  103. }
  104. }
  105. }
  106. </script>
  107. <style lang="scss" scoped>
  108. page {
  109. background-color: #901b21;
  110. width: 100%;
  111. height: 100%
  112. }
  113. .content {
  114. position: relative;
  115. background-color: #901b21;
  116. min-height: 100%;
  117. .bg {
  118. // position: absolute;
  119. width: 750rpx;
  120. height: 1334rpx;
  121. }
  122. .share-btn {
  123. width: 492rpx;
  124. height: 86rpx;
  125. background-color: #ebd49e;
  126. border-radius: 43rpx;
  127. text-align: center;
  128. line-height: 86rpx;
  129. color: #901b21;
  130. font-weight: bold;
  131. font-size: 36rpx;
  132. position: absolute;
  133. top: 1159rpx;
  134. left: 130rpx;
  135. }
  136. .share-user-logo {
  137. position: absolute;
  138. top: 400rpx;
  139. left: 0;
  140. right: 0;
  141. margin: auto;
  142. width: 118rpx;
  143. height: 118rpx;
  144. border-radius: 50%;
  145. image {
  146. width: 118rpx;
  147. height: 118rpx;
  148. border-radius: 50%;
  149. }
  150. }
  151. .good {
  152. width: 290rpx;
  153. height: 290rpx;
  154. border-radius: 20rpx;
  155. position: absolute;
  156. top: 560rpx;
  157. left: 0;
  158. right: 0;
  159. margin: auto;
  160. image {
  161. width: 290rpx;
  162. height: 290rpx;
  163. border-radius: 20rpx;
  164. }
  165. }
  166. .good-tit {
  167. position: absolute;
  168. font-size: 32rpx;
  169. color: #901b21;
  170. text-align: center;
  171. width: 750rpx;
  172. top: 880rpx;
  173. }
  174. }
  175. </style>