<template>
|
<div class v-loading="vLoading" :style="`width: ${currentWidth}px;height:${currentHeight}px`">
|
<div class="login-top">
|
<div style="float:right;margin:20px 40px 0 0;">
|
<el-link class="cursor-pointer" href="https://element.eleme.io" target="_blank" style="color:wihte;margin-right:150px">
|
<span style="color:white;height:20px;margin:10px">返回首页</span>
|
</el-link>
|
<router-link to="/"><span style="color:white;height:20px;">登录</span></router-link>
|
<span style="color:white;height:20px;margin:10px;font-size:18px">|</span>
|
<el-link class="cursor-pointer" href="https://element.eleme.io" target="_blank">
|
<img src="../assets/img/u132.png" style="width:30px;height:30px"/>
|
</el-link>
|
</div>
|
</div>
|
|
<div class="login-middle">
|
<div class="login-form">
|
<h1 class="welcome">欢迎注册贝思科账号</h1>
|
<el-steps :active="active" finish-status="success" align-center style="width:1000px">
|
<el-step title="基本信息"></el-step>
|
<el-step title="选择类型"></el-step>
|
<el-step title="信息登记"></el-step>
|
</el-steps>
|
<div v-show="step1">
|
<el-form
|
:model="user"
|
status-icon
|
:rules="nullRule"
|
:validate-on-rule-change="false"
|
ref="ruleForm"
|
class="demo-ruleForm"
|
>
|
<el-form-item prop="loginName" style="margin-top:20px">
|
<el-input v-model="user.userName" style="width:380px" placeholder="请设置用户名">
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="loginName" style="margin-top:20px">
|
<el-input placeholder="请输入手机号(可用于登录和找回密码)" style="width:380px" class="input-with-select">
|
<el-select v-model="select" slot="prepend" placeholder="+86">
|
<el-option label="+86" value="1"></el-option>
|
</el-select>
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="password">
|
<el-input
|
@keyup.enter.native="systemLogin()"
|
v-model="user.password"
|
autocomplete="off"
|
style="width:250px"
|
placeholder="请输入验证码"
|
>
|
</el-input>
|
<el-button plain style="margin-left:20px">获取验证码</el-button>
|
</el-form-item>
|
<el-form-item prop="loginName" style="margin-top:20px">
|
<el-input
|
show-password
|
v-model="user.password"
|
style="width:380px"
|
placeholder="请设置登录密码">
|
<el-popover
|
placement="top-start"
|
title="标题"
|
width="200"
|
trigger="hover"
|
content="长度为8~14个字符
|
字母/数字以及标点符号至少包含2种
|
不允许有空格、中文">
|
<i slot="prefix" class="iconfont iconmima"></i>
|
</el-popover>
|
</el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-checkbox label="我已阅读并同意《服务协议》和 隐私政策" name="type" style="position:relative;left:-50px"></el-checkbox>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="register" style="width:380px">注册</el-button>
|
</el-form-item>
|
<el-form-item>
|
<div style="position:relative;left:130px">
|
<span>已有账号？</span>
|
<router-link to="/"><span style="color:#3D68E1;height:20px;">立即登录</span></router-link>
|
</div>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div v-show="step2">
|
<el-card shadow="hover" class="card" style="margin-left:240px">
|
<div class="step2-icon">
|
<i class="iconfont iconrenyuan" @click="selectUser"></i>
|
</div>
|
<div class="step2-user">
|
<h1>普通用户</h1>
|
</div>
|
<div class="step2-tip">
|
<p>普通用户可在网站购买下单，下载软件和算法</p>
|
</div>
|
</el-card>
|
<el-card shadow="hover" class="card">
|
<div class="step2-icon">
|
<i class="iconfont iconrenyuan" @click="selectUser"></i>
|
</div>
|
<div class="step2-user">
|
<h1>开发用户</h1>
|
</div>
|
<div class="step2-tip">
|
<p>开发者用户可在网站上传算法</p>
|
</div>
|
</el-card>
|
</div>
|
<div v-show="step3" class="info">
|
<el-form ref="form" :model="form" label-width="100px" style="margin-left:50px;margin-top:40px">
|
<el-form-item label="开发者类型：">
|
<el-radio-group v-model="form.type" style="float:left;margin-top:15px">
|
<el-radio label="个人开发者"></el-radio>
|
<el-radio label="公司"></el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="真实姓名：">
|
<el-input v-model="form.name"></el-input>
|
</el-form-item>
|
<el-form-item label="邮箱：">
|
<el-input v-model="form.email"></el-input>
|
</el-form-item>
|
<el-form-item label="行业：">
|
<el-select v-model="form.industry" placeholder="行业" style="width:350px">
|
<el-option label="金融" value="Finance"></el-option>
|
<el-option label="农业" value="Agriculture"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="地区：">
|
<el-select v-model="form.area" placeholder="地区" style="width:350px">
|
<el-option label="北京" value="beijing"></el-option>
|
<el-option label="上海" value="shanghai"></el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item>
|
<el-button plain @click="previous">上一步</el-button>
|
<el-button type="primary" style="margin-left:20px" @click="experience">开始体验</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { tologin, getLoginUserData, getServerName } from "@/api/login";
|
import { getMenuListData, findButtonAuthoritys, findInArr } from "@/api/utils";
|
|
export default {
|
name: "login-pgae",
|
metaInfo: {
|
title: "登录页"
|
},
|
data: () => ({
|
active: 0,
|
select: "1",
|
step1: true,
|
step2: false,
|
step3: false,
|
activeName: 'first',
|
form: {
|
type: 0,
|
name: "",
|
industry: "Finance",
|
area: "beijing",
|
},
|
user: {
|
loginName: "",
|
password: "",
|
rememberMe: false
|
},
|
nullRule: {},
|
rules: {
|
loginName: [{ required: true, message: "请输入用户名", trigger: "change" }],
|
password: [{ required: true, message: "请输入密码", trigger: "change" }]
|
},
|
loading: "",
|
vLoading: false,
|
currentHeight: 1057,
|
currentWidth: 1920
|
}),
|
methods: {
|
next() {
|
if (this.active++ > 2) this.active = 0;
|
},
|
async testLogin() {
|
// let json = await tologin({username:this.user.loginName,password:this.user.password})
|
tologin({ username: this.user.loginName, password: this.user.password }).then(json => {
|
// console.log(json, "登录请求");
|
const loginedInfo = {
|
access_token: json.token_type + " " + json.access_token,
|
refresh_token: json.refresh_token
|
};
|
sessionStorage.setItem("expires_in", json.expires_in);
|
sessionStorage.setItem("loginedInfo", JSON.stringify(loginedInfo));
|
this.loading.close();
|
this.getLoginUserData();
|
}).catch(err => {
|
// console.log(err, "登录报错");
|
this.loading.close();
|
this.$notify({
|
title: "提示",
|
type: "error",
|
message: err
|
});
|
this.$refs.pwd.focus();
|
});
|
// console.log(json,'登录成功？')
|
// this.loading = false
|
},
|
experience() {
|
|
},
|
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;
|
}
|
},
|
|
register() {
|
this.active++
|
console.log("当前active:",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;
|
}
|
},
|
selectUser(){
|
this.register()
|
},
|
getScreenHeight() {
|
this.currentHeight = document.documentElement.clientHeight;
|
this.currentWidth = document.documentElement.clientWidth;
|
// console.log(this.currentHeight, "当前窗口大小");
|
window.onresize = () => {
|
this.currentHeight = document.documentElement.clientHeight;
|
this.currentWidth = document.documentElement.clientWidth;
|
// console.log(this.currentHeight, "当前窗口大小2", this.currentWidth);
|
this.$forceUpdate();
|
};
|
},
|
async getServerName() {
|
let res = await getServerName()
|
if (res && res.success) {
|
this.AuthData.serverTitle = res.data.serverName
|
window.document.title = res.data.serverName ? res.data.serverName : '智 能 计 算 节 点';
|
sessionStorage.setItem("title", res.data.serverName);
|
}
|
}
|
},
|
created() {
|
this.getServerName();
|
this.getScreenHeight();
|
},
|
watch: {},
|
beforeDestroy() {
|
window.onresize = null;
|
}
|
};
|
</script>
|
<style lang="scss" scoped>
|
.login-top {
|
|
background: url("../assets/img/top.png") no-repeat;
|
|
width: 100%;
|
height: 8%;
|
min-width: 1000px;
|
background-repeat: no-repeat;
|
background-size: cover;
|
-webkit-background-size: cover;
|
}
|
.web-site {
|
position: absolute;
|
top: 55px;
|
left: 41px;
|
font-family: PingFangSC-Medium;
|
font-size: 20px;
|
color: #6170e1;
|
letter-spacing: 6.15px;
|
}
|
|
.login-middle {
|
background: url("../assets/img/loginBg.jpg") repeat;
|
width: 100%;
|
height: 92%;
|
.login-form {
|
position: absolute;
|
top: 30%;
|
left: 30%;
|
.el-tabs__item {
|
width:200px;
|
}
|
.welcome {
|
font-size: 22px;
|
margin-bottom: 40px;
|
}
|
}
|
}
|
.card {
|
width:250px;
|
height:300px;
|
float: left;
|
margin:20px;
|
.step2-icon {
|
height:130px;
|
padding-top:20px;
|
i {
|
font-size: 100px !important;
|
cursor: pointer;
|
}
|
}
|
.step2-user {
|
margin: 20px;
|
cursor: pointer;
|
}
|
}
|
.info {
|
width:500px;
|
height:600px;
|
margin-left:200px;
|
}
|
</style>
|
