login.vue 3.5 KB

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