login.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  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" :custom-style="wxButton" class="login-btn" type="success" :hair-line="false" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
  9. 微信登陆
  10. </u-button>
  11. <u-button shape="circle" plain :custom-style="phoneButton" class="login-btn" @click="phoneLogin" type="info">
  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. wxButton: {
  31. background: '#07c160'
  32. },
  33. phoneButton: {
  34. background: '#ffffff'
  35. }
  36. }
  37. },
  38. onShow() {
  39. },
  40. mounted() {},
  41. onLoad(option) {
  42. // 为解决首次登录异常问题 进入页面先调微信登录获取code
  43. this.wxLogin()
  44. const {
  45. path,
  46. lanuch
  47. } = option;
  48. this.lanuch = (lanuch + '') === 'true';
  49. if (path) {
  50. this.path = decodeURIComponent(path);
  51. }
  52. },
  53. methods: {
  54. getPhoneNumber(e) {
  55. let _this = this
  56. uni.showLoading({
  57. mask: true,
  58. title: '加载中'
  59. });
  60. if (!this.code) {
  61. this.wxLogin()
  62. }
  63. if (e.target.errMsg === 'getPhoneNumber:ok') {
  64. setTimeout(()=>{
  65. login({
  66. code: _this.code,
  67. encryptedData: e.target.encryptedData,
  68. iv: e.target.iv
  69. }).then(res => {
  70. uni.hideLoading();
  71. _this.code = ''
  72. console.log(res,_this.path, 'login data')
  73. if (res.status == '200') {
  74. getApp().globalData.token = res.data
  75. _this.$u.vuex('vuex_token',res.data)
  76. if (_this.path === '/pages/index/index' || _this.lanuch) {
  77. uni.reLaunch({
  78. url: _this.path
  79. });
  80. } else {
  81. uni.redirectTo({
  82. url: _this.path
  83. });
  84. }
  85. } else {
  86. uni.showToast({
  87. title: res.message,
  88. icon: 'none',
  89. duration: 2500
  90. });
  91. }
  92. });
  93. },300)
  94. } else {
  95. uni.showToast({
  96. title: '授权失败',
  97. icon: 'none',
  98. duration: 2500
  99. });
  100. }
  101. },
  102. // 调微信登录 获取code
  103. wxLogin () {
  104. let _this = this
  105. uni.login({
  106. provider: 'weixin',
  107. success(res) {
  108. _this.code = res.code
  109. }
  110. })
  111. },
  112. // 手机号登录
  113. phoneLogin () {
  114. wx.navigateTo({
  115. url: '/pages/login/phoneLogin'
  116. })
  117. }
  118. }
  119. }
  120. </script>
  121. <style lang="scss">
  122. .content {
  123. width: 100%;
  124. height: 100%;
  125. padding: 40upx;
  126. display: flex;
  127. flex-direction: column;
  128. > view{
  129. text-align: center;
  130. &:first-child{
  131. flex-grow: 1;
  132. height: 80vh;
  133. padding: 20% 10%;
  134. }
  135. &:last-child{
  136. font-size: 24upx;
  137. text{
  138. color: #07c160;
  139. }
  140. }
  141. .logo{
  142. text-align: center;
  143. display: flex;
  144. justify-content: center;
  145. }
  146. .login-btns{
  147. padding: 30upx 0;
  148. .login-btn{
  149. margin: 30upx 0;
  150. }
  151. }
  152. }
  153. }
  154. </style>