|
|
@@ -0,0 +1,100 @@
|
|
|
+<template>
|
|
|
+ <div class="login">
|
|
|
+ <div>
|
|
|
+ <div class="avatar-box">
|
|
|
+ <van-loading text-color="#0094ff" v-if="loading">正在跳转</van-loading>
|
|
|
+ <span style="color: red" v-if="type == 'error'">{{ message }}</span>
|
|
|
+ <span style="color: #E6A23C" v-if="type == 'warn'">{{ message }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// 请求接口
|
|
|
+import { tokenLogin } from '@/api/public.js'
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ type: '',
|
|
|
+ message: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['userName'])
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.loading = true
|
|
|
+ let { query } = this.$route;
|
|
|
+ if (!query) {
|
|
|
+ this.loading = false
|
|
|
+ this.type = 'error'
|
|
|
+ this.message = '缺少token'
|
|
|
+ } else {
|
|
|
+ let { token } = query
|
|
|
+ if (!token) {
|
|
|
+ this.type = 'warn'
|
|
|
+ this.loading = false
|
|
|
+ this.message = '缺少token'
|
|
|
+ } else {
|
|
|
+ tokenLogin(token)
|
|
|
+ .then(res => {
|
|
|
+ console.log(res, 'res')
|
|
|
+ sessionStorage.setItem('access_token',res.data.access_token);
|
|
|
+ this.$router.replace('/home');
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ this.type = 'error'
|
|
|
+ this.message = '请求错误'
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {}
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+//.van-cell__title{
|
|
|
+// align-items: center;
|
|
|
+//}
|
|
|
+//.custom-title{
|
|
|
+// align-self: center;
|
|
|
+//}
|
|
|
+</style>
|
|
|
+<style scoped lang="scss">
|
|
|
+.login {
|
|
|
+ height: 100vh;
|
|
|
+ background: url('../assets/img/login-background.png') top left no-repeat #edfcff;
|
|
|
+ background-size: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ > div {
|
|
|
+ width: 450px;
|
|
|
+ padding: 30px 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ .avatar-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 150px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ h2 {
|
|
|
+ letter-spacing: 10px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .custom-title {
|
|
|
+ align-self: center;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|