web-question/src/views/Login.vue

<template>
  <div id="Login">
    <el-row>
      <el-col :span="24" class="main" :style="{ height: clientHeight + 'px' }">
        <div class="w_1200">
          <el-row :gutter="20">
            <el-col :span="10" :offset="6" class="info">
              <el-col :span="24" class="text">
                成果评价系统
              </el-col>
              <el-col :span="24" class="tabs">
                <el-tabs v-model="active" type="card">
                  <el-tab-pane label="个人用户" name="first">
                    <el-col :span="24" class="two">
                      <el-form :model="webForm" :rules="rules" ref="webForm" label-width="100px">
                        <el-form-item label="账号" prop="phone">
                          <el-input v-model="webForm.phone" placeholder="请输入账号"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                          <el-input v-model="webForm.password" placeholder="请输入密码" show-password></el-input>
                        </el-form-item>
                        <el-col :span="24" class="btn">
                          <el-button type="primary" @click="webLogin('webForm')">确认登录</el-button>
                        </el-col>
                      </el-form>
                    </el-col>
                  </el-tab-pane>
                  <el-tab-pane label="管理用户" name="second">
                    <el-col :span="24" class="two">
                      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
                        <el-form-item label="手机号" prop="code_phone">
                          <el-input v-model="form.code_phone" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="passwd">
                          <el-input v-model="form.passwd" placeholder="请输入密码" show-password></el-input>
                        </el-form-item>
                        <el-col :span="24" class="btn">
                          <el-button type="primary" @click="adminLogin('form')">确认登录</el-button>
                        </el-col>
                      </el-form>
                    </el-col>
                  </el-tab-pane>
                  <el-tab-pane label="专家用户" name="third">
                    <el-col :span="24" class="two">
                      <el-form :model="expert" ref="expert" label-width="100px">
                        <el-form-item label="手机号" prop="phone">
                          <el-input v-model="expert.phone" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="passwd">
                          <el-input v-model="expert.password" placeholder="请输入密码" show-password></el-input>
                        </el-form-item>
                        <el-col :span="24" class="btn">
                          <el-button type="primary" @click="toExpertLogin('form')">确认登录</el-button>
                        </el-col>
                      </el-form>
                    </el-col>
                  </el-tab-pane>
                </el-tabs>
              </el-col>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const _ = require('lodash');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: adminLogin } = createNamespacedHelpers('adminLogin');
const { mapActions: personal } = createNamespacedHelpers('personal');
const { mapActions: organization } = createNamespacedHelpers('organization');
const { mapActions: achieveExpert } = createNamespacedHelpers('achieveExpert');
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'Login',
  props: {},
  components: {},
  data: function() {
    return {
      // 页面高度
      clientHeight: '',
      active: 'first',
      // 个人登录
      webForm: {},
      // 管理登录
      form: {},
      rules: {
        code_phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        passwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        type: [{ required: true, message: '请选择用户类别', trigger: 'change' }],
      },
      // 专家登陆
      expert: {},
    };
  },
  created() {},
  methods: {
    ...personal(['perLogin']),
    ...organization(['orgLogin']),
    ...adminLogin(['login']),
    ...achieveExpert({ expertLogin: 'login' }),
    // 个人登录
    webLogin(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          let data = this.webForm;
          data.type = '4';
          if (data.type == '4') {
            let res = await this.perLogin({ user: data });
            if (this.$checkRes(res)) {
              this.$message.success('登录成功');
              this.$router.push('/homeIndex');
            }
          } else if (data.type == '5') {
            data.institution_code = data.phone;
            let res = await this.orgLogin({ user: data });
            if (this.$checkRes(res)) {
              this.$message.success('登录成功');
              this.$router.push('/homeIndex');
            }
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 管理登录
    adminLogin(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          let res = await this.login({ user: this.form });
          if (this.$checkRes(res)) {
            this.$message.success('登录成功');
            this.$router.push('/homeIndex');
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 专家登陆
    async toExpertLogin() {
      let dup = _.cloneDeep(this.expert);
      const res = await this.expertLogin(dup);
      if (this.$checkRes(res)) {
        this.$message.success('登录成功');
        this.$router.push('/homeIndex');
      }
    },
  },
  mounted() {
    let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    this.$set(this, `clientHeight`, clientHeight);
  },
  computed: {
    ...mapState(['user']),
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
.main {
  background-image: url(../assets/img/login-bg.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: auto;
  .info {
    height: 430px;
    box-shadow: 0 0 5px #ccc;
    position: relative;
    top: 150px;
    background-color: #ffffff9f;
    border-radius: 10px;
    .text {
      text-align: center;
      font-size: 20px;
      padding: 20px 0;
      font-weight: bold;
      border-bottom: 1px solid #000;
      margin: 0 0 15px 0;
    }
    .tabs {
      padding: 0 !important;
      /deep/.el-tabs__item {
        width: 162px;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
      }
      .btn {
        text-align: center;
      }
      .two {
        padding: 30px 0px !important;
      }
    }
  }
}
</style>