<template>
|
<div class="pc-login" v-if="isShowLogin">
|
<div class="items-center justify-center flex">
|
<div class="login_box">
|
<div class="sign_in">
|
<i class="ywifont ywicon-guanbi closes" @click="handleClose"></i>
|
<h1><span>登录 WI 水务智能</span></h1>
|
<el-tabs v-model="state.activeLoginName" class="mt-[24px]" @tab-change="handleTabChange">
|
<el-tab-pane label="账户密码登录" name="accountUser">
|
<el-form
|
ref="loginFormRef"
|
:model="state.loginForm"
|
:rules="loginRules"
|
class="demo-ruleForm mt-[24px] min-h-[140px]"
|
size="large"
|
>
|
<el-form-item label="账号" prop="account">
|
<el-input v-model="state.loginForm.account" clearable v-focus />
|
</el-form-item>
|
<el-form-item label="密码" prop="pwd">
|
<el-input v-model="state.loginForm.pwd" type="password" autocomplete="off" clearable />
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
<el-tab-pane label="手机号登录" name="phoneUser">
|
<el-form
|
ref="formPhoneRef"
|
:rules="loginPhoneRules"
|
:model="state.loginPhoneForm"
|
size="large"
|
class="mt-[24px] min-h-[140px]"
|
>
|
<el-form-item label="手机号" prop="phoneUser">
|
<el-input v-model="state.loginPhoneForm.phoneUser" placeholder="请输入手机号码" clearable>
|
<template #prepend>+86</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="verifyCode" label="验证码">
|
<el-input v-model="state.loginPhoneForm.verifyCode" placeholder="请输入四位验证码" maxlength="6" clearable>
|
<template #append>
|
<el-button type="primary" @click="handleSendVerifyCode" :disabled="hasSended">{{ sendCodeMsg }}</el-button>
|
</template>
|
</el-input>
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
<el-tab-pane label="微信登录" name="wechat">
|
<div id="wechat-login"></div>
|
</el-tab-pane>
|
</el-tabs>
|
|
<div class="mt-[24px]">
|
<el-button type="primary" @click="onSubmit" class="set-login_btn">登录</el-button>
|
|
<!-- <el-button type="primary" @click="loginByWechat">微信登录</el-button> -->
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { ElMessage, type FormInstance } from 'element-plus';
|
import { computed, nextTick, reactive, ref, watch } from 'vue';
|
import { ACCOUNT_EXPIRE_DAY, handleAfterLogin, LOGIN_CLIENT, STORED_ACCOUNT_KEY } from './login';
|
import { loginMessageUser, loginVerifyMessage, PostLogin } from '/@/api/ai/user';
|
import { isShowLogin } from '/@/stores/chatRoom';
|
import { encrypt } from '/@/utils/cypto';
|
import { LocalPlus } from '/@/utils/storage';
|
import './wxLogin.js';
|
import { SERVE_URL } from '/@/constants';
|
|
const handleClose = () => {
|
isShowLogin.value = false;
|
};
|
|
const getWechartQrCode = () => {
|
const state = (new Date().getTime() / 1000).toString();
|
// JJJHHH 表示＃号
|
const url = `${SERVE_URL}JJJHHH/home?isWxLogin=Y`;
|
const obj = new window.WxLogin({
|
id: 'wechat-login',
|
appid: 'wx4ea2dca37170074c',
|
scope: 'snsapi_login',
|
redirect_uri: encodeURIComponent(`http://apiv3.xpump.net/User/wxUserLoginCB.html?from=wi&url=${url}`),
|
state: state,
|
});
|
};
|
|
//切换用户登录页面
|
const handleTabChange = (item) => {
|
state.activeLoginName = item;
|
switch (item) {
|
case 'wechat':
|
getWechartQrCode();
|
break;
|
case 'accountUser':
|
break;
|
case 'phoneUser':
|
break;
|
}
|
};
|
|
watch(
|
() => isShowLogin.value,
|
(val) => {
|
if (val && state.activeLoginName === 'wechat') {
|
nextTick(() => {
|
getWechartQrCode();
|
});
|
}
|
}
|
);
|
|
const state = reactive({
|
activeLoginName: 'accountUser',
|
loginForm: {
|
account: '',
|
pwd: '',
|
},
|
loginPhoneForm: {
|
phoneUser: '',
|
verifyCode: '',
|
},
|
});
|
const loginRules = reactive({
|
account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
|
pwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
});
|
const loginPhoneRules = {
|
phoneUser: [
|
{ required: true, message: '请输入手机号码', trigger: 'blur' },
|
{ pattern: /^1\d{10}$/, message: '请输入正确的手机号码', trigger: 'blur' },
|
],
|
verifyCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
|
};
|
const loginFormRef = ref<FormInstance>(null); //账户密码登录
|
const formPhoneRef = ref(); //手机号登录
|
const hasSended = computed(() => {
|
return countdown.value !== null;
|
});
|
const sendCodeMsg = computed(() => {
|
return !hasSended.value ? '获取验证码' : `${countdown.value} 秒后重试`;
|
});
|
//登录
|
const onSubmit = async () => {
|
let res;
|
if (state.activeLoginName === 'accountUser') {
|
//账户密码登录
|
const isValid = await loginFormRef.value.validate().catch(() => {});
|
if (!isValid) return;
|
res = await PostLogin({
|
user: state.loginForm.account,
|
pass: state.loginForm.pwd,
|
client: LOGIN_CLIENT,
|
});
|
if (!res.json_ok) {
|
return ElMessage.error(res.json_msg);
|
}
|
} else if (state.activeLoginName === 'phoneUser') {
|
//手机登录
|
const isValid = await formPhoneRef.value.validate().catch(() => {});
|
if (!isValid) return;
|
res = await loginMessageUser({
|
phone: state.loginPhoneForm.phoneUser,
|
code: state.loginPhoneForm.verifyCode,
|
client: LOGIN_CLIENT,
|
});
|
if (!res.json_ok) {
|
return ElMessage.error(res.json_msg);
|
}
|
}
|
|
if (state.activeLoginName === 'accountUser') {
|
const accountEncryptStr = encrypt({
|
username: state.loginForm.account,
|
password: state.loginForm.pwd,
|
});
|
LocalPlus.set(STORED_ACCOUNT_KEY, accountEncryptStr, ACCOUNT_EXPIRE_DAY);
|
}
|
handleAfterLogin(res);
|
};
|
const countdown = ref(null);
|
|
//获取验证码
|
const handleSendVerifyCode = async () => {
|
formPhoneRef.value.validateField('phoneUser', async (valid: boolean) => {
|
if (valid) {
|
const res = await loginVerifyMessage({
|
phone: state.loginPhoneForm.phoneUser,
|
});
|
if (res.json_ok) {
|
countdown.value = 60; //开启倒计时
|
// 倒计时逻辑
|
const intervalId = setInterval(() => {
|
if (countdown.value > 0) {
|
countdown.value--;
|
} else {
|
clearInterval(intervalId);
|
}
|
}, 1000);
|
}
|
}
|
});
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.pc-login {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100vw;
|
height: 100vh;
|
z-index: 2000;
|
background-color: rgba(0, 0, 0, 0.6);
|
.login_box {
|
position: relative;
|
width: 450px;
|
margin: 15vh auto;
|
.sign_in {
|
padding: 39px;
|
position: relative;
|
width: 100%;
|
height: 100%;
|
border-radius: 12px;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
display: flex;
|
-webkit-box-orient: vertical;
|
-webkit-box-direction: normal;
|
-ms-flex-direction: column;
|
flex-direction: column;
|
-webkit-box-align: center;
|
-ms-flex-align: center;
|
align-items: center;
|
background-color: #fff;
|
-webkit-box-shadow: 0 0 16px 0 rgba(20, 29, 53, 0.21);
|
box-shadow: 0 0 16px 0 rgba(20, 29, 53, 0.21);
|
.closes {
|
position: absolute;
|
top: -28px;
|
right: -38px;
|
font-size: 30px;
|
cursor: pointer;
|
color: #eee;
|
-o-transition: color 0.1s;
|
transition: color 0.1s;
|
}
|
h1 {
|
box-sizing: content-box;
|
width: 100%;
|
font-size: 30px;
|
font-weight: 500;
|
color: #1c153a;
|
text-align: left !important;
|
}
|
.demo-ruleForm {
|
:deep(.el-input__wrapper) {
|
position: relative;
|
margin-bottom: 12px;
|
display: flex;
|
-webkit-box-align: center;
|
-ms-flex-align: center;
|
align-items: center;
|
width: 346px;
|
// height: 44px;
|
background-color: #fff;
|
border-radius: 5px;
|
}
|
:deep(.el-form-item--large .el-form-item__error) {
|
padding: unset !important;
|
}
|
}
|
.set-pwd {
|
text-align: right;
|
font-size: 14px;
|
font-weight: 300;
|
color: #999;
|
width: 100%;
|
padding: 0px 32px;
|
}
|
.set-login_btn {
|
width: 366px;
|
height: 44px;
|
font-size: 16px;
|
font-weight: 500;
|
color: #fff;
|
background: #0a58ed;
|
border-radius: 12px;
|
-webkit-box-shadow: 4px 6px 15px rgba(10, 88, 237, 0.2);
|
box-shadow: 4px 6px 15px rgba(10, 88, 237, 0.2);
|
}
|
}
|
}
|
}
|
</style>
|
