Skip to content

L
lbs-gpsbd-web
Commit 3f3f61a4 authored by yangkaiyi's avatar yangkaiyi
Browse files
Options

改登录、注册UI

parent cfc044ce
Hide whitespace changes
Inline Side-by-side
Showing with 799 additions and 634 deletions
src/views/login/index.vue
View file @ 3f3f61a4
<template> <template>
<!-- <div class="container" :style="{background:'linear-gradient(to left bottom, hsl('+randomNum(10,100)+', 100%, 85%) 0%,hsl('+randomNum(10,300)+', 100%, 85%) 100%)'}"> --> <!-- <div class="container" :style="{background:'linear-gradient(to left bottom, hsl('+randomNum(10,100)+', 100%, 85%) 0%,hsl('+randomNum(10,300)+', 100%, 85%) 100%)'}"> -->
<div class="container" :style="{background:'linear-gradient(to left bottom, #2196f3 30%,#67C23A 100%)'}"> <div
class="container"
:style="{
<div class="login-center"> background: 'linear-gradient(to left bottom, #2196f3 30%,#67C23A 100%)',
<el-card class="my-card"> }"
<el-row> >
<el-col :span="12" class="bg-purple"> <div class="login-center">
<el-card class="my-card">
<div class="welcome"> <el-row>
<div class="lbs-logo" id="svg-div"></div> <!-- <el-col :span="12" class="bg-purple">
<div class="title"> <div class="welcome">
<div class="logo"> <div class="lbs-logo" id="svg-div"></div>
<span class="system-name">GPS<font color="#606266">BD</font></span> <div class="title">
<span class="trademark">®</span> <div class="logo">
<span class="system-title">{{$t("common.systemName")}}</span> <span class="system-name">GPS<font color="#606266">BD</font></span>
</div> <span class="trademark">®</span>
<div style="margin-top: 20px;"> <span class="system-title">{{$t("common.systemName")}}</span>
<el-tooltip placement="top"> </div>
<div slot="content"><img width="180" src="https://base.gpsbd.com/down/gpsbd_client.png"/></div> <div style="margin-top: 20px;">
<el-button><font-awesome-icon icon="globe"/> {{ $t('login.monitorApp')}}</el-button> <el-tooltip placement="top">
</el-tooltip> <div slot="content"><img width="180" src="https://base.gpsbd.com/down/gpsbd_client.png"/></div>
<el-tooltip placement="top"> <el-button><font-awesome-icon icon="globe"/> {{ $t('login.monitorApp')}}</el-button>
<div slot="content"><img width="180" src="https://base.gpsbd.com/down/gpsbd_tracker.png"/></div> </el-tooltip>
<el-button><font-awesome-icon icon="street-view"/> {{ $t('login.locateApp')}}</el-button> <el-tooltip placement="top">
</el-tooltip> <div slot="content"><img width="180" src="https://base.gpsbd.com/down/gpsbd_tracker.png"/></div>
<el-tooltip placement="top"> <el-button><font-awesome-icon icon="street-view"/> {{ $t('login.locateApp')}}</el-button>
<div slot="content"><img width="180" src="https://base.gpsbd.com/down/gpsbd_weixin.jpg"/></div> </el-tooltip>
<el-button><font-awesome-icon icon="comments"/> {{ $t('login.wechat')}}</el-button> <el-tooltip placement="top">
</el-tooltip> <div slot="content"><img width="180" src="https://base.gpsbd.com/down/gpsbd_weixin.jpg"/></div>
</div> <el-button><font-awesome-icon icon="comments"/> {{ $t('login.wechat')}}</el-button>
</div> </el-tooltip>
<div class="login-phone">商务:13665607002 技术支持:13355514723 </div>
<!-- <span>版权所有:安徽东位信息科技有限公司</span> --> </div>
</div> <div class="login-phone">商务:13665607002 技术支持:13355514723
</div> </div>
</el-col> </div>
<el-col :span="12" class="bg-purple2"> </el-col> -->
<div class="login-right"> <el-col :span="24" class="bg-purple2">
<div class="login-title">{{$t("login.login")}}</div> <div class="login-right">
<div class="line"></div> <div class="login-title">花博会重要有害生物踪迹管理系统</div>
<el-form :model="loginForm" ref="loginForm" status-icon > <!-- <div class="line"></div> -->
<el-form-item prop="account" :rules="[{ required: true, message: '账号不能为空'},{ min: 2, max: 12, message: '请输入正确的账号', trigger: 'blur' }]"> <el-form :model="loginForm" ref="loginForm" status-icon>
<MDinput v-model="loginForm.account" :maxlength="100" name="account" autocomplete="off" required> <el-form-item
{{$t('register.account')}} prop="account"
</MDinput> :rules="[
</el-form-item> { required: true, message: '账号不能为空' },
<el-form-item prop="password" :rules="[{ required: true, message: '密码不能为空'}]"> {
<MDinput type="password" v-model="loginForm.password" :maxlength="100" name="password" autocomplete="off" required> min: 2,
{{$t('register.password')}} max: 12,
</MDinput> message: '请输入正确的账号',
<!-- <span class="login-icon el-icon-lock"></span> trigger: 'blur',
<el-input type="password" v-model="loginForm.password" autocomplete="off" :placeholder="$t('register.password')"></el-input> --> },
</el-form-item> ]"
<el-form-item label="场景"> >
<MDinput
<el-radio-group v-model="sceneMode" @change="changeSceneMode"> v-model="loginForm.account"
<el-radio label="2d">2D</el-radio> :maxlength="100"
name="account"
</el-radio-group> autocomplete="off"
</el-form-item> required
<el-form-item> >
<el-row :gutter="20"> {{ $t("register.account") }}
<el-col :span="18"><el-button style="width:100%;" @click="handleLogin">{{$t("login.login")}}</el-button></el-col> </MDinput>
<el-col :span="6"><el-button v-if="registration" style="width:100%;" @click="$router.push({ path: '/register' })">{{$t("login.register")}}</el-button></el-col> </el-form-item>
</el-row> <el-form-item
</el-form-item> prop="password"
<lang-select class="set-language"></lang-select> :rules="[{ required: true, message: '密码不能为空' }]"
</el-form> >
</div> <MDinput
</el-col> type="password"
</el-row> v-model="loginForm.password"
:maxlength="100"
name="password"
</el-card> autocomplete="off"
</div> required
<div class ="footer-copyright"> >
<el-button type="text" size="small" @click.native="$store.dispatch('setVisblesFlag', [{key:'feedbackDialog',value:true}])">{{$t("map.userUserFeedback")}}</el-button><el-button type="text" size="small">{{$store.state.common.system.name}}® Version:{{$store.state.common.system.version}} ©{{$store.state.common.system.date}} {{$store.state.common.system.company}}</el-button> {{ $t("register.password") }}
</el-dialog> </MDinput>
</div> <!-- <span class="login-icon el-icon-lock"></span>
</div> <el-input type="password" v-model="loginForm.password" autocomplete="off" :placeholder="$t('register.password')"></el-input> -->
</template> </el-form-item>
<div style="height: 30px" />
<script> <el-form-item>
import Vivus from 'vivus' <el-row :gutter="20">
import '@/styles/common.scss'; <el-col :span="18"
import MDinput from '@/components/MDinput' ><el-button style="width: 100%" @click="handleLogin">{{
import LangSelect from '@/components/LangSelect' $t("login.login")
import Feedback from '../map/components/feedback/index'; }}</el-button></el-col
import { getConfigReg,userLogin,installCheck } from '@/api/api' >
<el-col :span="6"
export default { ><el-button
name: 'login', v-if="registration"
components: { Feedback,LangSelect,MDinput}, style="width: 100%"
data() { @click="$router.push({ path: '/register' })"
>{{ $t("login.register") }}</el-button
return { ></el-col
readonlyInput: true, >
registration:true, </el-row>
loginForm: { </el-form-item>
account: '', <!-- <lang-select class="set-language"></lang-select> -->
password: '', </el-form>
client:0 </div>
}, </el-col>
loading: false, </el-row>
pwdType: 'password', </el-card>
sceneMode:localStorage.sceneMode?localStorage.sceneMode:'2d' </div>
} <div class="footer-copyright">
}, <el-button
methods: { type="text"
size="small"
showPwd() { @click.native="
if (this.pwdType === 'password') { $store.dispatch('setVisblesFlag', [
this.pwdType = '' { key: 'feedbackDialog', value: true },
} else { ])
this.pwdType = 'password' "
} >{{ $t("map.userUserFeedback") }}</el-button
}, ><el-button type="text" size="small"
init(){ >{{ $store.state.common.system.name }}® Version:{{
installCheck().then(data => { $store.state.common.system.version
if(!data){ }}
this.$router.push({path: '/install'}) ©{{ $store.state.common.system.date }}
}else{ {{ $store.state.common.system.company }}</el-button
getConfigReg().then(data => { >
this.registration = data; </div>
}) </div>
} </template>
})
<script>
}, import Vivus from "vivus";
handleLogin() { import "@/styles/common.scss";
this.$refs.loginForm.validate(valid => { import MDinput from "@/components/MDinput";
if (valid) { // import LangSelect from "@/components/LangSelect";
this.loading=true; import Feedback from "../map/components/feedback/index";
this.$store.dispatch('Login', this.loginForm).then(data => { import { getConfigReg, userLogin, installCheck } from "@/api/api";
this.loading = false;
// this.$router.push({path: '/'}) export default {
}).catch(() => { name: "login",
this.loading = false components: {
}) Feedback,
} // LangSelect,
}) MDinput,
}, },
changeSceneMode(val){ data() {
localStorage.sceneMode = val; return {
//this.$store.dispatch('setMapValues',[{key:'sceneMode',value:val}]); readonlyInput: true,
}, registration: true,
myCallback(){ loginForm: {
console.log('myCallback'); account: "",
}, password: "",
randomNum(minNum,maxNum){ client: 0,
switch(arguments.length){ },
case 1: loading: false,
return parseInt(Math.random()*minNum+1,10); pwdType: "password",
break; sceneMode: localStorage.sceneMode ? localStorage.sceneMode : "2d",
case 2: };
return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); },
break; methods: {
default: showPwd() {
return 0; if (this.pwdType === "password") {
break; this.pwdType = "";
} } else {
} this.pwdType = "password";
}, }
mounted() { },
this.init(); init() {
new Vivus('svg-div', { duration: 2000, file: './static/logo.svg' }, this.myCallback); installCheck().then((data) => {
//console.log(this.randomNum(10,300)); if (!data) {
} this.$router.push({ path: "/install" });
} } else {
</script> getConfigReg().then((data) => {
this.registration = data;
<style rel="stylesheet/scss" lang="scss"> });
}
.container { });
//background: linear-gradient(to left bottom, hsl(163, 100%, 85%) 0%,hsl(241, 100%, 85%) 100%); },
position: absolute; handleLogin() {
left: 0; this.$refs.loginForm.validate((valid) => {
top: 0; if (valid) {
width: 100%; this.loading = true;
height: 100%; this.$store
//background: url('../../assets/images/bg.png') no-repeat center / cover; .dispatch("Login", this.loginForm)
.welcome{ .then((data) => {
text-align: -webkit-center; this.loading = false;
//position: absolute; // this.$router.push({path: '/'})
//left: 26%; })
margin-top: 14px; .catch(() => {
font-size: 30px; this.loading = false;
color: #fff; });
.title { }
//left: -50px; });
//position: absolute; },
font: bold 30px "microsoft yahei"; changeSceneMode(val) {
white-space: nowrap; localStorage.sceneMode = val;
//this.$store.dispatch('setMapValues',[{key:'sceneMode',value:val}]);
} },
.trademark { myCallback() {
vertical-align: top; console.log("myCallback");
font-size: 12px; },
padding: 3px; randomNum(minNum, maxNum) {
// color: #606266 switch (arguments.length) {
} case 1:
.system-title{ return parseInt(Math.random() * minNum + 1, 10);
//color: #606266 break;
} case 2:
.system-name{ return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
//color: #606266 break;
} default:
} return 0;
.my-card { break;
}
background-color: hsla(0,0%,100%,0.2); },
width: 80%; },
height: 60%; mounted() {
position: absolute; this.init();
left: 50%; // new Vivus('svg-div', { duration: 2000, file: './static/logo.svg' }, this.myCallback);
top: 50%; //console.log(this.randomNum(10,300));
-webkit-transform: translate(-50%, -50%); },
transform: translate(-50%, -50%); };
-webkit-box-shadow: -8px 8px 8px rgba(59, 59, 59, 0.8); </script>
box-shadow: -8px 8px 8px rgba(59, 59, 59, 0.8);
.line { <style rel="stylesheet/scss" lang="scss">
width: 20px; .container {
height: 10px; //background: linear-gradient(to left bottom, hsl(163, 100%, 85%) 0%,hsl(241, 100%, 85%) 100%);
border-bottom: 2px solid #fff; position: absolute;
margin: 0 auto 20px; left: 0;
} top: 0;
.login-title{ width: 100%;
height: 40px; height: 100%;
line-height: 40px; //background: url('../../assets/images/bg.png') no-repeat center / cover;
font-size: 20px; .welcome {
color: #fff; text-align: -webkit-center;
text-align: center; //position: absolute;
} //left: 26%;
span{ margin-top: 14px;
padding-left: 10px; font-size: 30px;
} color: #fff;
.el-input{ .title {
width: 300px; //left: -50px;
padding-left: 10px; //position: absolute;
} font: bold 30px "microsoft yahei";
} white-space: nowrap;
} }
.trademark {
.lbs-logo{ vertical-align: top;
width: 300px; font-size: 12px;
height: 190px; padding: 3px;
} // color: #606266
.login-icon { }
color: #fff .system-title {
} //color: #606266
.el-button--text{ }
color: #fff .system-name {
} //color: #606266
.login-center{ }
text-align: center; }
.el-form-item__label{ .my-card {
color: #fff background-color: hsla(0, 0%, 100%, 0.2);
} width: 80%;
.el-radio__label{ height: 60%;
color: #fff position: absolute;
} left: 50%;
} top: 50%;
.login-right{ -webkit-transform: translate(-50%, -50%);
padding: 26px; transform: translate(-50%, -50%);
-webkit-box-shadow: -8px 8px 8px rgba(59, 59, 59, 0.8);
} box-shadow: -8px 8px 8px rgba(59, 59, 59, 0.8);
.bg-purple { .line {
//position: absolute; width: 20px;
background: #409EFF; height: 10px;
height: 600px; border-bottom: 2px solid #fff;
padding: 16px; margin: 0 auto 20px;
} }
.bg-purple2 { .login-title {
//background: #cccccc; height: 40px;
} line-height: 40px;
.login-center .el-card__body{ font-size: 40px;
padding: 0px color: #fff;
} text-align: center;
.login-phone{ }
span {
font-size: 12px; padding-left: 10px;
float:left; }
bottom: 0; .el-input {
position: fixed; width: 300px;
span{ padding-left: 10px;
float: right; }
} }
}
}
.set-language{ .lbs-logo {
float: right; width: 300px;
//color: #409EFF; height: 190px;
} }
.material-input__component{ .login-icon {
background-color:transparent!important; color: #fff;
margin-top: 27px!important; }
.el-button--text {
} color: #fff;
.material-input__component .material-label{ }
color: #ffffff!important; .login-center {
} text-align: center;
.material-input__component .material-input{ .el-form-item__label {
color: #ffffff!important; color: #fff;
} }
</style> .el-radio__label {
color: #fff;
}
}
.login-right {
height: 100%;
padding: 50px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.bg-purple {
//position: absolute;
background: #409eff;
height: 600px;
padding: 16px;
}
.bg-purple2 {
//background: #cccccc;
}
.login-center {
.el-card__body {
padding: 0px;
height: 100%;
.el-row {
height: 100%;
.el-col {
height: 100%;
}
}
}
}
.login-phone {
font-size: 12px;
float: left;
bottom: 0;
position: fixed;
span {
float: right;
}
}
.set-language {
float: right;
//color: #409EFF;
}
.material-input__component {
background-color: transparent !important;
margin-top: 27px !important;
}
.material-input__component .material-label {
color: #ffffff !important;
}
.material-input__component .material-input {
color: #ffffff !important;
}
</style>
src/views/login/register.vue
View file @ 3f3f61a4
<template> <template>
<!-- <div class="container" :style="{background:'linear-gradient(to left bottom, hsl('+randomNum(10,100)+', 100%, 85%) 0%,hsl('+randomNum(10,300)+', 100%, 85%) 100%)'}"> --> <!-- <div class="container" :style="{background:'linear-gradient(to left bottom, hsl('+randomNum(10,100)+', 100%, 85%) 0%,hsl('+randomNum(10,300)+', 100%, 85%) 100%)'}"> -->
<div class="container" :style="{background:'linear-gradient(to left bottom, #2196f3 30%,#67C23A 100%)'}"> <div
class="container"
:style="{
<div class="login-center"> background: 'linear-gradient(to left bottom, #2196f3 30%,#67C23A 100%)',
<el-card class="my-card"> }"
<el-row> >
<el-col :span="12" class="bg-purple"> <div class="login-center">
<el-card class="my-card">
<div class="welcome"> <el-row>
<div class="lbs-logo" id="svg-div"></div> <!-- <el-col :span="12" class="bg-purple">
<div class="title">
<div class="logo"> <div class="welcome">
<span class="system-name">GPS<font color="#606266">BD</font></span> <div class="lbs-logo" id="svg-div"></div>
<span class="trademark">®</span> <div class="title">
<span class="system-title">{{$t("common.systemName")}}</span> <div class="logo">
</div> <span class="system-name">GPS<font color="#606266">BD</font></span>
<div style="margin-top: 20px;"> <span class="trademark">®</span>
<el-tooltip placement="top"> <span class="system-title">{{$t("common.systemName")}}</span>
<div slot="content"><img width="180" src="http://base.gpsbd.com/down/gpsbd_client.png"/></div> </div>
<el-button><font-awesome-icon icon="globe"/> {{ $t('login.monitorApp')}}</el-button> <div style="margin-top: 20px;">
</el-tooltip> <el-tooltip placement="top">
<el-tooltip placement="top"> <div slot="content"><img width="180" src="http://base.gpsbd.com/down/gpsbd_client.png"/></div>
<div slot="content"><img width="180" src="http://base.gpsbd.com/down/gpsbd_tracker.png"/></div> <el-button><font-awesome-icon icon="globe"/> {{ $t('login.monitorApp')}}</el-button>
<el-button><font-awesome-icon icon="street-view"/> {{ $t('login.locateApp')}}</el-button> </el-tooltip>
</el-tooltip> <el-tooltip placement="top">
<el-tooltip placement="top"> <div slot="content"><img width="180" src="http://base.gpsbd.com/down/gpsbd_tracker.png"/></div>
<div slot="content"><img width="180" src="http://base.gpsbd.com/down/gpsbd_weixin.jpg"/></div> <el-button><font-awesome-icon icon="street-view"/> {{ $t('login.locateApp')}}</el-button>
<el-button><font-awesome-icon icon="comments"/> {{ $t('login.wechat')}}</el-button> </el-tooltip>
</el-tooltip> <el-tooltip placement="top">
</div> <div slot="content"><img width="180" src="http://base.gpsbd.com/down/gpsbd_weixin.jpg"/></div>
</div> <el-button><font-awesome-icon icon="comments"/> {{ $t('login.wechat')}}</el-button>
<div class="login-phone">商务:13665607002 技术支持:13355514723</div> </el-tooltip>
</div> </div>
</el-col> </div>
<el-col :span="12" class="bg-purple2"> <div class="login-phone">商务:13665607002 技术支持:13355514723</div>
<div class="login-right"> </div>
<!-- <div class="login-title">{{$t("login.register")}}</div> </el-col> -->
<div class="line"></div> --> <el-col :span="24" class="bg-purple2">
<!-- <div class="register-type"> <div class="login-right">
<el-radio-group v-model="registerForm.roleIds[0]" > <!-- <div class="login-title">{{$t("login.register")}}</div>
<el-radio :label="item.value" v-for="(item,index) in roles" :key="index">{{item.label}}</el-radio> <div class="line"></div> -->
</el-radio-group> <!-- <div class="register-type">
</div> --> <el-radio-group v-model="registerForm.roleIds[0]" >
<el-radio :label="item.value" v-for="(item,index) in roles" :key="index">{{item.label}}</el-radio>
<el-form :model="registerForm" :rules="registerFormRules" ref="registerForm" status-icon > </el-radio-group>
<el-form-item prop="account" :rules="[{ required: true, message: '手机号码不能为空'},{ min: 11, max: 11, message: '请输入正确的手机号码', trigger: 'blur' }]"> </div> -->
<MDinput v-model="registerForm.account" :maxlength="100" name="account" autocomplete="off" required> <el-form
{{$t('register.mobile')}} :model="registerForm"
</MDinput> :rules="registerFormRules"
</el-form-item> ref="registerForm"
<el-form-item prop="email" :rules="[{ required: true, message: '请输入邮箱'},{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}]"> status-icon
<MDinput v-model="registerForm.email" :maxlength="100" name="email" autocomplete="off" required> >
{{$t('register.email')}} <el-form-item
</MDinput> prop="account"
</el-form-item> :rules="[
{ required: true, message: '手机号码不能为空' },
<el-form-item prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur'},{ min: 6, max: 20, message: '请输入不低于6位的密码', trigger: 'blur' }]"> {
min: 11,
<MDinput type="password" v-model="registerForm.password" :maxlength="100" name="password" autocomplete="off" required> max: 11,
{{$t('register.password')}} message: '请输入正确的手机号码',
</MDinput> trigger: 'blur',
</el-form-item> },
<el-form-item name="password2" prop="password2" :rules="[{ required: true, message: '请再次输入密码'},{ min: 6, max: 20, message: '请输入不低于6位的密码', trigger: 'blur' },{validator: validatePass3, trigger: 'blur'}]"> ]"
<MDinput type="password" @keyup.enter.native="handleRegister" v-model="registerForm.password2" :maxlength="100" name="password2" autocomplete="off" required> >
{{$t('register.password2')}} <MDinput
</MDinput> v-model="registerForm.account"
</el-form-item> :maxlength="100"
<el-form-item> name="account"
<el-row :gutter="20"> autocomplete="off"
<el-col :span="16"><el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleRegister">{{$t("login.register")}}</el-button></el-col> required
<el-col :span="8"><el-button type="primary" style="width:100%;" :loading="loading" @click="$router.push({ path: '/login' })">{{$t("login.login")}}</el-button></el-col> >
</el-row> {{ $t("register.mobile") }}
</el-form-item> </MDinput>
</el-form-item>
</el-form> <el-form-item
</div> prop="email"
</el-col> :rules="[
</el-row> { required: true, message: '请输入邮箱' },
{
</el-card> type: 'email',
</div> message: '请输入正确的邮箱地址',
<div class ="footer-copyright"> trigger: ['blur', 'change'],
<el-button type="text" size="small" @click.native="$store.dispatch('setVisblesFlag', [{key:'feedbackDialog',value:true}])">{{$t("map.userUserFeedback")}}</el-button><el-button type="text" size="small">{{$store.state.common.system.name}}® Version:{{$store.state.common.system.version}} ©{{$store.state.common.system.date}} {{$store.state.common.system.company}}</el-button> },
</el-dialog> ]"
</div> >
</div> <MDinput
</template> v-model="registerForm.email"
:maxlength="100"
<script> name="email"
import Vivus from 'vivus' autocomplete="off"
import '@/styles/common.scss'; required
import MDinput from '@/components/MDinput' >
import { userRegister } from '@/api/api' {{ $t("register.email") }}
</MDinput>
export default { </el-form-item>
name: 'register',
components: {MDinput}, <el-form-item
data() { prop="password"
:rules="[
const validatePass = (rule, value, callback) => { { required: true, message: '请输入密码', trigger: 'blur' },
if (value.length < 5) { {
callback(new Error('密码不能小于5位')) min: 6,
} else { max: 20,
callback() message: '请输入不低于6位的密码',
} trigger: 'blur',
} },
var validatePass2 = (rule, value, callback) => { ]"
if (value === '') { >
callback(new Error('请再次输入密码')); <MDinput
} else if (value !== this.registerForm.password) { type="password"
callback(new Error('两次输入密码不一致!')); v-model="registerForm.password"
} else { :maxlength="100"
callback(); name="password"
} autocomplete="off"
}; required
return { >
roles:[{ {{ $t("register.password") }}
value: 1, </MDinput>
label: this.$t('common.personal') </el-form-item>
}, <el-form-item
{ name="password2"
value: 2, prop="password2"
label: this.$t('common.enterprise') :rules="[
}], { required: true, message: '请再次输入密码' },
registerForm: { {
roleIds:[1], min: 6,
account: '', max: 20,
password: '' message: '请输入不低于6位的密码',
}, trigger: 'blur',
registerFormRules: { //登录框验证规则 },
account: [ { validator: validatePass3, trigger: 'blur' },
{ required: true, message: '请输入帐号', trigger: 'blur' }, ]"
{ min: 2, max: 12, message: '请输入正确的帐号', trigger: 'blur' } >
], <MDinput
email:[ type="password"
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']} @keyup.enter.native="handleRegister"
], v-model="registerForm.password2"
phone:[ :maxlength="100"
{ min: 11, max: 11, message: '请输入正确的手机号码', trigger: 'blur'}, name="password2"
], autocomplete="off"
password:[ required
{ required: true, message: '请输入密码', trigger: 'blur' }, >
], {{ $t("register.password2") }}
password2:[ </MDinput>
{ validator: validatePass2, trigger: 'blur' }, </el-form-item>
] <div style="height: 30px" />
}, <el-form-item>
loading: false, <el-row :gutter="20">
pwdType: 'password' <el-col :span="16"
} ><el-button
}, type="primary"
methods: { style="width: 100%"
:loading="loading"
@click.native.prevent="handleRegister"
validatePass3(rule, value, callback) { >{{ $t("login.register") }}</el-button
if (value === '') { ></el-col
callback(new Error('请再次输入密码')); >
} else if (value !== this.registerForm.password) { <el-col :span="8"
callback(new Error('两次输入密码不一致!')); ><el-button
} else { type="primary"
callback(); style="width: 100%"
} :loading="loading"
}, @click="$router.push({ path: '/login' })"
showPwd() { >{{ $t("login.login") }}</el-button
if (this.pwdType === 'password') { ></el-col
this.pwdType = '' >
} else { </el-row>
this.pwdType = 'password' </el-form-item>
} </el-form>
}, </div>
handleRegister() { </el-col>
this.$refs.registerForm.validate(valid => { </el-row>
if (valid) { </el-card>
this.registerForm.phone = this.registerForm.account </div>
userRegister(this.registerForm).then((res) => { <div class="footer-copyright">
this.$message({ <el-button
message: '注册成功', type="text"
type: 'success' size="small"
}); @click.native="
this.$router.push({path: '/login'}) $store.dispatch('setVisblesFlag', [
}); { key: 'feedbackDialog', value: true },
])
} "
}) >{{ $t("map.userUserFeedback") }}</el-button
} ><el-button type="text" size="small"
}, >{{ $store.state.common.system.name }}® Version:{{
mounted() { $store.state.common.system.version
new Vivus('svg-div', { duration: 2000, file: './static/logo.svg' }); }}
} ©{{ $store.state.common.system.date }}
} {{ $store.state.common.system.company }}</el-button
</script> >
</div>
<style rel="stylesheet/scss" lang="scss"> </div>
</template>
.container {
//background: linear-gradient(to left bottom, hsl(163, 100%, 85%) 0%,hsl(241, 100%, 85%) 100%); <script>
position: absolute; import Vivus from "vivus";
left: 0; import "@/styles/common.scss";
top: 0; import MDinput from "@/components/MDinput";
width: 100%; import { userRegister } from "@/api/api";
height: 100%;
//background: url('../../assets/images/bg.png') no-repeat center / cover; export default {
.welcome{ name: "register",
text-align: -webkit-center; components: { MDinput },
//position: absolute; data() {
//left: 26%; const validatePass = (rule, value, callback) => {
margin-top: 14px; if (value.length < 5) {
font-size: 30px; callback(new Error("密码不能小于5位"));
color: #fff; } else {
.title { callback();
//left: -50px; }
//position: absolute; };
font: bold 30px "microsoft yahei"; var validatePass2 = (rule, value, callback) => {
white-space: nowrap; if (value === "") {
callback(new Error("请再次输入密码"));
} } else if (value !== this.registerForm.password) {
.trademark { callback(new Error("两次输入密码不一致!"));
vertical-align: top; } else {
font-size: 12px; callback();
padding: 3px; }
// color: #606266 };
} return {
.system-title{ roles: [
//color: #606266 {
} value: 1,
.system-name{ label: this.$t("common.personal"),
//color: #606266 },
} {
} value: 2,
.my-card { label: this.$t("common.enterprise"),
},
background-color: hsla(0,0%,100%,0.2); ],
width: 80%; registerForm: {
height: 60%; roleIds: [1],
position: absolute; account: "",
left: 50%; password: "",
top: 50%; },
-webkit-transform: translate(-50%, -50%); registerFormRules: {
transform: translate(-50%, -50%); //登录框验证规则
-webkit-box-shadow: -8px 8px 8px rgba(59, 59, 59, 0.8); account: [
box-shadow: -8px 8px 8px rgba(59, 59, 59, 0.8); { required: true, message: "请输入帐号", trigger: "blur" },
.line { { min: 2, max: 12, message: "请输入正确的帐号", trigger: "blur" },
width: 20px; ],
height: 10px; email: [
border-bottom: 2px solid #fff; {
margin: 0 auto 20px; type: "email",
} message: "请输入正确的邮箱地址",
.login-title{ trigger: ["blur", "change"],
height: 40px; },
line-height: 40px; ],
font-size: 20px; phone: [
color: #fff; {
text-align: center; min: 11,
} max: 11,
span{ message: "请输入正确的手机号码",
padding-left: 10px; trigger: "blur",
} },
.el-input{ ],
width: 300px; password: [{ required: true, message: "请输入密码", trigger: "blur" }],
padding-left: 10px; password2: [{ validator: validatePass2, trigger: "blur" }],
} },
} loading: false,
} pwdType: "password",
};
.lbs-logo{ },
width: 300px; methods: {
height: 190px; validatePass3(rule, value, callback) {
} if (value === "") {
.login-icon { callback(new Error("请再次输入密码"));
color: #fff } else if (value !== this.registerForm.password) {
} callback(new Error("两次输入密码不一致!"));
.el-button--text{ } else {
color: #fff callback();
} }
.login-center{ },
text-align: center; showPwd() {
.el-form-item__label{ if (this.pwdType === "password") {
color: #fff this.pwdType = "";
} } else {
.el-radio__label{ this.pwdType = "password";
color: #fff }
} },
} handleRegister() {
.login-right{ this.$refs.registerForm.validate((valid) => {
padding: 26px; if (valid) {
} this.registerForm.phone = this.registerForm.account;
.bg-purple { userRegister(this.registerForm).then((res) => {
//position: absolute; this.$message({
background: #409EFF; message: "注册成功",
height: 600px; type: "success",
padding: 16px; });
} this.$router.push({ path: "/login" });
.bg-purple2 { });
//background: #cccccc; }
} });
.login-center .el-card__body{ },
padding: 0px },
} mounted() {
.login-phone{ // new Vivus('svg-div', { duration: 2000, file: './static/logo.svg' });
font-size: 12px; },
float:left; };
bottom: 0; </script>
position: fixed;
<style rel="stylesheet/scss" lang="scss">
} .container {
.set-language{ //background: linear-gradient(to left bottom, hsl(163, 100%, 85%) 0%,hsl(241, 100%, 85%) 100%);
float: right; position: absolute;
//color: #409EFF; left: 0;
} top: 0;
.register-type{ width: 100%;
margin-bottom: 10px; height: 100%;
} //background: url('../../assets/images/bg.png') no-repeat center / cover;
.material-input__component{ .welcome {
background-color:transparent!important; text-align: -webkit-center;
margin-top: 16px!important; //position: absolute;
//left: 26%;
} margin-top: 14px;
.material-input__component .material-label{ font-size: 30px;
color: #ffffff!important; color: #fff;
} .title {
.material-input__component .material-input{ //left: -50px;
color: #ffffff!important; //position: absolute;
} font: bold 30px "microsoft yahei";
</style> white-space: nowrap;
}
.trademark {
vertical-align: top;
font-size: 12px;
padding: 3px;
// color: #606266
}
.system-title {
//color: #606266
}
.system-name {
//color: #606266
}
}
.my-card {
background-color: hsla(0, 0%, 100%, 0.2);
width: 80%;
height: 60%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-box-shadow: -8px 8px 8px rgba(59, 59, 59, 0.8);
box-shadow: -8px 8px 8px rgba(59, 59, 59, 0.8);
.line {
width: 20px;
height: 10px;
border-bottom: 2px solid #fff;
margin: 0 auto 20px;
}
// .login-title {
// height: 40px;
// line-height: 40px;
// font-size: 20px;
// color: #fff;
// text-align: center;
// }
span {
padding-left: 10px;
}
.el-input {
width: 300px;
padding-left: 10px;
}
}
}
.lbs-logo {
width: 300px;
height: 190px;
}
.login-icon {
color: #fff;
}
.el-button--text {
color: #fff;
}
.login-center {
text-align: center;
.el-form-item__label {
color: #fff;
}
.el-radio__label {
color: #fff;
}
}
.login-right {
height: 100%;
padding: 50px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.bg-purple {
//position: absolute;
background: #409eff;
height: 600px;
padding: 16px;
}
.bg-purple2 {
//background: #cccccc;
}
.login-center .el-card__body {
padding: 0px;
}
.login-phone {
font-size: 12px;
float: left;
bottom: 0;
position: fixed;
}
.set-language {
float: right;
//color: #409EFF;
}
.register-type {
margin-bottom: 10px;
}
.material-input__component {
background-color: transparent !important;
margin-top: 16px !important;
}
.material-input__component .material-label {
color: #ffffff !important;
}
.material-input__component .material-input {
color: #ffffff !important;
}
</style>
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