index.vue 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. <template>
  2. <view class="auth">
  3. <image src="/static/logo.png" mode="aspectFill"></image>
  4. <text class="margin-top-3 auth-title">欢迎使用空i企小程序</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" @click="getUserInfo()" v-if="!isAuth">登录授权</button>
  9. <button type="primary" class="allow" open-type="getPhoneNumber" style="font-size: 12px;"
  10. @getphonenumber="getPhoneNumber" v-if="isAuth && !isNeedPhone">手机号码授权</button>
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. import md5 from '@/common/md5.js';
  16. export default {
  17. data(){
  18. return {
  19. iv:'',
  20. encryptedData:'',
  21. isNeedPhone:Boolean,
  22. isAuth:Boolean
  23. }
  24. },
  25. onLoad() {
  26. this.getUserInfo()
  27. },
  28. methods:{
  29. getUserInfo(){
  30. let md5Sign = md5("method="+'user'+"&timestamp="+getApp().globalData.globalTimestamp+"&secret="+getApp().globalData.secret)
  31. let url = getApp().globalData.shareUrl+'api/api.php'+'?method=user&action=info_by_openid&timestamp='+getApp().globalData.globalTimestamp +'&sign='+md5Sign
  32. uni.request({
  33. url:url,
  34. method: 'POST',
  35. header: {
  36. 'content-type': 'application/x-www-form-urlencoded'
  37. },
  38. data: {
  39. openId:getApp().globalData.open_id
  40. },
  41. success: (res) => {
  42. if(res.data.code === 200){
  43. if(res.data.data.nickname){
  44. this.isAuth = true;
  45. this.isNeedPhone = false;
  46. }else{
  47. this.isAuth = false;
  48. }
  49. }
  50. },
  51. fail: () => {
  52. console.log("连接失败");
  53. }
  54. });
  55. },
  56. getUserInfo() {
  57. uni.getUserProfile({
  58. desc:'登录',
  59. success:(res)=> {
  60. getApp().globalData.user_headUrl = res.userInfo.avatarUrl;
  61. getApp().globalData.user_name = res.userInfo.nickName;
  62. this.iv = res.iv;
  63. this.encryptedData = res.encryptedData;
  64. this.isAuth = true;
  65. getApp().globalData.isAuth = true;
  66. this.loginUserInfo()
  67. },
  68. fail:(err)=> {
  69. getApp().globalData.isAuth = false;
  70. this.isAuth = false;
  71. }
  72. })
  73. // if (e.detail.errMsg == "getUserInfo:ok") {
  74. // getApp().globalData.user_headUrl = e.detail.userInfo.avatarUrl;
  75. // getApp().globalData.user_name = e.detail.userInfo.nickName;
  76. // this.iv = e.detail.iv;
  77. // this.encryptedData = e.detail.encryptedData;
  78. // console.log(e.detail)
  79. // //this.loginUserInfo()
  80. // } else {
  81. // console.log("用户信息授权失败");
  82. // getApp().globalData.isAuth = false;
  83. // }
  84. },
  85. getPhoneNumber(e){
  86. let that = this;
  87. if (e.detail.errMsg == 'getPhoneNumber:ok') { //允许授权执行跳转
  88. console.log(e.detail)
  89. that.phoneRequest(e.detail.iv, e.detail.encryptedData, getApp().globalData.session_key)
  90. } else { //
  91. that.isNeedPhone = false;
  92. }
  93. },
  94. phoneRequest(myIv,myEncryptedData,sKey){
  95. let that = this;
  96. let md5Sign = md5("method="+'user'+"&timestamp="+getApp().globalData.globalTimestamp+"&secret="+getApp().globalData.secret)
  97. let url = getApp().globalData.shareUrl+'api/api.php'+'?method=user&source=user&action=phone&timestamp='+getApp().globalData.globalTimestamp +'&sign='+md5Sign
  98. uni.request({
  99. url:url,
  100. method: 'POST',
  101. header: {
  102. 'content-type': 'application/x-www-form-urlencoded'
  103. },
  104. data: {
  105. iv:myIv,
  106. sessionKey:sKey,
  107. encryptedData:myEncryptedData,
  108. openId:getApp().globalData.open_id
  109. },
  110. success: (res) => {
  111. console.log(res)
  112. if(res.data.code === 200){
  113. getApp().globalData.user_phone = res.data.phoneNumber;
  114. that.refuseBtn();
  115. }
  116. },
  117. fail: () => {
  118. console.log("连接失败");
  119. }
  120. });
  121. },
  122. refuseBtn(){
  123. uni.navigateBack({
  124. });
  125. },
  126. loginUserInfo(){
  127. let that = this;
  128. let md5Sign = md5("method="+'user'+"&timestamp="+getApp().globalData.globalTimestamp+"&secret="+getApp().globalData.secret)
  129. let url = getApp().globalData.shareUrl+'api/api.php'+'?method=user&source=user&action=update&timestamp='+getApp().globalData.globalTimestamp +'&sign='+md5Sign
  130. uni.request({
  131. url:url, //需要设置为全局
  132. method: 'POST',
  133. header: {
  134. 'content-type': 'application/x-www-form-urlencoded'
  135. },
  136. data: {
  137. openId:getApp().globalData.open_id,
  138. nickname:getApp().globalData.user_name,
  139. headimg:getApp().globalData.user_headUrl,
  140. },
  141. success: res => {
  142. if(res.data.code === 200){
  143. console.log(res.data)
  144. // getApp().globalData.user_id = res.data.msg.id;
  145. // getApp().globalData.open_id = res.data.msg.openid;
  146. // getApp().globalData.isAuth = true;
  147. // getApp().globalData.user_headUrl = res.data.msg.headimg;
  148. // getApp().globalData.user_name = res.data.msg.name;
  149. // getApp().globalData.user_status = res.data.msg.status;
  150. // getApp().globalData.user_phone = res.data.msg.phone;
  151. // that.isNeedPhone = res.data.msg.phone;
  152. // that.isAuth = getApp().globalData.isAuth;
  153. }
  154. else {
  155. uni.showToast({
  156. title: res.data.msg,
  157. icon: 'none',
  158. duration:2000
  159. });
  160. }
  161. // uni.navigateBack({
  162. // });
  163. }
  164. });
  165. },
  166. }
  167. }
  168. </script>
  169. <style>
  170. .auth{
  171. margin-top: 0;
  172. text-align: center;
  173. display: flex;
  174. flex-direction: column;
  175. justify-content: center;
  176. align-items: center;
  177. padding: 100upx;
  178. vertical-align: middle;
  179. }
  180. .auth image{
  181. width: 200upx;
  182. height: 200upx;
  183. }
  184. .auth view {
  185. display: flex;
  186. width: 490upx;
  187. justify-content: space-between;
  188. }
  189. .auth-title {
  190. font-size: 32upx;
  191. }
  192. .auth-content {
  193. font-size: 26upx;
  194. color: #a7aaa9;
  195. }
  196. .allow {
  197. background-color: #27BCEF;
  198. margin: 20rpx 0 200rpx;
  199. text-align: center;
  200. vertical-align: middle;
  201. touch-action: manipulation;
  202. cursor: pointer;
  203. background-image: none;
  204. white-space: nowrap;
  205. user-select: none;
  206. font-size: 14px;
  207. border: 0 !important;
  208. position: relative;
  209. text-decoration: none;
  210. height: 44px;
  211. width: 250rpx;
  212. line-height: 44px;
  213. box-shadow: inset 0 0 0 1px #27BCEF;
  214. background: #fff !important;
  215. color: #27BCEF !important;
  216. display: inline-block;
  217. border-radius: 10rpx;
  218. }
  219. .refuse {
  220. background-color: #19be6b;
  221. margin: 20rpx 20rpx 200rpx 20rpx;
  222. text-align: center;
  223. vertical-align: middle;
  224. touch-action: manipulation;
  225. cursor: pointer;
  226. background-image: none;
  227. white-space: nowrap;
  228. user-select: none;
  229. font-size: 14px;
  230. border: 0 !important;
  231. position: relative;
  232. text-decoration: none;
  233. height: 44px;
  234. width: 250rpx;
  235. line-height: 44px;
  236. box-shadow: inset 0 0 0 1px #8a8a8a;
  237. background: #fff !important;
  238. color: #8a8a8a !important;
  239. display: inline-block;
  240. border-radius: 10rpx;
  241. }
  242. .margin-top-3{
  243. margin-top: 10%;
  244. }
  245. </style>