login.vue 3.5 KB

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