FStransfer.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. <template>
  2. <div>
  3. <div style="margin:100px 0">
  4. <div style="text-align:center;width:300%;margin-left:-100%;font-size:30px" class="bounce">
  5. <span class="letter">飞</span>
  6. <span class="letter">书</span>
  7. <span class="letter">登</span>
  8. <span class="letter">录</span>
  9. <span class="letter">中</span>
  10. <span class="letter">,</span>
  11. <span class="letter">请</span>
  12. <span class="letter">稍</span>
  13. <span class="letter">候</span>
  14. </div>
  15. </div>
  16. </div>
  17. </template>
  18. <script>
  19. import { getAction,postAction } from '@/api/manage'
  20. import { mapActions } from 'vuex'
  21. import { timeFix } from '@/utils/util'
  22. export default {
  23. data() {
  24. return {
  25. code:'',
  26. state:'',
  27. }
  28. },
  29. methods: {
  30. ...mapActions(['Login', 'Logout', 'PhoneLogin', 'wxLogin']),
  31. login(values) {
  32. this.wxLogin(values)
  33. this.loginSuccess()
  34. },
  35. requestFailed(err) {
  36. this.$notification['error']({
  37. message: '登录失败',
  38. description: ((err.response || {}).data || {}).message || err.message || '请求出现错误,请稍后再试',
  39. duration: 4
  40. })
  41. this.loginBtn = false
  42. },
  43. loginSuccess() {
  44. this.$router.push({ name: 'dashboard' })
  45. this.$notification.success({
  46. message: '欢迎',
  47. description: `${timeFix()},欢迎回来`
  48. })
  49. }
  50. },
  51. mounted() {
  52. console.log(this.$route.query)
  53. this.code=this.$route.query.code;
  54. this.state=this.$route.query.state;
  55. if(!this.code){
  56. this.code='code'
  57. }
  58. getAction('/sys/feishu/auth',{
  59. code:this.code,
  60. state:this.state
  61. }).then((res)=>{
  62. console.log(res)
  63. if(res.success){
  64. if(res.result.type){
  65. window.location.href=res.result.url;
  66. }else{
  67. this.login(res);
  68. }
  69. }else{
  70. this.requestFailed(res)
  71. this.$router.replace({ name: 'errorPage',query:{desc:res.message} })
  72. }
  73. });
  74. },
  75. }
  76. </script>
  77. <style scoped>
  78. .bounce {
  79. display: flex;
  80. align-items: center;
  81. justify-content: center;
  82. width: 100%;
  83. color: black;
  84. height: 100%;
  85. font: normal bold 2rem 'Product Sans', sans-serif;
  86. white-space: nowrap;
  87. }
  88. .letter {
  89. animation: bounce 0.75s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate;
  90. display: inline-block;
  91. transform: translate3d(0, 0, 0);
  92. margin-top: 0.5em;
  93. text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em;
  94. font: normal 500 2rem 'Varela Round', sans-serif;
  95. }
  96. .letter:nth-child(1) {
  97. animation-delay: 0s;
  98. }
  99. .letter:nth-child(2) {
  100. animation-delay: 0.1s;
  101. }
  102. .letter:nth-child(3) {
  103. animation-delay: 0.2s;
  104. }
  105. .letter:nth-child(4) {
  106. animation-delay: 0.3s;
  107. }
  108. .letter:nth-child(5) {
  109. animation-delay: 0.4s;
  110. }
  111. .letter:nth-child(6) {
  112. animation-delay: 0.5s;
  113. }
  114. .letter:nth-child(7) {
  115. animation-delay: 0.6s;
  116. }
  117. .letter:nth-child(8) {
  118. animation-delay: 0.7s;
  119. }
  120. .letter:nth-child(9) {
  121. animation-delay: 0.8s;
  122. }
  123. .letter:nth-child(10) {
  124. animation-delay: 0.9s;
  125. }
  126. @keyframes bounce {
  127. 0% {
  128. transform: translate3d(0, 0, 0);
  129. text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em;
  130. }
  131. 100% {
  132. transform: translate3d(0, -1em, 0);
  133. text-shadow: rgba(255, 255, 255, 0.4) 0 1em 0.35em;
  134. }
  135. }
  136. </style>