index.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. <template>
  2. <view class="auth">
  3. <image src="../../static/rabotHead.png" mode=""></image>
  4. <text class="margin-top-3 auth-title">欢迎使用阿拉灯神丁</text>
  5. <text class="margin-top-3 auth-content">此页面是微信授权页面,授权之后你可以获取更优质的服务,您的隐私将会受到保护</text>
  6. <view class="margin-top-3">
  7. <button type='default' class="refuse" @click="refuseBtn">暂不授权</button>
  8. <button type='primary' class="allow" open-type="getUserInfo" @getuserinfo="getUserInfo">允许授权</button>
  9. </view>
  10. </view>
  11. </template>
  12. <script>
  13. var md5 = require("../../common/md5.js");
  14. export default {
  15. data(){
  16. return {
  17. iv:'',
  18. encryptedData:''
  19. }
  20. },
  21. onLoad() {
  22. },
  23. methods:{
  24. getUserInfo(e) {
  25. console.log(e);
  26. if (e.detail.errMsg == "getUserInfo:ok") {
  27. this.iv = e.detail.iv;
  28. this.encryptedData = e.detail.encryptedData;
  29. this.loginUserInfo()
  30. } else {
  31. console.log("用户信息授权失败");
  32. getApp().globalData.isAuth = false;
  33. }
  34. },
  35. refuseBtn(){
  36. uni.navigateBack({
  37. });
  38. },
  39. loginUserInfo(){
  40. let that = this;
  41. console.log('inviteId:',getApp().globalData.inviteId)
  42. console.log('session_key:',getApp().globalData.session_key)
  43. console.log('userId:',getApp().globalData.user_id)
  44. uni.request({
  45. url:getApp().globalData.shareUrl, //需要设置为全局
  46. method: 'POST',
  47. header: {
  48. 'content-type': 'application/x-www-form-urlencoded'
  49. },
  50. data: {
  51. method: 'auth',
  52. timestamp: getApp().globalData.globalTimestamp, //Date.now()
  53. //uid:getApp().globalData.user_id,
  54. sign: md5('auth' + getApp().globalData.globalTimestamp),
  55. //nickname:getApp().globalData.user_name,
  56. //headimg:getApp().globalData.user_headUrl,
  57. iv:that.iv,
  58. session_key:getApp().globalData.session_key,
  59. encryptedData:that.encryptedData,
  60. invited:getApp().globalData.inviteId
  61. },
  62. success: res => {
  63. getApp().globalData.user_id = res.data.msg.id;
  64. getApp().globalData.open_id = res.data.msg.openid;
  65. getApp().globalData.isAuth = true;
  66. getApp().globalData.times = res.data.msg.times;
  67. getApp().globalData.total_times = res.data.msg.total_times;
  68. getApp().globalData.user_headUrl = res.data.msg.headimg;
  69. getApp().globalData.user_name = res.data.msg.name;
  70. uni.navigateBack({
  71. });
  72. }
  73. });
  74. },
  75. }
  76. }
  77. </script>
  78. <style>
  79. .auth{
  80. margin-top: 0;
  81. text-align: center;
  82. display: flex;
  83. flex-direction: column;
  84. justify-content: center;
  85. align-items: center;
  86. padding: 100upx;
  87. vertical-align: middle;
  88. }
  89. .auth image{
  90. width: 200upx;
  91. height: 200upx;
  92. }
  93. .auth view {
  94. display: flex;
  95. width: 490upx;
  96. justify-content: space-between;
  97. }
  98. .auth-title {
  99. font-size: 32upx;
  100. }
  101. .auth-content {
  102. font-size: 26upx;
  103. color: #a7aaa9;
  104. }
  105. .allow {
  106. background-color: #27BCEF;
  107. margin: 20rpx 0 200rpx;
  108. text-align: center;
  109. vertical-align: middle;
  110. touch-action: manipulation;
  111. cursor: pointer;
  112. background-image: none;
  113. white-space: nowrap;
  114. user-select: none;
  115. font-size: 14px;
  116. border: 0 !important;
  117. position: relative;
  118. text-decoration: none;
  119. height: 44px;
  120. width: 250rpx;
  121. line-height: 44px;
  122. box-shadow: inset 0 0 0 1px #27BCEF;
  123. background: #fff !important;
  124. color: #27BCEF !important;
  125. display: inline-block;
  126. border-radius: 10rpx;
  127. }
  128. .refuse {
  129. background-color: #19be6b;
  130. margin: 20rpx 20rpx 200rpx 20rpx;
  131. text-align: center;
  132. vertical-align: middle;
  133. touch-action: manipulation;
  134. cursor: pointer;
  135. background-image: none;
  136. white-space: nowrap;
  137. user-select: none;
  138. font-size: 14px;
  139. border: 0 !important;
  140. position: relative;
  141. text-decoration: none;
  142. height: 44px;
  143. width: 250rpx;
  144. line-height: 44px;
  145. box-shadow: inset 0 0 0 1px #8a8a8a;
  146. background: #fff !important;
  147. color: #8a8a8a !important;
  148. display: inline-block;
  149. border-radius: 10rpx;
  150. }
  151. .margin-top-3{
  152. margin-top: 10%;
  153. }
  154. </style>