Commit 50dadf42 authored by zhanglw's avatar zhanglw

登录注册相关页面

parent bd781487
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688794848340" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2352" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z" p-id="2353"></path></svg>
\ No newline at end of file
...@@ -7,7 +7,7 @@ Vue.use(Router) ...@@ -7,7 +7,7 @@ Vue.use(Router)
export const constantRouterMap = [ export const constantRouterMap = [
{ path: '/login', { path: '/login',
meta: { title: '登录', noCache: true }, meta: { title: '登录', noCache: true },
component: (resolve) => require(['@/views/login'], resolve), component: (resolve) => require(['@/views/homepage/login'], resolve),
hidden: true hidden: true
}, },
{ path: '/backlogin', { path: '/backlogin',
...@@ -164,6 +164,14 @@ export const constantRouterMap = [ ...@@ -164,6 +164,14 @@ export const constantRouterMap = [
}, },
hidden: true hidden: true
}, },
{
path: '/console/registerInfo',
meta: { title: '用户注册信息', noCache: true },
component: (resolve) => {
return require(['@/views/homepage/console/registerInfo'], resolve)
},
hidden: true
},
{ {
path: '/console/userInfo', path: '/console/userInfo',
meta: { title: '个人中心-用户信息', noCache: true }, meta: { title: '个人中心-用户信息', noCache: true },
......
...@@ -7,6 +7,12 @@ ...@@ -7,6 +7,12 @@
</template> </template>
<script> <script>
export default { export default {
props: {
menuIndex: {
type: String,
default: '0'
}
},
data() { data() {
return { return {
menus: [ menus: [
......
<template>
<div class="page-body">
<div class="head-box">
<div class="head-box-top">
<div class="top-call" />
<div class="top-call"><img src="@/assets/home_images/gemho_logo_b.png"></div>
<div class="top-call"><title-menus ref="titleMenus" menu-index="99" style="padding-top: 15px" /></div>
<div class="top-call"><user-login ref="userLogin" /></div>
<div class="top-call"><language-setting ref="languageSetting" /></div>
</div>
</div>
<div class="content-box">
<div style="width: 88%;padding-left: 9%;padding-top: 130px">
<div class="page-title" style="text-align: center">填写注册信息</div>
<div class="form-table-box">
<el-form ref="formViewRef" :model="formData" :rules="rules" :status-icon="true" label-width="240px">
<el-form-item label="企业名称:" class="form-cell" prop="enterpriseName">
<div class="cell-box">
<el-input v-model="formData.enterpriseName" placeholder="请输入企业名称" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="企业联系人:" class="form-cell" prop="enterpriseContactPerson">
<div class="cell-box">
<el-input v-model="formData.enterpriseContactPerson" placeholder="请输入联系人" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="企业联系人手机号:" class="form-cell" prop="enterpriseContactPersonPhone">
<div class="cell-box">
<el-input v-model="formData.enterpriseContactPersonPhone" placeholder="请输入手机号" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="注册地址:" class="form-cell" required>
<div class="cell-box">
<el-select v-model="formData.registeredAddressProvince" placeholder="省" style="width: 120px" @change="findAreaByCodeAndType(formData.registeredAddressProvince,2, 'cityOpts')">
<el-option v-for="item in provinceOpts" :key="item.id" :label="item.name" :value="item.code" />
</el-select>
<el-select v-model="formData.registeredAddressCity" placeholder="市" style="width: 160px" @change="findAreaByCodeAndType(formData.registeredAddressCity,3, 'countyOpts')">
<el-option v-for="item in cityOpts" :key="item.id" :label="item.name" :value="item.code" />
</el-select>
<el-select v-model="formData.registeredAddressArea" placeholder="区/县" style="width: 160px">
<el-option v-for="item in countyOpts" :key="item.id" :label="item.name" :value="item.code" />
</el-select>
</div>
<div class="cell-box">
<el-input v-model="formData.registeredAddressStreet" placeholder="详细地址(例如:和平路北大街106号)" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="企业邮箱:" class="form-cell" prop="enterpriseEmail">
<div class="cell-box">
<el-input v-model="formData.enterpriseEmail" placeholder="请输入邮箱" class="cell-input" />
</div>
</el-form-item>
</el-form>
<div style="width: 100%;text-align: center">
<el-button type="primary" @click="submitForm()">完成</el-button>
</div>
</div>
</div>
</div>
<home-footer ref="homeFooter" />
<el-backtop />
</div>
</template>
<script>
import titleMenus from '../components/titleMenusV2'
import userLogin from '../components/userLoginV2'
import languageSetting from '../components/languageSettingV2'
import homeFooter from '../components/homeFooter'
import { getToken } from '@/utils/auth'
import { HttpReq } from '@/api/common'
export default {
components: { titleMenus, userLogin, languageSetting, homeFooter },
dicts: ['industry_type', 'supplier_rank', 'company_type', 'business_status'],
data() {
return {
uploadHeaders: { 'Authorization': getToken() },
imgSrcStart: process.env.VUE_APP_BASE_API,
dialogImageUrl: '',
dialogImageVisible: false,
visible: false,
title: '',
imgList: [],
dialogImgUrl: '',
dialogImgVisible: false,
provinceOpts: [],
cityOpts: [],
countyOpts: [],
formData: {
annualInspectionDate: '', // 审核日期
businessLicense: '', // 营业执照的照片名称
businessScope: '', // 经营范围
businessScopeIntroduction: '', // 业务范围介绍
businessStatus: '', // 经营状态
enterpriseAddress: '', // 企业地址
enterpriseContactPerson: '', // 企业联系人
enterpriseContactPersonPhone: '', // 企业联系人手机号
enterpriseEmail: '', // 企业邮箱
enterpriseIntroduction: '', // 企业介绍
enterpriseName: '', // 企业名称
enterpriseType: '', // 企业类型
establishmentDate: '', // 成立日期
industry: '', // 所属行业
legalRepresentative: '', // 法定代表人
mainProductsIntroduction: '', // 主营产品介绍
operatingPeriod: '', // 经营期限
registeredAddressArea: '', // 注册地址-区
registeredAddressCity: '', // 注册地址-市
registeredAddressProvince: '', // 注册地址-省
registeredAddressStreet: '', // 注册地址-街道
registeredCapital: '', // 注册资本
registrationAuthority: '', // 登记机关
supplierLevel: '1', // 供应商级别
taxpayerIdentificationNumber: '', // 纳税人识别号
unifiedSocialCreditCode: '', // 统一社会信用代码
sysUserId: null
},
rules: {
enterpriseName: { required: true, message: '请填写企业名称', trigger: 'blur' },
enterpriseContactPerson: { required: true, message: '请填写企业联系人', trigger: 'blur' },
enterpriseContactPersonPhone: { required: true, message: '请填写企业联系人手机号', trigger: 'blur' },
registeredAddressProvince: { required: true, message: '请填写企业地址', trigger: 'blur' },
registeredAddressCity: { required: true, message: '请填写企业地址', trigger: 'blur' },
registeredAddressStreet: { required: true, message: '请填写企业地址', trigger: 'blur' },
}
}
},
mounted() {
this.$nextTick(() => {
this.loadData()
})
},
methods: {
cancelView() {
this.$router.go(-1)
},
submitForm() {
this.$refs.formViewRef.validate((valid, obj) => {
if (valid) {
} else {
this.$message({
message: '表单信息有误,请核对无误后提交!',
type: 'error'
})
}
})
},
handleProgress(file) {
if (this.formData.businessLicense.split(';').length >= 2) {
this.$message({
message: '超出最大上传数量限制',
type: 'info'
})
return false
}
},
handleExceed() {
this.$message({
message: '超出最大上传数量限制',
type: 'info'
})
},
handleRemoveImg(item) {
this.imgList.splice(this.imgList.indexOf(item), 1)
const arr = this.formData.businessLicense.split(';')
arr.splice(arr.indexOf(item), 1)
this.formData.businessLicense = arr.join(';')
},
handleRemove(file, fileList) {
if (!file.response) {
return
}
HttpReq.backstageApi.deleteBusinessLicense({
businessLicense: file.response.businessLicense
}).then((res) => {
this.$notify({
title: res.msg,
type: 'success',
duration: 2500
})
const arr = this.formData.businessLicense.split(';')
arr.splice(arr.indexOf(file.response.businessLicense), 1)
this.formData.businessLicense = arr.join(';')
})
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogImageVisible = true
},
handleImported(response, file, fileList) {
this.$nextTick(() => {
const arr = this.formData.businessLicense ? this.formData.businessLicense.split(';') : []
arr.push(response.businessLicense)
this.formData.businessLicense = arr.join(';')
this.$notify({
title: '上传成功!',
type: 'success',
duration: 2500
})
})
},
findAreaByCodeAndType(code, type, optsName) {
switch (optsName) {
case 'provinceOpts':
case 'cityOpts':
this.formData.registeredAddressCity = null
this.formData.registeredAddressArea = null
break
case 'countyOpts':
this.formData.registeredAddressArea = null
}
this.findAreaQueryOnly(code, type, optsName)
},
findAreaQueryOnly(code, type, optsName) {
HttpReq.backstageApi.findAreaByCodeAndType({
code, type
}).then((res) => {
this[optsName] = res
})
},
loadData() {
this.findAreaQueryOnly(0, 1, 'provinceOpts')
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.touch {
cursor:pointer;
}
.clear {
clear: both
}
.inline-block {
display: inline-block;
}
.ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
}
.showcase {
padding: 1px 0;
font-size: 20px;
font-family: Source Han Sans CN;
font-weight: 400;
}
.form-table-box {
width: 1080px;
margin: 20px auto;
padding: 30px;
border: 1px solid rgba(0,0,0,0.12);
box-shadow: 1px 2px 8px 0 rgba(0,0,0,0.12);
border-radius: 10px;
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
.head-box-top {
display: flex;
justify-content: space-evenly;
align-items: center;
.top-call {
height: 80px;
padding-top: 15px;
}
}
}
.content-box {
min-height: calc(100vh - 300px);
font-family: Source Han Sans CN;
user-select: none;
.page-title {
margin-top: 20px;
padding: 0 20px;
font-size: 26px;
font-weight: bold;
color: #333333;
}
}
.line-btn {
display: flex;
justify-content: center;
font-family: Source Han Sans CN;
font-weight: 400;
.btn-o {
margin: 0 25px;
width: 360px;
padding: 6px 10px;
background: #F7601A;
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
text-align: center;
border: 1px solid transparent;
font-size: 22px;
color: #FFFFFF;
cursor:pointer;
user-select: none;
}
.btn-o:hover {
border: 1px solid rgba(30, 144, 255, 0.8);
color: #1482f0;
}
.btn-l {
margin: 0 25px;
width: 360px;
padding: 10px;
background: #1961C5;
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
text-align: center;
border: 1px solid transparent;
font-size: 22px;
color: #FFFFFF;
cursor:pointer;
user-select: none;
}
.btn-l:hover {
border: 1px solid rgba(0,0,0,0.3);
color: #F7601A;
}
.btn-b {
margin: 0 10px;
width: 168px;
padding: 6px;
background: #EFF6FF;
border: 1px solid transparent;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
text-align: center;
font-size: 20px;
color: #1961C5;
cursor:pointer;
user-select: none;
}
.btn-b:hover {
border: 1px solid rgba(30, 144, 255, 0.9);
}
.active {
color: #FFFFFF;
font-weight: 400;
background: #1961C5;
}
}
.grid-content {
border: 1px solid rgba(100, 100, 100, 0.3);
padding: 0;
}
.grid-label {
background: #dedede;
padding: 0 10px;
}
.editor{
text-align:left;
width: 680px;
}
::v-deep .w-e-text-container {
height: 560px !important;
}
.cell-box {
min-width: 120px;
.cell-input {
width: 620px;
}
.cell-select {
width: 220px;
}
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 28px;
line-height: 24px;
padding: 0 8px;
}
.input-new-tag {
width: 140px;
height: 28px;
margin-left: 10px;
vertical-align: bottom;
}
>>>.el-input__inner {
border: 1px solid rgba(100, 100, 100, 0.1);
border-bottom: 1px solid rgba(100, 100, 100, 0.2);
border-radius: 5px;
}
>>>.el-input.is-disabled .el-input__inner {
border-radius: 0;
border: 0;
border-bottom: 1px solid rgba(100, 100, 100, 0.4);
background: white;
cursor: text;
}
>>>.el-input.is-disabled .el-input__icon {
cursor: text;
}
>>>.el-icon-circle-check {
color: #13ce66;
}
//>>>.el-icon-arrow-up:before {
// content: '';
//}
}
</style>
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="head-box-top"> <div class="head-box-top">
<div class="top-call" /> <div class="top-call" />
<div class="top-call"><img src="@/assets/home_images/gemho_logo.png" alt="gemho-logo"></div> <div class="top-call"><img src="@/assets/home_images/gemho_logo.png" alt="gemho-logo"></div>
<div class="top-call"><title-menus ref="titleMenus" /></div> <div class="top-call"><title-menus ref="titleMenus" menu-index="0" /></div>
<div class="top-call"><user-login ref="userLogin" /></div> <div class="top-call"><user-login ref="userLogin" /></div>
<div class="top-call"><language-setting ref="languageSetting" /></div> <div class="top-call"><language-setting ref="languageSetting" /></div>
</div> </div>
...@@ -168,7 +168,6 @@ import languageSetting from './components/languageSetting' ...@@ -168,7 +168,6 @@ import languageSetting from './components/languageSetting'
import searchPanel from './components/searchPanel' import searchPanel from './components/searchPanel'
import homeFooter from './components/homeFooter' import homeFooter from './components/homeFooter'
import inquiryView from './components/inquiryView' import inquiryView from './components/inquiryView'
import NProgress from 'nprogress'
export default { export default {
components: { floatBtn, titleMenus, userLogin, languageSetting, searchPanel, homeFooter, inquiryView }, components: { floatBtn, titleMenus, userLogin, languageSetting, searchPanel, homeFooter, inquiryView },
......
<template>
<div class="page-body">
<div class="head-box-login">
<div class="head-box-top">
<div class="top-call" />
<div class="top-call"><img src="@/assets/home_images/gemho_logo.png" alt="gemho-logo"></div>
<div class="top-call"><title-menus ref="titleMenus" menu-index="99" /></div>
<div class="top-call"><user-login ref="userLogin" /></div>
<div class="top-call"><language-setting ref="languageSetting" /></div>
</div>
</div>
<div class="content-box-login">
<div class="login-panel" style="width: 64%;text-align: center"><img src="@/assets/home_images/login_title.png"></div>
<div class="login-panel" style="width: 36%">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
<h3>{{ title }}</h3>
<div class="login-remember" style="padding-bottom: 10px">
<span v-if="mode===1" class="touch" @click="changeMode(2)"><i class="el-icon-s-unfold el-icon--left" />短信快捷登录</span>
<span v-if="mode===2" class="touch" @click="changeMode(1)"><i class="el-icon-s-fold el-icon--left" />使用密码登录</span>
</div>
<el-form-item prop="username">
<el-input v-model="loginForm.username" size="medium" type="text" auto-complete="off" placeholder="请输入11位手机号码">
<template slot="prepend">+86</template>
<svg-icon slot="prefix" icon-class="z_phone" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item v-show="mode!==2" prop="password">
<el-input v-model="loginForm.password" size="medium" type="password" auto-complete="off" placeholder="请输入登录密码" @keyup.enter.native="handleLogin">
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item v-show="mode===1" prop="code">
<el-input v-model="loginForm.code" size="medium" auto-complete="off" placeholder="图像验证码" style="width: 70%" @keyup.enter.native="handleLogin">
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode">
</div>
</el-form-item>
<el-form-item v-show="mode!==1" prop="sms">
<el-input v-model="loginForm.sms" size="medium" auto-complete="off" placeholder="短信验证码" style="width: 70%" @keyup.enter.native="handleLogin">
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input>
<div class="login-code">
<div class="sms-btn touch" @click="getSmsCode">{{ smsBtn }} {{ smsTime?smsTime+'s':'' }}</div>
</div>
</el-form-item>
<el-form-item v-show="mode!==3" style="width:100%;">
<div class="login-remember">
<el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;opacity: 0.8">下次自动登录</el-checkbox>
</div>
<el-button :loading="loading" size="medium" type="primary" style="width:100%;font-size:17px;padding:13px" @click.native.prevent="handleLogin">
<span v-if="!loading">{{ title }}</span>
<span v-else>登 录 中...</span>
</el-button>
<div class="login-remember" style="margin: 10px 0">
<span class="underline touch" @click="changeMode(3)">去注册</span>
</div>
</el-form-item>
<el-form-item v-show="mode===3" style="width:100%;">
<el-button :loading="loading" size="medium" type="primary" style="width:70%;font-size:17px;padding:13px" @click.native.prevent="handleRegister">
<span v-if="!loading">注册</span>
<span v-else>登 录 中...</span>
</el-button>
<div class="login-account">
<span class="underline touch" @click="changeMode(1)">使用已有账号登录</span>
</div>
<div style="padding: 10px 0;">
<el-checkbox v-model="loginForm.rememberMe" style="margin:0;opacity:0.8" />
<div class="login-agreement"><span class="touch">阅读并接受《中国基建传感器网用户协议》及《中国基建传感器网隐私权保护声明》</span></div>
</div>
</el-form-item>
</el-form>
</div>
</div>
<home-footer ref="homeFooter" />
</div>
</template>
<script>
import { encrypt } from '@/utils/rsaEncrypt'
import Config from '@/settings'
import { getCodeImg } from '@/api/login'
import Cookies from 'js-cookie'
import qs from 'qs'
import titleMenus from './components/titleMenus'
import userLogin from './components/userLogin'
import languageSetting from './components/languageSetting'
import homeFooter from './components/homeFooter'
export default {
components: { titleMenus, userLogin, languageSetting, homeFooter },
data() {
const validateMobile = (rule, value, callback) => {
if (value === 'admin') {
return callback()
}
const newValue = value.replace(/[^0-9]/gi, '')
if (value !== newValue) {
callback(new Error('请输入正确的手机号'))
} else if (newValue.length !== 11) {
callback(new Error('请输入正确的手机号'))
} else {
callback()
}
}
const validatePass = (rule, value, callback) => {
if (this.mode !== 2 && !value) {
callback(new Error('密码不能为空'))
} else {
callback()
}
}
const validateCode = (rule, value, callback) => {
if (this.mode === 1 && !value) {
callback(new Error('图像验证码不能为空'))
} else {
callback()
}
}
const validateSms = (rule, value, callback) => {
if (this.mode !== 1 && !value) {
callback(new Error('短信验证码不能为空'))
} else {
callback()
}
}
return {
mode: 1,
title: '登录',
smsBtn: '短信获取验证码',
smsTime: 0,
smsTimer: null,
codeUrl: '',
cookiePass: '',
loginForm: {
username: '',
password: '',
rememberMe: false,
code: '',
sms: '',
uuid: ''
},
loginRules: {
username: [{ required: true, trigger: 'blur', message: '手机号不能为空' }, { validator: validateMobile, trigger: 'blur' }],
password: [{ validator: validatePass, trigger: 'blur' }],
code: [{ validator: validateCode, trigger: 'change' }],
sms: [{ validator: validateSms, trigger: 'change' }]
},
loading: false,
redirect: undefined
}
},
watch: {
$route: {
handler: function(route) {
const data = route.query
if (data && data.redirect) {
this.redirect = data.redirect
delete data.redirect
if (JSON.stringify(data) !== '{}') {
this.redirect = this.redirect + '&' + qs.stringify(data, { indices: false })
}
}
},
immediate: true
}
},
created() {
// 获取验证码
this.getCode()
// 获取用户名密码等Cookie
this.getCookie()
// token 过期提示
this.point()
},
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer)
this.timer = null
}
},
methods: {
changeMode(mode) {
this.mode = mode
if (mode === 1) {
this.title = '登录'
} else if (mode === 2) {
this.title = '快捷登录'
} else {
this.title = '注册'
}
},
getSmsCode() {
if (this.timer && this.smsTime) {
return
}
this.smsBtn = '短信已发送'
this.smsTime = 30
this.timer = setInterval(() => {
this.smsTime--
if (this.smsTime === 0) {
clearInterval(this.timer)
this.timer = null
this.smsBtn = '短信获取验证码'
}
}, 1000)
},
getCode() {
getCodeImg().then(res => {
this.codeUrl = res.img
this.loginForm.uuid = res.uuid
})
},
getCookie() {
const username = Cookies.get('username')
let password = Cookies.get('password')
const rememberMe = Cookies.get('rememberMe')
// 保存cookie里面的加密后的密码
this.cookiePass = password === undefined ? '' : password
password = password === undefined ? this.loginForm.password : password
this.loginForm = {
username: username === undefined ? this.loginForm.username : username,
password: password,
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
code: ''
}
},
handleRegister() {
this.$refs.loginForm.validate(valid => {
const user = {
username: this.loginForm.username,
password: this.loginForm.password,
rememberMe: this.loginForm.rememberMe,
code: this.loginForm.code,
sms: this.loginForm.sms,
uuid: this.loginForm.uuid
}
if (user.password !== this.cookiePass) {
user.password = encrypt(user.password)
}
if (valid) {
this.loading = true
if (user.rememberMe) {
Cookies.set('username', user.username, { expires: Config.passCookieExpires })
Cookies.set('password', user.password, { expires: Config.passCookieExpires })
Cookies.set('rememberMe', user.rememberMe, { expires: Config.passCookieExpires })
} else {
Cookies.remove('username')
Cookies.remove('password')
Cookies.remove('rememberMe')
}
this.$store.dispatch('Login', user).then(() => {
this.loading = false
this.$router.push({ path: '/console/registerInfo' })
}).catch(() => {
this.loading = false
this.getCode()
})
} else {
console.log('error submit!!')
return false
}
})
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
const user = {
username: this.loginForm.username,
password: this.loginForm.password,
rememberMe: this.loginForm.rememberMe,
code: this.loginForm.code,
sms: this.loginForm.sms,
uuid: this.loginForm.uuid
}
if (user.password !== this.cookiePass) {
user.password = encrypt(user.password)
}
if (valid) {
this.loading = true
if (user.rememberMe) {
Cookies.set('username', user.username, { expires: Config.passCookieExpires })
Cookies.set('password', user.password, { expires: Config.passCookieExpires })
Cookies.set('rememberMe', user.rememberMe, { expires: Config.passCookieExpires })
} else {
Cookies.remove('username')
Cookies.remove('password')
Cookies.remove('rememberMe')
}
this.$store.dispatch('Login', user).then(() => {
this.loading = false
this.$router.push({ path: this.redirect || '/home' })
}).catch(() => {
this.loading = false
this.getCode()
})
} else {
console.log('error submit!!')
return false
}
})
},
point() {
const point = Cookies.get('point') !== undefined
if (point) {
this.$notify({
title: '提示',
message: '当前登录状态已过期,请重新登录!',
type: 'warning',
duration: 5000
})
Cookies.remove('point')
}
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
.touch {
cursor:pointer;
}
.underline {
text-decoration: underline; //下划线
text-underline-offset: 5px; //下划线和文字间距
}
.head-box-login {
width: 100vw;
background: #1961C5;
position: fixed;
.head-box-top {
display: flex;
justify-content: space-evenly;
align-items: center;
padding: 15px 15px 0;
.top-call {
height: 50px;
}
}
.head-title {
width: 100%;
margin-top: 92px;
text-align: center;
user-select: none;
}
}
.content-box-login {
width: 100vw;
height: 100vh;
display: table;
background: #1961C5;
font-family: Source Han Sans CN;
font-weight: 400;
user-select: none;
.login-panel {
height: calc(100vh - 165px);
display: table-cell;
vertical-align: middle;
}
.login-form {
border-radius: 6px;
width: 520px;
padding: 25px;
h3 {
margin: 10px 0;
color: white;
}
.login-remember {
text-align: right;
color: white;
}
.el-checkbox {
.el-checkbox__inner {
background-color: transparent;
border-color: white;
}
.el-checkbox__label {
padding-top: 2px;
color: white;
}
}
.el-input {
height: 42px;
input {
height: 42px;
}
}
.input-icon{
height: 42px;width: 16px;margin-left: 2px;
}
}
.login-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
.login-account {
width: 30%;
display: inline-block;
padding-top: 16px;
text-align: center;
float: right;
color: white;
}
.login-agreement {
width: 440px;
float: right;
color: white;
span {
opacity: 0.8;
}
span:hover {
opacity: 1;
}
}
.login-code {
width: 26%;
display: inline-block;
height: 38px;
float: right;
img{
margin: 2px 0;
cursor: pointer;
vertical-align:middle
}
.sms-btn {
width: 100%;
background-color: #7FBAF5;
color: white;
text-align: center;
padding: 7px;
}
}
}
</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