index.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. <template>
  2. <view>
  3. <!-- 头部 -->
  4. <headContent>
  5. <template #left>
  6. <view class="head-revers-back iconfont" @click.stop="reversBackBtn()">&#xe604;</view>
  7. </template>
  8. </headContent>
  9. <view class="page-content">
  10. <text class="login-title">登录</text>
  11. <text class="login-content">Hi, 欢迎来到币王</text>
  12. <tabList ref="tabListRef" :tabIndex.sync="tabIndexs" />
  13. <!-- <component :is="phoneLogin"/> -->
  14. <phoneLogin v-show="tabIndexs === 0" :formData="formData" :areaCode="areaCode" />
  15. <emailLogin v-show="tabIndexs === 1" :formData="formData" />
  16. <view class="form-btn" style="margin-top: 28rpx;" @click.stop="formSubmit">
  17. 登录
  18. </view>
  19. <view class="form-hint">
  20. <text @click.stop="retrievePswd()">忘记密码?</text>
  21. <text class="form-hint-link"></text>
  22. <text @click.stop="register">立即注册</text>
  23. </view>
  24. </view>
  25. <load ref="loadRef" />
  26. <slider-verify ref="sliderVerifyRef" @slideImgSuccess="slideImgSuccess" />
  27. </view>
  28. </template>
  29. <script>
  30. import {
  31. reverseBack
  32. } from "@/utils/common.js"
  33. import {
  34. Api_userLogin
  35. } from "@/api/index.js"
  36. import phoneLogin from "./modules/phone.vue"
  37. import emailLogin from "./modules/email.vue"
  38. // import mailboxLogin from "./modules/mailbox.vue"
  39. import tabList from "./modules/tab.vue"
  40. import {
  41. Way_getUserInfo
  42. } from "@/utils/common-request.js"
  43. export default {
  44. name: 'login',
  45. components: {
  46. phoneLogin,
  47. emailLogin,
  48. // mailboxLogin,
  49. tabList
  50. },
  51. data() {
  52. return {
  53. limina: false,
  54. tabIndexs: 0,
  55. areaCode: 86,
  56. formData: {
  57. user_string: '',
  58. password: '',
  59. // user_string: '123456',
  60. // password: 'Aa123456'
  61. }
  62. };
  63. },
  64. methods: {
  65. setAreaCode(e) {
  66. if (e) {
  67. this.areaCode = e.area_code;
  68. }
  69. },
  70. reversBackBtn() {
  71. reverseBack()
  72. },
  73. register() {
  74. uni.navigateTo({
  75. url: '/pages/login/register'
  76. })
  77. },
  78. // 忘记密码
  79. retrievePswd() {
  80. uni.navigateTo({
  81. url: '/pages/login/retrieve-pswd'
  82. })
  83. },
  84. // 提交登录
  85. formSubmit() {
  86. this.$nextTick(() => {
  87. this.$refs.loadRef.open();
  88. })
  89. setTimeout(() => {
  90. this.$refs.loadRef.close();
  91. setTimeout(() => {
  92. this.$nextTick(() => {
  93. this.$refs.sliderVerifyRef.open()
  94. })
  95. }, 100)
  96. }, 1500)
  97. },
  98. slideImgSuccess() {
  99. if (this.limina) {
  100. return false
  101. };
  102. this.limina = true
  103. uni.showLoading({
  104. title: '',
  105. mask: true
  106. });
  107. Api_userLogin(this.formData).then(res => {
  108. setTimeout(() => {
  109. if (res) {
  110. uni.showToast({
  111. title: '登录成功',
  112. icon: "none"
  113. })
  114. this.$store.dispatch("app/setToken", res)
  115. Way_getUserInfo()
  116. setTimeout(() => {
  117. uni.reLaunch({
  118. url: '/pages/index/index'
  119. });
  120. }, 500)
  121. }
  122. }, 300)
  123. }).catch(err => {
  124. }).finally(() => {
  125. setTimeout(() => {
  126. this.limina = false;
  127. uni.hideLoading({
  128. title: '',
  129. mask: true
  130. });
  131. }, 200)
  132. })
  133. }
  134. }
  135. }
  136. </script>
  137. <style>
  138. page {
  139. background-color: #fff;
  140. }
  141. </style>
  142. <style lang="scss" scoped>
  143. @import "~./common.scss"
  144. </style>