login.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. <template>
  2. <view class="login-content">
  3. <view>
  4. <view>
  5. <view class="logo">
  6. <u-image src="/static/logo.jpg" width="140" height="140" ></u-image>
  7. </view>
  8. <view class="login-btns">
  9. <u-button shape="circle" :custom-style="wxButton" class="login-btn" type="success" :hair-line="false" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
  10. 微信授权登录
  11. </u-button>
  12. <u-gap height="30"></u-gap>
  13. <u-button shape="circle" :custom-style="phoneButton" class="login-btn" @click="pwLogin" type="primary">
  14. 账号密码登录
  15. </u-button>
  16. </view>
  17. </view>
  18. </view>
  19. <view @click="toYs">登录即代表同意<text>隐私政策</text>和<text>服务条款</text></view>
  20. </view>
  21. </template>
  22. <script>
  23. import {
  24. login
  25. } from "@/api/login"
  26. export default {
  27. components: {},
  28. data() {
  29. return {
  30. path: '/pages/index/index',
  31. lanuch: true,
  32. code: '',
  33. wxButton: {
  34. background: '#07c160'
  35. },
  36. phoneButton: {
  37. background: '#00aaff'
  38. }
  39. }
  40. },
  41. mounted() {},
  42. onLoad(option) {
  43. // 为解决首次登录异常问题 进入页面先调微信登录获取code
  44. this.wxLogin()
  45. const {
  46. path,
  47. lanuch
  48. } = option;
  49. this.lanuch = (lanuch + '') === 'true';
  50. if (path) {
  51. this.path = decodeURIComponent(path);
  52. }
  53. },
  54. methods: {
  55. cansel(){
  56. this.$store.state.vuex_noLogin = true
  57. uni.reLaunch({
  58. url: '/pages/index/index'
  59. })
  60. },
  61. toYs(){
  62. uni.navigateTo({
  63. url: '/pages/agreement/agreement'
  64. })
  65. },
  66. getPhoneNumber(e) {
  67. let _this = this
  68. uni.showLoading({
  69. mask: true,
  70. title: '加载中'
  71. });
  72. if (!this.code) {
  73. this.wxLogin()
  74. }
  75. console.log(this.code, e)
  76. if (e.target.errMsg === 'getPhoneNumber:ok') {
  77. setTimeout(()=>{
  78. login({
  79. code: _this.code,
  80. encryptedData: e.target.encryptedData,
  81. iv: e.target.iv
  82. }).then(res => {
  83. uni.hideLoading();
  84. _this.code = ''
  85. console.log(res,_this.path, 'login data')
  86. if (res.status == '200') {
  87. getApp().globalData.token = res.data
  88. _this.$u.vuex('vuex_token',res.data)
  89. uni.$emit("getUserInfo")
  90. if (_this.path === '/pages/index/index' || _this.lanuch) {
  91. uni.reLaunch({
  92. url: _this.path
  93. });
  94. } else {
  95. uni.redirectTo({
  96. url: _this.path
  97. });
  98. }
  99. } else {
  100. uni.showToast({
  101. title: res.message,
  102. icon: 'none',
  103. duration: 2500
  104. });
  105. }
  106. });
  107. },300)
  108. } else {
  109. uni.showToast({
  110. title: '授权失败',
  111. icon: 'none',
  112. duration: 2500
  113. });
  114. }
  115. },
  116. // 调微信登录 获取code
  117. wxLogin () {
  118. let _this = this
  119. uni.login({
  120. provider: 'weixin',
  121. success(res) {
  122. console.log(res.code)
  123. _this.code = res.code
  124. }
  125. })
  126. },
  127. // 手机号登录
  128. pwLogin () {
  129. wx.navigateTo({
  130. url: '/pages/login/pwLogin'
  131. })
  132. }
  133. }
  134. }
  135. </script>
  136. <style lang="scss" scoped>
  137. .login-content {
  138. width: 100%;
  139. height: 100%;
  140. padding: 40upx;
  141. display: flex;
  142. flex-direction: column;
  143. > view{
  144. text-align: center;
  145. &:first-child{
  146. flex-grow: 1;
  147. height: 80vh;
  148. padding: 20% 10%;
  149. display: flex;
  150. flex-direction: column;
  151. justify-content: space-between;
  152. }
  153. &:last-child{
  154. font-size: 24upx;
  155. text{
  156. color: #07c160;
  157. }
  158. }
  159. .logo{
  160. text-align: center;
  161. display: flex;
  162. justify-content: center;
  163. }
  164. .login-btns{
  165. padding: 60upx 0;
  166. .login-btn{
  167. margin: 30upx 0;
  168. }
  169. }
  170. }
  171. }
  172. </style>