登录和注册（三）02登录页——参考版本
效果
代码
src\views\myCenter\accountManagement\loginRegister\loginOutSide.vue
<template>
<div class="login">
<div class="login-div">
<div class="login-img">
<LogoIndex myHeight="55px" myWidth="215px"></LogoIndex>
<!--<img :src="photoPath"/>-->
</div>
</div>
<div class="login-background-image"></div>
<div class="login-right">
<div class="login-intentionList">
<div id="intentionList-element">
<div class="intentionList-tab">
<ul>
<li v-for="(tab,tabIndex) in tabs" :class="[{active1:tabIndex==tabNum},{active2:tabIndex!==tabNum}]"
@click="tabBtn(tabIndex)">{{tab.name}}
</li>
</ul>
</div>
<!-- 成果意向内容的显示-->
<div class="login-right-content" v-show="tabNum==0?tabShow:!tabShow">
<ul class="login-right-ul">
<li>
<p>账 号</p>
<div>
<span class="login-right-ul-span login-right-span">
<img src="img/icon-userName.png" alt="">
</span>
<input type="text" id="inputs" v-model="loginss" placeholder="手机号/邮箱">
<p style="position: absolute;top: 32px;font-size: 12px;color: red;">{{loginsss}}</p>
</div>
</li>
<li>
<span>密 码</span>
<div>
<span class="login-right-ul-span login-right-li-span">
<img src="img/icon-pass.png" alt="">
</span>
<input type="password" id="pass" v-model="passwords" @keyup.enter="usernames()">
<p style="position: absolute;top: 32px;font-size: 12px;color: red;">{{passwordss}}</p>
</div>
</li>
<li>
<span>验证码</span>
<div style="background: #fff;">
<p style="width: 175px;background: #eee;height: 100%;border-radius: 5px;"><input type="text" v-model="veriCode" style="width: 165px; left: 70px;"></p>
<p @click="ress" style="width: 100px;margin-top: 4px;margin-left: 20px;"><img :src="imgCode" alt="" style="height: 34px;width: 119px;"></p>
</div>
</li>
</ul>
<div class="forget">
<div class="forget-remember">
</div>
<div class="forget-immediately">
<span class="forget-immediately-pass" @click="remember">忘记密码</span>
<!--<span class="forget-immediately-span">|</span>-->
<!--<span class="forget-immediately-rem" @click="registers">立即注册</span>-->
</div>
</div>
<p class="errors">{{usererror}}</p>
<div class="knob">
<button class="knob-abolish" @click="calcel">取 消</button>
<button class="Public-Button" @click="usernames()">登 录</button>
</div>
</div>
<!-- 雇佣意向内容的显示-->
<div class="login-right-contents" v-show="tabNum==1?tabShow:!tabShow">
<ul class="login-right-ul" style="margin-top: -10px;">
<li>
<p>手机号</p>
<div>
<img src="img/icon-phone.png" class="div-img">
<input type="text" id="inputes" class="inp" maxlength="11" v-model="phoness">
<p style="position: absolute;margin-top: -13px;font-size: 12px;color: red;">{{loginssse}}</p>
</div>
</li>
<li>
<span>验证码</span>
<div class="login-right-ul-code">
<img src="img/icon-pass.png" class="password-img">
<input type="text" id="passw" class="inp" v-model="veriPhCode" @keyup.enter="useres()">
</div>
<button class="password-button iphoneBoundBtn" @click="phones()">获取手机验证码</button>
</li>
</ul>
<p class="register-p" @click="registers">立即注册</p>
<p class="err">{{usererr}}</p>
<div class="knob knobs">
<button class="knob-abolish" @click="calcel">取 消</button>
<button class="Public-Button" @click="useres()">登 录</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import * as allCookie from '../../../../utils/utils.js';
export default {
components: {},
data () {
return {
photoPath:"",
tabShow: true,
imgCode: "",
tabs: [
{name: "普通登录"}
],
tabNum: 0,
usererr: '',
usererror: '',
loginss: '',
passwords: '',
veriPhCode: '',
phoness: '',
enPwd: '',
loginsss: '',
loginssse: '',
veriCode: '',
passwordss: '',
ser:'',
key:""
}
},
methods: {
tabBtn(tabIndex){
this.tabNum = tabIndex;
this.ress();
},
ress() {
this.imgCode = process.env.VUE_APP_API_HOST+ '/login/captcha?' + Math.random();
},
remember() {
this.$router.push({path: '/RememberPassword'})
},
registers() {
this.$router.push('/register')
},
useres() {//手机验证码登录；
if (this.phoness == '') {
this.loginssse = '请输入手机号'
return false;
} else {
this.loginssse = ''
}
if (this.veriPhCode == '') {
this.usererr = '请输入短信验证码';
return false
} else {
this.usererr = '';
var that = this;
var item = {
"phone": this.encrypt.dataEncrypt(this.phoness),
"verificationCode": this.veriPhCode,
'pegsecret': this.ser
};
var loading = this.$loading({
lock: true,
text: '登录中...',
spinner: 'el-icon-loading',
background: 'rgba(255, 255, 255, 0.7)'
});
this.$http.post(process.env.VUE_APP_API_HOST+ '/login/phoneLogin', item).then(function (response) {
if (response.data.result == 0) {
loading.close();
window.sessionStorage.setItem('tokenId', response.data.data.tokenId);
window.sessionStorage.setItem('userName', response.data.data.userName);
window.sessionStorage.setItem('userType', response.data.data.userType);
window.sessionStorage.setItem('userId', response.data.data.userId);
window.sessionStorage.setItem('status', response.data.data.status);
window.sessionStorage.setItem('isSgcc', response.data.data.isSgcc);
window.sessionStorage.setItem('thumb', response.data.data.thumb);
window.sessionStorage.setItem('userRealName', response.data.data.user_real_name);
window.sessionStorage.setItem('is_owner_auth', response.data.data.is_owner_auth);
window.sessionStorage.setItem('deptname', response.data.data.deptname);
window.sessionStorage.setItem('ser', SG_sm2Encrypt(that.key, "0453f1d34ffd6489c41c8ffba7a604e48097ed605361c794fc9b6d7df064f081f72d9bdc592db2fcc8c6599350e67969bb9227d1ac04a50268353226c45bb35424"));
allCookie.CookieSet("web_token",response.data.data.tokenId);
//区分是否显示同步写入和同步读取
window.sessionStorage.setItem('manualSync', response.data.data.manualSync);
window.sessionStorage.setItem('accountName', response.data.data.accountName);
that.$store.commit('getAccountName');
that.$store.commit('getManualSync');
that.$store.commit('changeUserName');
that.$store.commit('getUserType');
that.$store.commit('setCompanyType');
var str = window.location.href;
var num = str.indexOf("?");
var strTwo = str.substr(num + 1);
var arr = strTwo.split("#");
var tic = arr[0];
let redirect = decodeURIComponent(that.$route.query.redirect || '/');
let id = decodeURIComponent(that.$route.query.id || '');
if(window.location.hash != "#/login"){
that.$router.push({
path: redirect + id
})
}else {
that.$router.push({path: '/homePage'})
}
if (sessionStorage.getItem("tokenId")) {
var item = {
"tokenId": sessionStorage.getItem("tokenId")
}
that.$http.post(process.env.VUE_APP_API_HOST+ '/user/userInfo', item).then(function (response) {
console.log(response,"res-----")
if (response.data.result == 0) {
window.sessionStorage.setItem('roles', response.data.data.roles);
window.sessionStorage.setItem('parentName', response.data.data.parentName);
window.sessionStorage.setItem('parentId', response.data.data.parentId);
}
})
}
} else if (response.data.result == -1) {
loading.close();
var errorMessage = response.data.data.message;
if(response.data.data.code == "PES_1201"){
window.sessionStorage.setItem("IphoneNumber",that.loginss)
window.sessionStorage.setItem("IphoneTokenId",response.data.data.token)
that.$router.push({path:"/changPasswordP"})
}
that.usererr = errorMessage;
}
})
}
},
usernames() {//用户名密码登录；
if (this.loginss == '') {
this.loginsss = '请输入手机号或邮箱'
return false;
} else {
this.loginsss = ''
}
if (this.passwords == '') {
this.passwordss = '请输入密码';
return false
} else {
var pwd = this.passwords
var keys = generateSM4Key()
var cipherText = SM4Encrypt(pwd, keys);
var cipherKey = SG_sm2Encrypt(keys, "045305e570ba7c50795aadf945354eb1396f84cb22ec788d81e7bd1cd6b51c9e53680c942b174050f9b3614a658a790939a5921c0920bacf6a3070e007bf217d70");
this.enPwd = cipherKey + ',' + cipherText;
console.log(this.enPwd)
this.passwordss = ''
}
if (this.veriCode == '') {
this.usererror = '请输入图形验证码';
return false
} else {
this.usererror = ''
var that = this;
var userName = window.sessionStorage.getItem('userName');
var items = '/login/userLogin',
lastName = '',
newTime = new Date().getTime(),
newRandom = parseInt(Math.random()*100000,10);
if(sessionStorage.getItem('userId')) {
lastName = sessionStorage.getItem('userId') + newTime + items +newRandom;
}else {
lastName = newTime + items + newRandom;
}
lastName = this.encrypt.dataEncrypt(lastName)+'-'+newTime+'-'+newRandom;
console.log(lastName)
var list = {
"userName": this.encrypt.dataEncrypt(this.loginss),
"certificate": this.enPwd,
"userPd":this.encrypt.dataEncrypt(this.passwords),
"veriCode": this.veriCode,
'randomXletter':lastName,
'pegsecret': this.ser
}
var loading = this.$loading({
lock: true,
text: '登录中...',
spinner: 'el-icon-loading',
background: 'rgba(255, 255, 255, 0.7)'
});
//axios.defaults.headers.common['random-X-letter'] = SG_sm4encrypt(lastName,'541dedbade1d38056a9d019412b06640') + '-' +newTime + '-' + newRandom;
this.$http.post(process.env.VUE_APP_API_HOST+ '/login/userLogin', list).then(function (response) {
if (response.data.result == 0) {
loading.close();
window.sessionStorage.setItem('tokenId', response.data.data.tokenId);
window.sessionStorage.setItem('userId', response.data.data.userId);
window.sessionStorage.setItem('userName', response.data.data.userName);
window.sessionStorage.setItem('userType', response.data.data.userType);
window.sessionStorage.setItem('status', response.data.data.status);
window.sessionStorage.setItem('isSgcc', response.data.data.isSgcc);
window.sessionStorage.setItem('thumb', response.data.data.thumb);
window.sessionStorage.setItem('is_owner_auth', response.data.data.is_owner_auth);
window.sessionStorage.setItem('companyType', response.data.data.userType);
window.sessionStorage.setItem('userRealName', response.data.data.user_real_name);
window.sessionStorage.setItem('deptname', response.data.data.deptname);
window.sessionStorage.setItem('ser', SG_sm2Encrypt(that.key, "0453f1d34ffd6489c41c8ffba7a604e48097ed605361c794fc9b6d7df064f081f72d9bdc592db2fcc8c6599350e67969bb9227d1ac04a50268353226c45bb35424"));
allCookie.CookieSet("web_token",response.data.data.tokenId);
//区分是否显示同步写入和同步读取
window.sessionStorage.setItem('manualSync', response.data.data.manualSync);
window.sessionStorage.setItem('accountName', response.data.data.accountName);
that.$store.commit('getAccountName');
that.$store.commit('getManualSync');
that.$store.commit('changeUserName');
that.$store.commit('getUserType');
that.$store.commit('setCompanyType');
if (response.data.data.code == 111) {
that.$router.push({
path: "/myCenter/changePassword", query: {nums: 0}
})
} else {
var str = window.location.href;
var num = str.indexOf("?");
var strTwo = str.substr(num + 1);
var arr = strTwo.split("#");
var tic = arr[0];
let redirect = decodeURIComponent(that.$route.query.redirect || '/');
let id = decodeURIComponent(that.$route.query.id || '');
if(window.location.hash != "#/login"){
that.$router.push({
path: redirect + id
})
}else {
that.$router.push({path: 'homePage'})
}
if (sessionStorage.getItem("tokenId")) {
var item = {
"tokenId": sessionStorage.getItem("tokenId")
}
that.$http.post(process.env.VUE_APP_API_HOST+ '/user/userInfo', item).then(function (response) {
if (response.data.result == 0) {
window.sessionStorage.setItem('roles', response.data.data.roles);
window.sessionStorage.setItem('parentName', response.data.data.parentName);
window.sessionStorage.setItem('parentId', response.data.data.parentId);
}
})
}
}
} else if (response.data.result == -1) {
loading.close();
that.ress()
var errorMessage = response.data.data.message;
if(response.data.data.code == "PES_1201"){
window.sessionStorage.setItem("IphoneNumber",that.loginss)
window.sessionStorage.setItem("IphoneTokenId",response.data.data.token)
that.$router.push({path:"/changPasswordP"})
}
that.usererror = errorMessage
}else if (response.data.result == 1) {
loading.close();
that.ress()
var errorMessages = response.data.hint;
that.usererror = errorMessages
}
})
}
},
settime(val, countdown){
var stop = setInterval(function () {
if (countdown == 0) {
val.removeAttribute("disabled");
val.innerHTML = "获取手机验证码";
clearInterval(stop);
} else {
val.setAttribute("disabled", true);
val.innerHTML = "重新发送(" + countdown + "s)";
countdown--;
}
}, 1000)
},
phones() {
if (this.phoness == '') {
this.loginssse = '请填写手机号'
return false;
}
var iphoneBoundBtn = document.getElementsByClassName("iphoneBoundBtn")[0];
this.settime(iphoneBoundBtn, 60);
var items = {
"phone": this.encrypt.dataEncrypt(this.phoness)
};
var that = this;
this.$http.post(process.env.VUE_APP_API_HOST+ '/login/SMSVerificate', items).then(function (res) {
if(res.data.result == 0){
}else {
that.usererr = res.data.hint
}
})
},
calcel() {
this.$router.back(-1)
},
iscLogin(){
if(!this.isIsc){
if(allCookie.CookieRemove('web_token')){
var that = this;
this.$http.post(process.env.VUE_APP_API_HOST+ '/isc/iscLogout',{
"isc":"web"
}).then(function () {
that.$router.push("/homePage");
// window.sessionStorage.clear();
window.sessionStorage.removeItem('roles');
window.sessionStorage.removeItem('tokenId');
window.sessionStorage.removeItem('userName');
window.sessionStorage.removeItem('userType');
window.sessionStorage.removeItem('companyType');
window.sessionStorage.removeItem('userId');
window.sessionStorage.removeItem('status');
window.sessionStorage.removeItem('isSgcc');
window.sessionStorage.removeItem('Web-Token');
window.sessionStorage.removeItem('userRealName');
window.sessionStorage.removeItem('ser');
window.sessionStorage.removeItem('deptname');
window.sessionStorage.removeItem('parentName');
window.sessionStorage.removeItem('parentId');
window.sessionStorage.removeItem('custId');
allCookie.CookieRemove('web_token')
})
let str = window.location.href;
let arr = str.split("#")[0]
window.location.href = this.iscLoginOutPath + '?service='+ arr +'#/homePage';
}else {
var str1 = window.location.href
let str = str1.split("#")[0]
if (this.$route.query.url != undefined) {
window.location.href = this.iscLoginPath + "?service=" +str + this.$route.query.url;
}else {
window.location.href = this.iscLoginPath + "?service=" +str;
}
}
}
},
SMkey(){
this.key = generateSM4Key();
var pubkey="0453f1d34ffd6489c41c8ffba7a604e48097ed605361c794fc9b6d7df064f081f72d9bdc592db2fcc8c6599350e67969bb9227d1ac04a50268353226c45bb35424";
this.ser = SG_sm2Encrypt(this.key,pubkey);
}
},
mounted(){
this.ress();
this.SMkey();
this.iscLogin();
}
}
</script>
<style type="text/css" scoped>
.intentionList-tab {
width: 400px;
clear: both;
content: "";
margin: 20px auto;
display: table;
}
.intentionList-tab ul {
width: 400px;
height: 48px;
border-bottom: 1px solid #ccc;
}
.intentionList-tab ul li {
float: left;
width: 195px;
height: 49px;
text-align: center;
line-height: 50px;
cursor: pointer;
list-style: none;
font-size: 16px;
color: rgb(51, 51, 51);
}
.active1 {
border-bottom: 1px solid #009688;
box-sizing: border-box;
}
.active2 {
/*background: #ebf4f4;*/
}
.login {
width: 100%;
}
.login-right-content {
width: 400px;
margin: auto;
}
.knobs {
margin-top: 29px;
}
.register-p {
text-align: right;
color: #009688;
margin-top: 10px;
font-size: 13px;
cursor: pointer;
padding-right: 8px;
}
#logins .el-tabs__header {
width: 92%;
margin: 30px auto;
}
#logins .el-tabs__content {
margin-top: -25px;
}
#logins #tab-first {
text-align: center;
width: 195px;
height: 44px;
}
#logins .el-tabs__nav-wrap {
height: 45px;
}
#logins #tab-second {
text-align: center;
width: 195px;
height: 44px;
}
#logins .el-tabs__active-bar {
width: 180px !important;
background-color: #019587;
}
#logins .el-tabs__item {
font-size: 20px;
}
#logins .is-active {
color: #000;
font-weight: bold;
}
#logins .el-tabs__item.is-active {
color: #000;
}
#logins .el-tabs__item:hover {
color: #000;
cursor: pointer;
}
.login-right-contents {
width: 90%;
margin: 35px auto;
}
.login-right-ul .div-img {
width: 20px;
height: 22px;
margin-left: 6px;
margin-top: 10px;
}
#inputes, #passw {
background: #fff;
border: 1px solid #e4e4e4;
border-radius: 5px;
padding-left: 5px;
}
#inputes {
width: 285px;
margin-top: -6px;
}
.login-right-ul li #passw {
width: 165px !important;
margin-top: -6px;
}
.login-right-ul li .login-right-ul-code {
width: 210px;
}
.login-right-ul li .password-button {
width: 100px;
height: 42px;
background: #f2f2f2;
float: right;
margin-top: -43px;
margin-right: 13px;
border-radius: 5px;
font-size: 13px;
color: #009688;
border: 1px solid #e4e4e4;
cursor: pointer;
}
.login-right-ul li .inp {
/*margin-left: 15px;*/
position: absolute;
top: 12px;
left: 99px;
width: 270px !important;
}
.login-right-ul .password-img {
width: 20px;
height: 22px;
margin-left: 6px;
margin-top: 10px;
}
.login-div {
width: 1200px;
height: 92px;
margin: 0 auto;
}
.login-img {
float: left;
width: 344px;
height: 65px;
margin-top: 1%;
}
.login-img img {
height: 100%;
}
.login-background-image {
width: 100%;
height: 600px;
background: url(img/login.png) no-repeat;
background-size: 100% 100%;
}
.login-right {
width: 435px;
height: 373px;
background: #fff;
border-radius: 5px;
position: absolute;
top: 220px;
right: 120px;
}
.login-right-p span a {
display: inline-block;
text-align: center;
text-decoration: none;
width: 188px;
height: 60px;
line-height: 60px;
font-size: 20px;
color: #000;
}
.login-right-p span:nth-of-type(2) {
margin-left: 10px;
}
.login-right-ul {
width: 400px;
list-style: none;
}
.login-right-ul li p {
float: left;
}
.login-right-ul li span {
float: left;
}
.login-right-ul li {
width: 400px;
height: 42px;
line-height: 42px;
color: rgb(121, 121, 121) !important;
font-size: 16px;
margin-top: 24px;
position: relative;
}
.login-right-ul li div {
margin-top: 6px;
width: 316px;
border-radius: 5px;
background: #eee;
margin-left: 66px;
height: 42px;
}
.login-right-ul li input {
position: absolute;
top: 6px;
left: 102px;
width: 270px;
height: 28px;
border: 1px solid #ccc;
outline-style: none;
text-decoration: none;
border-color: transparent;
border-radius: 4px;
}
.login-right-ul-span {
width: 42px;
height: 42px;
display: inline-block;
background: #eee;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.login-right-li-span {
}
.login-right-span {
}
.login-right-ul-span img {
width: 20px;
height: 22px;
margin-left: 8px;
margin-top: 10px;
}
.forget {
width: 304px;
justify-content: space-between;
margin-left: 70px;
margin-top: 10px;
font-size: 13px;
}
.forget-immediately {
float: right;
}
.forget-remember {
float: left;
padding-left: 20px;
color: #333333;
font-weight: 500;
}
.forget-immediately span {
padding: 0 1px;
}
.forget-immediately-pass {
color: #fd9801;
cursor: pointer;
}
.forget-immediately-span {
color: #009688;
}
.forget-immediately-rem {
color: #019587;
cursor: pointer;
}
.errors {
height: 20px;
font-size: 12px;
color: red;
margin-left: 69px;
margin-top: 8px;
}
.knob {
width: 400px;
margin-top: 25px;
}
.knob-abolish {
background: #fff;
width: 88px;
height: 40px;
line-height: 40px;
text-align: center;
color: #000;
text-decoration: underline;
font-weight: 400;
font-style: normal;
font-size: 14px;
border-radius: 5px;
margin-left: 178px;
margin-right: 20px;
cursor: pointer;
}
/*.knob-login {
width: 195px;
height: 42px;
margin-left: 8px;
border-radius: 8px;
background: #009688;
color: #fff;
font-size: 20px;
font-weight: 500;
}*/
.err {
height: 20px;
font-size: 14px;
margin-right: 66px;
color: red;
float: right;
margin-top: -20px;
}
.knobs {
margin-top: 15px;
}
#inputs::-webkit-input-placeholder {
color: #B4BCCC;
}
</style>
6852
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
