login.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. <template>
  2. <view class="content">
  3. <view class="content-body">
  4. <view class="login-logo">
  5. <u-image src="/static/logo-mini.png" width="396" height="76" 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: '#20d468',
  44. borderColor: '#22c573'
  45. },
  46. phoneButton:{
  47. background: '#f8f8f8',
  48. borderColor: '#eeeeee'
  49. }
  50. }
  51. },
  52. computed: mapState(['forcedLogin']),
  53. mounted() {
  54. //微信平台登录
  55. //#ifdef MP-WEIXIN
  56. this.$store.dispatch('wxLogin','weixin')
  57. //#endif
  58. },
  59. onLoad(option) {
  60. // 为解决首次登录异常问题 进入页面先调微信登录获取code
  61. this.wxLogin()
  62. const {
  63. path,
  64. lanuch,
  65. q
  66. } = option;
  67. this.lanuch = (lanuch + '') === 'true';
  68. if (path) {
  69. this.path = decodeURIComponent(path+"?q="+q);
  70. }
  71. },
  72. methods: {
  73. ...mapMutations(['login']),
  74. // 微信授权登录
  75. getPhoneNumber(e) {
  76. let _this = this
  77. uni.showLoading({
  78. mask: true,
  79. title: '加载中'
  80. });
  81. if (!this.code) {
  82. this.wxLogin()
  83. }
  84. console.log(this.code, e)
  85. if (e.target.errMsg === 'getPhoneNumber:ok') {
  86. setTimeout(()=>{
  87. const params={
  88. code: _this.code,
  89. encryptedData: e.target.encryptedData,
  90. iv: e.target.iv,
  91. }
  92. wxlogin(params).then(res => {
  93. uni.hideLoading();
  94. _this.code = ''
  95. console.log(res,_this.path, 'login data')
  96. if (res.status == '200') {
  97. this.toMain(res.data)
  98. uni.$emit("getUserInfo")
  99. if (_this.path === '/pages/index/index' || _this.lanuch) {
  100. uni.reLaunch({
  101. url: _this.path
  102. });
  103. } else {
  104. uni.redirectTo({
  105. url: _this.path
  106. });
  107. }
  108. } else {
  109. uni.showToast({
  110. title: res.message,
  111. icon: 'none',
  112. duration: 2500
  113. });
  114. }
  115. });
  116. },300)
  117. } else {
  118. uni.showToast({
  119. title: '授权失败',
  120. icon: 'none',
  121. duration: 2500
  122. });
  123. }
  124. },
  125. // 调微信登录 获取code
  126. wxLogin () {
  127. let _this = this
  128. uni.login({
  129. provider: 'weixin',
  130. success(res) {
  131. console.log(res.code)
  132. _this.code = res.code
  133. }
  134. })
  135. },
  136. toMain(data) {
  137. this.login(data);
  138. uni.reLaunch({
  139. url: '/pages/index/index',
  140. });
  141. },
  142. // 手机号登录
  143. phoneLogin(){
  144. wx.navigateTo({
  145. url: '/pages/login/phoneLogin'
  146. })
  147. },
  148. initPosition() {
  149. /**
  150. * 使用 absolute 定位,并且设置 bottom 值进行定位。软键盘弹出时,底部会因为窗口变化而被顶上来。
  151. * 反向使用 top 进行定位,可以避免此问题。
  152. */
  153. this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
  154. },
  155. gotoXieyi(url){
  156. uni.navigateTo({
  157. url: '/pages/xieyi/index?id=0'
  158. })
  159. }
  160. },
  161. onReady() {
  162. this.initPosition();
  163. }
  164. }
  165. </script>
  166. <style lang="less">
  167. .content{
  168. width: 100%;
  169. height: 100vh;
  170. padding:0 125upx;
  171. display: flex;
  172. flex-direction: column;
  173. text-align: center;
  174. .content-body{
  175. flex: 1;
  176. .logo{
  177. display: inline-block;
  178. margin:250upx 0 120upx;
  179. }
  180. .phoneBtn{
  181. display: block;
  182. margin: 30rpx 0 350upx;
  183. }
  184. }
  185. .xieyi{
  186. font-size: 24upx;
  187. padding-bottom: 60upx;
  188. text{
  189. color:#1283d4
  190. }
  191. }
  192. }
  193. </style>