login.vue 3.0 KB

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