gdy_qywx_pc/src/views/login/create_company.vue

<template>
  <div class="create-company-container">
    <div class="login_logo">
      <a href="#" target="_self" title="功道云-积分系统用户登录"><img src="static/images/login-logo.png" /></a>
    </div>

    <div class="login_box">
      <div class="login_ad">
        <img src="static/images/login_adpic.png" />
        <span>广告语</span>
      </div>

      <div class="login_choose">
        <div class="reg_title" v-if="optionType == 0">
          <div class="title">欢迎注册功道云</div>
          <span>公司统一开设账号，员工无需注册</span>
        </div>

        <div class="reg_title" v-if="optionType == 1" style="margin-top: 120px;">
          <div class="title">创建新企业</div>
          <span>备注</span>
        </div>

        <div class="option-box">
          <el-scrollbar wrap-class="column-wrapper scrollable-items-container" :native="false" style="height: 500px;">
            <div class="select_box" v-show="optionType == 0">
              <h4 class="select">选择身份</h4>
              <div>
                <el-radio v-model="role" label="1" border>老板</el-radio>
                <el-radio v-model="role" label="2" border>主管</el-radio>
                <el-radio v-model="role" label="3" border>经理</el-radio>
                <el-radio v-model="role" label="4" border>员工</el-radio>
              </div>

              <h4 class="select">选择行业</h4>
              <div>
                <el-radio v-model="industry" label="1" border>教育培训</el-radio>
                <el-radio v-model="industry" label="2" border>金融投资</el-radio>
                <el-radio v-model="industry" label="3" border>生产制造</el-radio>
                <el-radio v-model="industry" label="4" border>酒店服务</el-radio>
                <el-radio v-model="industry" label="5" border>广告</el-radio>
                <el-radio v-model="industry" label="6" border>互联网</el-radio>
                <el-radio v-model="industry" label="7" border>其他</el-radio>
              </div>

              <div class="btn-box"><el-button type="primary" size="large" @click="loginDemo">立即体验</el-button></div>

              <div class="btn-box"><el-button class="border-dis" type="default" size="large" @click="optionType = 1">创建企业</el-button></div>
            </div>
            <div class="padding20" v-show="optionType == 0 && site_list.length > 0">
              <el-card class="box-card">
                <div slot="header" class="clearfix"><span>进入已有企业</span></div>
                <div v-for="o in site_list" class="companyList" @click="companyLogin(o.site.id)">{{ o.site.name }}</div>
              </el-card>
            </div>

            <div class="set_create_company" v-show="optionType == 1">
              <!--<el-button type="defalut" icon="el-icon-arrow-left" @click="optionType=0">返回</el-button>-->
              <el-form :model="createCompanyForm" status-icon :rules="rules" label-width="100px" class="createCompanyForm">
                <el-form-item prop="name"><el-input type="text" v-model="createCompanyForm.name" placeholder="请填写真实企业名称" clearable></el-input></el-form-item>
                <el-form-item prop="scale"><el-input type="text" v-model="createCompanyForm.scale" placeholder="请填写企业员工数量" clearable></el-input></el-form-item>
                <!--<el-form-item prop="industry">-->
                <!--<el-input type="text" v-model="createCompanyForm.industry" placeholder="请填写真实企业名称" clearable></el-input>-->
                <!--</el-form-item>-->
                <el-form-item><el-button class="create_button" type="primary" @click="createCompany">进入企业</el-button></el-form-item>
              </el-form>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { setToken } from '@/utils/auth';
import request from '@/utils/request-user';
export default {
  data() {
    return {
      login_icon_show: false,
      createCompanyForm: {
        name: '',
        scale: '',
        industry: '',
        address: 'dfdfdfdfdf',
        tel: '',
        contacts: '',
        logo_url: ''
      },
      optionType: 0,
      role: '1',
      industry: '1',

      token: localStorage.getItem('user_token_temp'),
      site_list: JSON.parse(localStorage.getItem('site_list_temp')),
      rules: {
        name: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        scale: [{ required: true, message: '请选择企业规模', trigger: 'blur' }]
      }
    };
  },
  methods: {
    createCompany() {
      request({
        url: '/api/site/create',
        data: this.createCompanyForm,
        method: 'post'
      }).then(res => {
        this.companyLogin(res.data.data.id);
      });
    },
    companyLogin(site_id) {
      let self = this;
      request({
        url: '/api/employee-login',
        method: 'post',
        data: { site_id: site_id }
      }).then(res => {
        if (res.data.code == 1) {
          setToken(res.data.data.token);
          self.$router.push({ path: '/' });
        } else {
          self.$message.error(res.data.data.msg);
        }
      });
    },
    loginDemo() {
      let self = this;
      this.$store
        .dispatch('loginByDemo')
        .then(ret => {
          this.loading = false;
          if (ret.code == 1) {
            this.$router.push({ path: '/' });
          }
          if (ret.status == 2) {
          }
        })
        .catch(e => {
          self.$message({
            message: e,
            type: 'error'
          });
        });
    }
  },
  created() {},
  destroyed() {}
};
</script>

