login.vue 3.3 KB

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