Bläddra i källkod

[Version] V.3.8

[Adds]
1.登录复选框;
2.工作链左对齐
new-cli
dhj 4 år sedan
förälder
incheckning
e121db96a0
2 ändrade filer med 388 tillägg och 312 borttagningar
  1. +387
    -311
      src/views/login.vue
  2. +1
    -1
      static/css/main.css

+ 387
- 311
src/views/login.vue Visa fil

@@ -9,10 +9,16 @@
<template>
<div class="loginbox_warp" id="app">
<!-- 登录背景动画 -->
<iframe src="../../static/img/bgAnimate/bganimat.html" frameborder="0" style="width:100%;height:98%;width:calc(100vw);height:calc(100vh);position: absolute;top:0" class="login_bg"></iframe>
<iframe
src="../../static/img/bgAnimate/bganimat.html"
frameborder="0"
style="width:100%;height:98%;width:calc(100vw);height:calc(100vh);position: absolute;top:0"
class="login_bg"
></iframe>
<div class="LoginTitleWel">
<div class="logintitlefirst">
<span>欢迎使用</span><span>探索者协同</span>
<span>欢迎使用</span>
<span>探索者协同</span>
</div>
</div>
<!-- <div class="logoarea">
@@ -20,7 +26,7 @@
<img src="/static/img/loginBox.svg" class="loginimgbordera" />
<img src="/static/img/Logo/logoA.png" alt="" class="loginimgboxImga" />
</div>
</div> -->
</div>-->
<div class="loginbox">
<div>
<!-- 第一次登录 -->
@@ -53,20 +59,36 @@
<label class="loginlabel">登入</label>
<form class="formlogin">
<div class="formlogin_item">
<input type="text" name="username" placeholder="请输入企业预留手机号或邮箱" class="login_input" v-model="account" />
<input
type="text"
name="username"
placeholder="请输入企业预留手机号或邮箱"
class="login_input"
v-model="account"
/>
</div>
<div class="formlogin_item">
<input type="password" name placeholder="输入登入密码" class="login_input" v-model="pwd" @keyup.enter="ToMain" />
<a href="javascript:;" class="loginlabel_resit" v-on:click="backPassword" v-if="account != ''">忘记密码</a>
<input
type="password"
name
placeholder="输入登入密码"
class="login_input"
v-model="pwd"
@keyup.enter="ToMain"
/>
<a
href="javascript:;"
class="loginlabel_resit"
v-on:click="backPassword"
v-if="account != ''"
>忘记密码</a>
</div>
<div class="worningalert" v-if="errTips == true">{{tipmgs}}</div>
</form>
</div>
<el-checkbox v-model="isRemember" class="login_checkBox mt-10">记住密码</el-checkbox>
<div>
<button class="login_btn" @click="ToMain" @keyup.enter.native="ToMain">
登入
</button>
<button class="login_btn" @click="ToMain" @keyup.enter.native="ToMain">登入</button>
<a class="login_btn_defualt" v-on:click="loginBackManage">切换至后台登入</a>
</div>
</div>
@@ -76,20 +98,37 @@
<label class="loginlabel">登入后台</label>
<form name="formName" class="formlogin">
<div class="formlogin_item">
<input type="text" name="inputName" value placeholder="请输入企业预留手机号或邮箱" class="login_input" v-model="account" />
<input
type="text"
name="inputName"
value
placeholder="请输入企业预留手机号或邮箱"
class="login_input"
v-model="account"
/>
</div>
<div class="formlogin_item">
<input type="password" name placeholder="请输入登入密码" class="login_input" v-model="pwd" @keyup.enter="ToMain" />
<a href="javascript:;" class="loginlabel_resit" v-on:click="backPassword" v-if="account != ''">忘记密码</a>
<input
type="password"
name
placeholder="请输入登入密码"
class="login_input"
v-model="pwd"
@keyup.enter="ToMain"
/>
<a
href="javascript:;"
class="loginlabel_resit"
v-on:click="backPassword"
v-if="account != ''"
>忘记密码</a>
</div>
<div class="worningalert" v-if="errTips == true">{{tipmgs}}</div>
</form>
</div>
<el-checkbox v-model="isRemember" class="login_checkBox mt-10">记住密码</el-checkbox>
<div>
<button class="login_btn" @click="ToMain" @keyup.enter.native="ToMain">
登入
</button>
<button class="login_btn" @click="ToMain" @keyup.enter.native="ToMain">登入</button>
<a class="login_btn_defualt" v-on:click="loginPage">切换至平台登入</a>
</div>
</div>
@@ -100,7 +139,13 @@
<i class="icon font_family icon-icon_fanhui combackreturn" v-on:click="loginPage"></i>输入账号
</label>
<form class="formlogin">
<input type="text" name placeholder="请输入企业预留手机号或邮箱" v-model="phoneNumber" class="login_input" />
<input
type="text"
name
placeholder="请输入企业预留手机号或邮箱"
v-model="phoneNumber"
class="login_input"
/>
</form>
</div>
<div>
@@ -132,12 +177,25 @@
</label>
<form class="formlogin">
<div class="formlogin_item">
<input type="text" name placeholder="输入新密码" class="login_input" v-model="firstNewPwd" />
<input
type="text"
name
placeholder="输入新密码"
class="login_input"
v-model="firstNewPwd"
/>
</div>
<div class="formlogin_item">
<input type="password" name placeholder="确认新密码" class="login_input" v-model="enterNewPwd" @input="checkPwd()" />
<input
type="password"
name
placeholder="确认新密码"
class="login_input"
v-model="enterNewPwd"
@input="checkPwd()"
/>
<span class="yyerrtip">{{ checkPwdTip }}</span>
<!-- //dhj 也可以内置在input里面,方法二选一吧 -->
<!-- //dhj 也可以内置在input里面,方法二选一吧 -->
</div>
</form>
</div>
@@ -150,116 +208,182 @@
</div>
</template>
<style>
.login_bg {
width: 100%;
height: 99%;
}
.login_bg {
width: 100%;
height: 99%;
}
.login_checkBox .el-checkbox__inner {
width: 16px;
height: 16px;
border-radius: 3px;
}
.login_checkBox .el-checkbox__inner::after {
border: 1px solid #fff;
border-top: 0;
border-left: 0;
height: 9px;
left: 3px;
top: 0px;
width: 5px;
}
</style>
<script>
import BtnSmsCode from "./components/BtnSmsCode/BtnSmsCode.vue";
export default {
components: {
BtnSmsCode
import BtnSmsCode from "./components/BtnSmsCode/BtnSmsCode.vue";
export default {
components: {
BtnSmsCode
},
data() {
return {
filelist: [],
login: true,
regist: false,
errTips: false,
tipmgs: "",
account: "",
pwd: "",
loginShow: 1,
isBackground: false,
phoneNumber: "", //手机号码
firstNewPwd: "", //初次输入密码
enterNewPwd: "", //确认密码
checkPwdTip: "", //检测提示
phoneCode: "", //手机验证码
isRemember: false, //记住密码
isClient: false //是否是客户端
};
},
beforeRouteLeave(to, from, next) {
sessionStorage.login = from.name;
next();
},
created: function() {
sessionStorage.login = "";
},
mounted: function() {
this.loadRemember();
},
methods: {
/**
* @description: 获取记住密码
* @param {type}
* @return:
*/
loadRemember() {
if (this.$cookie.get("remember")) {
this.account = this.$cookie.get("account");
this.pwd = this.$cookie.get("pwd");
this.isBackground = true;
var backgroundValue = this.$cookie.get("background");
if (backgroundValue == "false") {
this.isBackground = false;
}
this.isRemember = true;
}
},
data() {
return {
filelist: [],
login: true,
regist: false,
errTips: false,
tipmgs: "",
account: "",
pwd: "",
loginShow: 1,
isBackground: false,
phoneNumber: "", //手机号码
firstNewPwd: "", //初次输入密码
enterNewPwd: "", //确认密码
checkPwdTip: "", //检测提示
phoneCode: "", //手机验证码
isRemember:false, //记住密码
isClient:false, //是否是客户端
};
/**
* @description: 找回密码
* @param {type}
* @return:
*/
backPassword: function() {
this.loginShow = 3;
},
beforeRouteLeave(to, from, next) {
sessionStorage.login = from.name;
next();
/**
* @description: 上一步
* @param {type}
* @return:
*/
prev: function() {
this.loginShow = 3;
},
created: function () {
sessionStorage.login = "";
/**
* @description: 下一步
* @param {type}
* @return:
*/
next: function() {
if (!/^1[3456789]\d{9}$/.test(this.phoneNumber)) {
this.$notify({
title: "温馨提示",
message: "请检查手机号是否填写正确",
type: "warning",
offset: 100,
duration: 2500
});
} else {
this.checkPhone();
}
},
mounted: function () {
this.loadRemember();
/**
* @description: 检测手机是否可用
* @param {type}
* @return:
*/
checkPhone: function() {
var thisApp = this;
this.$axios({
method: "get",
url: encodeURI(
process.env.API_HOST + "account/check/phone/" + thisApp.phoneNum
),
params: { phone: thisApp.phoneNum }
})
.then(response => {
if (response.data.state == 1) {
thisApp.$notify({
title: "温馨提示",
type: "warning",
message: response.data.message,
offset: 100,
duration: 2500
});
thisApp.loginShow = 4;
} else {
thisApp.$notify.error({
title: "温馨提示",
message: response.data.message,
offset: 100,
duration: 2500
});
}
})
.catch(error => {
console.log(error);
});
},
methods: {
/**
* @description: 获取记住密码
* @param {type}
* @return:
*/
loadRemember(){
if(this.$cookie.get("remember"))
{
this.account = this.$cookie.get("account");
this.pwd = this.$cookie.get("pwd");
this.isBackground =true;
var backgroundValue=this.$cookie.get("background");
if(backgroundValue == "false")
{
this.isBackground =false;
}
this.isRemember=true;
}
},
/**
* @description: 找回密码
* @param {type}
* @return:
*/
backPassword: function () {
this.loginShow = 3;
},
/**
* @description: 上一步
* @param {type}
* @return:
*/
prev: function () {
this.loginShow = 3;
},
/**
* @description: 下一步
* @param {type}
* @return:
*/
next: function () {
if (!/^1[3456789]\d{9}$/.test(this.phoneNumber)) {
this.$notify({
title: "温馨提示",
message: "请检查手机号是否填写正确",
type: "warning",
offset: 100,
duration: 2500
});
} else {
this.checkPhone();
}
},
/**
* @description: 检测手机是否可用
* @param {type}
* @return:
*/
checkPhone: function () {
loginPage: function() {
this.loginShow = 1;
this.isBackground = false;
},
/**
* @description:返回登录
* @param {type}
* @return:
*/
returnLoign: function() {
if (this.firstNewPwd != this.enterNewPwd) {
this.$notify({
title: "温馨提示",
message: "您输入的两次密码不一致",
type: "warning",
offset: 100,
duration: 2500
});
return;
} else {
var thisApp = this;
this.$axios({
method: "get",
url: encodeURI(
process.env.API_HOST + "account/check/phone/" + thisApp.phoneNum
),
params: { phone: thisApp.phoneNum }
})
.then(response => {
method: "put",
url: encodeURI(process.env.API_HOST + "account/pwd/phone"),
data: {
phone: thisApp.phoneNumber,
code: thisApp.phoneCode,
newPwd: thisApp.enterNewPwd
}
})
.then(function(response) {
console.log(response.data);
if (response.data.state == 1) {
thisApp.$notify({
title: "温馨提示",
@@ -268,7 +392,11 @@
offset: 100,
duration: 2500
});
thisApp.loginShow = 4;
thisApp.firstNewPwd = "";
thisApp.enterNewPwd = "";
thisApp.phoneNumber = "";
thisApp.phoneCode = "";
thisApp.loginPage();
} else {
thisApp.$notify.error({
title: "温馨提示",
@@ -278,205 +406,153 @@
});
}
})
.catch(error => {
.catch(function(error) {
console.log(error);
});
},
loginPage: function () {
this.loginShow = 1;
this.isBackground = false;
},
/**
* @description:返回登录
* @param {type}
* @return:
*/
returnLoign: function () {
if (this.firstNewPwd != this.enterNewPwd) {
this.$notify({
title: "温馨提示",
message: "您输入的两次密码不一致",
type: "warning",
offset: 100,
duration: 2500
});
return;
} else {
var thisApp = this;
this.$axios({
method: "put",
url: encodeURI(process.env.API_HOST + "account/pwd/phone"),
data: {
phone: thisApp.phoneNumber,
code: thisApp.phoneCode,
newPwd: thisApp.enterNewPwd
}
},
/**
* @description: 登录探索者后台
* @param {type}
* @return:
*/
loginBackManage: function() {
this.loginShow = 2;
this.isBackground = true;
},
/**
* @description: 系统登录
* @param {type}
* @return:
*/
ToMain: function() {
var thisApp = this;
if (thisApp.account == "") {
// thisApp.$notify({
// title: "温馨提示",
// message: "请输入用户名",
// type: "warning",
// offset: 100,
// duration: 2500
// });
thisApp.errTips = true;
thisApp.tipmgs = "请输入用户名!";
return;
}
if (thisApp.pwd == "") {
// thisApp.$notify({
// title: "温馨提示",
// message: "请输入密码",
// type: "warning",
// offset: 100,
// duration: 2500
// });
thisApp.errTips = true;
thisApp.tipmgs = "请输入密码!";
return;
}
var param = {
userName: this.account,
passWord: this.pwd,
isBackground: this.isBackground
};
this.$axios({
method: "post",
url: encodeURI(process.env.API_HOST + "account/login"),
data: param
})
.then(function(response) {
var state = response.data.state;
if (state === 1) {
sessionStorage.userId = response.data.data.userID;
sessionStorage.companyName = response.data.data.companyName;
sessionStorage.companyId = response.data.data.companyID;
sessionStorage.permission = response.data.data.permission;
sessionStorage.backgroundPermission =
response.data.data.backgroundPermission;
sessionStorage.cnName = response.data.data.cnName;
sessionStorage.userName = response.data.data.userName;
sessionStorage.user = JSON.stringify(response.data.data);
sessionStorage.token = response.data.data.token;
sessionStorage.pageName = "index";
if (thisApp.isRemember) {
thisApp.$cookie.set("remember", true);
thisApp.$cookie.set("account", thisApp.account);
thisApp.$cookie.set("pwd", thisApp.pwd);
thisApp.$cookie.set("background", thisApp.isBackground);
} else {
thisApp.$cookie.remove("remember");
thisApp.$cookie.remove("account");
thisApp.$cookie.remove("pwd");
thisApp.$cookie.remove("background");
}
// 客户端启动服务
if (thisApp.isClient) {
var userName = sessionStorage.userName;
if (
sessionStorage.userName == null ||
sessionStorage.userName == undefined ||
sessionStorage.userName == ""
) {
userName = response.data.data.phone;
}
})
.then(function (response) {
console.log(response.data);
if (response.data.state == 1) {
thisApp.$notify({
title: "温馨提示",
type: "warning",
message: response.data.message,
offset: 100,
duration: 2500
back.startService(
sessionStorage.userId,
sessionStorage.companyId,
sessionStorage.userName,
response.data.data.passWord
);
}
if (!thisApp.isBackground) {
thisApp.$router.push({
path: "/index"
});
} else {
if (sessionStorage.backgroundPermission == 3) {
thisApp.$router.push({
path: "/system"
});
thisApp.firstNewPwd = "";
thisApp.enterNewPwd = "";
thisApp.phoneNumber = "";
thisApp.phoneCode = "";
thisApp.loginPage();
} else {
thisApp.$notify.error({
title: "温馨提示",
message: response.data.message,
offset: 100,
duration: 2500
});
}
})
.catch(function (error) {
console.log(error);
});
}
},
/**
* @description: 登录探索者后台
* @param {type}
* @return:
*/
loginBackManage: function () {
this.loginShow = 2;
this.isBackground = true;
},
/**
* @description: 系统登录
* @param {type}
* @return:
*/
ToMain: function () {
var thisApp = this;
if (thisApp.account == "") {
// thisApp.$notify({
// title: "温馨提示",
// message: "请输入用户名",
// type: "warning",
// offset: 100,
// duration: 2500
// });
thisApp.errTips = true;
thisApp.tipmgs = "请输入用户名!";
return;
}
if (thisApp.pwd == "") {
// thisApp.$notify({
// title: "温馨提示",
// message: "请输入密码",
// type: "warning",
// offset: 100,
// duration: 2500
// });
thisApp.errTips = true;
thisApp.tipmgs = "请输入密码!";
return;
}
var param = {
userName: this.account,
passWord: this.pwd,
isBackground: this.isBackground
};
this.$axios({
method: "post",
url: encodeURI(process.env.API_HOST + "account/login"),
data: param
})
.then(function (response) {
var state = response.data.state;
if (state === 1) {
sessionStorage.userId = response.data.data.userID;
sessionStorage.companyName = response.data.data.companyName;
sessionStorage.companyId = response.data.data.companyID;
sessionStorage.permission = response.data.data.permission;
sessionStorage.backgroundPermission = response.data.data.backgroundPermission;
sessionStorage.cnName = response.data.data.cnName;
sessionStorage.userName = response.data.data.userName;
sessionStorage.user = JSON.stringify(response.data.data);
sessionStorage.token = response.data.data.token;
sessionStorage.pageName='index';
if(thisApp.isRemember)
{
thisApp.$cookie.set("remember",true);
thisApp.$cookie.set("account",thisApp.account);
thisApp.$cookie.set("pwd",thisApp.pwd);
thisApp.$cookie.set("background",thisApp.isBackground);
}
else{
thisApp.$cookie.remove("remember");
thisApp.$cookie.remove("account");
thisApp.$cookie.remove("pwd");
thisApp.$cookie.remove("background");
}
// 客户端启动服务
if(thisApp.isClient)
{
var userName=sessionStorage.userName;
if(sessionStorage.userName == null || sessionStorage.userName == undefined || sessionStorage.userName =="" )
{
userName=response.data.data.phone;
}
back.startService(sessionStorage.userId, sessionStorage.companyId, sessionStorage.userName, response.data.data.passWord);
}
if (!thisApp.isBackground) {
thisApp.$router.push({
path: "/index"
path: "/company"
});
} else {
if (sessionStorage.backgroundPermission == 3) {
thisApp.$router.push({
path: "/system"
});
} else {
thisApp.$router.push({
path: "/company"
});
}
}
thisApp.$notify({
title: "恭喜您",
message: "登录成功!开始愉快的体验吧",
type: "success",
offset: 100,
duration: 2500
});
} else {
// thisApp.$notify.error({
// title: "温馨提示5",
// message: response.data.message,
// type: "warning",
// offset: 100,
// duration: 5000
// });
thisApp.errTips = true;
thisApp.tipmgs = response.data.message;
}
})
.catch(function (error) {
console.log(error);
});
},
/**
* @description: 检测两次密码是否一致
* @param {type}
* @return:
*/
checkPwd: function () {
if (this.firstNewPwd != this.enterNewPwd) {
this.checkPwdTip = "两次密码输入不一致";
} else {
this.checkPwdTip = "成功";
}
thisApp.$notify({
title: "恭喜您",
message: "登录成功!开始愉快的体验吧",
type: "success",
offset: 100,
duration: 2500
});
} else {
// thisApp.$notify.error({
// title: "温馨提示5",
// message: response.data.message,
// type: "warning",
// offset: 100,
// duration: 5000
// });
thisApp.errTips = true;
thisApp.tipmgs = response.data.message;
}
})
.catch(function(error) {
console.log(error);
});
},
/**
* @description: 检测两次密码是否一致
* @param {type}
* @return:
*/
checkPwd: function() {
if (this.firstNewPwd != this.enterNewPwd) {
this.checkPwdTip = "两次密码输入不一致";
} else {
this.checkPwdTip = "成功";
}
}
};
}
};
</script>

+ 1
- 1
static/css/main.css Visa fil

@@ -7632,7 +7632,7 @@ li.secondMenu ul li:hover {
text-align: center;
display: flex;
align-items: center;
justify-content:center;
justify-content:left;
overflow-y: auto;
}
.worklinkBtngroup{


Laddar…
Avbryt
Spara