login.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. <template>
  2. <view class="content">
  3. <view class="content-body">
  4. <view class="login-logo">
  5. <u-image src="/static/logo.png" width="160" height="160" 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><text>《隐私政策》</text>
  18. </view>
  19. </view>
  20. </template>
  21. <script>
  22. import service from '../../service.js';
  23. import {wxlogin} from '../../api/login.js'
  24. import {
  25. mapState,
  26. mapMutations
  27. } from 'vuex'
  28. export default {
  29. components: {
  30. },
  31. data() {
  32. return {
  33. path: '/pages/index/index',
  34. lanuch: false,
  35. mobile: '',
  36. code: '',
  37. codeText: '获取验证码',
  38. getCodeing: false,
  39. totalTime: 60,
  40. positionTop: 0,
  41. hasFocus: false,
  42. hasFocus1: false,
  43. wxButton:{
  44. background: '#1283d4'
  45. },
  46. phoneButton:{
  47. background: '#ffffff'
  48. }
  49. }
  50. },
  51. computed: mapState(['forcedLogin']),
  52. mounted() {
  53. //微信平台登录
  54. //#ifdef MP-WEIXIN
  55. this.$store.dispatch('wxLogin','weixin')
  56. //#endif
  57. },
  58. onLoad(option) {
  59. // 为解决首次登录异常问题 进入页面先调微信登录获取code
  60. this.wxLogin()
  61. const {
  62. path,
  63. lanuch,
  64. q
  65. } = option;
  66. this.lanuch = (lanuch + '') === 'true';
  67. if (path) {
  68. this.path = decodeURIComponent(path+"?q="+q);
  69. }
  70. },
  71. methods: {
  72. ...mapMutations(['login']),
  73. // 微信授权登录
  74. getPhoneNumber(e) {
  75. let _this = this
  76. uni.showLoading({
  77. mask: true,
  78. title: '加载中'
  79. });
  80. if (!this.code) {
  81. this.wxLogin()
  82. }
  83. console.log(this.code, e)
  84. if (e.target.errMsg === 'getPhoneNumber:ok') {
  85. setTimeout(()=>{
  86. const params={
  87. code: _this.code,
  88. encryptedData: e.target.encryptedData,
  89. iv: e.target.iv,
  90. }
  91. wxlogin(params).then(res => {
  92. uni.hideLoading();
  93. _this.code = ''
  94. console.log(res,_this.path, 'login data')
  95. if (res.status == '200') {
  96. this.toMain(res.data)
  97. // _this.$u.vuex('vuex_token',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({token: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: '/pagesMe/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>