<template>
|
<div class="bg-gray" v-loading="vLoading" :style="`width: ${currentWidth}px;height:${currentHeight}px`">
|
<header class="header-transparent">
|
<div class="logo">
|
<img src="../assets/img/top-logo.png" alt />
|
</div>
|
<div class="text-right">
|
<el-link class="toIndex cursor-pointer" href="http://smartai.com/" target="_blank">
|
<span>返回首页</span>
|
</el-link>
|
<router-link to="/">
|
<span style="color: white; height: 20px">登录</span>
|
</router-link>
|
<span class="devide">|</span>
|
<el-link class="qrcode cursor-pointer" href="http://smartai.com/" target="_blank">
|
<img src="../assets/img/u132.png" />
|
</el-link>
|
</div>
|
</header>
|
<content>
|
<div class="regist-area">
|
<div class="toLogin">
|
<span>已有账号，</span>
|
<router-link to="/">
|
<span style="color: #ea1e24">
|
立即登录
|
<i class="el-icon-arrow-right"></i>
|
</span>
|
</router-link>
|
</div>
|
<h1 class="welcome">欢迎注册贝思科账号</h1>
|
<el-steps class="arrowToLine" simple :active="active" finish-status="success" align-center>
|
<el-step title="基本信息" class="step-num-one"></el-step>
|
<el-step title="选择类型" class="step-num-two"></el-step>
|
<el-step title="信息登记" class="step-num-three"></el-step>
|
</el-steps>
|
<div v-show="step1" style="width: 380px; margin: auto">
|
<el-form
|
:model="user"
|
:rules="register1rule"
|
:validate-on-rule-change="false"
|
ref="userForm"
|
class="demo-rulmargin"
|
>
|
<el-form-item prop="userName">
|
<el-input v-model="user.userName" placeholder="请设置用户名"></el-input>
|
</el-form-item>
|
<el-form-item prop="phoneNum">
|
<el-input
|
placeholder="请输入手机号(可用于登录和找回密码)"
|
v-model="user.phoneNum"
|
class="input-with-select"
|
>
|
<el-select v-model="select" slot="prepend" style="width: 80px; color: #333">
|
<el-option label="+86" value="1"></el-option>
|
<el-option label="+79" value="2"></el-option>
|
</el-select>
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="verifyCode">
|
<el-input
|
v-model="user.verifyCode"
|
readonly
|
onfocus="this.removeAttribute('readonly');"
|
onblur="this.setAttribute('readonly',true);"
|
autocomplete="off"
|
style="width: 254px"
|
placeholder="请输入验证码"
|
></el-input>
|
<el-button class="code-btn" :disabled="codeDisabled" @click="getCode">{{ codeMsg }}</el-button>
|
</el-form-item>
|
<el-form-item prop="password">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="长度为6~14个字符,字母,数字或者标点符号，至少包含2种不允许有空格、中文"
|
placement="top-start"
|
>
|
<el-input show-password v-model="user.password" placeholder="请设置登录密码">
|
<i slot="suffix" class="cursor-pointer el-icon-warning-outline"></i>
|
</el-input>
|
</el-tooltip>
|
</el-form-item>
|
|
<div>
|
<el-button
|
:type="!user.agree ? 'default' : 'primary'"
|
:disabled="!user.agree"
|
@click="handleRegister"
|
style="width: 380px; margin-top: 10px"
|
>注册</el-button
|
>
|
</div>
|
<el-form-item prop="agree" class="agree-form-item">
|
<el-checkbox name="agree" v-model="user.agree" style="padding-right: 6px"></el-checkbox>
|
<span>
|
我已阅读并同意
|
<el-link class="cursor-pointer" :underline="false" href="https://element.eleme.io" target="_blank"
|
>《服务协议》</el-link
|
>和
|
<el-link class="cursor-pointer" :underline="false" href="https://element.eleme.io" target="_blank"
|
>隐私政策</el-link
|
>
|
</span>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="type-check" v-show="step2">
|
<el-card shadow="hover" class="card-type">
|
<div class="step2-icon">
|
<img src="../assets/img/xfz.png" @click="selectUser('common')" alt />
|
</div>
|
<div class="step2-role">
|
<h1>消费者</h1>
|
</div>
|
<p class="step2-tip">普通用户可在网站购买下单，下载软件和算法</p>
|
</el-card>
|
<el-card shadow="hover" class="card-type" style="cursor: not-allowed; background: #eee; opacity: 0.5">
|
<div class="step2-icon">
|
<img src="../assets/img/kfz.png" alt />
|
<!--@click="selectUser('develop')" -->
|
</div>
|
<div class="step2-role">
|
<h1>开发者</h1>
|
</div>
|
<p class="step2-tip">开发者用户可在网站上传算法</p>
|
</el-card>
|
</div>
|
<div v-show="step3" class="info">
|
<el-form
|
ref="infoForm1"
|
:model="info"
|
:rules="infoRules"
|
:validate-on-rule-change="false"
|
label-width="100px"
|
>
|
<el-form-item label="开发者类型：" prop="type">
|
<el-radio-group v-model="info.type" 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.type == '1'">
|
<el-input v-model="info.trueName"></el-input>
|
</el-form-item>
|
<el-form-item label="公司名称：" prop="companyName" v-show="info.type == '2'">
|
<el-input v-model="info.companyName"></el-input>
|
</el-form-item>
|
<el-form-item label="联系人名称：" prop="contact" v-show="info.type == '2'">
|
<el-input v-model="info.contact"></el-input>
|
</el-form-item>
|
<el-form-item label="邮箱：" prop="email">
|
<el-input v-model="info.email" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="行业：" prop="industryId">
|
<el-select v-model="info.industryId" placeholder="行业">
|
<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="地区：" prop="areaId">
|
<el-cascader v-model="info.address" :props="options" @change="handleChange"></el-cascader>
|
</el-form-item>
|
<div class="btns">
|
<el-button plain @click="previous">上一步</el-button>
|
<el-button type="primary" style="margin-left: 20px" @click="experience">开始体验</el-button>
|
</div>
|
</el-form>
|
</div>
|
</div>
|
</content>
|
</div>
|
</template>
|
|
<script>
|
import { register, getVerifyCode, getAreas, getDic, entireUserInfo } from "@/api/login"
|
import { validUser, validPassword, isPhone, validEmail, emailNotRequired } from "@/scripts/validate"
|
let id = 0
|
export default {
|
name: "login-pgae",
|
metaInfo: {
|
title: "登录页"
|
},
|
data() {
|
var validateUser = (rule, value, callback) => {
|
if (value === "") {
|
callback(new Error("请设置用户名！"))
|
} else {
|
let result = validUser(value)
|
if (result) {
|
callback()
|
} else {
|
callback(new Error("请输入5到20位由数字和字母组成的用户名，不以数字开头"))
|
}
|
}
|
}
|
var validatePassword = (rule, value, callback) => {
|
if (value === "") {
|
callback(new Error("请设置密码！"))
|
} else {
|
let result = validPassword(value)
|
if (result) {
|
callback()
|
} else {
|
callback(new Error("请输入6到14位字符，字母/数字以及标点符号至少包含2种组成的"))
|
}
|
}
|
}
|
return {
|
active: 0,
|
select: "1",
|
bbsHost: "",
|
step1: true,
|
codeDisabled: false,
|
codeMsg: "获取验证码",
|
step2: false,
|
step3: false,
|
countdown: 60,
|
gotCode: false,
|
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((err) => {})
|
}
|
},
|
info: {
|
userId: "",
|
type: 1, // 普通用户还是开发者
|
userType: 1, // 个人还是公司
|
industryId: "",
|
address: [],
|
areaId: "",
|
provinceId: "",
|
trueName: "",
|
companyName: "",
|
contact: "",
|
email: ""
|
},
|
user: {
|
userId: "",
|
userName: "",
|
password: "",
|
phoneNum: "",
|
verifyCode: "",
|
type: "",
|
userType: "",
|
developerType: "",
|
realName: "",
|
agree: false,
|
email: "",
|
industry: "",
|
area: ""
|
},
|
industrys: [],
|
register1rule: {
|
userName: [{ validator: validateUser, trigger: "change" }],
|
password: [{ validator: validatePassword, trigger: "change" }],
|
phoneNum: [{ validator: isPhone, trigger: "change" }],
|
verifyCode: [{ required: true, message: "请输入验证码", trigger: "change" }],
|
agree: [
|
{
|
required: true,
|
message: "请勾选同意服务协议和隐私政策",
|
trigger: "change"
|
}
|
]
|
},
|
rules: {
|
userName: [{ validator: validateUser, trigger: "change" }],
|
password: [{ validator: validatePassword, trigger: "change" }],
|
phoneNum: [{ validator: isPhone, trigger: "change" }],
|
verifyCode: [{ required: true, message: "请输入验证码", trigger: "change" }],
|
agree: [
|
{
|
required: true,
|
message: "请勾选同意服务协议和隐私政策",
|
trigger: "change"
|
}
|
]
|
},
|
loading: "",
|
vLoading: false,
|
currentHeight: 1057,
|
currentWidth: 1920
|
}
|
},
|
computed: {
|
infoRules() {
|
if (this.info.type == 1) {
|
return {
|
type: [{ required: true, message: "请选择类型" }],
|
trueName: [{ required: true, message: "请填写真实姓名", trigger: "change" }],
|
email: [{ validator: emailNotRequired, trigger: "change" }]
|
}
|
} else {
|
return {
|
type: [{ required: true, message: "请选择类型" }],
|
companyName: [{ required: true, message: "请填写公司名称", trigger: "change" }],
|
contact: [{ required: true, message: "请填写联系人", trigger: "change" }],
|
email: [{ validator: emailNotRequired, trigger: "change" }]
|
}
|
}
|
}
|
},
|
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]
|
entireUserInfo(this.info)
|
.then((res) => {
|
this.loading.close()
|
if (window.location.hash == "#bbs") {
|
window.location.href = this.bbsHost
|
} else {
|
this.$router.push("/")
|
}
|
})
|
.catch((err) => {
|
if (err && err.status == 401) {
|
return
|
}
|
this.$notify({
|
type: "error",
|
message: err.msg,
|
duration: 2500,
|
offset: 57
|
})
|
})
|
}
|
})
|
},
|
handleChange(value) {},
|
async getIndustrys() {
|
let res = await getDic()
|
if (res.success) {
|
this.industrys = res.data.dics
|
} else {
|
}
|
},
|
getValidStr() {
|
if (this.countdown > 0 && this.countdown <= 60) {
|
this.countdown--
|
if (this.countdown !== 0) {
|
this.codeMsg = "重新发送(" + this.countdown + ")"
|
} else {
|
clearInterval(this.timer)
|
this.codeMsg = "获取验证码"
|
this.countdown = 60
|
this.timer = null
|
this.codeDisabled = false
|
}
|
}
|
},
|
// 获取验证码
|
getCode() {
|
// 验证码60秒倒计时
|
var pattern = /^1[345789]\d{9}$/
|
if (this.user.phoneNum == "") {
|
this.$refs["userForm"].fields[1].validateMessage = "请输入手机号"
|
this.$refs["userForm"].fields[1].validateState = "error"
|
return
|
}
|
if (!pattern.test(this.user.phoneNum)) {
|
this.$refs["userForm"].fields[1].validateMessage = "手机号码格式有误"
|
this.$refs["userForm"].fields[1].validateState = "error"
|
return
|
}
|
if (!this.timer) {
|
let userForm = this.$refs["userForm"]
|
|
getVerifyCode({ phoneNum: this.user.phoneNum, type: 1 })
|
.then((res) => {
|
this.codeDisabled = true
|
this.getValidStr()
|
this.timer = setInterval(this.getValidStr, 1000)
|
this.gotCode = true
|
})
|
.catch((err) => {
|
userForm.fields[1].validateMessage = err.data.msg
|
userForm.fields[1].validateState = "error"
|
})
|
}
|
},
|
next() {
|
this.active++
|
switch (this.active) {
|
case 0:
|
this.step1 = true
|
this.step2 = false
|
this.step3 = false
|
break
|
case 1:
|
this.step1 = false
|
this.step2 = true
|
this.step3 = false
|
break
|
case 2:
|
this.step1 = false
|
this.step2 = false
|
this.step3 = true
|
break
|
case 3:
|
this.active == 0
|
}
|
},
|
previous() {
|
this.active--
|
switch (this.active) {
|
case 0:
|
this.step1 = true
|
this.step2 = false
|
this.step3 = false
|
break
|
case 1:
|
this.step1 = false
|
this.step2 = true
|
this.step3 = false
|
break
|
case 2:
|
this.step1 = false
|
this.step2 = false
|
this.step3 = true
|
break
|
}
|
},
|
handleRegister() {
|
this.$nextTick(() => {
|
this.$refs["userForm"].validate((valid) => {
|
if (valid) {
|
this.loading = this.$loading({
|
lock: true,
|
text: "Loading",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)"
|
})
|
let param = {
|
username: this.user.userName,
|
password: this.user.password,
|
phoneNum: this.user.phoneNum,
|
verifyCode: this.user.verifyCode
|
}
|
register(param)
|
.then((json) => {
|
this.bbsHost = json.data.bbsHost
|
const loginedInfo = {
|
access_token: json.data.token_type + " " + json.data.access_token,
|
refresh_token: json.data.refresh_token
|
}
|
sessionStorage.setItem("expires_in", json.data.expires_in)
|
sessionStorage.setItem("loginedInfo", JSON.stringify(loginedInfo))
|
this.info.userId = json.data.userInfo.id
|
this.loading.close()
|
this.next()
|
})
|
.catch((err) => {
|
this.loading.close()
|
if (err && err.status == 401) {
|
return
|
}
|
this.$notify({
|
type: "error",
|
message: err.data.msg,
|
duration: 2500,
|
offset: 57
|
})
|
})
|
|
// return false
|
} else {
|
return
|
}
|
})
|
})
|
},
|
selectUser(type) {
|
this.user.type = type
|
this.info.type = type
|
this.next()
|
},
|
getScreenHeight() {
|
this.currentHeight = document.documentElement.clientHeight
|
this.currentWidth = document.documentElement.clientWidth
|
window.onresize = () => {
|
this.currentHeight = document.documentElement.clientHeight
|
this.currentWidth = document.documentElement.clientWidth
|
this.$forceUpdate()
|
}
|
}
|
},
|
created() {
|
this.getScreenHeight()
|
},
|
mounted() {
|
this.gotCode = false
|
this.getIndustrys()
|
},
|
watch: {},
|
beforeDestroy() {
|
window.onresize = null
|
}
|
}
|
</script>
|
<style lang="scss">
|
.regist-area {
|
width: 900px;
|
min-height: 567px;
|
position: relative;
|
margin: 138px auto 0;
|
background: #ffffff;
|
.el-button {
|
border: none;
|
}
|
.el-checkbox__inner:hover {
|
border-color: #ea1e24 !important;
|
}
|
.el-checkbox__input.is-focus {
|
.el-checkbox__inner {
|
border-color: #ea1e24 !important;
|
}
|
}
|
.el-checkbox__input.is-checked .el-checkbox__inner {
|
background-color: #ea1e24 !important;
|
border-color: #ea1e24 !important;
|
}
|
.arrowToLine {
|
margin: 0 0 50px 138px;
|
padding: 0;
|
}
|
.arrowToLine .el-step.is-simple .el-step__head .el-step__icon {
|
width: 26px;
|
height: 26px;
|
}
|
.arrowToLine .el-step.is-simple .el-step__title {
|
font-size: 16px;
|
width: 64px;
|
}
|
.arrowToLine .el-step.is-simple .el-step__head .el-step__icon:after {
|
font-size: 16px;
|
}
|
.arrowToLine .el-step.is-simple .el-step__arrow::after {
|
width: 140px;
|
background: #ddd;
|
}
|
.el-input__suffix {
|
color: #c0c4cc;
|
}
|
.toLogin {
|
position: absolute;
|
top: 20px;
|
right: 20px;
|
height: 14px;
|
font-size: 14px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #555555;
|
line-height: 14px;
|
}
|
.code-btn {
|
margin-left: 10px;
|
width: 116px;
|
height: 40px;
|
border: none;
|
color: #ea1e24;
|
background: rgba(234, 30, 36, 0.04);
|
&.is-disabled {
|
background: #eee;
|
border-color: #eee;
|
color: #888;
|
}
|
}
|
.agree-form-item {
|
margin-top: 17px;
|
text-align: left;
|
color: #555;
|
.cursor-pointer {
|
color: #111;
|
vertical-align: top;
|
}
|
}
|
.type-check {
|
width: 490px;
|
margin: auto;
|
display: flex;
|
justify-content: space-between;
|
}
|
.info {
|
width: 436px;
|
margin: auto;
|
.el-form-item__label {
|
padding: 0;
|
text-align: left;
|
}
|
.el-input {
|
width: 334px;
|
}
|
.btns {
|
padding: 10px 0 40px;
|
.el-button {
|
width: 200px;
|
height: 40px;
|
}
|
}
|
}
|
}
|
.web-site {
|
position: absolute;
|
top: 55px;
|
left: 41px;
|
font-family: PingFangSC-Medium;
|
font-size: 20px;
|
color: #6170e1;
|
letter-spacing: 6.15px;
|
}
|
|
.card-type.el-card {
|
width: 220px;
|
height: 220px;
|
border-radius: 0;
|
background: #ffffff;
|
box-shadow: 0px 0px 8px 0px rgba(155, 0, 5, 0.15);
|
cursor: pointer;
|
.step2-icon {
|
width: 72px;
|
margin: 10px auto 20px;
|
img {
|
width: 100%;
|
}
|
i {
|
font-size: 100px !important;
|
}
|
}
|
.step2-role {
|
height: 16px;
|
font-size: 16px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #ea1e24;
|
line-height: 16px;
|
}
|
.step2-tip {
|
margin-top: 20px;
|
height: 40px;
|
font-size: 14px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #555555;
|
line-height: 20px;
|
}
|
}
|
</style>
|
