login.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. <template>
  2. <view class="content">
  3. <image class="logo-img" mode="aspectFit" src="/static/img/logo.png"></image>
  4. <u-button shape="circle" class="login-btn" type="success" plain :hair-line="false" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
  5. <view class="login-btn-content">
  6. <view class="wechat-img"></view>
  7. <view>微信登陆</view>
  8. </view>
  9. </u-button>
  10. <view class="canseLogin" @click="gotoHome()">
  11. 取消登录
  12. </view>
  13. </view>
  14. </template>
  15. <script>
  16. import {
  17. login
  18. } from "@/api/login.js"
  19. export default {
  20. components: {},
  21. data() {
  22. return {
  23. path: '/pages/index/index',
  24. lanuch: true,
  25. code: ''
  26. }
  27. },
  28. onShow() {
  29. },
  30. mounted() {},
  31. onLoad(option) {
  32. // 为解决首次登录异常问题 进入页面先调微信登录获取code
  33. this.wxLogin()
  34. const {
  35. path,
  36. lanuch
  37. } = option;
  38. this.lanuch = (lanuch + '') === 'true';
  39. if (path) {
  40. this.path = decodeURIComponent(path);
  41. }
  42. },
  43. methods: {
  44. getPhoneNumber(e) {
  45. let _this = this
  46. uni.showLoading({
  47. mask: true,
  48. title: '加载中'
  49. });
  50. if (!this.code) {
  51. this.wxLogin()
  52. }
  53. console.log(e.target.encryptedData,'eeeeeee')
  54. if (e.target.errMsg === 'getPhoneNumber:ok') {
  55. setTimeout(()=>{
  56. login({
  57. code: _this.code,
  58. encryptedData: e.target.encryptedData,
  59. iv: e.target.iv
  60. }).then(res => {
  61. uni.hideLoading();
  62. _this.code = ''
  63. console.log(res, 'login data')
  64. if (res.status == '200') {
  65. getApp().globalData.token = res.data
  66. _this.$u.vuex('vuex_token',res.data)
  67. if (_this.path === '/pages/index/index' || _this.lanuch) {
  68. uni.reLaunch({
  69. url: _this.path
  70. });
  71. } else {
  72. uni.redirectTo({
  73. url: _this.path
  74. });
  75. }
  76. } else {
  77. uni.showToast({
  78. title: res.message,
  79. icon: 'none',
  80. duration: 2500
  81. });
  82. }
  83. });
  84. },300)
  85. } else {
  86. uni.showToast({
  87. title: '授权失败',
  88. icon: 'none',
  89. duration: 2500
  90. });
  91. }
  92. },
  93. // 调微信登录 获取code
  94. wxLogin () {
  95. let _this = this
  96. uni.login({
  97. provider: 'weixin',
  98. success(res) {
  99. _this.code = res.code
  100. }
  101. })
  102. console.log(this.code,'1111111111')
  103. },
  104. gotoHome () {
  105. wx.reLaunch({
  106. url: '/pages/index/index'
  107. })
  108. }
  109. }
  110. }
  111. </script>
  112. <style lang="scss">
  113. .content {
  114. width: 100%;
  115. height: 100%;
  116. padding: 0;
  117. display: flex;
  118. align-items: center;
  119. padding-top: 35%;
  120. .logo-img {
  121. width: 400rpx;
  122. height: 100rpx;
  123. }
  124. }
  125. .wechat-img {
  126. width: 40px;
  127. height: 35px;
  128. margin-right: 10px;
  129. padding-top: 10px;
  130. background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyBjbGFzcz0iaWNvbiIgd2lkdGg9IjMwcHgiIGhlaWdodD0iMzBweCIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGw9IiMwOUJCMDciIGQ9Ik0xMDEwLjggNjI4YzAtMTQxLjItMTQxLjMtMjU2LjItMjk5LjktMjU2LjItMTY4IDAtMzAwLjMgMTE1LjEtMzAwLjMgMjU2LjIgMCAxNDEuNCAxMzIuMyAyNTYuMiAzMDAuMyAyNTYuMiAzNS4yIDAgNzAuNy04LjkgMTA2LTE3LjdsOTYuOCA1My0yNi42LTg4LjJjNzAuOS01My4yIDEyMy43LTEyMy43IDEyMy43LTIwMy4zek02MTggNTg4LjhjLTIyLjEgMC00MC0xNy45LTQwLTQwczE3LjktNDAgNDAtNDAgNDAgMTcuOSA0MCA0MGMwIDIyLTE3LjkgNDAtNDAgNDB6IG0xOTQuMy0wLjNjLTIyLjEgMC00MC0xNy45LTQwLTQwczE3LjktNDAgNDAtNDAgNDAgMTcuOSA0MCA0MC0xNy45IDQwLTQwIDQweiIgIC8+PHBhdGggZmlsbD0iIzA5QkIwNyIgZD0iTTM2Ni4zIDEwNi45Yy0xOTQuMSAwLTM1My4xIDEzMi4zLTM1My4xIDMwMC4zIDAgOTcgNTIuOSAxNzYuNiAxNDEuMyAyMzguNGwtMzUuMyAxMDYuMiAxMjMuNC02MS45YzQ0LjIgOC43IDc5LjYgMTcuNyAxMjMuNyAxNy43IDExLjEgMCAyMi4xLTAuNSAzMy0xLjQtNi45LTIzLjYtMTAuOS00OC4zLTEwLjktNzQgMC0xNTQuMyAxMzIuNS0yNzkuNSAzMDAuMi0yNzkuNSAxMS41IDAgMjIuOCAwLjggMzQgMi4xQzY5MiAyMTIuNiA1MzkuOSAxMDYuOSAzNjYuMyAxMDYuOXpNMjQ3LjcgMzQ5LjJjLTI2LjUgMC00OC0yMS41LTQ4LTQ4czIxLjUtNDggNDgtNDggNDggMjEuNSA0OCA0OC0yMS41IDQ4LTQ4IDQ4eiBtMjQ2LjYgMGMtMjYuNSAwLTQ4LTIxLjUtNDgtNDhzMjEuNS00OCA0OC00OCA0OCAyMS41IDQ4IDQ4LTIxLjUgNDgtNDggNDh6IiAgLz48L3N2Zz4K') no-repeat center center;
  131. }
  132. .login-btn {
  133. margin-top: 30px;
  134. }
  135. .login-btn-content {
  136. width: 65vw;
  137. display: flex;
  138. justify-content: center;
  139. align-items: center;
  140. }
  141. .canseLogin{
  142. width: 65vw;
  143. padding : 20rpx 15rpx;
  144. text-align : center;
  145. font-size: 1em;
  146. margin-top: 1.8em;
  147. color: #666;
  148. }
  149. </style>