wechat.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <template>
  2. <view>
  3. <view v-if="msg" class="error-box">
  4. {{msg}}
  5. </view>
  6. <view v-if="msg" class="order-btn" @click="goBack">返回</view>
  7. </view>
  8. </template>
  9. <script>
  10. var app = getApp();
  11. export default {
  12. data() {
  13. return {
  14. state: 0
  15. }
  16. },
  17. onLoad(option) {
  18. this.state = this.getUrlCode('state');
  19. let code = this.getUrlCode('code')
  20. if(code) {
  21. this.getOpenidAndUserinfo(code)
  22. }else{
  23. this.getCode ();
  24. }
  25. },
  26. methods: {
  27. getCode () {
  28. if(this.isWechat()) {
  29. // 截取地址中的code,如果没有code就去微信授权,如果已经获取到code了就直接把code传给后台获取openId
  30. let code = this.getUrlCode('code')
  31. if (code === null || code === '') {
  32. window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+app.globalData.appId+'&redirect_uri=' + encodeURIComponent(app.globalData.redirectUri) + '&response_type=code&scope=snsapi_userinfo&state='+this.state+'#wechat_redirect'
  33. // redirect_uri是授权成功后,跳转的url地址,微信会帮我们跳转到该链接,并且通过?的形式拼接code,这里需要用encodeURIComponent对链接进行处理。
  34. // 如果配置参数一一对应,那么此时已经通过回调地址刷新页面后,你就会再地址栏中看到code了。
  35. // http://127.0.0.1/pages/views/profile/login/login?code=001BWV4J1lRzz00H4J1J1vRE4J1BWV4q&state=1
  36. }
  37. }
  38. },
  39. getUrlCode (name) {
  40. return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
  41. },
  42. isWechat() {
  43. return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
  44. },
  45. getOpenidAndUserinfo(code) {
  46. let that = this;
  47. uni.request({
  48. url: app.globalData.serverUrl + 'Oauth/checkCode',
  49. data: {code: code},
  50. method: 'GET',
  51. header: {
  52. 'content-type': 'application/x-www-form-urlencoded'
  53. },
  54. success: function (res) {
  55. console.log('通过code获取openid和accessToken', res)
  56. if(res.data.code == 0) {
  57. var app = getApp();
  58. uni.setStorageSync(app.globalData.storagePre+'token', res.data.data.token);
  59. uni.setStorageSync(app.globalData.storagePre+'userId', res.data.data.userId);
  60. app.globalData.userinfo.token = res.data.data.token;
  61. app.globalData.userinfo.userId = res.data.data.userId;
  62. if(that.state){
  63. // uni.reLaunch({ //关闭所有页面,跳转到闪屏页
  64. // url: '/pages/index/add?orgId=' + that.state,
  65. // })
  66. var arr = that.state.split('_');
  67. let orgId = arr[0];
  68. let type = arr.length > 1?arr[1]:0;
  69. window.location.href = app.globalData.host + '#/pages/index/add?orgId='+orgId+'&type='+type;
  70. }else{
  71. // uni.reLaunch({ //关闭所有页面,跳转到闪屏页
  72. // url: '/pages/index/index'
  73. // })
  74. window.location.href = app.globalData.host;
  75. }
  76. }else{
  77. that.msg = res.data.message;
  78. }
  79. },
  80. fail: function (err) {
  81. console.log(err);
  82. that.msg = '登录失败';
  83. }
  84. })
  85. },
  86. goBack(){
  87. uni.reLaunch({ //关闭所有页面,跳转到闪屏页
  88. url: '/pages/index/wechat'
  89. })
  90. }
  91. }
  92. }
  93. </script>
  94. <style lang="scss" scoped>
  95. .error-box{
  96. font-size: 40rpx;
  97. color: #333333;
  98. text-align: center;
  99. margin-top: 180rpx;
  100. margin-bottom: 80rpx;
  101. }
  102. .order-btn{
  103. width: 673rpx;
  104. height: 72rpx;
  105. border-radius: 10rpx;
  106. color: #FFFFFF;
  107. background-color: $theme-color;
  108. line-height: 72rpx;
  109. font-size: 38rpx;
  110. text-align: center;
  111. margin: 0 auto;
  112. margin-top: 40rpx;
  113. }
  114. </style>