|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div id="login-page">
|
|
|
+ <div id="login-page" >
|
|
|
<div class="title">
|
|
|
<div class="text font-ht" >
|
|
|
上海市CIM平台
|
|
|
@@ -9,7 +9,7 @@
|
|
|
<div class="login-content">
|
|
|
|
|
|
|
|
|
- <div v-show="loginState=='1'">
|
|
|
+ <div v-show="loginState=='1'||loginState=='2'">
|
|
|
<div class="welcome">欢迎登录</div>
|
|
|
<div class="form-item">
|
|
|
<el-input v-model="formInfo.username" placeholder="请输入用户名">
|
|
|
@@ -32,10 +32,50 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div v-show="loginState=='2'">
|
|
|
- <div class="welcome">手机号注册</div>
|
|
|
+<!-- <div v-show="loginState=='2'">-->
|
|
|
+<!-- <div class="welcome">手机号绑定</div>-->
|
|
|
+<!-- <div class="form-item">-->
|
|
|
+<!-- <el-input v-model="formInfo.codeUserInput_phone" >-->
|
|
|
+<!-- <template #prefix>-->
|
|
|
+<!-- <img src="../../assets/imgs/验证码.png" alt="">-->
|
|
|
+<!-- </template>-->
|
|
|
+<!-- <template #suffix>-->
|
|
|
+<!-- <img style="width: 80px;height: 50px;" :src="formInfo.vCodeReal" alt="" id="validCode" @click="changeValidCode" class="valid-code" />-->
|
|
|
+<!-- <!– <canvas id="validCode" @click="changeValidCode" class="valid-code"></canvas>–>-->
|
|
|
+<!-- </template>-->
|
|
|
+<!-- </el-input>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div class="error" v-if="!showObj.isValidCodeEmptyShow && showObj.isValidCodeErrorShow">验证码错误</div>-->
|
|
|
+
|
|
|
+<!-- <div class="form-item">-->
|
|
|
+<!-- <el-input v-model="formInfo.phone" placeholder="请输入手机号">-->
|
|
|
+<!-- <template #prefix>-->
|
|
|
+<!-- <img src="../../assets/imgs/验证码.png" alt="">-->
|
|
|
+<!-- </template>-->
|
|
|
+<!-- <template #suffix>-->
|
|
|
+<!-- <el-button :disabled="register_countdown > 0" @click="getRegisterCode">{{ register_countdown > 0 ? `${register_countdown}秒后重新获取` : '获取验证码' }}</el-button>-->
|
|
|
+<!-- </template>-->
|
|
|
+<!-- </el-input>-->
|
|
|
+<!-- </div>-->
|
|
|
+
|
|
|
+<!-- <div class="form-item">-->
|
|
|
+<!-- <el-input v-model="formInfo.register_message" placeholder="请输入验证码">-->
|
|
|
+<!-- <template #prefix>-->
|
|
|
+<!-- <img src="../../assets/imgs/用户名.png" alt="">-->
|
|
|
+<!-- </template>-->
|
|
|
+<!-- </el-input>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div class="error" v-if="showObj.isUserNameEmptyShow">请输入验证码</div>-->
|
|
|
+<!-- <div >-->
|
|
|
+<!-- <div class="btn" @click="loginIn_phone">注册</div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+
|
|
|
+
|
|
|
+ <div v-show="loginState=='3'">
|
|
|
+ <div class="welcome">短信验证</div>
|
|
|
<div class="form-item">
|
|
|
- <el-input v-model="formInfo.codeUserInput_phone" >
|
|
|
+ <el-input v-model="formInfo.codeUserInput_message" placeholder="请输入验证码">
|
|
|
<template #prefix>
|
|
|
<img src="../../assets/imgs/验证码.png" alt="">
|
|
|
</template>
|
|
|
@@ -47,69 +87,80 @@
|
|
|
</div>
|
|
|
<div class="error" v-if="!showObj.isValidCodeEmptyShow && showObj.isValidCodeErrorShow">验证码错误</div>
|
|
|
<div class="form-item">
|
|
|
- <el-input v-model="formInfo.phone" placeholder="请输入手机号">
|
|
|
+ <el-input v-model="formInfo.message" placeholder="请输入短信验证码">
|
|
|
<template #prefix>
|
|
|
- <img src="../../assets/imgs/用户名.png" alt="">
|
|
|
+ <img src="../../assets/imgs/验证码.png" alt="">
|
|
|
+ </template>
|
|
|
+ <template #suffix>
|
|
|
+ <el-button :disabled="countdown > 0" @click="getSmsCode">{{ countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码' }}</el-button>
|
|
|
</template>
|
|
|
</el-input>
|
|
|
</div>
|
|
|
- <div class="error" v-if="showObj.isUserNameEmptyShow">请输入手机号</div>
|
|
|
+ <div class="error" v-if="showObj.isValidCodeEmptyShow">请输入短信验证码</div>
|
|
|
<div >
|
|
|
- <div class="btn" @click="loginIn_phone">登录</div>
|
|
|
+ <div class="btn" @click="loginIn_yyfnzt">登录</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
+ </div>
|
|
|
|
|
|
- <div v-show="loginState=='3'">
|
|
|
- <div class="welcome">短信验证</div>
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ v-model="dialogVisible"
|
|
|
+ title="手机号绑定"
|
|
|
+ width="500"
|
|
|
+ align-center
|
|
|
+ >
|
|
|
+ <div class="dialog-content">
|
|
|
+ <div class="tip custom-block">
|
|
|
+<!-- <p class="custom-block-title">通知</p>-->
|
|
|
+ <p class="custom-block-content">
|
|
|
+ 由于安全需要，现需将身份认证升级为双因素认证，即在原有用户名密码基础上新增手机号短信验证。
|
|
|
+ </p>
|
|
|
+ <p class="custom-block-content">
|
|
|
+ 现检测到该账号没有绑定过手机号，需进行手机号绑定，一个账号只能对应一个手机号。绑定之后每次登录都需进行手机号短信验证，请谨慎操作。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
<div class="form-item">
|
|
|
- <el-input v-model="formInfo.codeUserInput_message" >
|
|
|
+ <el-input v-model="formInfo.phone" placeholder="请输入手机号">
|
|
|
<template #prefix>
|
|
|
- <img src="../../assets/imgs/验证码.png" alt="">
|
|
|
+ <img src="../../assets/imgs/用户名_黑.png" alt="">
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-item">
|
|
|
+ <el-input v-model="formInfo.codeUserInput_phone" placeholder="请输入图形验证码">
|
|
|
+ <template #prefix>
|
|
|
+ <img src="../../assets/imgs/验证码_黑.png" alt="">
|
|
|
</template>
|
|
|
<template #suffix>
|
|
|
- <img style="width: 80px;height: 50px;" :src="formInfo.vCodeReal" alt="" id="validCode" @click="changeValidCode" class="valid-code" />
|
|
|
+ <img style="width: 80px;height: 50px;" :src="formInfo.vCodeReal" alt="" id="validCode" @click="changeValidCode('black')" class="valid-code" />
|
|
|
<!-- <canvas id="validCode" @click="changeValidCode" class="valid-code"></canvas>-->
|
|
|
</template>
|
|
|
</el-input>
|
|
|
</div>
|
|
|
<div class="error" v-if="!showObj.isValidCodeEmptyShow && showObj.isValidCodeErrorShow">验证码错误</div>
|
|
|
+
|
|
|
<div class="form-item">
|
|
|
- <el-input v-model="formInfo.message" >
|
|
|
+ <el-input v-model="formInfo.register_message" placeholder="请输入短信验证码">
|
|
|
<template #prefix>
|
|
|
- <img src="../../assets/imgs/验证码.png" alt="">
|
|
|
+ <img src="../../assets/imgs/验证码_黑.png" alt="">
|
|
|
</template>
|
|
|
<template #suffix>
|
|
|
- <el-button :disabled="countdown > 0" @click="getSmsCode">{{ countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码' }}</el-button>
|
|
|
+ <el-button :disabled="register_countdown > 0" @click="getRegisterCode">{{ register_countdown > 0 ? `${register_countdown}秒后重新获取` : '获取验证码' }}</el-button>
|
|
|
</template>
|
|
|
</el-input>
|
|
|
-
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="error" v-if="showObj.isValidCodeEmptyShow">请输入短信验证码</div>
|
|
|
- <div >
|
|
|
- <div class="btn" @click="loginIn_yyfnzt">登录</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
-
|
|
|
- <el-dialog
|
|
|
- v-model="dialogVisible"
|
|
|
- title="通知"
|
|
|
- width="500"
|
|
|
- align-center
|
|
|
- >
|
|
|
- <span>根据通知,现在需要将系统用户与手机号码绑定,后续通过手机短信验证码登录</span>
|
|
|
- <template #footer>
|
|
|
- <div class="dialog-footer">
|
|
|
- <el-button type="primary" @click="dialogVisible = false">
|
|
|
- 确定
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
-
|
|
|
- </div>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="loginIn_phone">
|
|
|
+ 绑定
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -117,13 +168,14 @@
|
|
|
import {encode} from "js-base64";
|
|
|
import {onMounted, ref} from 'vue'
|
|
|
import {drawPic} from "@/unit/valid-code";
|
|
|
+import {ElLoading} from "element-plus";
|
|
|
import {
|
|
|
loginCim,
|
|
|
randomImageCode_v2,
|
|
|
kjUserInfologin,
|
|
|
verifyUserInformation,
|
|
|
userBindPhone,
|
|
|
- randomImageCode_v1, sendVerificationCode
|
|
|
+ randomImageCode_v1, sendVerificationCode, sendPhoneVerificationCode
|
|
|
} from "@/service/login";
|
|
|
import {showMessage} from "@/unit/element-ui/tip";
|
|
|
import {useRouter} from "vue-router";
|
|
|
@@ -133,17 +185,48 @@ import {ElMessageBox} from "element-plus";
|
|
|
const router = useRouter()
|
|
|
let loginState = ref('1');
|
|
|
let countdown = ref(0);
|
|
|
+let register_countdown = ref(0);
|
|
|
let userId = ref(null);
|
|
|
let dialogVisible = ref(false);
|
|
|
-let loginPinia = useLoginStore()
|
|
|
-function changeValidCode(){
|
|
|
+let loginPinia = useLoginStore();
|
|
|
+let loading;
|
|
|
+function changeValidCode(type){
|
|
|
// formInfo.value.vCodeReal = drawPic()
|
|
|
- randomImageCode_v1().then(res =>{
|
|
|
+ randomImageCode_v1(type).then(res =>{
|
|
|
const blob = new Blob([res], { type: "image/png" });
|
|
|
// 创建URL对象
|
|
|
formInfo.value.vCodeReal = URL.createObjectURL(blob);
|
|
|
})
|
|
|
}
|
|
|
+function getRegisterCode() {
|
|
|
+ // 模拟发送短信验证码的请求
|
|
|
+ // 实际应用中，这里应该是向服务器发送请求，并处理响应
|
|
|
+ sendPhoneVerificationCode(formInfo.value.phone,formInfo.value.codeUserInput_phone)
|
|
|
+ .then(res =>{
|
|
|
+ if(res.code == '200'){
|
|
|
+ showMessage({
|
|
|
+ type: 'success',
|
|
|
+ message: res.msg
|
|
|
+ });
|
|
|
+ // 设置60秒倒计时
|
|
|
+ register_countdown.value = 60;
|
|
|
+ const registerIntervalId = setInterval(() => {
|
|
|
+ if (register_countdown.value > 0) {
|
|
|
+ register_countdown.value -= 1;
|
|
|
+ } else {
|
|
|
+ clearInterval(registerIntervalId);
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ }else{
|
|
|
+ showMessage({
|
|
|
+ type: 'error',
|
|
|
+ message: res.msg
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log('发送短信验证码到手机号');
|
|
|
+
|
|
|
+}
|
|
|
function getSmsCode() {
|
|
|
// 模拟发送短信验证码的请求
|
|
|
// 实际应用中，这里应该是向服务器发送请求，并处理响应
|
|
|
@@ -191,8 +274,10 @@ function loginMyCim(){
|
|
|
type:'error',
|
|
|
message:'无权登录'
|
|
|
})
|
|
|
+ loading.close();
|
|
|
+ return;
|
|
|
}else {
|
|
|
-
|
|
|
+ loading.close();
|
|
|
router.push('/LoginedPage')
|
|
|
localStorage.setItem('userInfoPsdOrUserName',JSON.stringify({
|
|
|
...formInfo.value,
|
|
|
@@ -257,6 +342,11 @@ function loginIn_yyfnzt() {
|
|
|
changeValidCode();
|
|
|
return;
|
|
|
}
|
|
|
+ loading = ElLoading.service({
|
|
|
+ lock: true,
|
|
|
+ text: 'Loading',
|
|
|
+ background: 'rgba(0, 0, 0, 0.7)',
|
|
|
+ })
|
|
|
kjUserInfologin(formInfo.value.username,encode(formInfo.value.psd),formInfo.value.message)
|
|
|
.then(res => {
|
|
|
//刷新验证码
|
|
|
@@ -266,17 +356,21 @@ function loginIn_yyfnzt() {
|
|
|
//如果没有查询到登陆信息则报错
|
|
|
data = res.msg[0].Rows;
|
|
|
}catch {
|
|
|
+ loading.close()
|
|
|
showMessage({
|
|
|
type: 'error',
|
|
|
message: '登录失败'
|
|
|
})
|
|
|
+ return
|
|
|
}
|
|
|
//存在多条用户信息时报错
|
|
|
if(data.length != 1){
|
|
|
+ loading.close()
|
|
|
showMessage({
|
|
|
type: 'error',
|
|
|
message: '登录失败'
|
|
|
})
|
|
|
+ return
|
|
|
}
|
|
|
//验证密码输入次数
|
|
|
var time2 = new Date(data[0]["GETTIME"]).getTime() - new Date(data[0]["LAST_TIME"]).getTime();
|
|
|
@@ -293,6 +387,7 @@ function loginIn_yyfnzt() {
|
|
|
message:'账号已锁定，请15分钟后重试'
|
|
|
})
|
|
|
}
|
|
|
+ loading.close();
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
@@ -303,6 +398,8 @@ function loginIn_yyfnzt() {
|
|
|
type: 'error',
|
|
|
message: '登录失败'
|
|
|
})
|
|
|
+ loading.close();
|
|
|
+ return;
|
|
|
}
|
|
|
})
|
|
|
.catch((e) => {
|
|
|
@@ -311,6 +408,8 @@ function loginIn_yyfnzt() {
|
|
|
type: 'error',
|
|
|
message: '登录失败'
|
|
|
})
|
|
|
+ loading.close();
|
|
|
+ return;
|
|
|
})
|
|
|
}
|
|
|
|
|
|
@@ -322,9 +421,9 @@ function loginIn(){ //用户名密码校验
|
|
|
if(res.data.state == '0'){
|
|
|
userId.value = res.data.userid;
|
|
|
if(res.data.isBindPhone == '0'){ //没有转注册手机号
|
|
|
- loginState.value = '2';
|
|
|
+ //loginState.value = '2';
|
|
|
dialogVisible.value = true;
|
|
|
- changeValidCode();
|
|
|
+ changeValidCode('black');
|
|
|
}else if(res.data.isBindPhone == '1'){ //有转短信验证码
|
|
|
loginState.value = '3';
|
|
|
changeValidCode();
|
|
|
@@ -345,9 +444,10 @@ function loginIn(){ //用户名密码校验
|
|
|
}
|
|
|
|
|
|
function loginIn_phone(){
|
|
|
- userBindPhone(userId.value,formInfo.value.phone,formInfo.value.codeUserInput_phone)
|
|
|
+ userBindPhone(userId.value,formInfo.value.phone,formInfo.value.register_message)
|
|
|
.then(res =>{
|
|
|
if(res.code == '200'){
|
|
|
+ dialogVisible = false
|
|
|
loginState.value = '3';
|
|
|
changeValidCode();
|
|
|
}else{
|
|
|
@@ -377,11 +477,18 @@ let showObj= ref({
|
|
|
codeUserInput_phone:'', //手机号图片验证码
|
|
|
phone:'', //手机号
|
|
|
codeUserInput_message:'', //短信图片验证码
|
|
|
- message:'' //短信验证码
|
|
|
+ message:'', //短信验证码
|
|
|
+ register_message:'', //注册短信验证码
|
|
|
+
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
+::v-deep{
|
|
|
+ .el-dialog__title{
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
#login-page{
|
|
|
.title{
|
|
|
position: absolute;
|
|
|
@@ -433,18 +540,6 @@ let showObj= ref({
|
|
|
|
|
|
margin-bottom: 40px;
|
|
|
}
|
|
|
- :deep{
|
|
|
- .el-input__wrapper{
|
|
|
- .el-input__inner{
|
|
|
- color: #fff;
|
|
|
- height: 54px;
|
|
|
- line-height: 54px;
|
|
|
- }
|
|
|
- background: rgba(0,0,0,0.25);
|
|
|
- box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;
|
|
|
- border-radius:0;
|
|
|
- }
|
|
|
- }
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
background: url("@/assets/imgs/CIMbg.jpg");
|
|
|
@@ -454,6 +549,18 @@ let showObj= ref({
|
|
|
justify-content: center;
|
|
|
text-align: center;
|
|
|
.login-content{
|
|
|
+ :deep{
|
|
|
+ .el-input__wrapper{
|
|
|
+ .el-input__inner{
|
|
|
+ color: #fff;
|
|
|
+ height: 54px;
|
|
|
+ line-height: 54px;
|
|
|
+ }
|
|
|
+ background: rgba(0,0,0,0.25);
|
|
|
+ box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;
|
|
|
+ border-radius:0;
|
|
|
+ }
|
|
|
+ }
|
|
|
.form-item{
|
|
|
img{
|
|
|
width: 32px;
|
|
|
@@ -472,5 +579,31 @@ let showObj= ref({
|
|
|
background: rgba(0,0,0,0.3);
|
|
|
|
|
|
}
|
|
|
+ .dialog-content{
|
|
|
+ :deep{
|
|
|
+ .el-input__wrapper{
|
|
|
+ .el-input__inner{
|
|
|
+ height: 54px;
|
|
|
+ line-height: 54px;
|
|
|
+ }
|
|
|
+ border-radius:0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .custom-block{
|
|
|
+ padding: 8px 16px;
|
|
|
+ background-color: rgba(64,158,255,0.1);
|
|
|
+ border-radius: 4px;
|
|
|
+ border-left: 5px solid var(--el-color-primary);
|
|
|
+ margin: 20px 0;
|
|
|
+
|
|
|
+ .custom-block-title {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .custom-block-content{
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
