login.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. <template>
  2. <view class="content">
  3. <view class="content-body">
  4. <view class="login-logo">
  5. <u-image src="/static/logo-s.png" width="382" height="248" class="logo"></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" :custom-style="phoneButton" class="login-btn phoneBtn" @click="phoneLogin" :hoverClass='none'>
  12. 手机验证码登录
  13. </u-button>
  14. </view>
  15. </view>
  16. <view class="xieyi" @click="gotoXieyi()">
  17. 登录即代表同意 <text>《用户协议》和《隐私政策》</text>
  18. </view>
  19. </view>
  20. </template>
  21. <script>
  22. import {wxlogin} from '../../api/login.js'
  23. import {
  24. mapState,
  25. mapMutations
  26. } from 'vuex'
  27. export default {
  28. components: {
  29. },
  30. data() {
  31. return {
  32. path: '/pages/index/index',
  33. lanuch: false,
  34. mobile: '',
  35. code: '',
  36. codeText: '获取验证码',
  37. getCodeing: false,
  38. totalTime: 60,
  39. positionTop: 0,
  40. hasFocus: false,
  41. hasFocus1: false,
  42. wxButton:{
  43. background: '#00c800'
  44. },
  45. phoneButton:{
  46. background: '#ffffff'
  47. }
  48. }
  49. },
  50. computed: mapState(['forcedLogin']),
  51. mounted() {
  52. //微信平台登录
  53. //#ifdef MP-WEIXIN
  54. this.$store.dispatch('wxLogin','weixin')
  55. //#endif
  56. },
  57. onLoad(option) {
  58. // 为解决首次登录异常问题 进入页面先调微信登录获取code
  59. this.wxLogin()
  60. const {
  61. path,
  62. lanuch,
  63. q
  64. } = option;
  65. this.lanuch = (lanuch + '') === 'true';
  66. if (path) {
  67. this.path = decodeURIComponent(path+"?q="+q);
  68. }
  69. },
  70. methods: {
  71. ...mapMutations(['login']),
  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. console.log(this.code, e)
  83. if (e.target.errMsg === 'getPhoneNumber:ok') {
  84. setTimeout(()=>{
  85. const params={
  86. code: _this.code,
  87. encryptedData: e.target.encryptedData,
  88. iv: e.target.iv,
  89. }
  90. wxlogin(params).then(res => {
  91. uni.hideLoading();
  92. _this.code = ''
  93. console.log(res,_this.path, 'login data')
  94. if (res.status == '200') {
  95. this.toMain(res.data)
  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. console.log(res.code)
  129. _this.code = res.code
  130. }
  131. })
  132. },
  133. toMain(data) {
  134. this.login(data);
  135. uni.reLaunch({
  136. url: '/pages/index/index',
  137. });
  138. },
  139. // 手机号登录
  140. phoneLogin(){
  141. wx.navigateTo({
  142. url: '/pages/login/phoneLogin'
  143. })
  144. },
  145. initPosition() {
  146. /**
  147. * 使用 absolute 定位,并且设置 bottom 值进行定位。软键盘弹出时,底部会因为窗口变化而被顶上来。
  148. * 反向使用 top 进行定位,可以避免此问题。
  149. */
  150. this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
  151. },
  152. gotoXieyi(url){
  153. uni.navigateTo({
  154. url: '/pages/xieyi/index?id=0'
  155. })
  156. }
  157. },
  158. onReady() {
  159. this.initPosition();
  160. }
  161. }
  162. </script>
  163. <style lang="less">
  164. .content{
  165. width: 100%;
  166. height: 100vh;
  167. padding:0 125upx;
  168. display: flex;
  169. flex-direction: column;
  170. text-align: center;
  171. .content-body{
  172. flex: 1;
  173. .logo{
  174. display: inline-block;
  175. margin:250upx 0 120upx;
  176. }
  177. .phoneBtn{
  178. display: block;
  179. margin: 30rpx 0 350upx;
  180. }
  181. }
  182. .xieyi{
  183. font-size: 24upx;
  184. padding-bottom: 60upx;
  185. text{
  186. color:#1283d4
  187. }
  188. }
  189. }
  190. </style>