702 lines
19 KiB
Vue
702 lines
19 KiB
Vue
<template>
|
||
<div class="main-box">
|
||
<div v-if="logoImg" class="imgBoxOne">
|
||
<img :src="logoImg" alt="" class="logo-botton">
|
||
<img src="../../assets/kyy/register-bg.png" alt="">
|
||
</div>
|
||
<div v-else class="imgBoxTwo">
|
||
<img class="bg" src="../../assets/kyy/register-bg.png" alt="">
|
||
<img class="logo-top" src="../../assets/kyy/LOGO.png" alt="">
|
||
</div>
|
||
|
||
<!-- 注册表单-->
|
||
<div class="regist-container">
|
||
<div class="register-form">
|
||
<el-form ref="registForm" :model="registForm" :rules="rules" class="registFormStyle" autocomplete="on" label-position="left" style="z-index: 1">
|
||
<div class="title-container">
|
||
<span class="title">注册</span>
|
||
</div>
|
||
<el-form-item prop="username" class="formItem">
|
||
<div class="form-item">
|
||
<span class="svg-container">
|
||
<img src="../../assets/kyy/用户.svg" alt="">
|
||
</span>
|
||
<el-input class="input-style" ref="username" v-model="registForm.username" placeholder="请输入用户名" name="username" type="text" />
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item class="formItem" prop="password">
|
||
<div class="form-item">
|
||
<span class="svg-container">
|
||
<img src="../../assets/kyy/密码.svg" alt="">
|
||
</span>
|
||
<el-input class="input-style" :key="passwordType" ref="password" v-model="registForm.password" :type="passwordType" placeholder="请输入密码" name="password" />
|
||
<span class="show-pwd" @click="showPwd">
|
||
<svg-icon :icon-class=" passwordType === 'password' ? 'eye' : 'eye-open' " />
|
||
</span>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item prop="nick_name" class="formItem">
|
||
<div class="form-item">
|
||
<span class="svg-container">
|
||
<img src="../../assets/kyy/用户.svg" alt="">
|
||
</span>
|
||
<el-input class="input-style" ref="nick_name" v-model="registForm.nick_name" placeholder="请输入显示名" type="text" />
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item prop="email" class="formItem">
|
||
<div class="form-item">
|
||
<span class="svg-container">
|
||
<img src="../../assets/kyy/邮箱.svg" alt="">
|
||
</span>
|
||
<el-input class="input-style" ref="email" v-model="registForm.email" placeholder="请输入邮件地址" type="text" />
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item prop="mobile" class="formItem">
|
||
<div class="form-item">
|
||
<span class="svg-container">
|
||
<img src="../../assets/kyy/手机.svg" alt="">
|
||
</span>
|
||
<el-input class="input-style" ref="mobile" v-model="registForm.mobile" placeholder="请输入手机号" type="text" />
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item prop="address" class="formItem">
|
||
<div class="form-item">
|
||
<span class="svg-container">
|
||
<img src="../../assets/kyy/地址.svg" alt="">
|
||
</span>
|
||
<el-input class="input-style" ref="address" v-model="registForm.address" placeholder="请输入地址" type="text" />
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item prop="org_type" class="formItem orgTypeSelect">
|
||
<span class="svg-container">
|
||
<img src="../../assets/kyy/机构.svg" alt="">
|
||
</span>
|
||
<el-select class="select" v-model="registForm.org_type" placeholder="请选择所属机构" @change="change" :append-to-body="true" style="">
|
||
<el-option label="个人客户" value="2"></el-option>
|
||
<el-option label="公司客户" value="3"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item prop="" v-if="registForm.org_type === '2'" class="formItemLast">
|
||
<div class="upload-box">
|
||
<el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false" :on-change="handleAvatarSuccess" :on-remove="handleRemove">
|
||
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||
</el-upload>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item prop="orgname" class="formItem name-institution" v-if=" registForm.org_type == '3'">
|
||
<div class="form-item">
|
||
<span class="svg-container">
|
||
<img src="../../assets/kyy/用户.svg" alt="">
|
||
</span>
|
||
<el-input class="input-style" ref="orgname" v-model="registForm.orgname" placeholder="请输入机构名称" type="text" />
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item prop="" v-if="registForm.org_type == '3'" class="formItemLast">
|
||
<div class="upload-box">
|
||
<el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false" :on-change="handleAvatarSuccess">
|
||
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||
</el-upload>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<!-- <el-form-item prop="license_img" v-if="registForm.org_type == '3'">
|
||
<el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false" :on-change="handleAvatarSuccess" :on-remove="handleRemove">
|
||
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||
</el-upload>
|
||
</el-form-item> -->
|
||
<!-- <el-form-item prop="id_img" v-if="registForm.org_type=='2'">
|
||
<span class="svg-container">
|
||
<svg-icon icon-class="user" />
|
||
</span>
|
||
<el-input ref="mobile" v-model="registForm.id_img" placeholder="身份证" type="text" />
|
||
</el-form-item> -->
|
||
<!-- <el-form-item prop="license_img" v-if="registForm.org_type=='3'">
|
||
<span class="svg-container">
|
||
<svg-icon icon-class="user" />
|
||
</span>
|
||
<el-input ref="license_img" v-model="registForm.license_img" placeholder="营业执照" type="text" />
|
||
</el-form-item> -->
|
||
|
||
<div class="twoBtn">
|
||
<el-button class="register-btn" :loading="loading" type="primary" @click.native.prevent="handleRegister('registForm')">马上注册
|
||
</el-button>
|
||
<span class="go-login" @click.native.prevent="handleLogin()">已有账号？<span @click="handleLogin" class="login-btn-style">去登录</span></span>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { registerUserAPI, getLogoAPI } from "@/api/login";
|
||
|
||
export default {
|
||
name: "indexNew",
|
||
data() {
|
||
return {
|
||
url: window.location.href,
|
||
value: '',
|
||
registForm: {
|
||
username: "",
|
||
password: "",
|
||
email: "",
|
||
nick_name: "",
|
||
address: "",
|
||
mobile: "",
|
||
org_type: "",
|
||
orgname: "",
|
||
},
|
||
imageUrl: "",
|
||
currentFile: null,
|
||
invitecode: this.$route.query.invitecode,
|
||
rules: {
|
||
username: [
|
||
{ required: true, message: "请输入姓名", trigger: "blur" },
|
||
{ min: 6, message: '用户名长度至少应包含6个字符' }],
|
||
password: [{ required: true, message: "请输入密码", trigger: "blur" },
|
||
{ min: 6, message: '密码长度至少应包含6个字符' }],
|
||
address: [{ required: true, message: "请输入地址", trigger: "blur" }],
|
||
nick_name: [
|
||
{ required: true, message: "请输入显示名", trigger: "blur" },
|
||
],
|
||
mobile: [
|
||
{
|
||
pattern:
|
||
/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
|
||
message: "请输入有效的手机号",
|
||
},
|
||
{ required: true, trigger: "blur", message: "请输入手机号" },
|
||
],
|
||
email: [
|
||
{
|
||
pattern: /[\w.]+\@[-a-z0-9]+(\.[-a-z0-9]+)*\.(com|cn|edu|uk)/ig,
|
||
message: "请输入有效的邮箱",
|
||
},
|
||
|
||
{ required: true, trigger: "blur", message: "请输入邮箱" },
|
||
],
|
||
orgname: [{ required: true, message: "请输入机构", trigger: "blur" }],
|
||
id_img: [
|
||
{ required: true, message: "请上传身份证", trigger: "change" },
|
||
],
|
||
},
|
||
passwordType: "password",
|
||
loading: false,
|
||
redirect: undefined,
|
||
otherQuery: {},
|
||
org_type: [
|
||
{
|
||
value: "2",
|
||
label: "个人客户",
|
||
},
|
||
{
|
||
value: "3",
|
||
label: "公司客户",
|
||
},
|
||
],
|
||
photosUrl: null,
|
||
logoImg: null
|
||
};
|
||
},
|
||
created() {
|
||
this.init()
|
||
},
|
||
mounted() {
|
||
this.registForm.username = ''
|
||
if (this.invitecode) {
|
||
this.registForm.invitecode = this.invitecode;
|
||
}
|
||
},
|
||
methods: {
|
||
init() {
|
||
let params = {
|
||
url_link: this.GetQueryString(this.url)
|
||
}
|
||
getLogoAPI(params).then((res) => {
|
||
if (res.status == true && res.data && res.data.length) {
|
||
this.photosUrl = res.data[0];
|
||
if (this.photosUrl.orgname != '业主机构') {
|
||
// this.isLogo = true
|
||
this.logoImg = this.photosUrl.logo;
|
||
// this.logoText = this.photosUrl.orgname;
|
||
}
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: "error",
|
||
});
|
||
}
|
||
});
|
||
},
|
||
GetQueryString(name) {
|
||
if (name.indexOf("#") != -1) {
|
||
const params = name.split("#")[0];
|
||
return params;
|
||
}
|
||
},
|
||
change(row) {
|
||
if (row == 3) {
|
||
this.registForm.orgname = null
|
||
}
|
||
},
|
||
showPwd() {
|
||
if (this.passwordType === "password") {
|
||
this.passwordType = "";
|
||
} else {
|
||
this.passwordType = "password";
|
||
}
|
||
this.$nextTick(() => {
|
||
this.$refs.password.focus();
|
||
});
|
||
},
|
||
handleAvatarSuccess(file, fileList) {
|
||
this.imageUrl = URL.createObjectURL(file.raw);
|
||
this.currentFile = file;
|
||
},
|
||
handleRemove(file, fileList) { //移除照片
|
||
|
||
},
|
||
handleLogin() {//返回登录页
|
||
this.$router.push({ name: "Login" });
|
||
},
|
||
handleRegister(formName) { //注册
|
||
this.$refs[formName].validate((valid) => {
|
||
if (valid) {
|
||
if (this.registForm.org_type) {
|
||
if (this.registForm.org_type == "2") {
|
||
this.registForm.orgname = this.registForm.username;
|
||
this.registForm.domain_name = this.photosUrl.domain_name;
|
||
const formdata = this.getFormData(this.registForm);
|
||
if (this.currentFile) {
|
||
formdata.append("id_img", this.currentFile.raw);
|
||
registerUserAPI(formdata).then((res) => {
|
||
if (res.status == true) {
|
||
this.$message({
|
||
message: "注册成功",
|
||
type: "success",
|
||
});
|
||
this.$router.push({ name: "Login" });
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: "error",
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
this.$message({
|
||
message: '请上传身份证照片',
|
||
type: "error",
|
||
});
|
||
}
|
||
} else {
|
||
this.registForm.domain_name = this.photosUrl.domain_name;
|
||
const formdata = this.getFormData(this.registForm);
|
||
if (this.currentFile) {
|
||
formdata.append("license_img", this.currentFile.raw);
|
||
registerUserAPI(formdata).then((res) => {
|
||
if (res.status == true) {
|
||
this.$message({
|
||
message: "注册成功",
|
||
type: "success",
|
||
});
|
||
this.$router.push({ name: "Login" });
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: "error",
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
this.$message({
|
||
message: '请上传营业执照',
|
||
type: "error",
|
||
});
|
||
}
|
||
}
|
||
} else {
|
||
this.$message({
|
||
message: "请选择机构类型",
|
||
type: "error",
|
||
});
|
||
}
|
||
} else {
|
||
this.$message({
|
||
message: "请查看注册信息是否完整",
|
||
type: "error",
|
||
});
|
||
}
|
||
});
|
||
},
|
||
getFormData(object) {//转换参数为formdata格式
|
||
const formData = new FormData();
|
||
Object.keys(object).forEach((key) => {
|
||
const value = object[key];
|
||
if (Array.isArray(value)) {
|
||
value.forEach((subValue, i) => {
|
||
formData.append(key + `[${i}]`, subValue);
|
||
});
|
||
} else {
|
||
formData.append(key, object[key]);
|
||
}
|
||
});
|
||
return formData;
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
$cursor: black;
|
||
.main-box {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100vh;
|
||
.imgBoxTwo {
|
||
.bg {
|
||
width: 100%;
|
||
height: 100vh;
|
||
}
|
||
}
|
||
.imgBoxOne {
|
||
.logo-botton {
|
||
width: 100px !important;
|
||
height: 100px !important;
|
||
position: absolute;
|
||
top: 3%;
|
||
left: 2%;
|
||
}
|
||
}
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.register-form {
|
||
// overflow-y: hidden;
|
||
position: absolute;
|
||
top: 47%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 40%;
|
||
height: 76%;
|
||
min-width: 500px;
|
||
}
|
||
}
|
||
|
||
.logo-top {
|
||
width: 200px !important;
|
||
height: 45px !important;
|
||
position: absolute;
|
||
top: 3%;
|
||
left: 2%;
|
||
}
|
||
|
||
.form-item {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
margin: 0;
|
||
width: 360px;
|
||
height: 42px;
|
||
}
|
||
|
||
//old
|
||
$bg: #2d3a4b;
|
||
$dark_gray: #889aa4;
|
||
$light_gray: #eee;
|
||
|
||
.regist-container {
|
||
min-height: 100%;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
background-color: white;
|
||
.registFormStyle {
|
||
border-radius: .2667rem;
|
||
height: 100%;
|
||
position: relative;
|
||
width: 60%;
|
||
// max-width: 100%;
|
||
padding: 20px 25px 0;
|
||
margin: 0 auto;
|
||
overflow: hidden;
|
||
background-color: white;
|
||
.formItem {
|
||
border: 1px solid #d9d9d9;
|
||
.form-item {
|
||
img {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
el-input {
|
||
width: 50%;
|
||
}
|
||
.input-style {
|
||
width: 140px !important;
|
||
height: 30px !important;
|
||
}
|
||
}
|
||
}
|
||
.orgTypeUpload{
|
||
|
||
}
|
||
.formItemLast {
|
||
.upload-box {
|
||
.avatar-uploader {
|
||
height: 60px;
|
||
width: 60px;
|
||
.avatar {
|
||
height: 60px;
|
||
width: 60px;
|
||
}
|
||
.el-icon-plus {
|
||
height: 60px;
|
||
width: 60px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.title-container {
|
||
margin-bottom: 15px;
|
||
position: relative;
|
||
.title {
|
||
mix-blend-mode: normal;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-family: PingFang SC;
|
||
font-size: 24px;
|
||
letter-spacing: 1.1px;
|
||
padding-left: 40%;
|
||
//font-size: 26px;
|
||
//color: $dark_gray;
|
||
// margin: 0px 10px 0px;
|
||
//text-align: center;
|
||
//font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
.el-form-item{
|
||
margin-bottom:10px;
|
||
}
|
||
.svg-container {
|
||
padding: 6px 5px 6px 15px;
|
||
color: $dark_gray;
|
||
vertical-align: middle;
|
||
width: 30px;
|
||
display: inline-block;
|
||
}
|
||
|
||
.show-pwd {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 7px;
|
||
font-size: 16px;
|
||
color: $dark_gray;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
|
||
.thirdparty-button {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 6px;
|
||
}
|
||
|
||
@media only screen and (max-width: 470px) {
|
||
.thirdparty-button {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
// .avatar-uploader .el-upload {
|
||
// border: 1px dashed #d9d9d9;
|
||
// border-radius: 6px;
|
||
// cursor: pointer;
|
||
// position: relative;
|
||
// overflow: hidden;
|
||
// }
|
||
|
||
// .avatar-uploader .el-upload:hover {
|
||
// border-color: #409eff;
|
||
// }
|
||
|
||
.avatar-uploader-icon {
|
||
font-size: 28px;
|
||
color: #8c939d;
|
||
height: 60px;
|
||
width: 60px;
|
||
line-height: 60px;
|
||
text-align: center;
|
||
border: 1px solid #d9d9d9;
|
||
}
|
||
|
||
.avatar {
|
||
width: 2.3733rem;
|
||
height: 2.3733rem;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.mainBg {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: relative; /* 让容器成为相对定位的父元素 */
|
||
}
|
||
|
||
.mainBg::before {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
margin-left: -48%;
|
||
background-image: url("./svgNew/login-bg.svg");
|
||
background-position: 100%;
|
||
background-repeat: no-repeat;
|
||
background-size: auto 100%;
|
||
content: "";
|
||
}
|
||
|
||
.svgImg {
|
||
//width: 10%!important;
|
||
//border: 100px solid red;
|
||
//height: auto;
|
||
|
||
//position: absolute; /* 设置绝对定位以脱离文档流 */
|
||
//top: 0;
|
||
//left: 0;
|
||
//width: 50%;
|
||
//height: 100%; /* 拉伸图片高度至容器高度 */
|
||
}
|
||
|
||
.loginFromStyle {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 8%;
|
||
z-index: 1;
|
||
}
|
||
|
||
.leftLogo {
|
||
//border: 1px solid red;
|
||
width: 35vw;
|
||
height: 80vh;
|
||
position: absolute;
|
||
top: 5%;
|
||
left: 5%;
|
||
z-index: 9999999;
|
||
img {
|
||
width: 30%;
|
||
height: 30%;
|
||
}
|
||
}
|
||
|
||
.logoStyleTwo {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.windowsLogo {
|
||
img {
|
||
width: 90%;
|
||
height: 90%;
|
||
}
|
||
}
|
||
|
||
.titleHeader {
|
||
--un-text-opacity: 1;
|
||
color: rgba(255, 255, 255, var(--un-text-opacity));
|
||
font-size: 24px;
|
||
margin-top: 100px !important;
|
||
}
|
||
|
||
.el-select .el-select-dropdown__item {
|
||
font-size: 14px;
|
||
padding: 0 20px;
|
||
position: relative;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
color: #606266;
|
||
height: 34px;
|
||
line-height: 34px;
|
||
-webkit-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
cursor: pointer;
|
||
z-index: 99999999999999999999999999999999999999999999999 !important;
|
||
}
|
||
|
||
.twoBtn {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.regist-container ::v-deep.el-input__inner {
|
||
border: none;
|
||
}
|
||
|
||
.name-institution ::v-deep .el-input__inner {
|
||
border: none;
|
||
}
|
||
.regist-container {
|
||
.orgTypeSelect {
|
||
.select {
|
||
width: 65%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.upload-box {
|
||
width: 65px;
|
||
}
|
||
|
||
.register-btn {
|
||
mix-blend-mode: normal;
|
||
text-align: center;
|
||
color: rgba(255, 255, 255, 1);
|
||
font-family: PingFang SC;
|
||
font-size: 16px;
|
||
width: 200px;
|
||
height: 42px;
|
||
}
|
||
|
||
.go-login {
|
||
padding-top: 10px;
|
||
cursor: default;
|
||
align-self: flex-end;
|
||
margin-bottom: 0;
|
||
mix-blend-mode: normal;
|
||
text-align: center;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-family: PingFang SC;
|
||
font-size: 14px;
|
||
letter-spacing: 0.7px;
|
||
}
|
||
.login-btn-style {
|
||
display: inline-block;
|
||
color: blue;
|
||
border-bottom: 2px solid blue !important;
|
||
cursor: pointer;
|
||
}
|
||
.el-input ::v-deep .el-input__inner {
|
||
border: none;
|
||
background-color: white;
|
||
&:-webkit-autofill {
|
||
background-color: white;
|
||
-webkit-box-shadow: 0 0 0 1000px #fff inset !important;
|
||
-webkit-text-fill-color: $cursor !important;
|
||
}
|
||
}
|
||
</style>
|