|
|
|
|
@ -13,10 +13,14 @@ import bg from "../../assets/login/login_bg.png";
|
|
|
|
|
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
|
|
|
|
// import update from "./components/update.vue";
|
|
|
|
|
import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from "vue";
|
|
|
|
|
import registerIcon from "@/assets/login/register.png";
|
|
|
|
|
import { getRegister, changePassWord } from "@/api/user";
|
|
|
|
|
import Lock from "@iconify-icons/icon-park-outline/lock";
|
|
|
|
|
import User from "@iconify-icons/icon-park-outline/user";
|
|
|
|
|
import PreviewClose from "@iconify-icons/icon-park-outline/preview-close";
|
|
|
|
|
import PreviewOpen from "@iconify-icons/icon-park-outline/preview-open";
|
|
|
|
|
import IdCard from "@iconify-icons/icon-park-outline/id-card";
|
|
|
|
|
// import InviteCode from "@iconify-icons/icon-park-outline/user-to-user-transmission";
|
|
|
|
|
|
|
|
|
|
defineOptions({
|
|
|
|
|
name: "Login"
|
|
|
|
|
@ -24,11 +28,11 @@ defineOptions({
|
|
|
|
|
const router = useRouter();
|
|
|
|
|
const loading = ref(false);
|
|
|
|
|
const ruleFormRef = ref<FormInstance>();
|
|
|
|
|
const registerFormRef = ref<FormInstance>();
|
|
|
|
|
const modifyFormRef = ref<FormInstance>();
|
|
|
|
|
const checked = ref(false);
|
|
|
|
|
// const currentPage = computed(() => {
|
|
|
|
|
// return useUserStoreHook().currentPage;
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
const cardType = ref(1);
|
|
|
|
|
const { initStorage } = useLayout();
|
|
|
|
|
initStorage();
|
|
|
|
|
|
|
|
|
|
@ -40,7 +44,18 @@ const ruleForm = reactive({
|
|
|
|
|
username: "",
|
|
|
|
|
password: ""
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const registerForm = reactive({
|
|
|
|
|
account: "",
|
|
|
|
|
name: "",
|
|
|
|
|
password: "",
|
|
|
|
|
newPassword: ""
|
|
|
|
|
});
|
|
|
|
|
const modifyForm = reactive({
|
|
|
|
|
account: "",
|
|
|
|
|
name: "",
|
|
|
|
|
password: "",
|
|
|
|
|
newPassword: ""
|
|
|
|
|
});
|
|
|
|
|
const onLogin = async (formEl: FormInstance | undefined) => {
|
|
|
|
|
loading.value = true;
|
|
|
|
|
if (!formEl) return;
|
|
|
|
|
@ -78,6 +93,46 @@ const onLogin = async (formEl: FormInstance | undefined) => {
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
const register = async (formEl: FormInstance | undefined) => {
|
|
|
|
|
loading.value = true;
|
|
|
|
|
if (!formEl) return;
|
|
|
|
|
await formEl.validate(async (valid, fields) => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
const res: any = await getRegister({
|
|
|
|
|
account: registerForm.account,
|
|
|
|
|
name: registerForm.name,
|
|
|
|
|
password: registerForm.password
|
|
|
|
|
});
|
|
|
|
|
loading.value = false;
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
changeCardType(4);
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
loading.value = false;
|
|
|
|
|
return fields;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
const onModify = async (formEl: FormInstance | undefined) => {
|
|
|
|
|
loading.value = true;
|
|
|
|
|
if (!formEl) return;
|
|
|
|
|
await formEl.validate(async (valid, fields) => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
const res: any = await changePassWord({
|
|
|
|
|
account: modifyForm.account,
|
|
|
|
|
name: modifyForm.name,
|
|
|
|
|
password: modifyForm.password
|
|
|
|
|
});
|
|
|
|
|
loading.value = false;
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
changeCardType(5);
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
loading.value = false;
|
|
|
|
|
return fields;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
const passwordType = ref("password");
|
|
|
|
|
const refInput = ref();
|
|
|
|
|
/** 使用公共函数，避免`removeEventListener`失效 */
|
|
|
|
|
@ -98,6 +153,23 @@ function showPass() {
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const changeCardType = val => {
|
|
|
|
|
cardType.value = val;
|
|
|
|
|
};
|
|
|
|
|
const validateConfirmPassword = (rule, value, callback) => {
|
|
|
|
|
if (value !== registerForm.password) {
|
|
|
|
|
callback(new Error("请再次输入密码以确保一致，不能留空"));
|
|
|
|
|
} else {
|
|
|
|
|
callback();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
const validatePassword = (rule, value, callback) => {
|
|
|
|
|
if (value !== modifyForm.password) {
|
|
|
|
|
callback(new Error("请再次输入密码以确保一致，不能留空"));
|
|
|
|
|
} else {
|
|
|
|
|
callback();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
window.document.addEventListener("keypress", onkeypress);
|
|
|
|
|
});
|
|
|
|
|
@ -116,7 +188,7 @@ onBeforeUnmount(() => {
|
|
|
|
|
<span class="systeam-name">虚拟病人系统</span>
|
|
|
|
|
<span class="desc">Welcome to the Virtual Patient System</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="login-box">
|
|
|
|
|
<div v-if="cardType === 1" class="login-box">
|
|
|
|
|
<div class="login-form">
|
|
|
|
|
<div class="top">
|
|
|
|
|
<p class="title">欢迎登录虚拟病人系统</p>
|
|
|
|
|
@ -193,6 +265,7 @@ onBeforeUnmount(() => {
|
|
|
|
|
>
|
|
|
|
|
{{ "忘记密码？" }}
|
|
|
|
|
</el-button> -->
|
|
|
|
|
<div class="btn-color" @click="changeCardType(3)">忘记密码</div>
|
|
|
|
|
</div>
|
|
|
|
|
<el-button
|
|
|
|
|
class="w-full mt-9 login-btn"
|
|
|
|
|
@ -206,8 +279,273 @@ onBeforeUnmount(() => {
|
|
|
|
|
</el-button>
|
|
|
|
|
</Motion>
|
|
|
|
|
</el-form>
|
|
|
|
|
<!-- 忘记密码 -->
|
|
|
|
|
<!-- <update v-if="currentPage === 4" /> -->
|
|
|
|
|
<div @click="changeCardType(2)" class="desc">还没账号？去注册</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="cardType === 2" class="register-box">
|
|
|
|
|
<div class="login-form">
|
|
|
|
|
<div class="top">
|
|
|
|
|
<p class="title">注册账号</p>
|
|
|
|
|
<p class="top_desc">Sign up for an to account</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<el-form ref="registerFormRef" :model="registerForm" size="large">
|
|
|
|
|
<Motion :delay="100">
|
|
|
|
|
<el-form-item
|
|
|
|
|
:rules="[
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请使用中文填写您的姓名，6字以内',
|
|
|
|
|
trigger: 'blur'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
pattern: /^[\u4e00-\u9fa5]+$/,
|
|
|
|
|
message: '请使用中文填写您的姓名，6字以内',
|
|
|
|
|
trigger: 'change'
|
|
|
|
|
}
|
|
|
|
|
]"
|
|
|
|
|
prop="name"
|
|
|
|
|
>
|
|
|
|
|
<el-input
|
|
|
|
|
maxlength="6"
|
|
|
|
|
style="height: 60px; font-size: 16px"
|
|
|
|
|
v-model="registerForm.name"
|
|
|
|
|
placeholder="请输入姓名"
|
|
|
|
|
:prefix-icon="useRenderIcon(IdCard)"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</Motion>
|
|
|
|
|
<Motion :delay="100">
|
|
|
|
|
<el-form-item
|
|
|
|
|
:rules="[
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请输入账号',
|
|
|
|
|
trigger: 'blur'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
pattern: /^[a-zA-Z0-9]{6,18}$/,
|
|
|
|
|
message: '使用6至18个英文字母或数字',
|
|
|
|
|
trigger: 'change'
|
|
|
|
|
}
|
|
|
|
|
]"
|
|
|
|
|
prop="account"
|
|
|
|
|
>
|
|
|
|
|
<el-input
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
style="height: 60px; font-size: 16px"
|
|
|
|
|
v-model="registerForm.account"
|
|
|
|
|
placeholder="请输入账号"
|
|
|
|
|
:prefix-icon="useRenderIcon(User)"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</Motion>
|
|
|
|
|
<Motion :delay="150">
|
|
|
|
|
<el-form-item
|
|
|
|
|
prop="password"
|
|
|
|
|
:rules="[
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请输入密码',
|
|
|
|
|
trigger: 'blur'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
pattern: /^(?![\u4e00-\u9fa5\s])[\x21-\x7e]{6,18}$/,
|
|
|
|
|
message: '密码6-18位 不包含中文特殊字符和空格',
|
|
|
|
|
trigger: 'change'
|
|
|
|
|
}
|
|
|
|
|
]"
|
|
|
|
|
>
|
|
|
|
|
<el-input
|
|
|
|
|
type="password"
|
|
|
|
|
autocomplete="new-password"
|
|
|
|
|
style="height: 60px; font-size: 16px"
|
|
|
|
|
v-model="registerForm.password"
|
|
|
|
|
placeholder="请输入密码"
|
|
|
|
|
:prefix-icon="useRenderIcon(Lock)"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</Motion>
|
|
|
|
|
<Motion :delay="150">
|
|
|
|
|
<el-form-item
|
|
|
|
|
prop="newPassword"
|
|
|
|
|
:rules="[
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请再次输入密码',
|
|
|
|
|
trigger: 'blur'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
pattern: /^(?![\u4e00-\u9fa5\s])[\x21-\x7e]{6,18}$/,
|
|
|
|
|
message: '密码6-18位 不包含中文特殊字符和空格',
|
|
|
|
|
trigger: 'change'
|
|
|
|
|
},
|
|
|
|
|
{ validator: validateConfirmPassword, trigger: 'blur' }
|
|
|
|
|
]"
|
|
|
|
|
>
|
|
|
|
|
<el-input
|
|
|
|
|
style="height: 60px; font-size: 16px"
|
|
|
|
|
type="password"
|
|
|
|
|
autocomplete="new-password"
|
|
|
|
|
v-model="registerForm.newPassword"
|
|
|
|
|
placeholder="请再次输入密码"
|
|
|
|
|
:prefix-icon="useRenderIcon(Lock)"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</Motion>
|
|
|
|
|
<Motion :delay="250">
|
|
|
|
|
<el-button
|
|
|
|
|
class="w-full mt-9 login-btn"
|
|
|
|
|
size="large"
|
|
|
|
|
type="primary"
|
|
|
|
|
color="rgba(66, 135, 255, 1)"
|
|
|
|
|
:loading="loading"
|
|
|
|
|
@click="register(registerFormRef)"
|
|
|
|
|
>
|
|
|
|
|
确定
|
|
|
|
|
</el-button>
|
|
|
|
|
</Motion>
|
|
|
|
|
</el-form>
|
|
|
|
|
<div @click="changeCardType(1)" class="desc">已有账号？去登录</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="cardType === 3" class="login-box" style="height: 560px">
|
|
|
|
|
<div class="login-form">
|
|
|
|
|
<div class="top">
|
|
|
|
|
<p class="title" style="margin-bottom: 52px">忘记密码</p>
|
|
|
|
|
<!-- <p class="top_desc" style="font-size: 14px">
|
|
|
|
|
为了您的账户安全，请重新设置位数密码
|
|
|
|
|
</p> -->
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<el-form ref="modifyFormRef" :model="modifyForm" size="large">
|
|
|
|
|
<Motion :delay="100">
|
|
|
|
|
<el-form-item
|
|
|
|
|
:rules="[
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请输入账号',
|
|
|
|
|
trigger: 'blur'
|
|
|
|
|
}
|
|
|
|
|
]"
|
|
|
|
|
prop="account"
|
|
|
|
|
>
|
|
|
|
|
<el-input
|
|
|
|
|
style="height: 60px; font-size: 16px"
|
|
|
|
|
v-model="modifyForm.account"
|
|
|
|
|
placeholder="请输入账号"
|
|
|
|
|
:prefix-icon="useRenderIcon(User)"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</Motion>
|
|
|
|
|
|
|
|
|
|
<Motion :delay="150">
|
|
|
|
|
<el-form-item
|
|
|
|
|
prop="password"
|
|
|
|
|
:rules="[
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请输入新密码',
|
|
|
|
|
trigger: 'blur'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
pattern: /^(?![\u4e00-\u9fa5\s])[\x21-\x7e]{6,18}$/,
|
|
|
|
|
message: '密码6-18位 不包含中文特殊字符和空格',
|
|
|
|
|
trigger: 'change'
|
|
|
|
|
}
|
|
|
|
|
]"
|
|
|
|
|
>
|
|
|
|
|
<el-input
|
|
|
|
|
type="password"
|
|
|
|
|
autocomplete="new-password"
|
|
|
|
|
style="height: 60px; font-size: 16px"
|
|
|
|
|
v-model="modifyForm.password"
|
|
|
|
|
placeholder="请输入密码"
|
|
|
|
|
:prefix-icon="useRenderIcon(Lock)"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</Motion>
|
|
|
|
|
<Motion :delay="150">
|
|
|
|
|
<el-form-item
|
|
|
|
|
prop="newPassword"
|
|
|
|
|
:rules="[
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请再次输入新密码',
|
|
|
|
|
trigger: 'blur'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
pattern: /^(?![\u4e00-\u9fa5\s])[\x21-\x7e]{6,18}$/,
|
|
|
|
|
message: '密码6-18位 不包含中文特殊字符和空格',
|
|
|
|
|
trigger: 'change'
|
|
|
|
|
},
|
|
|
|
|
{ validator: validatePassword, trigger: 'blur' }
|
|
|
|
|
]"
|
|
|
|
|
>
|
|
|
|
|
<el-input
|
|
|
|
|
type="password"
|
|
|
|
|
autocomplete="new-password"
|
|
|
|
|
style="height: 60px; font-size: 16px"
|
|
|
|
|
v-model="modifyForm.newPassword"
|
|
|
|
|
placeholder="请再次输入新密码"
|
|
|
|
|
:prefix-icon="useRenderIcon(Lock)"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</Motion>
|
|
|
|
|
<Motion :delay="250">
|
|
|
|
|
<el-button
|
|
|
|
|
class="w-full mt-9 login-btn"
|
|
|
|
|
size="large"
|
|
|
|
|
type="primary"
|
|
|
|
|
color="rgba(66, 135, 255, 1)"
|
|
|
|
|
:loading="loading"
|
|
|
|
|
@click="onModify(modifyFormRef)"
|
|
|
|
|
>
|
|
|
|
|
确定
|
|
|
|
|
</el-button>
|
|
|
|
|
</Motion>
|
|
|
|
|
</el-form>
|
|
|
|
|
<div @click="changeCardType(1)" class="desc">已有账号？去登录</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="cardType === 4" class="login-box" style="height: 546px">
|
|
|
|
|
<div class="content">
|
|
|
|
|
<img :src="registerIcon" alt="" />
|
|
|
|
|
<div class="content_top">
|
|
|
|
|
<p class="content_top_title">注册成功</p>
|
|
|
|
|
<p class="content_top_desc">
|
|
|
|
|
已注册成功，您可以使用账号密码登录系统
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<el-button
|
|
|
|
|
style="margin-top: 130px"
|
|
|
|
|
class="w-full login-btn"
|
|
|
|
|
size="large"
|
|
|
|
|
type="primary"
|
|
|
|
|
color="rgba(66, 135, 255, 1)"
|
|
|
|
|
@click="changeCardType(1)"
|
|
|
|
|
>
|
|
|
|
|
去登录
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="cardType === 5" class="login-box" style="height: 546px">
|
|
|
|
|
<div class="content">
|
|
|
|
|
<img :src="registerIcon" alt="" />
|
|
|
|
|
<div class="content_top">
|
|
|
|
|
<p class="content_top_title">重置成功</p>
|
|
|
|
|
<p class="content_top_desc">您可以重新登录系统验证您的新密码</p>
|
|
|
|
|
</div>
|
|
|
|
|
<el-button
|
|
|
|
|
style="margin-top: 130px"
|
|
|
|
|
class="w-full login-btn"
|
|
|
|
|
size="large"
|
|
|
|
|
type="primary"
|
|
|
|
|
color="rgba(66, 135, 255, 1)"
|
|
|
|
|
@click="changeCardType(1)"
|
|
|
|
|
>
|
|
|
|
|
重新登录
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -233,12 +571,16 @@ onBeforeUnmount(() => {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-color {
|
|
|
|
|
color: #1c0d82;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #4287ff;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-color:hover {
|
|
|
|
|
color: #1c0d82;
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
.desc {
|
|
|
|
|
margin-top: 16px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #787878;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-input__icon {
|
|
|
|
|
@ -263,7 +605,8 @@ onBeforeUnmount(() => {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-box {
|
|
|
|
|
.login-box,
|
|
|
|
|
.register-box {
|
|
|
|
|
.top {
|
|
|
|
|
.title {
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
@ -278,5 +621,46 @@ onBeforeUnmount(() => {
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.content {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 35px 40px 0;
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
width: 137px;
|
|
|
|
|
height: 94px;
|
|
|
|
|
margin-bottom: 40px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.content_top {
|
|
|
|
|
.content_top_title {
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.content_top_desc {
|
|
|
|
|
margin-top: 8px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.register-box {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
width: 500px;
|
|
|
|
|
height: 665px;
|
|
|
|
|
padding-top: 65px;
|
|
|
|
|
margin-left: 160px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
background: #fff;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
