login.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  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="380" height="246" 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. uni.$emit("getUserInfo")
  97. if (_this.path === '/pages/index/index' || _this.lanuch) {
  98. uni.reLaunch({
  99. url: _this.path
  100. });
  101. } else {
  102. uni.redirectTo({
  103. url: _this.path
  104. });
  105. }
  106. } else {
  107. uni.showToast({
  108. title: res.message,
  109. icon: 'none',
  110. duration: 2500
  111. });
  112. }
  113. });
  114. },300)
  115. } else {
  116. uni.showToast({
  117. title: '授权失败',
  118. icon: 'none',
  119. duration: 2500
  120. });
  121. }
  122. },
  123. // 调微信登录 获取code
  124. wxLogin () {
  125. let _this = this
  126. uni.login({
  127. provider: 'weixin',
  128. success(res) {
  129. console.log(res.code)
  130. _this.code = res.code
  131. }
  132. })
  133. },
  134. toMain(data) {
  135. this.login(data);
  136. uni.reLaunch({
  137. url: '/pages/index/index',
  138. });
  139. },
  140. // 手机号登录
  141. phoneLogin(){
  142. wx.navigateTo({
  143. url: '/pages/login/phoneLogin'
  144. })
  145. },
  146. initPosition() {
  147. /**
  148. * 使用 absolute 定位,并且设置 bottom 值进行定位。软键盘弹出时,底部会因为窗口变化而被顶上来。
  149. * 反向使用 top 进行定位,可以避免此问题。
  150. */
  151. this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
  152. },
  153. gotoXieyi(url){
  154. uni.navigateTo({
  155. url: '/pages/xieyi/index?id=0'
  156. })
  157. }
  158. },
  159. onReady() {
  160. this.initPosition();
  161. }
  162. }
  163. </script>
  164. <style lang="less">
  165. .content{
  166. width: 100%;
  167. height: 100vh;
  168. padding:0 125upx;
  169. display: flex;
  170. flex-direction: column;
  171. text-align: center;
  172. .content-body{
  173. flex: 1;
  174. .logo{
  175. display: inline-block;
  176. margin:250upx 0 120upx;
  177. }
  178. .phoneBtn{
  179. display: block;
  180. margin: 30rpx 0 350upx;
  181. }
  182. }
  183. .xieyi{
  184. font-size: 24upx;
  185. padding-bottom: 60upx;
  186. text{
  187. color:#1283d4
  188. }
  189. }
  190. }
  191. </style>