Smart_platform_ui/src/page/login/index.vue

<template>
  <div class="login-container"
       :class="backgroundClass"
       ref="login"
       @keyup.enter.native="handleLogin">
    <top-color v-show="false"></top-color>
    <div class="login-weaper animated bounceInDown">
      <div class="login-left" :class="backgroundClass">
        <div class="login-time">
          {{time}}
        </div>
         <!--<img class="img" src="/img/logoTubao.png" alt="">-->
        <p class="title">
            {{ special === 1 ? '多多易车配管理平台' :$t('login.info') }}
        </p>
          <!--$t 国际化vue-i18n中英文切换 -->
      </div>
      <div class="login-border">
        <div class="login-main">
          <h4 class="login-title">
            {{ $t('login.title') }}
            <top-lang></top-lang>
          </h4>
          <userLogin v-if="activeName==='user'"></userLogin>
          <codeLogin v-else-if="activeName==='code'"></codeLogin>
          <thirdLogin v-else-if="activeName==='third'"></thirdLogin>
          <div class="login-menu">
            <a href="#" @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a>
            <!--<a href="#" @click.stop="activeName='code'">{{ $t('login.phoneLogin') }}</a>-->
            <a href="#" @click.stop="activeName='third'">{{ $t('login.thirdLogin') }}</a>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
  import userLogin from "./userlogin"; // 账号密码登录按钮
  import codeLogin from "./codelogin";  // 手机号登录按钮
  import thirdLogin from "./thirdlogin"; // 第三方登录按钮
  import {mapGetters} from "vuex";
  import {dateFormat} from "@/util/date";  // 处理日期格式
  import {validatenull} from "@/util/validate"; // 判断是否是空null
  import topLang from "@/page/index/top/top-lang"; // 左侧背景颜色版
  import topColor from "@/page/index/top/top-color"; // 中英文翻译组建
  import {getQueryString, getTopUrl} from "@/util/util";

  export default {
    name: "login",
    components: {
      userLogin,
      codeLogin,
      thirdLogin,
      topLang,
      topColor
    },
    data() {
      return {
        time: "",
        activeName: "user",
        socialForm: {
          tenantId: "000000",
          source: "",
          code: "",
          state: "",
        },
          special: 0
      };
    },
    watch: {
      $route() {
        this.handleLogin();
      }
    },
    created() {
      this.handleLogin();
      this.getTime();
    },
    mounted() {
    },
    computed: {
      ...mapGetters(["website", "tagWel"]),
        backgroundClass() {
            const domain = window.location.hostname.split('.')[0];
            if ('duoduo' === domain) {
                this.special = 1
                return `bg-${domain}`;
            }
            return 'bg-default';
        }
    },
    props: [],
    methods: {
      getTime() {
        setInterval(() => {
          this.time = dateFormat(new Date());
        }, 1000);
      },
      handleLogin() {
        const topUrl = getTopUrl();
        const redirectUrl = "/oauth/redirect/";
        this.socialForm.source = getQueryString("source");
        this.socialForm.code = getQueryString("code");
        this.socialForm.state = getQueryString("state");
          console.log(this.socialForm,'socialForm')
        if (validatenull(this.socialForm.source) && topUrl.includes(redirectUrl)) {
          let source = topUrl.split("?")[0];
          source = source.split(redirectUrl)[1];
          this.socialForm.source = source;
        }
        if (!validatenull(this.socialForm.source) && !validatenull(this.socialForm.code) && !validatenull(this.socialForm.state)) {
          const loading = this.$loading({
            lock: true,
            text: '第三方系统登录中,请稍后。。。',
            spinner: "el-icon-loading"
          });
          this.$store.dispatch("LoginBySocial", this.socialForm).then(() => {
            window.location.href = topUrl.split(redirectUrl)[0];
            this.$router.push({path: this.tagWel.value});
            loading.close();
          }).catch(() => {
            loading.close();
          });
        }
      }
    }
  };
</script>

<style lang="scss">
  @import "@/styles/login.scss";
</style>