<template>
|
<el-dialog
|
align-center
|
append-to-body
|
v-model="dialogFormVisible"
|
@close="closeDialog"
|
@open="openDialog"
|
class="fansdialog"
|
>
|
<div style="display: flex; justify-content: space-around">
|
<el-image :src="dialogLeftImg" class="leftImg" />
|
|
<div class="logIn">
|
<div class="signUpTitle" v-if="flag == 'logIn'">
|
<ul>
|
<li
|
@click="signUpWay = 'authSignUp'"
|
:style="{
|
color: signUpWay == 'authSignUp' ? '#144941' : '#545C63',
|
}"
|
>
|
手机号登录
|
</li>
|
<li>|</li>
|
<li
|
@click="wechatLoginOpen"
|
:style="{ color: signUpWay == 'wechat' ? '#144941' : '#545C63' }"
|
>
|
微信登录
|
</li>
|
</ul>
|
</div>
|
<div v-else style="text-align: center; color: #144941">注册</div>
|
<div
|
class="singUpPhone"
|
v-if="signUpWay === 'phone' || 'authSignUp'"
|
:style="{ height: signUpWay == 'findPassword' ? '450px' : '400px' }"
|
>
|
<el-form
|
:model="passFormData"
|
v-if="signUpWay === 'phone' || 'authSignUp'"
|
ref="passFormRef"
|
@keyup.enter="signInSystem(passFormRef)"
|
>
|
<el-form-item
|
v-if="signUpWay !== 'findPassword'"
|
:rules="[
|
{ min: 11, max: 11, message: '请输入11位电话号码' },
|
{
|
validator: (_, value, callback) => {
|
if (
|
!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
|
value
|
)
|
) {
|
callback('请输入11位电话号码');
|
} else {
|
callback();
|
}
|
},
|
},
|
]"
|
prop="telNumber"
|
>
|
<el-input
|
v-model="passFormData.telNumber"
|
placeholder="请输入手机号"
|
size="large"
|
>
|
<template #prepend>
|
<el-select
|
v-model="select"
|
placeholder="Select"
|
style="width: 110px"
|
class="selectPhone"
|
>
|
<el-option label="中国+86" value="86" />
|
</el-select>
|
</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button class="yanzhengBtn" @click="sliderImgDialogVisable = true"
|
>验证</el-button
|
>
|
</el-form-item>
|
<el-form-item
|
v-if="signUpWay === 'authSignUp'"
|
class="codeWay"
|
:rules="[
|
{ required: true, message: '请输入验证码' },
|
{ min: 4, max: 6, message: '请输入有效验证码' },
|
]"
|
prop="telCode"
|
>
|
<el-input
|
v-model="passFormData.telCode"
|
placeholder="请输入验证码"
|
size="large"
|
/>
|
<el-button
|
type="primary"
|
class="codeBtn"
|
:disabled="countDown != 0"
|
@click="getCode(passFormRef)"
|
>{{
|
countDown == 0 ? "获取验证码" : "验证码(" + countDown + "s)"
|
}}</el-button
|
>
|
</el-form-item>
|
<el-form-item
|
v-if="flag === 'signUp'"
|
:rules="[
|
{ required: true, message: '请输入密码' },
|
{ min: 8, max: 16, message: '密码在8到16位之间' },
|
{
|
validator: (rule, value, callback) => {
|
if (!/\d/.test(value) || /^\d+$/.test(value)) {
|
callback('密码不能为纯数字或字母');
|
} else {
|
callback();
|
}
|
},
|
},
|
]"
|
prop="password"
|
class="passwordInput"
|
>
|
<el-input
|
type="password"
|
show-password
|
v-model="passFormData.password"
|
placeholder="请输入密码"
|
size="large"
|
style="width: 304px"
|
>
|
</el-input>
|
</el-form-item>
|
<el-form-item
|
v-if="flag === 'signUp'"
|
:rules="[
|
{ required: true, message: '请输入确认密码' },
|
{ validator: validateLogInPassword },
|
]"
|
prop="confirmPassword"
|
class="passwordInput"
|
>
|
<el-input
|
type="password"
|
show-password
|
v-model="passFormData.confirmPassword"
|
placeholder="确认密码"
|
size="large"
|
style="width: 304px"
|
/>
|
</el-form-item>
|
</el-form>
|
|
<el-button class="loginBtn" @click="loginBtn">登录</el-button>
|
</div>
|
</div>
|
</div>
|
|
<el-dialog
|
v-model="sliderImgDialogVisable"
|
align-center
|
destroy-on-close="true"
|
width="420"
|
class="sliderImgDialog"
|
>
|
<verify :MG="MG" @loginImgVerify="loginImgVerify"></verify>
|
</el-dialog>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { ref, inject, watchEffect, reactive, nextTick } from "vue";
|
import dialogLeftImg from "@/assets/images/header/dialogLeftImg.png";
|
import verify from "@/components/sliderImg/component/verify.vue";
|
import "@/components/sliderImg/sliderImg.js";
|
import "@/components/sliderImg/sliderImg.css";
|
import { ElMessage } from "element-plus";
|
import { useUserStore } from "@/store";
|
import { useRouter } from "vue-router";
|
const router = useRouter();
|
|
const userStore = useUserStore();
|
|
const MG = inject("MG");
|
const config = inject("config");
|
const dialogFormVisible = ref(false);
|
const sliderImgDialogVisable = ref(false);
|
const flag = ref("logIn"); // 登录或注册
|
|
const signUpWay = ref("authSignUp"); // 登录方式
|
const select = ref("中国+86");
|
const countDown = ref(0); // 倒计时时间
|
let timer = null; // 倒计时实例
|
const passFormRef = ref();
|
const passFormData = ref({
|
telNumber: "",
|
password: "",
|
telCode: "",
|
password: "",
|
confirmPassword: "",
|
});
|
const closeDialog = () => {
|
countDown.value = 0;
|
clearInterval(timer);
|
if (passFormRef.value) {
|
passFormRef.value.resetFields();
|
}
|
dialogFormVisible.value = false;
|
};
|
// 弹窗打开事件
|
const openDialog = () => {};
|
|
const loginImgVerify = (code) => {
|
sliderImgDialogVisable.value = false;
|
MG.identity
|
.getPhoneCode({
|
phoneNumber: passFormData.value.telNumber,
|
imageCaptcha: code,
|
appRefCode: config.appRefCode,
|
})
|
.then((res) => {
|
if (res == "验证码发送成功") {
|
getSecond(60);
|
ElMessage.success(res);
|
} else {
|
ElMessage.error(res);
|
}
|
});
|
};
|
|
watchEffect(() => {
|
if (dialogFormVisible.value) {
|
}
|
});
|
|
//登录
|
|
const loginBtn = () => {
|
let query = {
|
phoneNumber: passFormData.value.telNumber,
|
phoneCaptcha: passFormData.value.telCode,
|
appRefCode: config.appRefCode,
|
platform: "string",
|
};
|
MG.identity.loginByMobilePhone(query).then((res) => {
|
console.log("res", res);
|
userStore.setToken(res.data.accessToken);
|
|
getUserInfo();
|
});
|
};
|
|
const getUserInfo = () => {
|
MG.identity.getCurrentAppUser().then((res) => {
|
console.log("res", res);
|
if (res) {
|
let userInfo = res.infoList.find((item) => item.type == "userInfo");
|
let userTypeObj = res.infoList.find((item) => item.type == "userType");
|
const userData = {
|
userName: userInfo && userInfo.data ? JSON.parse(userInfo.data).name : "",
|
school: userInfo && userInfo.data ? JSON.parse(userInfo.data).school : "",
|
city: userInfo && userInfo.data ? JSON.parse(userInfo.data).city : "",
|
cityCode: userInfo && userInfo.data ? JSON.parse(userInfo.data).cityCode : "",
|
address: userInfo && userInfo.data ? JSON.parse(userInfo.data).address : "",
|
userType:
|
userTypeObj && userTypeObj.data ? JSON.parse(userTypeObj.data).userType : "",
|
};
|
localStorage.setItem("xiehe-isUserInfo", userData?.userType == "" ? "-1" : "1");
|
let teacherRole = res.roleLinks.find((item) => item.role.refCode == "teacher");
|
let teacherInfos = res.infoList.find((item) => item.type == "teacherInfo");
|
let wechatInfo = res.infoList.find((item) => item.type == "WeChat");
|
let studentInfo = res.infoList.find((item) => item.type == "Default");
|
let phoneInfo = res.secretList.find((item) => item.type == "MobilePhone");
|
// let nameAndPassword = res.secretList.find((item) => item.type == 'LoginNameAndPassword')
|
let emailInfo = res.secretList.find((item) => item.type == "EMail");
|
if (teacherRole && teacherInfos) {
|
userStore.setUserInfo({
|
...userData,
|
...teacherInfos,
|
phoneNumber: phoneInfo?.credential,
|
Email: emailInfo ? emailInfo.credential : JSON.parse(teacherInfos.data).email,
|
icon: wechatInfo?.icon,
|
role: "Teacher",
|
roleId: teacherRole.role.id,
|
userId: res.userId,
|
});
|
} else if (wechatInfo) {
|
userStore.setUserInfo({
|
...userData,
|
...wechatInfo,
|
phoneNumber: phoneInfo?.credential,
|
Email: emailInfo?.credential,
|
role: "Student",
|
userId: res.userId,
|
});
|
} else if (studentInfo) {
|
userStore.setUserInfo({
|
...userData,
|
...studentInfo,
|
icon: wechatInfo?.icon,
|
phoneNumber: phoneInfo?.credential,
|
Email: emailInfo?.credential,
|
role: "Student",
|
userId: res.userId,
|
});
|
} else if (phoneInfo) {
|
userStore.setUserInfo({
|
...userData,
|
...phoneInfo,
|
name: phoneInfo?.credential,
|
icon: phoneInfo?.icon,
|
phoneNumber: phoneInfo?.credential,
|
role: "Student",
|
userId: res.userId,
|
});
|
}
|
}
|
router.go(0);
|
});
|
};
|
|
// 倒计时
|
const getSecond = (time) => {
|
if (!timer) {
|
countDown.value = time;
|
timer = setInterval(() => {
|
countDown.value--;
|
if (countDown.value == 0) {
|
clearInterval(timer);
|
timer = null;
|
}
|
}, 1000);
|
}
|
};
|
|
// 登录和重置密码按钮按钮
|
const signInSystem = async (formEl) => {
|
if (!formEl) return;
|
formEl.validate((valid) => {
|
if (valid) {
|
// if (signUpWay.value === 'phone') {
|
// // 账号密码登录
|
// passwordSignUp()
|
// } else if (signUpWay.value == 'authSignUp') {
|
// // 验证码登录
|
// codeSignUp()
|
// } else {
|
// // 重置密码
|
// changePassword()
|
// }
|
}
|
});
|
};
|
|
const logIn = () => {
|
dialogFormVisible.value = true;
|
flag.value = "logIn";
|
};
|
|
// 打开注册弹窗
|
const signUp = () => {
|
dialogFormVisible.value = true;
|
flag.value = "signUp";
|
};
|
const wechatLoginOpen = () => {
|
signUpWay.value = "wechat";
|
};
|
|
defineExpose({
|
logIn,
|
signUp,
|
});
|
</script>
|
|
<style lang="less" scoped>
|
// 用户信息填写界面
|
.changeUser {
|
.prompt-title {
|
width: 80%;
|
line-height: 24px;
|
color: #000;
|
span {
|
display: inline-block;
|
}
|
}
|
}
|
.fansdialog {
|
width: 806px;
|
|
.leftImg {
|
box-sizing: border-box;
|
width: 403px;
|
}
|
|
.el-dialog__header {
|
padding: 0;
|
}
|
|
.el-dialog__body {
|
width: 806px;
|
height: 575px;
|
display: flex;
|
padding: 0 !important;
|
}
|
|
.leftImg {
|
.el-image__inner {
|
width: 403px;
|
}
|
}
|
|
.el-dialog__header {
|
padding: 0;
|
}
|
|
.el-dialog__body {
|
width: 806px;
|
display: flex;
|
padding: 0 !important;
|
}
|
}
|
|
.agreementDialog {
|
width: 760px;
|
height: 600px;
|
|
p span {
|
line-height: 24px;
|
}
|
|
.el-dialog__header {
|
font-size: 18px;
|
color: #333;
|
}
|
|
.el-dialog__body {
|
overflow: auto;
|
height: 500px;
|
width: 760px;
|
}
|
|
.el-dialog__footer {
|
display: flex;
|
justify-content: center;
|
}
|
}
|
|
.wechatTipsDialog {
|
.el-dialog__header {
|
font-size: 18px;
|
}
|
|
.el-dialog__body {
|
display: flex;
|
align-items: center;
|
|
p {
|
margin-left: 10px;
|
line-height: 24px;
|
}
|
}
|
}
|
.sliderImgDialog {
|
.el-dialog__body {
|
min-height: 320px;
|
}
|
}
|
</style>
|
|
<style lang="less">
|
/** 登录注册弹窗 */
|
.logIn {
|
width: 403px;
|
height: 100%;
|
padding-top: 48px;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
|
.signUpTitle {
|
width: 100%;
|
ul {
|
display: flex;
|
justify-content: center;
|
width: 100%;
|
li {
|
height: 20px;
|
display: flex;
|
align-items: center;
|
.el-image {
|
margin-right: 5px;
|
width: 20px;
|
}
|
}
|
li:nth-child(2n + 1) {
|
cursor: pointer;
|
margin: 0 10px;
|
}
|
li:first-child {
|
margin-left: 0;
|
.el-image {
|
width: 10px;
|
}
|
}
|
}
|
}
|
|
/** 微信登录 */
|
.signUpContent {
|
display: flex;
|
height: 400px;
|
flex-wrap: wrap;
|
flex-direction: column;
|
justify-content: space-around;
|
align-content: center;
|
|
.el-image {
|
width: 176px;
|
}
|
|
h2 {
|
font-size: 20px;
|
color: #000;
|
font-weight: 700;
|
text-align: center;
|
}
|
|
p {
|
text-align: center;
|
line-height: 26px;
|
}
|
|
.wechatCode {
|
h2 {
|
margin-bottom: 24px;
|
}
|
}
|
}
|
|
/** 密码登录 */
|
.singUpPhone {
|
height: 400px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
h2 {
|
padding-top: 35px;
|
font-size: 20px;
|
color: #000;
|
font-weight: 700;
|
text-align: center;
|
}
|
|
.back {
|
display: flex;
|
align-items: center;
|
cursor: pointer;
|
margin: 10px 0px 0px 20px;
|
align-self: flex-start;
|
font-size: 12px;
|
color: #333;
|
}
|
|
.el-form {
|
margin-top: 26px;
|
}
|
|
.signInBtn {
|
width: 304px;
|
height: 41px;
|
margin-bottom: 33px;
|
border-radius: 3px;
|
// opacity: 0.55;
|
color: #fff;
|
font-size: 14px;
|
}
|
|
.codeBtn {
|
width: 101px;
|
height: 41px;
|
background-color: #019e58;
|
// opacity: 0.55;
|
}
|
.yanzhengBtn {
|
width: 100%;
|
height: 41px;
|
background-color: #019e58;
|
color: #fff;
|
}
|
.loginBtn {
|
width: 76%;
|
height: 41px;
|
background: linear-gradient(90deg, #019e58 0%, #144941 100%);
|
color: #fff;
|
margin-top: 50px;
|
}
|
|
.el-image {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
}
|
|
.authSignUp {
|
width: 305px;
|
flex: 1;
|
display: flex;
|
justify-content: end;
|
align-items: end;
|
padding-bottom: 20px;
|
|
span {
|
cursor: pointer;
|
color: #333;
|
font-size: 12px;
|
}
|
}
|
|
.codeWay {
|
.el-input {
|
width: 195px;
|
}
|
|
.el-button {
|
width: 100px;
|
padding: 0;
|
margin: 0 0 0 10px;
|
}
|
|
.authCodeBox {
|
width: 100px;
|
height: 50px;
|
margin-left: 10px;
|
cursor: pointer;
|
position: relative;
|
span {
|
position: absolute;
|
top: 35px;
|
height: 10px;
|
margin-bottom: 20px;
|
font-size: 10px;
|
color: #1f971f;
|
}
|
}
|
}
|
}
|
|
.claus {
|
margin-bottom: 10px;
|
color: #000;
|
font-size: 12px;
|
width: 100%;
|
text-align: center;
|
line-height: 26px;
|
}
|
}
|
.policy {
|
cursor: pointer;
|
color: #ff6c00;
|
}
|
/** 注册表单 */
|
.signUp {
|
width: 403px;
|
justify-content: space-around;
|
color: #333;
|
font-size: 12px;
|
|
span:first-child,
|
span:last-child {
|
cursor: pointer;
|
}
|
|
.logInTitle {
|
width: 96%;
|
font-size: 16px;
|
margin: 20px 0 0 20px;
|
font-weight: bold;
|
}
|
|
h4 {
|
font-size: 16px;
|
color: #ff6c00;
|
}
|
|
.logInBox {
|
margin-top: 20px;
|
padding: 0 40px;
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
|
.el-form-item {
|
.el-button {
|
width: 100px;
|
height: 41px;
|
border-radius: 3px;
|
color: #fff;
|
font-size: 14px;
|
}
|
}
|
.agreement {
|
height: 40px;
|
display: flex;
|
align-items: center;
|
margin: 30px 0 0 0;
|
line-height: 32px;
|
height: 32px;
|
font-size: 12px;
|
color: #000;
|
|
.el-checkbox {
|
margin-right: 10px;
|
}
|
|
.el-link {
|
font-size: 12px;
|
}
|
|
p {
|
height: 100%;
|
display: flex;
|
align-items: center;
|
}
|
}
|
|
.hint {
|
font-size: 11px;
|
color: #545c63;
|
}
|
|
.codeWay {
|
.el-input {
|
width: 195px;
|
}
|
|
.el-button {
|
width: 100px;
|
padding: 0;
|
margin: 0 0 0 10px;
|
}
|
|
.authCodeBox {
|
width: 100px;
|
height: 50px;
|
margin-left: 10px;
|
cursor: pointer;
|
position: relative;
|
span {
|
position: absolute;
|
top: 35px;
|
left: 0;
|
width: 100px;
|
font-size: 10px;
|
color: #1f971f;
|
}
|
}
|
}
|
}
|
|
.logInBtn {
|
width: 304px;
|
height: 41px;
|
margin-top: 10px;
|
margin-bottom: 20px;
|
border-radius: 3px;
|
color: #fff;
|
font-size: 14px;
|
}
|
|
/** 选择用户类型 */
|
.changeUser {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
align-items: center;
|
.el-form-item {
|
&:last-child {
|
margin-bottom: 0;
|
}
|
.el-button {
|
height: 40px;
|
margin-left: 10px;
|
}
|
}
|
h2 {
|
font-size: 20px;
|
margin-top: 70px;
|
color: #000;
|
font-weight: bold;
|
}
|
|
.el-radio-group {
|
display: flex;
|
flex-direction: column;
|
|
.el-radio-button {
|
width: 166px;
|
}
|
|
/deep/ .el-radio-button__inner {
|
width: 166px;
|
height: 41px;
|
line-height: 24px;
|
border-radius: 4px;
|
border: 0;
|
border: 1px solid #dcdfe6;
|
}
|
|
.el-radio-button:nth-child(n + 1) {
|
margin-bottom: 27px;
|
}
|
}
|
}
|
}
|
|
.selectPhone {
|
background: #fff;
|
}
|
|
// .el-select {
|
// width: 100px;
|
// height: 30px;
|
// color: red;
|
// border: none !important;
|
|
// /deep/ .select-trigger {
|
// height: 100%;
|
|
// .el-input--suffix {
|
// height: 100%;
|
// background-color: #fff;
|
// }
|
// }
|
// }
|
</style>
|
