登录和注册（三）02登录页——参考版本

登录和注册（三）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>账&nbsp;&nbsp;&nbsp;号</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>密&nbsp;&nbsp;&nbsp;码</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()">登&nbsp;&nbsp;&nbsp;&nbsp;录</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()">登&nbsp;&nbsp;&nbsp;&nbsp;录</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, "0453f1d34ffd6489c41c8ffba7a604e48097edc794fc9b6d7df064f081f72d9bdc592db2fcc8ce67969bb9227d1ac04ac45bb35424")); 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, "045305e570ba7c50795aadfeb1396f84cb22ec788d81e7bd1cd6b51c9e53680c942bf9b3614a658aa5921c0920bacf6a3070e007bf217d70"); 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()*,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, "0453f1d34ffd6489c41c8ffba7a604e48097edc794fc9b6d7df064f081f72d9bdc592db2fcc8ce67969bb9227d1ac04ac45bb35424")); 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="0453f1d34ffd6489c41c8ffba7a604e48097edc794fc9b6d7df064f081f72d9bdc592db2fcc8ce67969bb9227d1ac04ac45bb35424"; 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: #; 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> 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/hdkf/10681.html