<style rel="stylesheet/css" lang="css" scoped>

.create-company-container{
  position:relative;
  width:100vw;
  height:100vh;
  overflow:auto;
  cursor: default;
}

.create-company-container .login_logo{
  position:relative;
  width:100%;
  max-width:1100px;
  margin:28px auto 48px;
  overflow:hidden;
}
.create-company-container .login_logo img{
  width:128px;
  height:auto;
}
.create-company-container .login_box{
  position:relative;
  display:block;
  top:0;
  width:100%;
  height:614px;
  max-width:1100px;
  margin:0 auto;
  box-shadow:0px 4px 22px #efefef;
}
.create-company-container .login_box .login_ad{
  position:relative;
  display:inline-block;
  text-align: center;
  width:518px;
  height:614px;
  float:left;
  background:url(static/images/login_bg.jpg) no-repeat;
  background-size:cover;
  overflow:hidden;
}
.create-company-container .login_box .login_ad img{
  width:460px;
  margin:108px auto 60px;
  height:228px;
}
.create-company-container .login_box .login_ad span{
  font-family:"Microsoft YaHei";
  display:block;
  text-align: center;
  font-size:32px;
  letter-spacing: 2px;
  font-weight:bold;
  color:#fff;
}
.create-company-container .login_box .login_choose{
  position: relative;
  display: inline-block;
  text-align: center;
  width: 582px;
  padding:0 68px;
  height: 614px;
  float: right;
  background: #FFF;
  overflow: hidden;
}
.create-company-container .login_box .login_choose .reg_title{
  margin:48px auto;
  text-align: center;
}
.create-company-container .login_box .login_choose .reg_title .title{
  color:#303133;
  font-size:24px;
  line-height: 38px;
}
.create-company-container .login_box .login_choose .reg_title span{
  color:#909399;
  font-size:16px;
  line-height: 22px;
}
.create-company-container .login_box .login_choose .select_box{
  display:block;
  text-align: left;
}
.create-company-container .login_box .login_choose .select_box .select{
  display: inline-block;
  text-align: left;
  font-size:18px;
  color:#606266;
  margin:0 0 16px;
}
.create-company-container .login_box .login_choose .select_box /deep/ .el-radio{
  display: inline-block;
  text-align: center;
  width:23%;
  height: 46px;
  line-height: 44px;
  padding:0;
  margin:0 0.5% 16px;
}
.create-company-container .login_box .login_choose .select_box /deep/ .el-radio .el-radio__inner{
  width:100%;
  color:#909399;
  padding:0;
  border:none;
}
.create-company-container .login_box .login_choose .select_box /deep/ .el-radio .el-radio__label{
  padding-left: 0;
}
.create-company-container .login_box /deep/ .btn-box{
  display: inline-block;
  width: 100%;
  margin:16px auto 0;
  text-align: center;
}

.create-company-container .login_box /deep/ .btn-box button {
  width:360px;
  height: 56px;
  border-radius: 8px;
}
.create-company-container .login_box /deep/ .btn-box .border-dis{
  border:none;
  color:#409EFF;
}
.create-company-container .login_box .login_choose .set_create_company {
  display:block;
  margin:0px auto 24px;
  padding:0 42px;
  border:none;
}
.create-company-container .login_box .login_choose .set_create_company /deep/ .el-form-item{
  margin-bottom:24px !important;
  border-bottom:1px #efefef solid;
}
.create-company-container .login_box .login_choose .set_create_company /deep/ .el-form-item__content{
  padding:0;
  margin-left: 0 !important;
}
.create-company-container .login_box .login_choose .set_create_company /deep/ .el-form-item .el-input__inner{
  text-align: left;
  font-size:18px;
  color:#909399;
  padding:0;
  border:none;
}
.create-company-container .login_box .login_choose .set_create_company .create_button{
  width:360px;
  height:56px;
  margin:32px auto 0;
  background: #26A2FF;
  border-radius:8px;
}
.create-company-container .login_box .login_choose .set_create_company .create_button:hover{
  background: #26A2FF;
  opacity: 0.8;
}
.create-company-container .login_box .login_choose .set_create_company .create_button:active{
  background: #26A2FF;
  opacity: 0.8;
}
.create-company-container .login_box .login_choose .set_create_company .create_button span{
  font-size:18px;
  color:#fff;
  line-height: 54px;
}
.create-company-container .login_box .login_choose .set_create_company /deep/ input::-webkit-input-placeholder{
  color:#909399;
  letter-spacing: 1px;
}
.create-company-container .login_box .login_choose .set_create_company /deep/ input:focus::-webkit-input-placeholder{
  color:#409EFF;
}
</style>