cysci-website/src/views/login.vue

<template>
  <div id="login">
    <el-row>
      <el-col :span="24" class="main">
        <div class="w_1200">
          <el-col :span="24" class="one">
            <el-col :span="24" class="title">环南湖科创先导区双创服务平台</el-col>
            <el-col :span="24" class="info">
              <el-tabs v-model="activeName" :stretch="true">
                <el-tab-pane label="管理登录" name="first">
                  <el-col :span="24" class="form">
                    <el-form ref="form" :model="form">
                      <el-form-item>
                        <el-input v-model="form.phone" prefix-icon="el-icon-user-solid" maxlength="11" placeholder="请输入服务机构账号"></el-input>
                      </el-form-item>
                      <el-form-item>
                        <el-input v-model="form.passwd" prefix-icon="el-icon-lock" placeholder="请输入账号密码" show-password></el-input>
                      </el-form-item>
                      <el-col :span="24" class="btn">
                        <el-button type="danger" @click="resetBtn">取消登录</el-button>
                        <el-button type="primary" @click="thrSubmit">提交登录</el-button>
                      </el-col>
                    </el-form>
                  </el-col>
                </el-tab-pane>
                <el-tab-pane label="企业登录" name="second">
                  <el-col :span="24" class="form">
                    <el-form ref="form" :model="form">
                      <el-form-item>
                        <el-input v-model="form.phone" prefix-icon="el-icon-user-solid" placeholder="请输入企业账号"></el-input>
                      </el-form-item>
                      <el-form-item>
                        <el-input v-model="form.passwd" prefix-icon="el-icon-lock" placeholder="请输入账号密码" show-password></el-input>
                      </el-form-item>
                      <el-col :span="24" class="btn">
                        <el-button type="danger" @click="resetBtn">取消登录</el-button>
                        <el-button type="primary" @click="oneSubmit">提交登录</el-button>
                      </el-col>
                    </el-form>
                  </el-col>
                </el-tab-pane>
                <el-tab-pane label="机构登录" name="third">
                  <el-col :span="24" class="form">
                    <el-form ref="form" :model="form">
                      <el-form-item>
                        <el-input v-model="form.phone" prefix-icon="el-icon-user-solid" maxlength="11" placeholder="请输入中介机构账号"></el-input>
                      </el-form-item>
                      <el-form-item>
                        <el-input v-model="form.passwd" prefix-icon="el-icon-lock" placeholder="请输入账号密码" show-password></el-input>
                      </el-form-item>
                      <el-col :span="24" class="btn">
                        <el-button type="danger" @click="resetBtn">取消登录</el-button>
                        <el-button type="primary" @click="twoSubmit">提交登录</el-button>
                      </el-col>
                    </el-form>
                  </el-col>
                </el-tab-pane>
                <el-tab-pane label="专家登录" name="fourth">
                  <el-col :span="24" class="form">
                    <el-form ref="form" :model="form">
                      <el-form-item>
                        <el-input v-model="form.phone" prefix-icon="el-icon-user-solid" maxlength="11" placeholder="请输入专家账号"></el-input>
                      </el-form-item>
                      <el-form-item>
                        <el-input v-model="form.passwd" prefix-icon="el-icon-lock" placeholder="请输入账号密码" show-password></el-input>
                      </el-form-item>
                      <el-col :span="24" class="btn">
                        <el-button type="danger" @click="resetBtn">取消登录</el-button>
                        <el-button type="primary" @click="fourSubmit">提交登录</el-button>
                      </el-col>
                    </el-form>
                  </el-col>
                </el-tab-pane>
              </el-tabs>
            </el-col>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const _ = require('lodash');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: adminLogin } = createNamespacedHelpers('login');
const { mapActions: organization } = createNamespacedHelpers('organization');
const { mapActions: mechanism } = createNamespacedHelpers('mechanism');
const { mapActions: expertLogin } = createNamespacedHelpers('expert');
export default {
  name: 'login',
  props: {},
  components: {},
  data: function () {
    return {
      activeName: 'first',
      loginBj: require('@a/loginBj.jpg'),
      form: {},
      // // 管理登录
      // adminForm: {},
      // // 企业登录
      // form: {},
      // // 机构登录
      // interForm: {},
      // // 专家登录
      // expertForm: {},
    };
  },
  created() {},
  methods: {
    // 管理登录
    ...adminLogin({ adminLogin: 'login' }),
    // 企业
    ...organization(['login']),
    // 机构
    ...mechanism({ interLogin: 'login' }),
    // 专家
    ...expertLogin({ expertLogin: 'login' }),
    // 管理员
    async thrSubmit() {
      let data = _.get(this, 'form');
      data.code_phone = data.phone;
      const res = await this.adminLogin(data);
      if (this.$checkRes(res)) {
        this.$router.push({ path: '/adminCenter/homeIndex' });
      }
    },
    // 企业
    async oneSubmit() {
      let data = _.get(this, 'form');
      data.institution_code = data.phone;
      const res = await this.login(data);
      if (this.$checkRes(res)) {
        this.$router.push({ path: '/adminCenter/homeIndex' });
      }
    },
    // 中介
    async twoSubmit() {
      let data = _.get(this, 'form');
      const res = await this.interLogin(data);
      if (this.$checkRes(res)) {
        this.$router.push({ path: '/adminCenter/homeIndex' });
      }
    },
    // 专家
    async fourSubmit() {
      let data = _.get(this, 'form');
      const res = await this.expertLogin(data);
      if (this.$checkRes(res)) {
        this.$router.push({ path: '/adminCenter/homeIndex' });
      }
    },
    resetBtn() {
      this.$router.push({ path: '/' });
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  background: url('~@/assets/loginBj.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 100vh;
  .one {
    padding: 6% 26%;
    .title {
      text-align: center;
      font-size: 35px;
      font-weight: bold;
      font-family: cursive;
      padding: 60px 0;
      color: #fff;
    }
    .info {
      height: 400px;
      padding: 30px 50px;
      border-radius: 5px;
      box-shadow: 0 0 5px #f1f1f1;
      background-color: #ffffff5f;
      .form {
        margin: 20px 0 0 0;
        .btn {
          text-align: center;
          margin: 15px 0 0 0;
        }
      }

      /deep/.el-tabs__item {
        font-weight: bold;
        font-size: 18px;
        height: 60px;
        line-height: 60px;
      }
    }
  }
}
</style>