web-test/src/layout/login/webLogin.vue

<template>
  <div id="webLogin">
    <el-row class="loginMains">
      <el-col :span="24" class="top">
        <el-col :span="6" class="info"></el-col>
        <el-col :span="12" class="context">
          <el-tabs v-model="activeName">
            <el-tab-pane label="个人登录" name="first">
              <el-col :span="24">
                <el-form ref="form" :model="form" label-width="120px">
                  <el-form-item
                    label="手机号"
                    prop="phone"
                    :rules="[
                      { required: true, message: '手机号不能为空' },
                      { type: 'number', message: '手机号必须为数字值' },
                    ]"
                  >
                    <el-input type="phone" v-model.number="form.phone" autocomplete="off" placeholder="请输入手机号" :minlength="11" :maxlength="11"></el-input>
                  </el-form-item>
                  <el-form-item label="登录密码">
                    <el-input v-model="form.passwd" placeholder="请输入登录密码" show-password></el-input>
                  </el-form-item>
                  <el-form-item label="用户类别">
                    <el-radio-group v-model="form.role">
                      <!-- <el-radio label="7">游客用户</el-radio> -->
                      <el-radio label="4">个人用户</el-radio>
                      <el-radio label="5">机构用户</el-radio>
                      <el-radio label="6">专家用户</el-radio>
                      <el-radio label="2">VIP用户</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-col :span="24" class="loginSubmit"><el-button type="primary" @click="loginSubmit">登录</el-button></el-col>
                </el-form>
              </el-col>
            </el-tab-pane>
            <el-tab-pane label="注册" name="third">
              <el-col :span="24">
                <el-form ref="forms" :model="forms" :rules="rules" label-width="140px">
                  <el-form-item label="用户名称" prop="name">
                    <el-input v-model="forms.name" placeholder="请输入用户名称"></el-input>
                  </el-form-item>
                  <el-form-item label="手机号" prop="phone">
                    <el-input v-model="forms.phone" placeholder="请输入手机号" :minlength="11" :maxlength="11"></el-input>
                  </el-form-item>
                  <el-form-item label="登录密码" prop="password">
                    <el-input v-model="forms.password" placeholder="请输入登录密码" show-password></el-input>
                  </el-form-item>
                  <el-form-item label="机构代码或邀请码" prop="code" class="cs">
                    <el-input v-model="forms.code" placeholder="请输入邀请码"></el-input>
                  </el-form-item>
                  <el-form-item label="用户类别" prop="role">
                    <el-radio-group v-model="forms.role">
                      <el-radio label="4">个人</el-radio>
                      <el-radio label="5">机构管理员</el-radio>
                      <el-radio label="6">专家</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <span v-if="forms.role == '4' || forms.role == '5'">
                    <el-form-item label="身份证号" prop="cardnumber">
                      <el-input v-model="forms.cardnumber" placeholder="请输入身份证号" :minlength="18" :maxlength="18"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                      <el-input v-model="forms.email" placeholder="请输入邮箱"></el-input>
                    </el-form-item>
                    <el-form-item label="地址" prop="addr">
                      <el-input v-model="forms.addr" placeholder="请输入地址"></el-input>
                    </el-form-item>
                    <el-form-item label="头像图片" prop="img_path">
                      <upload :limit="1" :data="forms.img_path" type="img_path" :url="'/files/imgpath/upload'" @upload="uploadSuccess"></upload>
                    </el-form-item>
                    <el-form-item label="身份证正面" prop="cardfile_a">
                      <upload :limit="1" :data="forms.cardfile_a" type="cardfile_a" :url="'/files/cardfilea/upload'" @upload="uploadSuccess"></upload>
                    </el-form-item>
                    <el-form-item label="身份证背面" prop="cardfile_b">
                      <upload :limit="1" :data="forms.cardfile_b" type="cardfile_b" :url="'/files/cardfileb/upload'" @upload="uploadSuccess"></upload>
                    </el-form-item>
                    <el-form-item label="办公电话" prop="office_phone">
                      <el-input v-model="forms.office_phone" placeholder="请输入办公电话"></el-input>
                    </el-form-item>
                    <el-form-item label="所属行业" prop="profession">
                      <el-input v-model="forms.profession" placeholder="请输入所属行业"></el-input>
                    </el-form-item>
                  </span>
                  <span v-if="forms.role == '4'">
                    <el-form-item label="个人简历" v-if="forms.role == '4'">
                      <el-input type="textarea" v-model="forms.resume" placeholder="请输入个人简介"></el-input>
                    </el-form-item>
                  </span>
                  <span v-else-if="forms.role == '5'">
                    <el-form-item label="组织机构图片" v-if="forms.role == '5'" prop="img_qy">
                      <upload :limit="1" :data="forms.img_qy" type="img_qy" :url="'/files/imgqy/upload'" @upload="uploadSuccess"></upload>
                    </el-form-item>
                    <el-form-item label="机构类型" prop="institution_type">
                      <el-input v-model="forms.institution_type" placeholder="请输入机构类型"></el-input>
                    </el-form-item>
                    <el-form-item label="机构名称" prop="institution_name">
                      <el-input v-model="forms.institution_name" placeholder="请输入机构名称"></el-input>
                    </el-form-item>
                    <el-form-item label="机构代码" prop="institution_code">
                      <el-input v-model="forms.institution_code" placeholder="请输入机构代码"></el-input>
                    </el-form-item>
                    <el-form-item label="机构性质" prop="institution_nature">
                      <el-input v-model="forms.institution_nature" placeholder="请输入机构性质"></el-input>
                    </el-form-item>
                  </span>
                  <span v-else-if="forms.role == '6'">
                    <el-form-item label="头像">
                      <upload :limit="1" :data="forms.expertimage" type="expertimage" :url="'/files/imgpath/upload'" @upload="uploadSuccess"></upload>
                    </el-form-item>
                    <el-form-item label="最高学历">
                      <el-input v-model="forms.education" placeholder="请输入最高学历"></el-input>
                    </el-form-item>
                    <el-form-item label="毕业院校">
                      <el-input v-model="forms.school" placeholder="请输入毕业院校"></el-input>
                    </el-form-item>
                    <el-form-item label="出生日期">
                      <el-date-picker v-model="forms.birthDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"> </el-date-picker>
                    </el-form-item>
                    <el-form-item label="QQ/微信">
                      <el-input v-model="forms.qqwx" placeholder="请输入QQ/微信"></el-input>
                    </el-form-item>
                    <el-form-item label="电子邮箱">
                      <el-input v-model="forms.email" placeholder="请输入电子邮箱"></el-input>
                    </el-form-item>
                    <el-form-item label="工作单位">
                      <el-input v-model="forms.company" placeholder="请输入工作单位"></el-input>
                    </el-form-item>
                    <el-form-item label="职务职称">
                      <el-input v-model="forms.zwzc" placeholder="请输入职务职称"></el-input>
                    </el-form-item>
                    <el-form-item label="擅长领域">
                      <el-input v-model="forms.expertise" placeholder="请输入擅长领域"></el-input>
                    </el-form-item>
                    <el-form-item label="工作经历">
                      <el-input
                        v-model="forms.workexperience"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 2, maxRows: 5 }"
                        placeholder="请输入工作经历"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="科研综述">
                      <el-input
                        v-model="forms.scientific"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 2, maxRows: 5 }"
                        placeholder="请输入科研综述"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="承担项目">
                      <el-input
                        v-model="forms.undertakingproject"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 2, maxRows: 5 }"
                        placeholder="请输入承担项目"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="科技奖励">
                      <el-input
                        v-model="forms.scienceaward"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 2, maxRows: 5 }"
                        placeholder="请输入科技奖励"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="社会任职">
                      <el-input
                        v-model="forms.social"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 2, maxRows: 5 }"
                        placeholder="请输入社会任职"
                      ></el-input>
                    </el-form-item>
                  </span>
                  <el-col :span="24" class="loginSubmit"><el-button type="primary" @click="registerSubmit('forms')">注册</el-button></el-col>
                </el-form>
              </el-col>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="6" class="info"></el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import upload from '@/components/uploadone.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'webLogin',
  props: {
    form: null,
    forms: null,
  },
  components: {
    upload,
  },
  data: function() {
    return {
      activeName: 'first',
      rules: {
        name: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        code: [
          { required: true, message: '请输入邀请码', trigger: 'blur' },
          // { type: 'number', message: '年龄必须为数字值' },
        ],
        // cardnumber: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
        // email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
        // addr: [{ required: true, message: '请输入地址', trigger: 'blur' }],
        // img_path: [{ required: true, message: '请输入头像', trigger: 'blur' }],
        // role: [{ required: true, message: '请输入用户类型', trigger: 'blur' }],
        // cardfile_a: [{ required: false, message: '请输入身份证正面', trigger: 'blur' }],
        // cardfile_b: [{ required: false, message: '请输入身份证反面', trigger: 'blur' }],
        // img_qy: [{ required: false, message: '请输入组织机构图片', trigger: 'blur' }],
        // institution_type: [{ required: false, message: '请输入机构类型', trigger: 'blur' }],
        // institution_name: [{ required: false, message: '请输入机构名称', trigger: 'blur' }],
        // institution_code: [{ required: false, message: '请输入机构代码', trigger: 'blur' }],
        // institution_nature: [{ required: false, message: '请输入机构性质', trigger: 'blur' }],
        // office_phone: [{ required: false, message: '请输入办公电话', trigger: 'blur' }],
        // profession: [{ required: false, message: '请输入从事专业', trigger: 'blur' }],
        // gender: [{ required: false, message: '请输入性别', trigger: 'blur' }],
        // birthday: [{ required: false, message: '请输入出生日期', trigger: 'blur' }],
        // level: [{ required: false, message: '请输入职称级别', trigger: 'blur' }],
        // levelname: [{ required: false, message: '请输入职称级别', trigger: 'blur' }],
        // position: [{ required: false, message: '请输入职务', trigger: 'blur' }],
        // school: [{ required: false, message: '请输入院校', trigger: 'blur' }],
        // xl: [{ required: false, message: '请输入学历', trigger: 'blur' }],
        // xw: [{ required: false, message: '请输入学位', trigger: 'blur' }],
        // major: [{ required: false, message: '请输入专业', trigger: 'blur' }],
        // professional: [{ required: false, message: '请输入从事专业', trigger: 'blur' }],
        // resume: [{ required: false, message: '请输入个人简介', trigger: 'blur' }],
        // project: [{ required: false, message: '请输入项目', trigger: 'blur' }],
        // academic: [{ required: false, message: '请输入学术成就', trigger: 'blur' }],
        // paper: [{ required: false, message: '请输入论文', trigger: 'blur' }],
        // remark: [{ required: false, message: '请输入备注', trigger: 'blur' }],
      },
    };
  },
  created() {},
  methods: {
    // 用户登录
    loginSubmit() {
      this.$emit('submitDate', this.form);
    },
    // 注册
    registerSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$emit('submitDates', { data: this.forms, id: this.forms.id });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 图片上传
    uploadSuccess({ type, data }) {
      this.$set(this.forms, `${type}`, data.uri);
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.loginMains {
  min-height: 800px;
  padding: 10px 0;
  background-color: #fff;
}
.top {
  width: 100%;
  padding: 20px;
  overflow: hidden;
  box-shadow: 0 0 10px #2d64b3;
  background: #ffffff;
}
.info {
  // width: 25%;
  height: 800px;
}
/deep/.el-tabs__header {
  margin: 0;
}
/deep/.el-tabs__nav-wrap::after {
  background-color: transparent;
}
/deep/.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 50px;
}
/deep/.el-tabs--top .el-tabs__item.is-top:last-child {
  padding-right: 50px;
}
/deep/.el-tabs__active-bar {
  background-color: transparent;
}
/deep/.el-tabs__nav {
  margin: 0 265px;
}
/deep/.el-tabs__item {
  padding: 0 60px;
  height: 70px;
  line-height: 70px;
  font-size: 30px;
}
.loginSubmit {
  text-align: center;
}
</style>