invite.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. <template>
  2. <view class="page">
  3. <view class="bode_main">
  4. <view class="uni-list my_padding">
  5. <view class="uni-list-cell">
  6. <view class="uni-media-list uni-list-cell-navigate">
  7. <view class="uni-media-list-logo photo">
  8. <image :src="myPhoto" :lazy-load="true"/>
  9. </view>
  10. <view class="uni-media-list-body" style="height: 50px;">
  11. <view class="uni-media-list-text-top" @click="copyInviteUrl()">邀请码:{{my_data.invite_code}}</view>
  12. <view class="uni-media-list-text-bottom uni-ellipsis" @click="copyInviteUrl()">点击复制邀请链接</view>
  13. </view>
  14. </view>
  15. </view>
  16. </view>
  17. <!--:icon="qrPhoto"-->
  18. <view class="qrimg">
  19. <tki-qrcode
  20. ref="qrcode"
  21. :val="invite_url"
  22. :onval="true"
  23. :size="500"
  24. unit="upx"
  25. background="#ffffff"
  26. foreground="#000000"
  27. pdground="#000000"
  28. :loadMake="true"
  29. :showLoading="true"
  30. loadingText="加载中..."
  31. @result="qrR" />
  32. <text class="text_font">扫一扫上面的二维码,邀请好友注册</text>
  33. <view>
  34. <text @click="goPath('./my_invite')">查看我的推广</text>
  35. <text @click="goPath('./wallet/capital_invite')" style="margin-left: 50px;">查看推广收益</text>
  36. </view>
  37. </view>
  38. </view>
  39. </view>
  40. </template>
  41. <script>
  42. import uniList from '../../components/uni-list/uni-list.vue';
  43. import uniListItem from '../../components/uni-list-item/uni-list-item.vue';
  44. import _page from '../../common/common';
  45. import _hook from '../../common/_hook';
  46. import _data from '../../common/_data';
  47. import tkiQrcode from "../../components/tki-qrcode/tki-qrcode";
  48. import uniCopy from '../../js_sdk/xb-copy/uni-copy.js'
  49. export default {
  50. components: {
  51. uniList,
  52. uniListItem,
  53. tkiQrcode,
  54. },
  55. data() {
  56. return {
  57. my_data: { id: 0 },
  58. img_path: '',
  59. invite_url: ''
  60. }
  61. },
  62. onShow(){
  63. _hook.routeTabBarHook();
  64. let _this = this;
  65. /** 监听新的个人数据 */
  66. uni.$on('data_user_info',function(data){
  67. _this.my_data = data;
  68. });
  69. _this.my_data = _data.data('user_info');
  70. _this.invite_url = '../pages/in/reg?invite_code='+_this.my_data.invite_code
  71. },
  72. onLoad() {
  73. },
  74. onUnload(){
  75. uni.$off('data_user_info');
  76. },
  77. computed: {
  78. copyInviteUrl(){
  79. let _this = this
  80. _page.uniCopy({
  81. content: _this.invite_url,
  82. success:function () {
  83. uni.showToast({'title':'复制成功',duration:2000})
  84. }
  85. })
  86. /* uniCopy({
  87. content: _this.invite_url,
  88. success:(res)=>{
  89. uni.showToast({
  90. title: res,
  91. icon: 'none'
  92. })
  93. },
  94. error:(e)=>{
  95. uni.showToast({
  96. title: e,
  97. icon: 'none',
  98. duration:3000,
  99. })
  100. }
  101. }) */
  102. },
  103. qrPhoto(){
  104. return _data.data('cache').local_photo;
  105. },
  106. myPhoto(){
  107. return _data.staticPhoto() + this.my_data.photo;
  108. },
  109. },
  110. methods: {
  111. qrR(ref){
  112. this.img_path = ref;
  113. },
  114. goPath(url){
  115. uni.navigateTo({
  116. url: url,
  117. });
  118. }
  119. },
  120. watch: {
  121. },
  122. }
  123. </script>
  124. <style scoped>
  125. .qrimg {
  126. text-align: center;
  127. background: #FFFFFF;
  128. padding-bottom: 40upx;
  129. }
  130. .bode_main {
  131. margin: 150upx 35upx 0 35upx;
  132. width: 680upx;
  133. height: 800upx;
  134. border-radius: 50upx;
  135. }
  136. .photo {
  137. width: 110upx;
  138. height: 110upx;
  139. margin-left: 30upx;
  140. margin-right: 30upx;
  141. }
  142. .my_padding {
  143. padding-bottom: 20px;
  144. }
  145. .my_padding:before {
  146. background-color:white;
  147. }
  148. .my_padding:before {
  149. background-color:white;
  150. }
  151. .my_padding:after {
  152. background-color:white;
  153. }
  154. .text_font {
  155. color: #8f8f94;
  156. }
  157. </style>