|
@@ -0,0 +1,145 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div style="margin:100px 0">
|
|
|
+ <div style="text-align:center;width:300%;margin-left:-100%;font-size:30px" class="bounce">
|
|
|
+
|
|
|
+ <span class="letter">飞</span>
|
|
|
+ <span class="letter">书</span>
|
|
|
+ <span class="letter">登</span>
|
|
|
+ <span class="letter">录</span>
|
|
|
+ <span class="letter">中</span>
|
|
|
+ <span class="letter">,</span>
|
|
|
+
|
|
|
+ <span class="letter">请</span>
|
|
|
+ <span class="letter">稍</span>
|
|
|
+ <span class="letter">候</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getAction,postAction } from '@/api/manage'
|
|
|
+import { mapActions } from 'vuex'
|
|
|
+import { timeFix } from '@/utils/util'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ code:'',
|
|
|
+ state:'',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapActions(['Login', 'Logout', 'PhoneLogin', 'wxLogin']),
|
|
|
+ login(values) {
|
|
|
+ this.wxLogin(values)
|
|
|
+ this.loginSuccess()
|
|
|
+ },
|
|
|
+ requestFailed(err) {
|
|
|
+ this.$notification['error']({
|
|
|
+ message: '登录失败',
|
|
|
+ description: ((err.response || {}).data || {}).message || err.message || '请求出现错误,请稍后再试',
|
|
|
+ duration: 4
|
|
|
+ })
|
|
|
+ this.loginBtn = false
|
|
|
+ },
|
|
|
+ loginSuccess() {
|
|
|
+ this.$router.push({ name: 'dashboard' })
|
|
|
+ this.$notification.success({
|
|
|
+ message: '欢迎',
|
|
|
+ description: `${timeFix()},欢迎回来`
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ console.log(this.$route.query)
|
|
|
+ this.code=this.$route.query.code;
|
|
|
+ this.state=this.$route.query.state;
|
|
|
+ if(!this.code){
|
|
|
+ this.code='code'
|
|
|
+ }
|
|
|
+ getAction('sys/feishu/auth',{
|
|
|
+ code:this.code,
|
|
|
+ state:this.state
|
|
|
+ }).then((res)=>{
|
|
|
+ console.log(res)
|
|
|
+ if(res.success){
|
|
|
+ if(res.result.type){
|
|
|
+ window.location.href=res.result.url;
|
|
|
+ }else{
|
|
|
+ this.login(res);
|
|
|
+ }
|
|
|
+
|
|
|
+ }else{
|
|
|
+ this.requestFailed(res)
|
|
|
+ this.$router.push({ name: 'login' })
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.bounce {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ color: black;
|
|
|
+ height: 100%;
|
|
|
+ font: normal bold 2rem 'Product Sans', sans-serif;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.letter {
|
|
|
+ animation: bounce 0.75s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate;
|
|
|
+ display: inline-block;
|
|
|
+ transform: translate3d(0, 0, 0);
|
|
|
+ margin-top: 0.5em;
|
|
|
+ text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em;
|
|
|
+ font: normal 500 2rem 'Varela Round', sans-serif;
|
|
|
+}
|
|
|
+.letter:nth-child(1) {
|
|
|
+ animation-delay: 0s;
|
|
|
+}
|
|
|
+.letter:nth-child(2) {
|
|
|
+ animation-delay: 0.1s;
|
|
|
+}
|
|
|
+.letter:nth-child(3) {
|
|
|
+ animation-delay: 0.2s;
|
|
|
+}
|
|
|
+.letter:nth-child(4) {
|
|
|
+ animation-delay: 0.3s;
|
|
|
+}
|
|
|
+.letter:nth-child(5) {
|
|
|
+ animation-delay: 0.4s;
|
|
|
+}
|
|
|
+.letter:nth-child(6) {
|
|
|
+ animation-delay: 0.5s;
|
|
|
+}
|
|
|
+.letter:nth-child(7) {
|
|
|
+ animation-delay: 0.6s;
|
|
|
+}
|
|
|
+.letter:nth-child(8) {
|
|
|
+ animation-delay: 0.7s;
|
|
|
+}
|
|
|
+.letter:nth-child(9) {
|
|
|
+ animation-delay: 0.8s;
|
|
|
+}
|
|
|
+.letter:nth-child(10) {
|
|
|
+ animation-delay: 0.9s;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes bounce {
|
|
|
+ 0% {
|
|
|
+ transform: translate3d(0, 0, 0);
|
|
|
+ text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: translate3d(0, -1em, 0);
|
|
|
+ text-shadow: rgba(255, 255, 255, 0.4) 0 1em 0.35em;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|