<template>
|
<div class="SelectType">
|
<el-form
|
ref="infoForm1"
|
:model="info"
|
:rules="infoRules"
|
:validate-on-rule-change="false"
|
label-width="76px"
|
>
|
<el-form-item label="类型" prop="userType">
|
<el-radio-group
|
v-model="info.userType"
|
style="float: left; margin-top: 15px"
|
>
|
<el-radio :label="1">个人</el-radio>
|
<el-radio :label="2">公司</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item
|
label="真实姓名"
|
prop="trueName"
|
v-show="info.userType == '1'"
|
>
|
<el-input v-model="info.trueName" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item
|
label="公司名称"
|
prop="companyName"
|
v-show="info.userType == '2'"
|
>
|
<el-input v-model="info.companyName" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="联系人" prop="contact" v-show="info.userType == '2'">
|
<el-input v-model="info.contact" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="邮箱" prop="email">
|
<el-input
|
v-model="info.email"
|
clearable
|
placeholder="请输入"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="行业">
|
<el-select
|
v-model="info.industryId"
|
placeholder="请选择"
|
popper-class="industrySelect"
|
>
|
<el-option
|
v-for="(item, index) in industrys"
|
:label="item.name"
|
:value="item.id"
|
:key="index"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="地区">
|
<el-cascader
|
v-model="info.address"
|
:props="options"
|
popper-class="selectCascader"
|
separator=" "
|
></el-cascader>
|
</el-form-item>
|
<el-button
|
type="primary"
|
@click="experience"
|
class="experienceBtn"
|
:disabled="disabled"
|
>开始体验</el-button
|
>
|
</el-form>
|
<div class="des">
|
*这步如果没有填写，用户信息也已经保存，可以登录，登录号在个人信息下面编辑
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { emailNotRequired } from "@/scripts/validate";
|
import { getDic, getAreas, entireUserInfo } from "@/api/login";
|
export default {
|
props: {
|
userInfo: {
|
type: Object,
|
},
|
},
|
mounted() {
|
this.getIndustrys();
|
},
|
data() {
|
return {
|
info: {
|
userId: "",
|
type: 1, // 普通用户还是开发者
|
userType: 1, // 个人还是公司
|
industryId: "",
|
address: [],
|
areaId: "",
|
provinceId: "",
|
trueName: "",
|
companyName: "",
|
contact: "",
|
email: "",
|
},
|
options: {
|
lazy: true,
|
lazyLoad(node, resolve) {
|
// 懒加载节点省市数据
|
const { level } = node;
|
let nodes;
|
getAreas({ parentId: level == 0 ? 0 : node.value })
|
.then((json) => {
|
nodes = json.data.list;
|
nodes = nodes.map((item) => ({
|
value: item.id,
|
label: item.name,
|
level: item.level,
|
leaf: level >= 1,
|
}));
|
resolve(nodes);
|
})
|
.catch(() => {});
|
},
|
},
|
industrys: [],
|
};
|
},
|
computed: {
|
infoRules() {
|
if (this.info.userType == 1) {
|
return {
|
userType: [{ required: true, message: "请选择类型" }],
|
trueName: [
|
{ required: true, message: "请填写真实姓名", trigger: "change" },
|
],
|
email: [{ validator: emailNotRequired, trigger: "change" }],
|
};
|
} else {
|
return {
|
userType: [{ required: true, message: "请选择类型" }],
|
companyName: [
|
{ required: true, message: "请填写公司名称", trigger: "change" },
|
],
|
contact: [
|
{ required: true, message: "请填写联系人", trigger: "change" },
|
],
|
email: [{ validator: emailNotRequired, trigger: "change" }],
|
};
|
}
|
},
|
disabled() {
|
if (this.info.userType == 1 && this.info.trueName) {
|
return false;
|
}
|
|
if (
|
this.info.userType == 2 &&
|
this.info.companyName &&
|
this.info.contact
|
) {
|
return false;
|
}
|
|
return true;
|
},
|
},
|
methods: {
|
experience() {
|
this.$refs["infoForm1"].validate((valid) => {
|
if (valid) {
|
this.loading = this.$loading({
|
lock: true,
|
text: "Loading",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)",
|
});
|
this.info.provinceId = this.info.address[0];
|
this.info.areaId = this.info.address[1];
|
for (const key in this.info) {
|
if (this.info[key] === "") {
|
delete this.info[key];
|
}
|
}
|
if (this.info.userType == 2) {
|
this.info.trueName = this.info.companyName;
|
}
|
entireUserInfo(this.info)
|
.then(() => {
|
this.loading.close();
|
// if (window.location.hash == "#bbs") {
|
// window.location.href = this.bbsHost;
|
// } else {
|
this.$nextTick(() => {
|
this.$router.push({
|
path: "/register/success",
|
query: { info: this.userInfo },
|
});
|
});
|
// }
|
})
|
.catch((err) => {
|
this.loading.close();
|
this.$notify({
|
type: "error",
|
message: err.msg,
|
duration: 2500,
|
offset: 57,
|
});
|
});
|
}
|
});
|
},
|
async getIndustrys() {
|
let res = await getDic();
|
if (res.success) {
|
this.industrys = res.data.dics;
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.SelectType {
|
padding: 0 80px;
|
|
.el-form-item {
|
margin-bottom: 30px;
|
|
::v-deep .el-form-item__label {
|
width: 76px;
|
text-align: left;
|
|
&::before {
|
display: none;
|
}
|
}
|
|
&.is-required ::v-deep .el-form-item__label::after {
|
box-sizing: border-box;
|
padding-top: 5px;
|
content: "*";
|
color: #f56c6c;
|
}
|
}
|
|
::v-deep .el-input__inner {
|
padding: 10px 20px;
|
border-color: #c0c5cc;
|
|
&::-webkit-input-placeholder {
|
font-size: 14px;
|
color: #999;
|
}
|
}
|
|
::v-deep .el-radio__input {
|
.el-radio__inner {
|
border-color: #c0c5cc;
|
}
|
&.is-checked .el-radio__inner {
|
border-color: #c0c5cc;
|
background-color: #fff;
|
|
&::after {
|
width: 7px;
|
height: 7px;
|
background-color: #0065ff;
|
}
|
}
|
}
|
|
.el-select {
|
width: 100%;
|
|
::v-deep input:focus {
|
border-color: #0065ff;
|
}
|
|
::v-deep .el-input.is-focus .el-input__inner {
|
border-color: #0065ff;
|
}
|
}
|
|
.el-cascader {
|
width: 100%;
|
|
::v-deep input:focus {
|
border-color: #0065ff;
|
}
|
|
::v-deep .el-input.is-focus .el-input__inner {
|
border-color: #0065ff;
|
}
|
}
|
.experienceBtn {
|
position: absolute;
|
left: 80px;
|
bottom: 77px;
|
width: 500px;
|
height: 40px;
|
background: #0065ff;
|
border-radius: 4px;
|
color: #fff;
|
font-size: 14px;
|
font-weight: 700;
|
|
&.is-disabled {
|
opacity: 0.5;
|
border-radius: 4px;
|
}
|
}
|
.des {
|
position: absolute;
|
left: 80px;
|
bottom: 40px;
|
color: #999999;
|
font-size: 12px;
|
}
|
}
|
</style>
|
|
<style lang="scss" >
|
.industrySelect.el-select-dropdown.el-popper ::v-deep {
|
margin: 0;
|
|
.el-scrollbar {
|
width: 424px;
|
height: 160px;
|
}
|
|
.el-select-dropdown__wrap {
|
overflow-x: hidden;
|
}
|
|
.popper__arrow,
|
.popper__arrow::after {
|
display: none;
|
}
|
|
.el-select-dropdown__list {
|
padding: 0;
|
|
.el-select-dropdown__item {
|
width: 424px;
|
height: 40px;
|
border-radius: 4px;
|
color: #3d3d3d !important;
|
font-weight: normal !important;
|
font-size: 14px;
|
|
&:hover {
|
background-color: #f0f5fa;
|
}
|
}
|
}
|
|
.el-icon-arrow-up:before {
|
font-size: 18px;
|
}
|
}
|
|
.el-popper.el-cascader__dropdown.selectCascader {
|
border: none;
|
margin: 0;
|
width: auto !important;
|
* {
|
color: #3d3d3d;
|
border-color: rgba(255, 255, 2555, 0.1);
|
}
|
|
.el-cascader-panel {
|
height: 158px !important;
|
}
|
|
.in-active-path {
|
span {
|
color: #0065ff;
|
font-weight: normal;
|
}
|
}
|
|
.el-cascader-node.is-active {
|
span {
|
color: #0065ff;
|
font-weight: normal;
|
}
|
}
|
|
.el-icon-check {
|
display: none;
|
}
|
|
.el-cascader-node {
|
width: 211px;
|
height: 40px;
|
}
|
|
.el-cascader-node:hover {
|
background: #f0f5fa;
|
}
|
|
.el-scrollbar__view {
|
padding: 0;
|
}
|
|
.popper__arrow::after,
|
.popper__arrow {
|
display: none;
|
}
|
|
.el-cascader-node__label {
|
text-align: left;
|
}
|
|
.el-cascader-menu__wrap {
|
width: 230px;
|
height: 175px;
|
}
|
|
.el-scrollbar__view {
|
overflow: hidden;
|
}
|
|
.el-cascader-node__postfix::before {
|
display: none !important;
|
}
|
}
|
</style>
|
