| | |
| | | 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 |
| | | value, |
| | | ) |
| | | ) { |
| | | callback('请输入11位电话号码'); |
| | | callback('请输入11位电话号码') |
| | | } else { |
| | | callback(); |
| | | callback() |
| | | } |
| | | }, |
| | | }, |
| | | ]" |
| | | prop="telNumber" |
| | | > |
| | | <el-input |
| | | v-model="passFormData.telNumber" |
| | | placeholder="请输入手机号" |
| | | size="large" |
| | | > |
| | | <el-input v-model="passFormData.telNumber" placeholder="请输入手机号" size="large"> |
| | | <template #prepend> |
| | | <el-select |
| | | v-model="select" |
| | |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button class="yanzhengBtn" @click="sliderImgDialogVisable = true" |
| | | >验证</el-button |
| | | > |
| | | <el-button class="yanzhengBtn" @click="sliderImgDialogVisable = true">验证</el-button> |
| | | </el-form-item> |
| | | <el-form-item |
| | | v-if="signUpWay === 'authSignUp'" |
| | |
| | | ]" |
| | | prop="telCode" |
| | | > |
| | | <el-input |
| | | v-model="passFormData.telCode" |
| | | placeholder="请输入验证码" |
| | | size="large" |
| | | /> |
| | | <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 |
| | | >{{ countDown == 0 ? '获取验证码' : '验证码(' + countDown + 's)' }}</el-button |
| | | > |
| | | </el-form-item> |
| | | <el-form-item |
| | |
| | | { |
| | | validator: (rule, value, callback) => { |
| | | if (!/\d/.test(value) || /^\d+$/.test(value)) { |
| | | callback('密码不能为纯数字或字母'); |
| | | callback('密码不能为纯数字或字母') |
| | | } else { |
| | | callback(); |
| | | callback() |
| | | } |
| | | }, |
| | | }, |
| | |
| | | </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(); |
| | | 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 userStore = useUserStore() |
| | | |
| | | const MG = inject("MG"); |
| | | const config = inject("config"); |
| | | const dialogFormVisible = ref(false); |
| | | const sliderImgDialogVisable = ref(false); |
| | | const flag = ref("logIn"); // 登录或注册 |
| | | 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 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: "", |
| | | }); |
| | | telNumber: '', |
| | | password: '', |
| | | telCode: '', |
| | | password: '', |
| | | confirmPassword: '', |
| | | }) |
| | | const closeDialog = () => { |
| | | countDown.value = 0; |
| | | clearInterval(timer); |
| | | countDown.value = 0 |
| | | clearInterval(timer) |
| | | if (passFormRef.value) { |
| | | passFormRef.value.resetFields(); |
| | | passFormRef.value.resetFields() |
| | | } |
| | | dialogFormVisible.value = false; |
| | | }; |
| | | dialogFormVisible.value = false |
| | | } |
| | | // 弹窗打开事件 |
| | | const openDialog = () => {}; |
| | | const openDialog = () => {} |
| | | |
| | | const loginImgVerify = (code) => { |
| | | sliderImgDialogVisable.value = false; |
| | | sliderImgDialogVisable.value = false |
| | | MG.identity |
| | | .getPhoneCode({ |
| | | phoneNumber: passFormData.value.telNumber, |
| | |
| | | appRefCode: config.appRefCode, |
| | | }) |
| | | .then((res) => { |
| | | if (res == "验证码发送成功") { |
| | | getSecond(60); |
| | | ElMessage.success(res); |
| | | if (res == '验证码发送成功') { |
| | | getSecond(60) |
| | | ElMessage.success(res) |
| | | } else { |
| | | ElMessage.error(res); |
| | | ElMessage.error(res) |
| | | } |
| | | }); |
| | | }; |
| | | }) |
| | | } |
| | | |
| | | watchEffect(() => { |
| | | if (dialogFormVisible.value) { |
| | | } |
| | | }); |
| | | }) |
| | | |
| | | //登录 |
| | | |
| | |
| | | phoneNumber: passFormData.value.telNumber, |
| | | phoneCaptcha: passFormData.value.telCode, |
| | | appRefCode: config.appRefCode, |
| | | platform: "string", |
| | | }; |
| | | platform: 'string', |
| | | } |
| | | MG.identity.loginByMobilePhone(query).then((res) => { |
| | | console.log("res", res); |
| | | userStore.setToken(res.data.accessToken); |
| | | console.log('res', res) |
| | | userStore.setToken(res.data.accessToken) |
| | | |
| | | getUserInfo(); |
| | | }); |
| | | }; |
| | | getUserInfo() |
| | | }) |
| | | } |
| | | |
| | | const getUserInfo = () => { |
| | | MG.identity.getCurrentAppUser().then((res) => { |
| | | console.log("res", 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"); |
| | | 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"); |
| | | 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"); |
| | | let emailInfo = res.secretList.find((item) => item.type == 'EMail') |
| | | if (teacherRole && teacherInfos) { |
| | | userStore.setUserInfo({ |
| | | ...userData, |
| | |
| | | phoneNumber: phoneInfo?.credential, |
| | | Email: emailInfo ? emailInfo.credential : JSON.parse(teacherInfos.data).email, |
| | | icon: wechatInfo?.icon, |
| | | role: "Teacher", |
| | | role: 'Teacher', |
| | | roleId: teacherRole.role.id, |
| | | userId: res.userId, |
| | | }); |
| | | }) |
| | | } else if (wechatInfo) { |
| | | userStore.setUserInfo({ |
| | | ...userData, |
| | | ...wechatInfo, |
| | | phoneNumber: phoneInfo?.credential, |
| | | Email: emailInfo?.credential, |
| | | role: "Student", |
| | | role: 'Student', |
| | | userId: res.userId, |
| | | }); |
| | | }) |
| | | } else if (studentInfo) { |
| | | userStore.setUserInfo({ |
| | | ...userData, |
| | |
| | | icon: wechatInfo?.icon, |
| | | phoneNumber: phoneInfo?.credential, |
| | | Email: emailInfo?.credential, |
| | | role: "Student", |
| | | role: 'Student', |
| | | userId: res.userId, |
| | | }); |
| | | }) |
| | | } else if (phoneInfo) { |
| | | userStore.setUserInfo({ |
| | | ...userData, |
| | |
| | | name: phoneInfo?.credential, |
| | | icon: phoneInfo?.icon, |
| | | phoneNumber: phoneInfo?.credential, |
| | | role: "Student", |
| | | role: 'Student', |
| | | userId: res.userId, |
| | | }); |
| | | }) |
| | | } |
| | | } |
| | | router.go(0); |
| | | }); |
| | | }; |
| | | router.go(0) |
| | | }) |
| | | } |
| | | |
| | | // 倒计时 |
| | | const getSecond = (time) => { |
| | | if (!timer) { |
| | | countDown.value = time; |
| | | countDown.value = time |
| | | timer = setInterval(() => { |
| | | countDown.value--; |
| | | countDown.value-- |
| | | if (countDown.value == 0) { |
| | | clearInterval(timer); |
| | | timer = null; |
| | | clearInterval(timer) |
| | | timer = null |
| | | } |
| | | }, 1000); |
| | | }, 1000) |
| | | } |
| | | }; |
| | | } |
| | | |
| | | // 登录和重置密码按钮按钮 |
| | | const signInSystem = async (formEl) => { |
| | | if (!formEl) return; |
| | | if (!formEl) return |
| | | formEl.validate((valid) => { |
| | | if (valid) { |
| | | // if (signUpWay.value === 'phone') { |
| | |
| | | // changePassword() |
| | | // } |
| | | } |
| | | }); |
| | | }; |
| | | }) |
| | | } |
| | | |
| | | const logIn = () => { |
| | | dialogFormVisible.value = true; |
| | | flag.value = "logIn"; |
| | | }; |
| | | dialogFormVisible.value = true |
| | | flag.value = 'logIn' |
| | | } |
| | | |
| | | // 打开注册弹窗 |
| | | const signUp = () => { |
| | | dialogFormVisible.value = true; |
| | | flag.value = "signUp"; |
| | | }; |
| | | dialogFormVisible.value = true |
| | | flag.value = 'signUp' |
| | | } |
| | | const wechatLoginOpen = () => { |
| | | signUpWay.value = "wechat"; |
| | | }; |
| | | signUpWay.value = 'wechat' |
| | | } |
| | | |
| | | defineExpose({ |
| | | logIn, |
| | | signUp, |
| | | }); |
| | | }) |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |