dvcp_v2_webapp/project/xumu/sign/AppSign.vue

<template>
  <section class="AppSign">
    <div class="left signLeftBg">
      <el-row type="flex" align="middle">
        <img class="AiIcon" v-if="/[\\\/]/.test(logo.icon)" :src="logo.icon" alt="" />
        <ai-icon v-else type="logo" :icon="logo.icon" />
        <div v-if="logo.text" class="logoText mar-l8" v-text="logo.text" />
      </el-row>
      <div class="signLeftContent">
        <div class="titlePane">
          <b v-text="system.name" />
          <div v-text="system.title" />
        </div>
        <div class="subTitle" v-for="(t, i) in subTitles" :key="i" v-html="t" />
      </div>
    </div>
    <div class="right">
      <div class="projectName mar-b48" :title="system.fullTitle">{{ system.fullTitle }}</div>
      <ai-sign isSignIn @login="login" :instance="instance" visible
        :showScanLogin="system.edition == 'standard' || !system.edition" />
      <el-row type="flex" align="middle" class="bottomRecord">
        <div v-if="system.recordDesc" v-text="system.recordDesc" />
        <el-link v-if="system.recordNo" v-text="system.recordNo" :href="system.recordURL" />
        <div v-if="system.ssl" v-html="system.ssl" />
      </el-row>
    </div>
  </section>
</template>

<script>
import { mapMutations, mapState } from 'vuex'

export default {
  name: "AppSign",
  computed: {
    ...mapState(['user', 'sys']),
    instance: v => v.$request,
    system: v => v.sys?.info || {
      fullTitle: '武汉中卫慧通科技有限公司'
    },
    subTitles() {
      let list = [
        "构建全域数字大脑，助力政府科学决策",
        "全域统一应用入口，移动办公高效协同",
        "直接触达居民微信，政民互动“零距离”"
      ]
      return (typeof this.system.desc == "object" ? this.system.desc : JSON.parse(this.system.desc || null)) || list
    },
    logo: v => !!v.system.loginLogo ? { icon: v.system.loginLogo, text: v.system.loginLogoText } : { icon: v.system.logo, text: v.system.logoText },
    isDev: () => process.env.NODE_ENV == "development",
    isAdmin: v => v.$route.hash == "#sinoecare" //用来判断是否是管理员登录
  },
  created() {
    if (this.user.token) {
      this.handleGotoHome()
    } else {
      const { code } = this.$route.query
      if (code) {
        this.toLogin(code)
      }
    }
  },
  methods: {
    ...mapMutations(['setToken']),
    login(data) {
      if (data?.access_token) {
        this.setToken([data.token_type, data.access_token].join(" "))
        this.handleGotoHome()
      }
    },
    handleGotoHome() {
      this.$message.success("登录成功!")
      if (this.$route.hash == "#dv") {
        this.$router.push({ name: "数据大屏入口", hash: "#dv" })
      } else {
        this.$router.push({ name: "Home" })
      }
    },
    toLogin(code) {
      this.instance.post(`/auth/wechatcp-qr/token`, {
        code: code,
        type: 'cpuser'
      }, {
        auth: {
          username: 'villcloud',
          password: "villcloud"
        },
        params: {
          grant_type: 'password',
          scope: 'server'
        }
      }).then(this.login)
    },
  },
}
</script>

<style lang="scss" scoped>
.AppSign {
  display: flex;
  box-sizing: border-box;
  height: 100%;

  .AiIcon {
    font-size: 40px;
    height: 40px;
  }

  .logoText {
    font-size: 20px;
  }

  :deep(.left) {
    width: 480px;
    flex-shrink: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-left: 64px;
    padding-top: 40px;
    box-sizing: border-box;
    color: #fff;
    font-size: 16px;

    .iconcunwei1 {
      font-size: 36px;
    }
  }

  :deep(.right) {
    flex: 1;
    min-width: 0;
    background-color: #F6F8FB;
    background-image: url("../assets/loginRightTop.png"), url("../assets/loginRightBottom.png");
    background-repeat: no-repeat;
    background-position: calc(100% - 80px) 0, calc(100% - 40px) 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .bottomRecord {
      font-size: 12px;
      color: #999;
      gap: 16px;
      position: fixed;
      bottom: 20px;

      .el-link {
        font-size: inherit;
      }
    }
  }

}
</style>