279 lines
7.3 KiB
Vue
279 lines
7.3 KiB
Vue
<template>
|
|
<div class="bg">
|
|
<div class="logo">
|
|
<div v-if="!data.HAS_LOGO">
|
|
<img src="~@/assets/images/lucency.png" alt="" />
|
|
</div>
|
|
<div v-if="data.HAS_LOGO === 'N'">
|
|
<img
|
|
src="https://img.zcool.cn/community/013a415fd17a7711013fdcc71843a2.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div v-if="data.HAS_LOGO === 'Y'">
|
|
<img :src="FILE_PATH + data.oemForm.APP_LOGO_PATH" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="form">
|
|
<div class="title">
|
|
<div>欢迎登录</div>
|
|
<div v-if="!data.oemForm.CORP_NAME">联安云全员培训学员APP</div>
|
|
<div v-else>
|
|
{{ data.oemForm.CORP_NAME }}
|
|
</div>
|
|
</div>
|
|
<van-form label-align="top">
|
|
<van-cell-group :border="false">
|
|
<van-field
|
|
v-model="data.form.userName"
|
|
label="身份证号"
|
|
placeholder="请输入您的身份证号"
|
|
/>
|
|
<van-field
|
|
v-model="data.form.userPwd"
|
|
label="密码"
|
|
placeholder="请输入您的密码"
|
|
type="password"
|
|
/>
|
|
<van-cell>
|
|
<van-checkbox v-model="data.checked" shape="square">
|
|
30天内免登陆
|
|
</van-checkbox>
|
|
</van-cell>
|
|
</van-cell-group>
|
|
</van-form>
|
|
<div class="loginbtn" @click="fnLogin">登录</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive } from "vue";
|
|
import { debounce } from "throttle-debounce";
|
|
import { showToast, showDialog } from "vant";
|
|
import { Login, getOemInfo, getAppVersion } from "@/request/api.js";
|
|
import { useUserStore } from "@/pinia/user.js";
|
|
import { useSavedUsers } from "@/pinia/savedUsers.js";
|
|
import { useMiscellaneousStore } from "@/pinia/miscellaneous.js";
|
|
import { useRouter } from "vue-router";
|
|
import dayjs from "dayjs";
|
|
import { useEventListener } from "@vueuse/core";
|
|
|
|
const userStore = useUserStore();
|
|
const miscellaneousStore = useMiscellaneousStore();
|
|
const savedUsersStore = useSavedUsers();
|
|
const router = useRouter();
|
|
const FILE_PATH = import.meta.env.VITE_FILE_PATH;
|
|
const data = reactive({
|
|
checked: false,
|
|
form: {
|
|
userName: "",
|
|
userPwd: "",
|
|
},
|
|
oemForm: {
|
|
CORP_NAME: "",
|
|
APP_LOGO_PATH: "",
|
|
},
|
|
HAS_LOGO: "",
|
|
APP_DOMAIN_NAME: "",
|
|
appVersionNew: "",
|
|
});
|
|
const fnGetAppVersion = async () => {
|
|
const resData = await getAppVersion();
|
|
data.appVersionNew = resData.pd.VERSION;
|
|
};
|
|
useEventListener("resize", () => {
|
|
if (document.activeElement.tagName === "INPUT") {
|
|
window.setTimeout(() => {
|
|
document.activeElement.scrollIntoViewIfNeeded();
|
|
}, 100);
|
|
}
|
|
});
|
|
const fnIdCard = (value) => {
|
|
return /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(
|
|
value
|
|
);
|
|
};
|
|
const fnLogin = debounce(
|
|
1000,
|
|
async () => {
|
|
if (miscellaneousStore.getAppVersion >= data.appVersionNew) {
|
|
if (!data.form.userName) {
|
|
showToast("请输入用户名");
|
|
return;
|
|
}
|
|
if (!fnIdCard(data.form.userName)) {
|
|
showToast("身份证号格式不正确");
|
|
return;
|
|
}
|
|
if (!data.form.userPwd) {
|
|
showToast("密码不能为空");
|
|
return;
|
|
}
|
|
if (data.checked) {
|
|
savedUsersStore.setSavedUsers({
|
|
userName: data.form.userName,
|
|
userPwd: data.form.userPwd,
|
|
startTime:
|
|
savedUsersStore.getSavedUsers.startTime ||
|
|
dayjs().format("YYYY-MM-DD"),
|
|
endTime:
|
|
savedUsersStore.getSavedUsers.endTime ||
|
|
dayjs().add(30, "days").format("YYYY-MM-DD"),
|
|
});
|
|
} else {
|
|
savedUsersStore.$reset();
|
|
}
|
|
const resData = await Login({
|
|
KEYDATA: "qdkjchina" + data.form.userName + ",qd," + data.form.userPwd,
|
|
PERSONNEL_TYPE: "6",
|
|
});
|
|
userStore.setUserInfo({
|
|
USER_ID: resData.USER_ID, // 用户id
|
|
NAME: resData.NAME, // 用户名
|
|
USERNAME: resData.USERNAME, // 用户手机号
|
|
CORPINFO_ID: resData.CORPINFO_ID, // 创建机构id
|
|
// TOKEN: resData.token, // 创建机构id
|
|
USER_SIGN_FILE_PATH: resData.USER_SIGN_FILE_PATH
|
|
? FILE_PATH + resData.USER_SIGN_FILE_PATH
|
|
: "", // 学员证照
|
|
});
|
|
|
|
if (resData.AUTHENTICATION === "0") {
|
|
await showDialog({
|
|
title: "提示",
|
|
message: "未人脸验证，点击确认前往人脸验证！",
|
|
});
|
|
await router.replace({
|
|
name: "blankJump",
|
|
query: { isFirst: "1", routerName: "face_authentication" },
|
|
});
|
|
} else {
|
|
await router.replace({ name: "index" });
|
|
}
|
|
} else {
|
|
showToast("当前版本过低，请点击微信右上角的刷新再试。");
|
|
}
|
|
},
|
|
{ atBegin: true }
|
|
);
|
|
const fnInitUser = () => {
|
|
const { userName, userPwd, startTime, endTime } =
|
|
savedUsersStore.getSavedUsers;
|
|
if (userName && userPwd) {
|
|
if (dayjs(startTime).diff(dayjs(endTime), "days") <= 30) {
|
|
data.form.userName = userName;
|
|
data.form.userPwd = userPwd;
|
|
data.checked = true;
|
|
fnLogin();
|
|
}
|
|
}
|
|
};
|
|
await fnGetAppVersion();
|
|
fnInitUser();
|
|
const fnGetData = async () => {
|
|
const resData = await getOemInfo({
|
|
APP_DOMAIN_NAME: window.location.hostname,
|
|
});
|
|
if (resData.pd) {
|
|
data.oemForm.CORP_NAME = resData.pd.CORP_NAME;
|
|
data.oemForm.APP_LOGO_PATH = resData.pd.APP_LOGO_PATH;
|
|
data.HAS_LOGO = "Y";
|
|
} else {
|
|
data.HAS_LOGO = "N";
|
|
}
|
|
};
|
|
import.meta.env.PROD && fnGetData();
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bg {
|
|
background-color: #fff;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-image: url("/src/assets/images/login/login_bg.jpg");
|
|
background-size: 750px 522px;
|
|
background-repeat: no-repeat;
|
|
background-position: top center;
|
|
position: relative;
|
|
padding-top: 300px;
|
|
|
|
.logo {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
width: 238px;
|
|
height: 238px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 1px solid rgba(255, 255, 255, 0.43);
|
|
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.18);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) rotate(45deg);
|
|
top: 300px;
|
|
|
|
div {
|
|
width: 185px;
|
|
height: 185px;
|
|
border-radius: 50%;
|
|
background-color: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transform: rotate(-45deg);
|
|
box-shadow: 0 0 27px rgba(0, 0, 0, 0.17);
|
|
|
|
img {
|
|
width: 130px;
|
|
height: 130px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.form {
|
|
background: #fff;
|
|
border-radius: 66px;
|
|
padding: 60px;
|
|
|
|
.title {
|
|
margin-top: 150px;
|
|
margin-bottom: 50px;
|
|
text-align: center;
|
|
|
|
div {
|
|
&:nth-child(1) {
|
|
font-weight: bold;
|
|
font-size: 50px;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
color: #656565;
|
|
font-size: 30px;
|
|
margin-top: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep {
|
|
.van-field__label {
|
|
color: #333;
|
|
font-size: 36px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.loginbtn {
|
|
margin: var(--van-cell-group-inset-padding);
|
|
background: #1082ff;
|
|
color: #fff;
|
|
font-size: 40px;
|
|
text-align: center;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
border-radius: 50px;
|
|
margin-top: 100px;
|
|
}
|
|
}
|
|
</style>
|