login.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  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. this.$store.state.vuex_noLogin = true
  64. uni.reLaunch({
  65. url: '/pages/index/index'
  66. })
  67. },
  68. toYs(){
  69. uni.navigateTo({
  70. url: '/pages/agreement/agreement'
  71. })
  72. },
  73. getPhoneNumber(e) {
  74. let _this = this
  75. uni.showLoading({
  76. mask: true,
  77. title: '加载中'
  78. });
  79. if (!this.code) {
  80. this.wxLogin()
  81. }
  82. if (e.target.errMsg === 'getPhoneNumber:ok') {
  83. setTimeout(()=>{
  84. login({
  85. code: _this.code,
  86. encryptedData: e.target.encryptedData,
  87. iv: e.target.iv
  88. }).then(res => {
  89. uni.hideLoading();
  90. _this.code = ''
  91. console.log(res,_this.path, 'login data')
  92. if (res.status == '200') {
  93. getApp().globalData.token = res.data
  94. _this.$u.vuex('vuex_token',res.data)
  95. uni.$emit("getUserInfo")
  96. if (_this.path === '/pages/index/index' || _this.lanuch) {
  97. uni.reLaunch({
  98. url: _this.path
  99. });
  100. } else {
  101. uni.redirectTo({
  102. url: _this.path
  103. });
  104. }
  105. } else {
  106. uni.showToast({
  107. title: res.message,
  108. icon: 'none',
  109. duration: 2500
  110. });
  111. }
  112. });
  113. },300)
  114. } else {
  115. uni.showToast({
  116. title: '授权失败',
  117. icon: 'none',
  118. duration: 2500
  119. });
  120. }
  121. },
  122. // 调微信登录 获取code
  123. wxLogin () {
  124. let _this = this
  125. uni.login({
  126. provider: 'weixin',
  127. success(res) {
  128. _this.code = res.code
  129. }
  130. })
  131. },
  132. // 手机号登录
  133. phoneLogin () {
  134. wx.navigateTo({
  135. url: '/pages/login/phoneLogin'
  136. })
  137. }
  138. }
  139. }
  140. </script>
  141. <style lang="scss">
  142. .content {
  143. width: 100%;
  144. height: 100%;
  145. padding: 40upx;
  146. display: flex;
  147. flex-direction: column;
  148. > view{
  149. text-align: center;
  150. &:first-child{
  151. flex-grow: 1;
  152. height: 80vh;
  153. padding: 20% 10%;
  154. }
  155. &:last-child{
  156. font-size: 24upx;
  157. text{
  158. color: #07c160;
  159. }
  160. }
  161. .logo{
  162. text-align: center;
  163. display: flex;
  164. justify-content: center;
  165. }
  166. .login-btns{
  167. padding: 60upx 0;
  168. .login-btn{
  169. margin: 30upx 0;
  170. }
  171. }
  172. }
  173. }
  174. </style>