Commit 0aaa8737 authored by tyn's avatar tyn

Merge branch 'master' of http://47.105.106.177:66/root/sup-server

merge
parents a4c6cecf 02eaa7fd
import network from "@/utils/network"; import network from "@/utils/network";
//密码登录
export const login = (data) => network({ export const login = (data) => network({
url: "/login", url: "/login",
method: "post", method: "post",
data data
}); });
//短信登录
export const smsLogin = (data) => network({ export const smsLogin = (data) => network({
url: "/smsLogin", url: "/smsLogin",
method: "post", method: "post",
data data
}); });
//校验短信验证码
export const validateSmsCode = (data) => network({ export const validateSmsCode = (data) => network({
url: "/sms/validateSmsCode?phone="+data.phone +"&code="+data.code, url: "/sms/validateSmsCode?phone=" + data.phone + "&code=" + data.code,
method: "get", method: "get",
data data
}); });
//校验图形验证码
export const validateCaptcha = (data) => network({ export const validateCaptcha = (data) => network({
url: "/validateCaptcha?uuid="+data.uuid +"&code="+data.code, url: "/validateCaptcha?uuid=" + data.uuid + "&code=" + data.code,
method: "get", method: "get",
}); });
//忘记密码提交
export const forgotPassword = (data) => network({ export const forgotPassword = (data) => network({
url: "/forgotPassword", url: "/forgotPassword",
method: "post", method: "post",
data data
}); });
//图形验证码
export const captchaImage = () => network({ export const captchaImage = () => network({
url: "/captchaImage", url: "/captchaImage",
method: "get", method: "get",
}); });
//验证账号并发送短信
export const checkUser = (data) => network({ export const checkUser = (data) => network({
url: "/checkUser", url: "/checkUser",
method: "post", method: "post",
data data
}); });
export const loginApi = (data) => network({ export const loginApi = (data) => network({
url: "/login", url: "/login",
method: "post", method: "post",
data
}); });
export const loginOutApi = () => network({ export const loginOutApi = () => network({
url: "", url: "",
method: "post", method: "post",
}); });
export const getUserInfoApi = () => network({ export const getUserInfoApi = () => network({
url: "/getInfo", url: "/getInfo",
method: "get" method: "get"
});
//��Ӧ������
export const getCategoryList = (data) => network({
url: "/category/list/tree",
method: "post",
data
});
export const uploadFile = (data) => network({
url: "/file/uploadFile",
method: "post",
data
});
export const register = (data) => network({
url: "/register",
method: "post",
}); });
...@@ -174,7 +174,7 @@ ...@@ -174,7 +174,7 @@
<br>本条例解释权归交易平台所有。 <br>本条例解释权归交易平台所有。
</div> </div>
<div slot="footer"> <div slot="footer">
<el-button class="searchBtn" type="primary" style="width: 90px;" @click="agreeRegister = true,dialogVisible = false">同意</el-button> <el-button class="searchBtn" type="primary" style="width: 90px;" @click="goRegister" >同意</el-button>
<el-button @click="dialogVisible = false">取 消</el-button> <el-button @click="dialogVisible = false">取 消</el-button>
</div> </div>
</el-dialog> </el-dialog>
...@@ -582,6 +582,9 @@ export default { ...@@ -582,6 +582,9 @@ export default {
this.$message.error('上传头像图片大小不能超过 2MB!'); this.$message.error('上传头像图片大小不能超过 2MB!');
} }
return isJPG && isLt2M; return isJPG && isLt2M;
},
goRegister() {
this.$router.push('/register')
} }
} }
} }
......
<template>
<div class="main">
<div class="video">
<video autoplay loop muted class="login-video">
<source src="@/assets/background.mp4" type="video/mp4">
</video>
</div>
<div :class="{'registration-head':agreeRegister}">
<img class="logo" src="@/assets/images/logo.png">
<img class="righttop" src="@/assets/images/ico01.png">
</div>
<div class="login">
<img class="logintop" src="@/assets/images/ico02.png">
<h3>智慧供应商管理系统</h3>
<div class="loginbox">
<div class="logionhead" v-if="type !='tjmm' && type!='wjmm'">
<div class="title" :class="{'on': type=='yzm'}" @click="type='yzm'">验证码登录</div>
<div class="title" :class="{'on': type=='mima'}" @click="type='mima'">密码登录</div>
</div>
<div class="logoncont" v-if="type=='mima'">
<div class="inputs">
<el-input placeholder="请输入企业名称"></el-input>
</div>
<div class="inputs">
<el-input placeholder="请输入登录密码"></el-input>
</div>
<div class="inputs">
<el-input width="191px" class="small" placeholder="请输入验证码"></el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img" />
</div>
</div>
<div class="loginin" @click="login">登录</div>
<div class="loginzc">
<p @click="type='wjmm'">忘记密码</p>
<p>没加入我们?现在就 <span @click="dialogVisible = true">注册</span></p>
</div>
</div>
<div class="logoncont" v-if="type=='yzm'">
<div class="inputs">
<el-input placeholder="请输入手机号" oninput="value=value.replace(/[^0-9]/g,'')"></el-input>
</div>
<div class="inputs">
<el-input placeholder="短信验证码" class="hqyzm">
<template slot="append">
获取验证码
</template>
</el-input>
</div>
<div class="loginin" @click="yzmlogin">登录</div>
<div class="loginzc" style="justify-content:center">
<p>没加入我们?现在就 <span @click="dialogVisible = true">注册</span></p>
</div>
</div>
<div class="logoncont" v-if="type=='wjmm'">
<div class="inputs">
<el-input placeholder="请输入手机号" oninput="value=value.replace(/[^0-9]/g,'')"></el-input>
</div>
<div class="inputs">
<el-input placeholder="短信验证码" class="hqyzm">
<template slot="append">
获取验证码
</template>
</el-input>
</div>
<div class="inputs">
<el-input class="small" placeholder="请输入验证码"></el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img" />
</div>
</div>
<div class="loginin" @click="type='tjmm'">下一步</div>
<div class="loginzc" style="justify-content: center">
<p><span @click="type='mima'">返回登录</span></p>
</div>
</div>
<div class="logoncont" v-if="type=='tjmm'">
<div class="inputs">
<el-input placeholder="请输入密码"></el-input>
</div>
<div class="inputs">
<el-input placeholder="请再次输入密码"></el-input>
</div>
<div class="loginin" @click="resetpwd">提交</div>
<div class="loginzc" style="justify-content: center">
</div>
</div>
</div>
<img class="loginbot" src="@/assets/images/ico03.png">
</div>
<div>
<div class="header">
<el-steps :active="registerType" simple>
<el-step title="填写注册人信息"></el-step>
<el-step title="填写企业信息"></el-step>
<el-step title="等待审核"></el-step>
</el-steps>
<!--<div><p>填写注册人信息</p><i class="el-icon-arrow-right el-icon--right"></i></div>
<div><p>填写企业信息</p><i class="el-icon-arrow-right el-icon--right"></i></div>
<div><p>等待审核</p><i class="el-icon-arrow-right el-icon--right"></i></div>-->
</div>
<div class="content">
<template v-if="registerType == 1">
<el-form ref="form" :model="form" :rules="rule" label-width="auto">
<el-form-item label="手机号码" prop="phone">
<el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
<el-button type="text" class="send-email" @click="getPhoneCode" v-if="codeShow">发送验证码</el-button>
<el-button type="text" class="send-email" v-else>重新发送({{phoneCodeTime}}s)</el-button>
</el-form-item>
<el-form-item label="手机验证码" prop="code">
<el-input v-model="form.code" placeholder="请输入6位动态验证码"></el-input>
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-select v-model="form.sex" placeholder="请选择">
<el-option label="男" value="0"></el-option>
<el-option label="女" value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="联系人姓名" prop="name">
<el-input v-model="form.name" placeholder="请输入真实姓名"></el-input>
</el-form-item>
<el-form-item label="设置密码" prop="password">
<el-input v-model="form.password" placeholder="8-20字符"></el-input>
</el-form-item>
<el-form-item label=" 确认密码" prop="passwordCheck">
<el-input v-model="form.passwordCheck" placeholder="请再次输入密码"></el-input>
</el-form-item>
<el-form-item label=" 邮箱" class="email-input" prop="email">
<el-input v-model="form.email" placeholder="请输入常用邮箱"></el-input>
</el-form-item>
</el-form>
<div class="line-box"></div>
<el-button type="primary" class="checkBtn" @click="registerType = 2">下一步</el-button>
</template>
<template v-if="registerType == 2">
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto" class="company-detail">
<el-form-item label="公司名称" prop="companyName" class="left-title">
<el-input v-model="ruleForm.companyName" placeholder="请输入公司名称"></el-input>
</el-form-item>
<el-form-item label="统一社会信用代码" prop="code">
<el-input v-model="ruleForm.code" placeholder="请输入统一社会信用代码"></el-input>
</el-form-item>
<el-form-item label="法定代表人" prop="name" class="left-title more-left-title">
<el-input v-model="ruleForm.name" placeholder="请输入法定代表人"></el-input>
</el-form-item>
<el-form-item label="注册资本" prop="amount">
<el-input v-model="ruleForm.amount" placeholder="请输入注册资本"></el-input>
</el-form-item>
<el-form-item label="成立日期" prop="date" class="left-title">
<el-date-picker v-model="ruleForm.date"
type="date"
placeholder="请输入成立日期">
</el-date-picker>
</el-form-item>
<el-form-item label="企业注册地" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择企业注册地">
<el-option label="男" value="0"></el-option>
<el-option label="女" value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="办公地址" prop="address" class="left-title">
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2}" placeholder="请输入办公地址" v-model="ruleForm.address" style="width: 670px;"></el-input>
</el-form-item>
<el-form-item label="企业简介" prop="detail" class="left-title">
<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 3}" placeholder="请输入企业简介" v-model="ruleForm.detail" style="width: 670px;"></el-input>
</el-form-item>
<el-form-item label="营业执照扫描件" prop="detail" class="upload-image" style="margin-bottom: 34px;">
<el-upload ref="upload"
:auto-upload="false"
:data="ruleForm"
class="avatar-uploader"
action="#"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:on-change='changeUpload'
:before-upload='beforeAvatarUpload'>
<img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar" style=" height: 100%;">
<div v-else>
<img src="@/assets/images/upload.png" />
<p>请上传营业执照扫描件</p>
</div>
<div slot="tip" class="el-upload__tip">文件大小在5MB以内,支持pnh\jpg\jif格式</div>
</el-upload>
</el-form-item>
<el-form-item label="法人代表身份证扫描件" prop="detail" class="upload-image" style="width: 375px; margin-bottom: 34px;">
<el-upload ref="upload"
:auto-upload="false"
:data="ruleForm"
class="avatar-uploader"
action="#"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:on-change='changeUpload'
:before-upload='beforeAvatarUpload'>
<img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar" style=" height: 100%;">
<div v-else>
<img src="@/assets/images/upload.png" />
<p>请上传法人代表身份证扫描件</p>
</div>
<div slot="tip" class="el-upload__tip">文件大小在5MB以内,支持pnh\jpg\jif格式</div>
</el-upload>
</el-form-item>
</el-form>
<div class="line-box"></div>
<div class="form-title">供应类型</div>
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto" class="company-detail">
<el-form-item label="供应类型选择" prop="code" style=" margin-bottom: 0;">
<el-input v-model="ruleForm.code" placeholder="请选择供应类型选择"></el-input>
</el-form-item>
</el-form>
<div class="line-box"></div>
<div class="form-title">合作承诺函</div>
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto" class="company-detail">
<el-form-item label="合作承诺函" prop="code" style=" margin-bottom: 0;">
<el-button type="primary" plain style="padding: 8px 11px;"><i class="el-icon-upload2"></i>上传</el-button>
<el-button type="text">下载模板</el-button>
</el-form-item>
</el-form>
<div class="line-box"></div>
<el-button type="primary" class="checkBtn" @click="registerType = 3">提交审核</el-button>
<div class="agreement">提交即表示已阅读并同意 <el-button type="text" style=" padding: 0;">《服务协议》</el-button><el-button type="text" style="margin-left: 0; padding: 0;">《隐私协议》</el-button></div>
</template>
<template v-if="registerType == 3">
<div class="register-results">
<img src="@/assets/images/successbg.png" />
<p>供应商入驻提交成功</p>
<span>您的认证申请已成功提交,审核结果将会在24小时内短信通知,请耐心等待。</span>
</div>
</template>
</div>
</div>
<footers />
</div>
</template>
<script>
import footers from '@/components/foots'
//import { getSendRegisterCode } from '@/api/login.js'
export default {
components: {footers},
data() {
return {
codeUrl:'',//图形验证码
dialogVisible: false,
agreeRegister: false,
registerType: 1,
form: {
phone:"",
code: "",
sex: '',
name: "",
password: "",
passwordCheck: "",
email: "",
},
rule: {
phone: [
{ required: true, message: '请输入手机号', trigger: 'change' }
],
code: [
{ required: true, message: '请输入手机验证码', trigger: 'change' }
],
sex: [
{ required: true, message: '请输入联系人姓名', trigger: 'change' }
],
name: [
{ required: true, message: '请输入性别', trigger: 'change' }
],
password: [
{ required: true, message: '请输入设置密码', trigger: 'change' }
],
passwordCheck: [
{ required: true, message: '请输入确认密码', trigger: 'change' }
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'change' }
],
},
ruleForm:{
companyName: "",
code: "",
name: "",
date: "",
amount: "",
region: "",
address: "",
detail: "",
imageUrl: ''
},
rules: {
companyName: [
{ required: true, message: '请输入公司名称', trigger: 'change' }
],
code: [
{ required: true, message: '请输入统一社会信用代码', trigger: 'change' }
],
name: [
{ required: true, message: '请输入法定代表人', trigger: 'change' }
],
date: [
{ required: true, message: '请输入成立日期', trigger: 'change' }
],
amount: [
{ required: true, message: '请输入注册资本', trigger: 'change' }
],
region: [
{ required: true, message: '请选择企业注册地', trigger: 'change' }
],
address: [
{ required: true, message: '请输入办公地址', trigger: 'change' }
],
detail: [
{ required: true, message: '请输入企业简介', trigger: 'change' }
],
},
phoneCodeTime: 60,
codeShow : true,
timer: null,
type:"yzm",//登录方式 密码:mima 验证码:yzm 忘记密码:wjmm 提交密码:tjmm
yzmparam:{
phone:'',
code:''
} ,
mimaparam:{
name:'',
pwd:'',
code:''
},
wjparam:{
name:'',
pwd:'',
code:'',
code1:''
},
resetparam:{
pwd:'',
}
};
},
computed: {
},
mounted() {
// this.getCode()
},
watch:{
type(val){
this.cleardata()
}
},
methods: {
//清空填写的登录数据
cleardata(){
},
//登录
login(){},
//验证码登录
yzmlogin(){},
//重置密码
resetpwd(){},
//获取验证码
getCode(){
this.getYZMimage().then(res=>{
this.codeUrl = res.data.imag
})
},
handleAvatarSuccess(res, file) {
console.log("上传成功")
this.ruleForm.imageUrl = URL.createObjectURL(file.raw)
},
changeUpload: function (file) {
let fileName = file.name;
console.log(fileName)
let regex = /(.jpg|.jpeg)$/
if (regex.test(fileName.toLowerCase())) {
this.ruleForm.imageUrl = URL.createObjectURL(file.raw)
}
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
console.log(isJPG)
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
},
//获取手机验证码
getPhoneCode() {
console.log(111111)
if (!this.timer) {
console.log(222)
this.codeShow = false;
this.phoneCodeTime = 60
this.timer = setInterval(() => {
if (this.phoneCodeTime > 0 && this.phoneCodeTime <= 60) {
this.phoneCodeTime--;
} else {
this.codeShow = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
}
let param = {
phone: this.form.phone
}
//getSendRegisterCode(param).then(res => {
// //if (res.code == 200) {
// //}
//})
// axios.post('http://139.9.157.49:8806/prod-api//sms/sendRegisterCode', param).then(function (response) {
// console.log(response);
// })
// .catch(function (error) {
// console.log(error);
// });
}
}
}
</script>
<style scoped lang="scss">
.main {
position: relative;
height: 100%;
width: 100%;
.loginbox{
margin-bottom: 24px;
.logionhead {
border-bottom: 1px solid #F0F0F0;
text-align: center;
margin-bottom: 32px;
.title {
font-size: 18px;
color: #666;
display: inline-block;
margin: 0 20px;
padding-bottom: 18px;
cursor: pointer;
}
.title.on {
color: #0081FF;
position: relative;
}
.title.on::after {
content: ' ';
width: 42px;
height: 3px;
background: #0081FF;
border-radius: 1px 1px 1px 1px;
position: absolute;
bottom: 0;
margin-left: -21px;
left: 50%;
}
}
}
.loginzc{
font-size: 12px;
margin-top: 24px;
display: flex;
justify-content: space-between;
padding: 0 52px 32px;
>p{
line-height: 20px;
color: #999999;
cursor: pointer;
>span{
cursor: pointer;
color: #0081ff;
}
}
}
.registration-head {
position: absolute;
width: 100vw;
height: 75px;
background: #FFFFFF;
}
.login-video {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
source {
width: 100%;
height: 100%;
}
}
.bot {
position: fixed;
bottom: 0;
left: 0;
}
.logo {
position: absolute;
left: 16px;
top: 16px;
}
.righttop {
position: absolute;
right: 16px;
top: 17px;
z-index: 1;
}
.login {
width: 426px;
/*height: 451px;*/
background: #FFFFFF;
border-radius: 8px;
opacity: 1;
position: absolute;
top: 50%;
transform: translate(0,-50%);
right: 61px;
.logintop {
position: absolute;
left: 12px;
top: 12px;
}
> h3 {
font-size: 24px;
font-weight: bold;
color: #0081FF;
text-align: center;
margin-top: 60px;
margin-bottom: 40px;
line-height: 17px;
}
.inputs {
margin-bottom: 24px;
padding: 0 43px;
::v-deep .el-input__inner {
width: 100%;
height: 48px;
border-radius: 8px;
border: 1px solid #E3E3E3;
text-indent: 16px;
outline: none;
font-size: 14px;
padding: 0;
}
.hqyzm {
position: relative;
::v-deep .el-input-group__append {
cursor: pointer;
width: 102px;
padding: 0;
display: block;
position: absolute;
top: 12px;
right: 0;
background: 0;
border: 0;
line-height: 24px;
text-align: center;
color: #0081ff;
font-size: 14px;
border-left: 1px solid #D8D8D8;
}
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #9E9E9E;
}
.small {
width: 191px;
}
.login-code {
float: right;
width: 131px;
height: 46px;
background: #FFFFFF;
border-radius: 8px;
border: 1px solid #F1F1F1;
}
}
.loginin {
width: 340px;
height: 48px;
background: #0081FF;
border-radius: 4px;
margin: 0 auto;
line-height: 48px;
font-size: 16px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
text-align: center;
}
.loginbot {
position: absolute;
bottom: 32px;
left: 169px;
}
}
}
/*注册样式*/
::v-deep .el-dialog.registration {
height: calc(100% - 132px);
overflow-y: auto;
overflow-x: hidden;
.el-dialog__header {
display: none;
}
.el-dialog__body {
padding: 30px 0;
.header {
display: flex;
justify-content: center;
.el-steps {
padding: 0;
background: #FFFFFF;
margin-left: -8px;
.el-step__title {
width: 226px;
max-width: 226px;
padding: 8px 0 8px 16px;
background: #F2F2F2;
height: 18px;
font-size: 14px;
font-weight: 400;
color: #999999;
line-height: 18px;
}
.el-step__title.is-finish {
font-weight: bold;
color: #FFFFFF;
background: #0081FF;
}
.el-step__title::before, .el-step__title::after {
content: '';
display: block;
position: absolute;
top: 0;
width: 0;
height: 0;
}
.el-step__title::before {
left: 0;
border-top: 17px solid transparent;
border-left: 8px solid #FFFFFF;
border-bottom: 17px solid transparent;
z-index: 9;
}
.el-step__title::after {
right: -8px;
border-top: 17px solid transparent;
border-left: 8px solid #F2F2F2;
border-bottom: 17px solid transparent;
}
.el-step__title.is-finish::after {
right: -8px;
border-top: 17px solid transparent;
border-left: 8px solid #0081FF;
border-bottom: 17px solid transparent;
}
.el-step:first-child .el-step__title::before, .el-step:last-child .el-step__title::after {
display: none;
}
.el-step.is-simple {
.el-step__arrow {
display: none;
}
}
.el-step__icon.is-text {
display: none;
}
}
}
.content {
.el-form {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 750px;
margin: 24px auto;
.el-form-item {
margin-bottom: 16px;
.send-email {
position: absolute;
right: 16px;
padding: 0;
padding-left: 16px;
border-left: 1px solid #D8D8D8;
margin: 12px 0;
}
}
.el-input {
width: 260px;
input {
height: 34px;
}
}
.email-input .el-input {
width: 668px;
}
}
.form-title {
width: 750px;
height: 24px;
font-size: 14px;
font-weight: bold;
color: #333333;
line-height: 24px;
margin: 24px auto;
}
.line-box {
position: relative;
width: 100vw;
height: 1px;
background: #EEEEEE;
}
.checkBtn {
display: block;
width: 178px;
padding: 9px 20px;
margin: 24px auto;
}
.agreement {
width: 345px;
height: 18px;
font-size: 14px;
color: #9E9E9E;
line-height: 18px;
margin: auto;
}
.company-detail {
.el-input {
width: 240px;
}
.upload-image {
display: flex;
flex-wrap: wrap;
width: 300px;
.el-form-item__label-wrap {
margin-left: 0 !important;
}
.el-form-item__content {
width: 287px;
height: 176px;
background: #F4F4F4;
border-radius: 8px 8px 8px 8px;
opacity: 1;
border: 1px solid #DCDCDC;
margin-left: 0 !important;
.avatar-uploader {
height: 100%;
.el-upload {
width: 100%;
height: 100%;
div {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 46px;
}
img {
width: 56px;
}
p {
margin: 16px;
width: 100%;
height: 18px;
font-size: 14px;
color: #999999;
line-height: 18px;
}
}
.el-upload__tip {
height: 18px;
font-size: 14px;
color: #9E9E9E;
line-height: 18px;
margin-left: 7px;
margin-top: 16px;
}
}
}
}
.left-title {
.el-form-item__label-wrap {
margin-left: 0 !important;
}
.el-form-item__content {
margin-left: 79px !important;
}
}
.more-left-title {
.el-form-item__label-wrap {
margin-left: -14px !important;
}
}
}
.register-results {
width: 480px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin: 96px auto;
img {
width: 130px;
height: 108px;
}
p {
width: 100%;
height: 21px;
font-size: 16px;
font-weight: bold;
color: #333333;
line-height: 21px;
text-align: center;
margin: 32px 0 24px;
}
span {
height: 18px;
font-size: 14px;
font-weight: 400;
color: #999999;
line-height: 18px;
}
}
}
}
}
::v-deep .el-dialog.registration-policy {
.el-dialog__body {
height: 567px;
overflow-y: auto;
padding: 16px 16px 3px;
margin: 10px 16px 0;
background: #F9F9F9;
}
.el-dialog__footer {
text-align: left;
.el-button {
padding: 9px 20px;
}
}
}
</style>
<template>
<div class="main">
<div class="video">
<video autoplay loop muted class="login-video">
<source src="@/assets/background.mp4" type="video/mp4">
</video>
</div>
<div :class="{'registration-head':agreeRegister}">
<img class="logo" src="@/assets/images/logo.png">
<img class="righttop" src="@/assets/images/ico01.png">
</div>
<el-dialog title="注册" custom-class="registration" :modal="false" :visible.sync="agreeRegister" width="100vw" top="75px">
<el-dialog title="请选择经营类型" :visible.sync="addTypeVisible" width="742px" custom-class="typeDialog" append-to-body top="30px" close-on-click-modal>
<div class="title">
<span>请选择经营类型</span>
<el-input v-model="typeSearch" placeholder="请输入" @input="getTypeSearch()"></el-input>
<div class="typeList">
<div class="typeRows">
<span class="typeTitle">外观</span>
<span class="typeParent">1>2</span>
</div>
<div class="typeRows">
<span class="typeTitle">外观</span>
<span class="typeParent">1>2</span>
</div>
</div>
</div>
<div class="content">
<div class="content-rows" v-for="item in typeList">
<span class="row-frist">{{item.name}}</span>
<div class="row-second" v-if=" item.children">
<el-tabs v-model="activeName" @tab-click="handleClick" type="card">
<el-tab-pane v-for="itemChild in item.children" :name="itemChild.name" >
<span slot="label">{{itemChild.name}}<i :class="activeName == itemChild.code ? 'el-icon-caret-bottom' : 'el-icon-caret-top' "></i></span>
<div class="row-three" v-if=" itemChild.children">
<ul>
<li v-for="itemChildThree in itemChild.children" @click="getCatIdName(itemChildThree.name)">
<el-radio v-model="ruleForm.catId" :label="itemChildThree.catId">{{itemChildThree.name}}</el-radio>
</li>
</ul>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
<div style="padding: 24px 16px 0 0; display: flex; justify-content: start; ">
<!--<el-button @click="addTypeVisible = false">取 消</el-button>-->
<el-button type="primary" style="margin-left: 16px;" :disabled="ruleForm.catId ? disabled : ''" @click="addTypeVisible = false">确 定</el-button>
</div>
</el-dialog>
<div>
<div class="header">
<el-steps :active="registerType" simple>
<el-step title="填写注册人信息"></el-step>
<el-step title="填写企业信息"></el-step>
<el-step title="等待审核"></el-step>
</el-steps>
<!--<div><p>填写注册人信息</p><i class="el-icon-arrow-right el-icon--right"></i></div>
<div><p>填写企业信息</p><i class="el-icon-arrow-right el-icon--right"></i></div>
<div><p>等待审核</p><i class="el-icon-arrow-right el-icon--right"></i></div>-->
</div>
<div class="content">
<template v-if="registerType == 1">
<el-form ref="form" :model="form" :rules="rule" label-width="auto">
<el-form-item label="手机号码" prop="phone">
<el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
<el-button type="text" class="send-email" @click="getPhoneCode" v-if="codeShow">发送验证码</el-button>
<el-button type="text" class="send-email" v-else>重新发送({{phoneCodeTime}}s)</el-button>
</el-form-item>
<el-form-item label="手机验证码" prop="smsCode">
<el-input v-model="form.smsCode" placeholder="请输入6位动态验证码"></el-input>
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-select v-model="form.sex" placeholder="请选择">
<el-option label="男" value="0"></el-option>
<el-option label="女" value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="联系人姓名" prop="userName">
<el-input v-model="form.userName" placeholder="请输入真实姓名"></el-input>
</el-form-item>
<el-form-item label="设置密码" prop="password">
<el-input type="password" v-model="form.password" placeholder="8-12字符"></el-input>
</el-form-item>
<el-form-item label=" 确认密码" prop="passwordCheck">
<el-input type="password" v-model="form.passwordCheck" placeholder="请再次输入密码"></el-input>
</el-form-item>
<el-form-item label=" 邮箱" class="email-input" prop="email">
<el-input v-model="form.email" placeholder="请输入常用邮箱"></el-input>
</el-form-item>
</el-form>
<div class="line-box"></div>
<el-button type="primary" class="checkBtn" @click="userInfo('form')">下一步</el-button>
</template>
<template v-if="registerType == 2">
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto" class="company-detail">
<el-form-item label="公司名称" prop="companyName" class="left-title">
<el-input v-model="ruleForm.companyName" placeholder="请输入公司名称"></el-input>
</el-form-item>
<el-form-item label="统一社会信用代码" prop="creditCode">
<el-input v-model="ruleForm.creditCode" placeholder="请输入统一社会信用代码"></el-input>
</el-form-item>
<el-form-item label="法定代表人" prop="name" class="left-title more-left-title">
<el-input v-model="ruleForm.name" placeholder="请输入法定代表人"></el-input>
</el-form-item>
<el-form-item label="注册资本" prop="registeredCapital">
<el-input v-model="ruleForm.registeredCapital" placeholder="请输入注册资本"></el-input>
</el-form-item>
<el-form-item label="成立日期" prop="registeredDate" class="left-title">
<el-date-picker v-model="ruleForm.registeredDate"
type="date"
placeholder="请输入成立日期">
</el-date-picker>
</el-form-item>
<el-form-item label="企业注册地" prop="registeredAddress">
<el-select v-model="ruleForm.registeredAddress" placeholder="请选择企业注册地">
<el-option v-for="item in filePlaceCodeList" :label="item.label" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="办公地址" prop="addressDetail" class="left-title">
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2}" placeholder="请输入办公地址" v-model="ruleForm.addressDetail" style="width: 670px;"></el-input>
</el-form-item>
<el-form-item label="企业简介" prop="briefing" class="left-title">
<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 3}" placeholder="请输入企业简介" v-model="ruleForm.briefing" style="width: 670px;"></el-input>
</el-form-item>
<el-form-item label="营业执照扫描件" prop="licenseUrl" class="upload-image" style="margin-bottom: 34px;">
<el-upload ref="upload"
:data="ruleForm"
class="avatar-uploader"
action="http://localhost:8866/test/file/uploadFile"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:on-change='changeUpload'
:before-upload='beforeAvatarUpload'>
<!--<el-upload ref="upload"
:auto-upload="false"
:data="ruleForm"
class="avatar-uploader"
action="uploadFile"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">-->
<img v-if="ruleForm.licenseUrl" :src="ruleForm.licenseUrl" class="avatar" style=" height: 100%;">
<div v-else>
<img src="@/assets/images/upload.png" />
<p>请上传营业执照扫描件</p>
</div>
<div slot="tip" class="el-upload__tip">文件大小在5MB以内,支持pnh\jpg\jif格式</div>
</el-upload>
</el-form-item>
<el-form-item label="法人代表身份证扫描件" prop="cardUrl" class="upload-image" style="width: 375px; margin-bottom: 34px;">
<el-upload ref="upload"
:data="ruleForm"
class="avatar-uploader"
action="http://localhost:8866/test/file/uploadFile"
:show-file-list="false"
:on-success="cardHandleAvatarSuccess"
:on-change='cardChangeUpload'
:before-upload='beforeAvatarUpload'>
<!--<el-upload ref="upload"
:auto-upload="false"
:data="ruleForm"
class="avatar-uploader"
action="http://localhost:8866/test/file/uploadFile"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">-->
<img v-if="ruleForm.cardUrl" :src="ruleForm.cardUrl" class="avatar" style=" height: 100%;">
<div v-else>
<img src="@/assets/images/upload.png" />
<p>请上传法人代表身份证扫描件</p>
</div>
<div slot="tip" class="el-upload__tip">文件大小在5MB以内,支持pnh\jpg\jif格式</div>
</el-upload>
</el-form-item>
<div class="form-title">供应类型</div>
<el-form-item label="供应类型选择" prop="catId" style=" margin-bottom: 0;" class="more-left-title more-content-left-title">
<div @click="addTypeVisible = true" style="position: absolute; width: 240px; height: 40px; z-index: 999; "></div>
<el-input v-model="catIdName" placeholder="请选择供应类型选择" :disabled="true"></el-input>
</el-form-item>
<div class="form-title">合作承诺函</div>
<el-form-item label="合作承诺函" prop="fileUrl" style=" margin-bottom: 0;" class="more-left-title more-content-left-title">
<el-upload ref="upload"
:data="ruleForm"
class="avatar-uploader"
action="http://localhost:8866/test/file/uploadFile"
:show-file-list="false"
:on-success="hezuoHandleAvatarSuccess"
:on-change='hezuoChangeUpload'
:before-upload='beforeAvatarUploadWord'
style="width: 66px; float: left;">
<el-input v-model="ruleForm.fileUrl" :disabled="true" style="opacity: 0; position: absolute; height: 0;"></el-input>
<div plain style=" width: 66px; height: 32px; border-radius: 4px 4px 4px 4px; line-height: 32px; opacity: 1; border: 1px solid #0081FF; color: #0081FF;">
<i class="el-icon-upload2"></i>上传
</div>
</el-upload>
<!--<el-link type="primary" href="../assets/aaa.docx" target="_blank" style="margin-left: 32px; float: left;">下载模板</el-link>-->
<el-button type="text" style="margin-left: 32px; float: left;" @click='downloadFile()'>下载模板</el-button>
</el-form-item>
</el-form>
<!--<div class="line-box"></div>
<div class="form-title">供应类型</div>
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto" class="company-detail">
</el-form>
<div class="line-box"></div>
<div class="form-title">合作承诺函</div>
<el-form ref="ruleForm" :model="ruleForm.fileUrl" :rules="rules" label-width="auto" class="company-detail">
</el-form>-->
<!--<div class="line-box"></div>-->
<el-button type="primary" class="checkBtn" @click="register('ruleForm')">提交审核</el-button>
<div class="agreement">提交即表示已阅读并同意 <el-button type="text" style=" padding: 0;">《服务协议》</el-button><el-button type="text" style="margin-left: 0; padding: 0;">《隐私协议》</el-button></div>
</template>
<template v-if="registerType == 3">
<div class="register-results">
<img src="@/assets/images/successbg.png" />
<p>供应商入驻提交成功</p>
<span>您的认证申请已成功提交,审核结果将会在24小时内短信通知,请耐心等待。</span>
</div>
</template>
</div>
</div>
</el-dialog>
<footers />
</div>
</template>
<script>
import footers from '@/components/foots'
import { checkUser, getCategoryList, validateSmsCode, uploadFile, register } from '@/api/login.js'
import jsk_data from '@/utils/jsk.json';
export default {
components: { footers },
data() {
return {
agreeRegister: true,
addTypeVisible: false,
registerType: 1,
form: {
phone: "",
smsCode: "",
sex: '',
userName: "",
password: "",
passwordCheck: "",
email: "",
},
rule: {
phone: [
{ required: true, message: '请输入手机号', trigger: 'change' }
],
smsCode: [
{ required: true, message: '请输入短信验证码', trigger: 'change' }
],
sex: [
{ required: true, message: '请输入性别', trigger: 'change' }
],
userName: [
{ required: true, message: '请输入联系人姓名', trigger: 'change' }
],
password: [
{ required: true, message: '请输入设置密码', trigger: 'change' },
{ min: 8, max: 12, message: '密码长度必须在8到12个字符之间', trigger: 'blur' }
],
passwordCheck: [
{ required: true, message: '请输入确认密码', trigger: 'change' }
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'change' },
{ type: 'email', message: '请输入正确的邮箱格式', trigger: 'change' }
],
},
ruleForm: {
companyName: "",
creditCode: "",
name: "",
registeredDate: "",
registeredCapital: "",
registeredAddress: "",
addressDetail: "",
briefing: "",
licenseUrl: '',
catId:'',
cardUrl: ''
},
rules: {
companyName: [
{ required: true, message: '请输入公司名称', trigger: 'change' }
],
creditCode: [
{ required: true, message: '请输入统一社会信用代码', trigger: 'change' }
],
name: [
{ required: true, message: '请输入法定代表人', trigger: 'change' }
],
registeredDate: [
{ required: true, message: '请输入成立日期', trigger: 'change' }
],
registeredCapital: [
{ required: true, message: '请输入注册资本', trigger: 'change' }
],
registeredAddress: [
{ required: true, message: '请选择企业注册地', trigger: 'change' }
],
addressDetail: [
{ required: true, message: '请输入办公地址', trigger: 'change' }
],
briefing: [
{ required: true, message: '请输入企业简介', trigger: 'change' }
],
catId: [
{ required: true, message: '请输入供应商类型', trigger: 'change' }
],
licenseUrl: [
{ required: true, message: '请上传营业执照', trigger: 'change' }
],
cardUrl: [
{ required: true, message: '请上传身份证', trigger: 'change' }
],
fileUrl: [
{ required: true, message: '请上传合作承诺函', trigger: 'change' }
],
},
phoneCodeTime: 60,
codeShow: true,
timer: null,
activeName: '',
typeList: [],
catIdName: '',
filePlaceCodeList: '',
typeSearch:'',
};
},
computed: {
},
mounted() {
this.getCategoryList()
this.addressListfn()
},
watch: {
type(val) {
this.cleardata()
}
},
methods: {
//获取手机验证码
getPhoneCode() {
var phone = this.form.phone, reg = /^[a-zA-Z0-9_]{11,16}$/;
if (phone == "") {
this.$message({
message: '请先输入手机号',
type: 'warning'
});
return
} else if (!reg.test(phone)) {
this.$message({
message: '手机号输入有误',
type: 'warning'
});
return;
}
if (!this.timer) {
this.codeShow = false;
this.phoneCodeTime = 60
this.timer = setInterval(() => {
if (this.phoneCodeTime > 0 && this.phoneCodeTime <= 60) {
this.phoneCodeTime--;
} else {
this.codeShow = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
}
let param = {
phone: this.form.phone
}
checkUser(param).then(res => {
//if (res.code == 200) {
//}
})
},
//用户信息
userInfo(form) {
this.$refs[form].validate((valid) => {
if (valid) {
if (this.form.password != this.form.passwordCheck) {
this.$message({
message: '两次密码输入不同',
type: 'warning'
});
return false
}
let param = {phone:this.form.phone,code:this.form.smsCode}
validateSmsCode(param).then(res => {
if (res.code == 200) {
//下一步
this.registerType = 2
} else {
this.$message({
message: res.msg,
type: 'warning'
});
return false
}
})
} else {
return false;
}
});
},
//注册
register(ruleForm) {
this.$refs[ruleForm].validate((valid) => {
if (valid) {
let param = { ...this.form, ...this.ruleForm };
param.registeredDate = param.registeredDate.toLocaleString()
console.log(param)
register(param).then(res => {
if (res.code == 200) {
//注册成功
this.registerType = 3
}
})
} else {
return false;
}
});
},
//获取全部类型
getCategoryList() {
let param = {
name: ''
}
getCategoryList(param).then(res => {
if (res.code == 200) {
console.log(res)
this.typeList = res.data.data
this.activeName = res.data.data[0].children[0].name
console.log(this.typeList)
}
})
},
//提交文件
handleAvatarSuccess(res, file) {
this.licenseUrl = res.url
},
changeUpload: function (file) {
//console.log('file2', file)
//console.log('file1', this.ruleForm)
let fileName = file.name;
let regex = /(.jpg|.jpeg)$/
if (regex.test(fileName.toLowerCase())) {
this.ruleForm.licenseUrl = URL.createObjectURL(file.raw)
}
//let formData = new FormData();
//formData.append("file", file.raw);
//uploadFile(formData).then(res => {
// if (res.code == 200) {
// //注册成功
// this.registerType = 3
// }
// })
},
cardHandleAvatarSuccess(res, file) {
this.cardUrl = res.url
},
cardChangeUpload: function (file) {
let fileName = file.name;
let regex = /(.jpg|.jpeg)$/
if (regex.test(fileName.toLowerCase())) {
this.ruleForm.cardUrl = URL.createObjectURL(file.raw)
}
},
hezuoHandleAvatarSuccess(res, file) {
this.fileUrl = res.url
},
hezuoChangeUpload: function (file) {
let fileName = file.name;
let wordReg = /^.+(\.doc|\.docx)$/
if (wordReg.test(fileName.toLowerCase())) {
this.ruleForm.fileUrl = URL.createObjectURL(file.raw)
}
},
beforeAvatarUpload(file) {
//console.log('file3', file)
//console.log('file1', this.ruleForm)
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
//console.log(isJPG)
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
},
beforeAvatarUploadWord(file) {
console.log('file3', file)
//console.log('file1', this.ruleForm)
const isJPG = file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
const isLt2M = file.size / 1024 / 1024 < 2;
//console.log(isJPG)
if (!isJPG) {
this.$message.error('上传文件只能是doc或者docx格式!');
}
if (!isLt2M) {
this.$message.error('上文件大小不能超过 2MB!');
}
return isJPG && isLt2M;
},
handleClick(tab, event) {
console.log(tab, event);
},
//下载模板
downloadFile() {
let word = "https://gys-file.oss-cn-chengdu.aliyuncs.com/file/image/2022-11-11/%E4%BE%9B%E5%BA%94%E5%95%86%E6%89%BF%E8%AF%BA%E4%B9%A61668165098059.docx?Expires=4821765098&OSSAccessKeyId=LTAI5t87xwSHQUZPgAGgRG5x&Signature=bUeY5CzXM29S72Lb5j4lxkEc%2Fj0%3D"
window.open(word, '_blank')
},
//获取选中类型名称
getCatIdName(val) {
console.log(val)
this.catIdName = val
},
//获取地区
addressListfn() {
var str = [];
for (let x = 0; x < 3; x++) {
for (let i = 0; i < jsk_data.length; i++) {
if (jsk_data[i].regionLevel == (x + 1) && (x + 1) == 1) {
str.push({
'id': jsk_data[i].id,
"label": jsk_data[i].regionName,
"short": jsk_data[i].short,
"value": jsk_data[i].parentId,
"children": []
})
} else if (jsk_data[i].regionLevel == (x + 1) && (x + 1) == 2) {
for (let j = 0; j < str.length; j++) {
if (str[j].id == jsk_data[i].parentId) {
str[j].children.push({
'id': jsk_data[i].id,
"label": jsk_data[i].regionName,
"short": jsk_data[i].short,
"value": jsk_data[i].parentId,
"children": []
})
}
}
} else if (jsk_data[i].regionLevel == (x + 1) && (x + 1) == 3) {
for (let j = 0; j < str.length; j++) {
for (let k = 0; k < str[j].children.length; k++) {
if (str[j].children[k].id == jsk_data[i].parentId) {
// console.log(JSON.stringify(str));
str[j].children[k].children.push({
'id': jsk_data[i].id,
"label": jsk_data[i].regionName,
"short": jsk_data[i].short,
"value": jsk_data[i].parentId,
// "children":[]
})
}
}
}
}
}
}
//this.addressList = str;
this.filePlaceCodeList = str;
// console.log(JSON.stringify(str));
},
//获取搜索类型
getTypeSearch() {
let param = {
name: this.typeSearch
}
getCategoryList(param).then(res => {
if (res.code == 200) {
}
})
}
},
}
</script>
<style scoped lang="scss">
.main {
position: relative;
height: 100%;
width: 100%;
.loginbox{
margin-bottom: 24px;
.logionhead {
border-bottom: 1px solid #F0F0F0;
text-align: center;
margin-bottom: 32px;
.title {
font-size: 18px;
color: #666;
display: inline-block;
margin: 0 20px;
padding-bottom: 18px;
cursor: pointer;
}
.title.on {
color: #0081FF;
position: relative;
}
.title.on::after {
content: ' ';
width: 42px;
height: 3px;
background: #0081FF;
border-radius: 1px 1px 1px 1px;
position: absolute;
bottom: 0;
margin-left: -21px;
left: 50%;
}
}
}
.loginzc{
font-size: 12px;
margin-top: 24px;
display: flex;
justify-content: space-between;
padding: 0 52px 32px;
>p{
line-height: 20px;
color: #999999;
cursor: pointer;
>span{
cursor: pointer;
color: #0081ff;
}
}
}
.registration-head {
position: absolute;
width: 100vw;
height: 75px;
background: #FFFFFF;
}
.login-video {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
source {
width: 100%;
height: 100%;
}
}
.bot {
position: fixed;
bottom: 0;
left: 0;
}
.logo {
position: absolute;
left: 16px;
top: 16px;
}
.righttop {
position: absolute;
right: 16px;
top: 17px;
z-index: 1;
}
.login {
width: 426px;
/*height: 451px;*/
background: #FFFFFF;
border-radius: 8px;
opacity: 1;
position: absolute;
top: 50%;
transform: translate(0,-50%);
right: 61px;
.logintop {
position: absolute;
left: 12px;
top: 12px;
}
> h3 {
font-size: 24px;
font-weight: bold;
color: #0081FF;
text-align: center;
margin-top: 60px;
margin-bottom: 40px;
line-height: 17px;
}
.inputs {
margin-bottom: 24px;
padding: 0 43px;
::v-deep .el-input__inner {
width: 100%;
height: 48px;
border-radius: 8px;
border: 1px solid #E3E3E3;
text-indent: 16px;
outline: none;
font-size: 14px;
padding: 0;
}
.hqyzm {
position: relative;
::v-deep .el-input-group__append {
cursor: pointer;
width: 102px;
padding: 0;
display: block;
position: absolute;
top: 12px;
right: 0;
background: 0;
border: 0;
line-height: 24px;
text-align: center;
color: #0081ff;
font-size: 14px;
border-left: 1px solid #D8D8D8;
}
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #9E9E9E;
}
.small {
width: 191px;
}
.login-code {
float: right;
width: 131px;
height: 46px;
background: #FFFFFF;
border-radius: 8px;
border: 1px solid #F1F1F1;
}
}
.loginin {
width: 340px;
height: 48px;
background: #0081FF;
border-radius: 4px;
margin: 0 auto;
line-height: 48px;
font-size: 16px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
text-align: center;
}
.loginbot {
position: absolute;
bottom: 32px;
left: 169px;
}
}
}
/*注册样式*/
::v-deep .el-dialog.registration {
height: calc(100% - 132px);
overflow-y: auto;
overflow-x: hidden;
.el-dialog__header {
display: none;
}
.el-dialog__body {
padding: 30px 0;
.header {
display: flex;
justify-content: center;
.el-steps {
padding: 0;
background: #FFFFFF;
margin-left: -8px;
.el-step__title {
width: 226px;
max-width: 226px;
padding: 8px 0 8px 16px;
background: #F2F2F2;
height: 18px;
font-size: 14px;
font-weight: 400;
color: #999999;
line-height: 18px;
}
.el-step__title.is-finish {
font-weight: bold;
color: #FFFFFF;
background: #0081FF;
}
.el-step__title::before, .el-step__title::after {
content: '';
display: block;
position: absolute;
top: 0;
width: 0;
height: 0;
}
.el-step__title::before {
left: 0;
border-top: 17px solid transparent;
border-left: 8px solid #FFFFFF;
border-bottom: 17px solid transparent;
z-index: 9;
}
.el-step__title::after {
right: -8px;
border-top: 17px solid transparent;
border-left: 8px solid #F2F2F2;
border-bottom: 17px solid transparent;
}
.el-step__title.is-finish::after {
right: -8px;
border-top: 17px solid transparent;
border-left: 8px solid #0081FF;
border-bottom: 17px solid transparent;
}
.el-step:first-child .el-step__title::before, .el-step:last-child .el-step__title::after {
display: none;
}
.el-step.is-simple {
.el-step__arrow {
display: none;
}
}
.el-step__icon.is-text {
display: none;
}
}
}
.content {
.el-form {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 750px;
margin: 24px auto;
.el-form-item {
margin-bottom: 16px;
.send-email {
position: absolute;
right: 16px;
padding: 0;
padding-left: 16px;
border-left: 1px solid #D8D8D8;
margin: 12px 0;
}
}
.el-input {
width: 260px;
input {
height: 34px;
}
}
.is-disabled .el-input__inner {
background-color: #FFF !important;
color: #606266;
}
.email-input .el-input {
width: 668px;
}
}
.form-title {
width: 750px;
height: 24px;
font-size: 14px;
font-weight: bold;
color: #333333;
line-height: 24px;
margin: 24px auto;
}
.line-box {
position: relative;
width: 100vw;
height: 1px;
background: #EEEEEE;
}
.checkBtn {
display: block;
width: 178px;
padding: 9px 20px;
margin: 24px auto;
}
.agreement {
width: 345px;
height: 18px;
font-size: 14px;
color: #9E9E9E;
line-height: 18px;
margin: auto;
}
.company-detail {
.el-input {
width: 240px;
}
.upload-image {
display: flex;
flex-wrap: wrap;
width: 300px;
.el-form-item__label-wrap {
margin-left: 0 !important;
}
.el-form-item__content {
width: 287px;
height: 176px;
background: #F4F4F4;
border-radius: 8px 8px 8px 8px;
opacity: 1;
border: 1px solid #DCDCDC;
margin-left: 0 !important;
.avatar-uploader {
height: 100%;
.el-upload {
width: 100%;
height: 100%;
div {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 46px;
}
img {
width: 56px;
}
p {
margin: 16px;
width: 100%;
height: 18px;
font-size: 14px;
color: #999999;
line-height: 18px;
}
}
.el-upload__tip {
height: 18px;
font-size: 14px;
color: #9E9E9E;
line-height: 18px;
margin-left: 7px;
margin-top: 16px;
}
}
}
}
.left-title {
.el-form-item__label-wrap {
margin-left: 0 !important;
}
.el-form-item__content {
margin-left: 79px !important;
}
}
.more-left-title {
.el-form-item__label-wrap {
margin-left: -14px !important;
}
}
.more-content-left-title {
.el-form-item__content {
margin-left: 100px !important;
}
}
}
.register-results {
width: 480px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin: 96px auto;
img {
width: 130px;
height: 108px;
}
p {
width: 100%;
height: 21px;
font-size: 16px;
font-weight: bold;
color: #333333;
line-height: 21px;
text-align: center;
margin: 32px 0 24px;
}
span {
height: 18px;
font-size: 14px;
font-weight: 400;
color: #999999;
line-height: 18px;
}
}
}
}
}
::v-deep .el-dialog.registration-policy {
.el-dialog__body {
height: 567px;
overflow-y: auto;
padding: 16px 16px 3px;
margin: 10px 16px 0;
background: #F9F9F9;
}
.el-dialog__footer {
text-align: left;
.el-button {
padding: 9px 20px;
}
}
}
::v-deep .el-dialog.typeDialog {
ul {
margin: 0;
padding: 0;
}
li {
list-style: none
}
.el-dialog__header {
display: none;
}
.el-dialog__body {
padding: 16px 0;
.title {
padding: 0 0 16px 24px;
display: flex;
align-items: center;
border-bottom: 1px solid #EEEEEE;
span {
height: 20px;
font-size: 14px;
color: #333333;
line-height: 20px;
}
.el-input {
width: 212px;
margin-left: 18px;
input {
height: 34px;
}
}
.typeList {
position: absolute;
top: 49px;
left: 140px;
background: #ffffff;
border: 1px solid #eeeeee;
/*padding: 0 16px;*/
width: 212px;
box-sizing: border-box;
z-index: 9;
display:none;
.typeRows {
padding: 4px 16px;
border-bottom: 1px solid #eeeeee;
display: flex;
flex-wrap: wrap;
span {
width: 100%;
}
/*
span:first-child {
margin-bottom: 2px;
}*/
span:last-child {
color: #C0C4CC;
}
}
}
}
.content {
padding: 0 24px;
height: 500px;
overflow-y: auto;
.content-rows {
.row-frist {
height: 20px;
font-size: 16px;
font-weight: bold;
color: #333333;
line-height: 20px;
display: block;
margin-top: 24px;
}
/* el-icon-caret-bottom*/
.row-second {
.el-tabs__active-bar {
display: none;
}
.el-tabs__header {
border: 0;
margin: 24px 0 16px 0;
}
.el-tabs__nav {
border: 0;
}
.el-tabs__item {
padding: 0 16px 0 0;
border: 0;
height: 20px;
font-size: 14px;
line-height: 20px;
.el-icon-caret-top, .el-icon-caret-bottom {
margin-left: 11px;
}
}
ul {
padding: 24px 0 16px 0;
display: flex;
flex-wrap: wrap;
}
}
.row-three {
width: 694px;
max-height: 268px;
background: #FDFDFD;
border-radius: 8px 8px 8px 8px;
border: 1px solid #F3F3F3;
overflow-y: auto;
padding-bottom: 16px;
ul {
padding: 0;
li {
padding: 16px 0 0 16px;
.el-radio__input {
display: none;
}
}
}
}
}
}
}
}
</style>
...@@ -28,9 +28,18 @@ const routes = [ ...@@ -28,9 +28,18 @@ const routes = [
needToken: false needToken: false
} }
}, },
{
path: '/register',
name: 'register',
component: () => import('@/register'),
meta: {
title: "注册页",
needToken: false
}
},
{ {
path: '/home', path: '/home',
redirect : "/home/index", redirect: "/home/index",
name: 'Home', name: 'Home',
component: () => import(/* webpackChunkName: "Home" */"@/home"), component: () => import(/* webpackChunkName: "Home" */"@/home"),
meta: { meta: {
...@@ -55,7 +64,6 @@ const routes = [ ...@@ -55,7 +64,6 @@ const routes = [
const router = new VueRouter({ const router = new VueRouter({
mode: 'history', mode: 'history',
base: process.env.BASE_URL, base: process.env.BASE_URL,
routes
}); });
export default router; export default router;
......
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -91,7 +91,8 @@ module.exports = defineConfig({ ...@@ -91,7 +91,8 @@ module.exports = defineConfig({
open: true, open: true,
proxy: { proxy: {
[process.env.VUE_APP_BASE_API]: { [process.env.VUE_APP_BASE_API]: {
target: `http://139.9.157.49:8088`, //target: `http://139.9.157.49:8088`,
target: `http://192.168.60.172:8188`,
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: '' ['^' + process.env.VUE_APP_BASE_API]: ''
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment