dvcp_v2_webapp/project/xumu/AppSign/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-if="logo.icon" 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>
    </div>
    <div class="right">
      <div class="projectName mar-b48" :title="system.fullTitle">{{ system.fullTitle }}</div>
      <el-card class="signBox">
        <div class="choosePlatform flex column" v-if="!isAdmin&&!form.type">
          <div class="font-20 mar-b40 t-center t-bold">请选择业务端后登陆</div>
          <div class="selectPlatform fill">
            <div class="flex center pointer" v-for="op in platforms" :key="op.dictValue"
                 v-text="op.dictName" @click="$set(form,'type',op.dictValue)"/>
          </div>
          <div class="mar-t32 font-12" style="align-self: flex-end">
            未注册用户请扫码添加客服咨询
            <i class="iconfont iconEwm" style="font-size: 20px"/>
          </div>
        </div>
        <template v-else>
          <div class="font-20 mar-b40 t-center t-bold"><i v-if="!isAdmin" class="el-icon-back" @click="form.type=null"/>账号登录</div>
          <el-form :model="form" ref="form" :rules="rules">
            <el-form-item prop="username">
              <el-input v-model="form.username" placeholder="请输入您的账号"/>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" v-model="form.password" placeholder="请输入您的密码" show-password/>
            </el-form-item>
          </el-form>
          <div class="t-right font-12">忘记密码请联系客服处理</div>
          <el-button type="primary" class="login-btn" @click="handleSignIn">登录</el-button>
        </template>
      </el-card>
      <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'

const rules = {
  username: [{required: true, message: '请输入您的账号', trigger: 'blur'}],
  password: [{required: true, message: '请输入您的密码', trigger: 'blur'}]
}

export default {
  name: "AppSign",
  label: "登录页",
  data() {
    return {
      rules,
      form: {}
    }
  },
  computed: {
    ...mapState(['user', 'sys']),
    instance: v => v.$request,
    system: v => v.sys?.info || {
      fullTitle: '畜牧养殖产业一体化平台'
    },
    logo: v => !!v.system.loginLogo ? {icon: v.system.loginLogo, text: v.system.loginLogoText} : {icon: v.system.logo, text: v.system.logoText},
    isAdmin: v => v.$route.hash == "#sinoecare", //用来判断是否是管理员登录,
    dict: v => v.$dict,
    platforms: v => v.dict.getDict('roleType').filter(e => !['platform', 'other', 'service'].includes(e.dictValue))
  },
  created() {
    this.dict.load("roleType")
    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"})
      }
    },
    handleSignIn() {
      this.$refs.form.validate().then(() => {
        const password = this.$encryption(this.form.password)
        this.form.type = this.form.type || "platform"
        this.$request.post("/oauth/token", null, {
          auth: {username: 'villcloud', password: "villcloud"},
          params: {grant_type: 'password', scope: 'server', ...this.form, password}
        }).then(data => {
          this.login(data)
        })
      })
    }
  },
}
</script>

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


  .selectPlatform {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;

    & > div {
      color: #fff;
      background: $primaryBtnColor;
      border-radius: 4px;

      &:hover {
        opacity: 0.8;
      }
    }
  }

  .signBox {
    width: 500px;
    min-height: 300px;
    position: relative;
    color: $primaryColor;

    .choosePlatform {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: inherit;
    }

    .el-icon-back {
      position: absolute;
      left: 20px;
      top: 25px;
    }

    .login-btn {
      font-size: 16px;
      width: 100%;
      height: 40px;
      line-height: 40px;
      margin: 16px auto;
      padding: 0;
    }
  }

  .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-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>