aaa
old易
parent
d4f7f15a89
commit
6cfd82bab7
|
|
@ -1,10 +1,10 @@
|
|||
<script setup>
|
||||
import LoginComponent from './components/Login.vue';
|
||||
import MinProLoginComponent from './components/MinProLogin.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<LoginComponent />
|
||||
<MinProLoginComponent />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -37,7 +37,8 @@
|
|||
</div>
|
||||
|
||||
<div v-if="selectedTab === 'wechat'">
|
||||
<div class="qr-code" id="login_container"></div>
|
||||
<div class="qr-code" id="login_container">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,514 @@
|
|||
<template>
|
||||
<div class="login-container">
|
||||
<div class="login-box">
|
||||
<img class="logo" src="https://static-data-ycymedu.oss-cn-shanghai.aliyuncs.com/logo.png" alt="logo" />
|
||||
|
||||
<div class="tabs">
|
||||
<div class="tab" :class="{ active: selectedTab === 'wechat' }" @click="switchTab('wechat')">微信扫码</div>
|
||||
<div class="tab" :class="{ active: selectedTab === 'phone' }" @click="switchTab('phone')">验证码</div>
|
||||
<div class="tab" :class="{ active: selectedTab === 'password' }" @click="switchTab('password')">账号密码</div>
|
||||
</div>
|
||||
<div v-if="selectedTab === 'phone'">
|
||||
<input type="text" placeholder="手机号" v-model="phone" />
|
||||
<div v-if="phoneError" class="error-message">{{ phoneError }}</div>
|
||||
<div class="verification-row">
|
||||
<input type="text" placeholder="验证码" v-model="verificationCode" />
|
||||
<button @click="sendVerificationCode" :disabled="countdown !== null || !isPhoneValid">
|
||||
{{ countdown !== null ? `${countdown} 秒后重新发送` : '获取验证码' }}
|
||||
</button>
|
||||
</div>
|
||||
<button @click="verifyCodeAndLogin"
|
||||
:disabled="!isPhoneValid || !isVerificationCodeValid">登录</button>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedTab === 'password'">
|
||||
<input type="text" placeholder="手机号" v-model="username" />
|
||||
<div v-if="usernameError" class="error-message">{{ usernameError }}</div>
|
||||
<input type="password" placeholder="密码" v-model="password" />
|
||||
<div v-if="passwordError" class="error-message">{{ passwordError }}</div>
|
||||
<!-- 图形验证码部分 -->
|
||||
<div class="captcha-row">
|
||||
<input type="text" placeholder="验证码" v-model="captchaCode" />
|
||||
<!-- 显示一个默认的空白图像或设置 v-if 检查 -->
|
||||
<img alt="验证码" @click="refreshCaptcha" :src="state.captchaImage" style="cursor: pointer" width="130px" height="38px" />
|
||||
</div>
|
||||
<div v-if="captchaError" class="error-message">{{ captchaError }}</div>
|
||||
<button @click="login">登录</button>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedTab === 'wechat'">
|
||||
<div class="qr-code" id="login_container">
|
||||
<img style="cursor: pointer;width:310px" :src="state.loginimg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, onMounted, watch, nextTick, computed,reactive } from 'vue';
|
||||
import axios from 'axios';
|
||||
export default {
|
||||
setup() {
|
||||
const selectedTab = ref('wechat'); // 默认选择微信扫码登录
|
||||
const countdown = ref(null);
|
||||
const username = ref('');
|
||||
const password = ref('');
|
||||
const phone = ref('');
|
||||
const verificationCode = ref('');
|
||||
const referer = ref(''); // 新增响应式变量来存储来源网址
|
||||
const phoneError = ref(''); // 用于存储手机号验证错误信息
|
||||
const verificationCodeError = ref(''); // 用于存储验证码验证错误信息
|
||||
const usernameError = ref(''); // 用于存储用户名验证错误信息
|
||||
const passwordError = ref(''); // 用于存储密码验证错误信息
|
||||
const captchaCode = ref(''); // 验证码输入
|
||||
const captchaError = ref(''); // 验证码错误信息
|
||||
const state = reactive({
|
||||
captchaImage: '',
|
||||
codeId:"",
|
||||
loginimg:""
|
||||
});
|
||||
// 切换标签页
|
||||
const switchTab = (tab) => {
|
||||
selectedTab.value = tab;
|
||||
phoneError.value = '';
|
||||
verificationCodeError.value = '';
|
||||
usernameError.value = '';
|
||||
passwordError.value = ''; // Reset error message on tab switch
|
||||
};
|
||||
|
||||
// 刷新验证码
|
||||
const refreshCaptcha = () => {
|
||||
axios.get('https://api.sso.ycymedu.com/api/sysauth/captcha?timestamp=' + new Date().getTime())
|
||||
.then(response => {
|
||||
if (response.data.code === 200 && response.data.result?.img) {
|
||||
state.captchaImage = 'data:image/png;base64,' + response.data.result.img;
|
||||
state.codeId = response.data.result.id;
|
||||
// console.log('Response data:', response.data);
|
||||
// console.log(state.captchaImage);
|
||||
} else {
|
||||
console.error('Invalid response data:', response.data);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('登录失败:', error);
|
||||
});
|
||||
};
|
||||
|
||||
// 开始倒计时
|
||||
const startCountdown = () => {
|
||||
const duration = 60;
|
||||
let remainingTime = duration;
|
||||
countdown.value = remainingTime;
|
||||
|
||||
const intervalId = setInterval(() => {
|
||||
if (remainingTime > 0) {
|
||||
remainingTime--;
|
||||
countdown.value = remainingTime;
|
||||
} else {
|
||||
clearInterval(intervalId);
|
||||
countdown.value = null;
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
// 获取来源页面的域名
|
||||
const getReferer = () => {
|
||||
let ref = document.referrer;
|
||||
console.log('refref:', ref);
|
||||
// 处理开发和生产环境
|
||||
if (!ref) {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
ref = 'https://www.ycymedu.com'; // 开发环境默认值
|
||||
} else {
|
||||
console.log('当前是生产环境');
|
||||
window.location.href = "https://www.ycymedu.com"; // 生产环境重定向
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
const url = new URL(ref);
|
||||
console.log('url:', url);
|
||||
referer.value = url.origin; // 存储来源网址的域名部分
|
||||
} catch (error) {
|
||||
console.error('解析来源网址时出错:', error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// 微信扫码登录初始化
|
||||
const initWeChatLogin = () => {
|
||||
nextTick(() => {
|
||||
axios.post('https://api.sso.ycymedu.com/api/syswxopen/minprologin')
|
||||
.then(response => {
|
||||
if (response.data.code === 200) {
|
||||
state.loginimg = response.data.result;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('发送验证码失败:', error);
|
||||
// phoneError.value = '发送验证码失败，请稍后再试';
|
||||
});
|
||||
});
|
||||
};
|
||||
// 校验手机号
|
||||
const isPhoneValid = computed(() => {
|
||||
const phoneRegex = /^1[3-9]\d{9}$/; // 正确的手机号正则表达式
|
||||
if (!phone.value) {
|
||||
phoneError.value = '请输入手机号';
|
||||
return false;
|
||||
} else if (!phoneRegex.test(phone.value)) {
|
||||
phoneError.value = '请输入有效的手机号';
|
||||
return false;
|
||||
}
|
||||
phoneError.value = ''; // 清除错误信息
|
||||
return true;
|
||||
});
|
||||
|
||||
// 模拟发送验证码
|
||||
|
||||
const sendVerificationCode = () => {
|
||||
if (isPhoneValid.value) {
|
||||
// 发送验证码请求
|
||||
axios.post('https://api.sso.ycymedu.com/api/syssms/sendsms', {
|
||||
phoneNumber: phone.value
|
||||
})
|
||||
.then(response => {
|
||||
if (response.data.code === 200) {
|
||||
console.log('验证码发送成功:', response.data);
|
||||
startCountdown(); // 开始倒计时
|
||||
} else {
|
||||
console.log('验证码发送失败:', response.data);
|
||||
phoneError.value = response.data.message.replace(/^\[\w+\]\s*/, '');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('发送验证码失败:', error);
|
||||
phoneError.value = '发送验证码失败，请稍后再试';
|
||||
});
|
||||
}
|
||||
};
|
||||
// 校验验证码
|
||||
const isVerificationCodeValid = computed(() => {
|
||||
if (!verificationCode.value) {
|
||||
verificationCodeError.value = '请输入验证码';
|
||||
return false;
|
||||
}
|
||||
verificationCodeError.value = ''; // 清除错误信息
|
||||
return true;
|
||||
});
|
||||
|
||||
// 校验手机号（账号）
|
||||
const isUsernameValid = computed(() => {
|
||||
const phoneRegex = /^1[3-9]\d{9}$/; // 正确的手机号正则表达式
|
||||
if (!username.value) {
|
||||
usernameError.value = '请输入手机号';
|
||||
return false;
|
||||
} else if (!phoneRegex.test(username.value)) {
|
||||
usernameError.value = '请输入有效的手机号';
|
||||
return false;
|
||||
}
|
||||
usernameError.value = ''; // 清除错误信息
|
||||
return true;
|
||||
});
|
||||
|
||||
// 校验密码
|
||||
const isPasswordValid = computed(() => {
|
||||
//const passwordRegex = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).*$/; // 包含字母、数字和特殊字符
|
||||
if (!password.value) {
|
||||
passwordError.value = '请输入密码';
|
||||
return false;
|
||||
} else if (password.value.includes(' ')) {
|
||||
passwordError.value = '密码不能包含空格';
|
||||
return false;
|
||||
}
|
||||
// else if (!passwordRegex.test(password.value)) {
|
||||
// passwordError.value = '密码必须包含字母、数字和特殊字符';
|
||||
// return false;
|
||||
// }
|
||||
passwordError.value = ''; // 清除错误信息
|
||||
return true;
|
||||
});
|
||||
|
||||
const isPwdCode=computed(()=>{
|
||||
if (!captchaCode.value) {
|
||||
captchaError.value = '请输入验证码';
|
||||
return false;
|
||||
} else if (captchaCode.value.includes(' ')) {
|
||||
captchaError.value = '验证码不能包含空格';
|
||||
return false;
|
||||
}
|
||||
captchaError.value = ''; // 清除错误信息
|
||||
return true;
|
||||
});
|
||||
|
||||
// 在组件加载时初始化微信扫码登录
|
||||
onMounted(() => {
|
||||
getReferer(); // 获取来源网址
|
||||
initWeChatLogin();
|
||||
refreshCaptcha();
|
||||
});
|
||||
|
||||
// 监听选项卡变化，切换到微信扫码时重新初始化
|
||||
watch(selectedTab, (newTab) => {
|
||||
if (newTab === 'wechat')
|
||||
{
|
||||
initWeChatLogin();
|
||||
}
|
||||
if(newTab === 'password'){
|
||||
refreshCaptcha();
|
||||
}
|
||||
});
|
||||
|
||||
// 验证码登录
|
||||
const verifyCodeAndLogin = () => {
|
||||
if (!isPhoneValid.value) {
|
||||
alert('请检查手机号');
|
||||
return;
|
||||
}
|
||||
if (!isVerificationCodeValid.value) {
|
||||
alert('请检查验证码');
|
||||
return;
|
||||
}
|
||||
axios.post('https://api.sso.ycymedu.com/api/syswechat/smslogin', {
|
||||
phoneNumber: phone.value,
|
||||
code: verificationCode.value,
|
||||
redirect_uri: referer.value
|
||||
})
|
||||
.then(response => {
|
||||
if (response.data.code === 200) {
|
||||
console.log('登录失败成功:', response.data);
|
||||
window.location.href=response.data.result;
|
||||
// startCountdown(); // 开始倒计时
|
||||
} else {
|
||||
console.log('登录失败:', response.data);
|
||||
phoneError.value = response.data.message.replace(/^\[\w+\]\s*/, '');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('登录失败:', error);
|
||||
phoneError.value = '登录失败，请稍后再试';
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
// 登录函数
|
||||
const login = () => {
|
||||
console.log(captchaCode);
|
||||
if (!isUsernameValid.value) {
|
||||
alert('请检查手机号');
|
||||
return;
|
||||
}
|
||||
if (!isPasswordValid.value) {
|
||||
alert('请检查密码');
|
||||
return;
|
||||
}
|
||||
if(!isPwdCode.value){
|
||||
alert('请检查验证码');
|
||||
return;
|
||||
}
|
||||
axios.post('https://api.sso.ycymedu.com/api/syswechat/pwdlogin', {
|
||||
phoneNumber: username.value,
|
||||
password: password.value,
|
||||
redirect_uri: referer.value,
|
||||
code: captchaCode.value,
|
||||
codeId: state.codeId,
|
||||
})
|
||||
.then(response => {
|
||||
if (response.data.code === 200) {
|
||||
console.log('登录失败成功:', response.data);
|
||||
window.location.href=response.data.result;
|
||||
// startCountdown(); // 开始倒计时
|
||||
} else {
|
||||
console.log('登录失败:', response.data);
|
||||
captchaError.value = response.data.message.replace(/^\[\w+\]\s*/, '');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('登录失败:', error);
|
||||
captchaError.value = '登录失败，请稍后再试';
|
||||
});
|
||||
|
||||
|
||||
};
|
||||
|
||||
return {
|
||||
selectedTab,
|
||||
countdown,
|
||||
username,
|
||||
password,
|
||||
phone,
|
||||
verificationCode,
|
||||
switchTab,
|
||||
sendVerificationCode,
|
||||
verifyCodeAndLogin,
|
||||
phoneError,
|
||||
verificationCodeError,
|
||||
isPhoneValid,
|
||||
isVerificationCodeValid,
|
||||
usernameError,
|
||||
passwordError,
|
||||
isUsernameValid,
|
||||
isPasswordValid,
|
||||
login,
|
||||
refreshCaptcha,
|
||||
captchaCode,
|
||||
captchaError,
|
||||
state
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
/* 隐藏滚动条 */
|
||||
background-image: url('https://static-data-ycymedu.oss-cn-shanghai.aliyuncs.com/backgroundImage.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
/* 设置为相对定位，以支持绝对定位的子元素 */
|
||||
padding-bottom: 60px;
|
||||
/* 为底部版权信息预留空间 */
|
||||
}
|
||||
|
||||
.login-box {
|
||||
background-color: white;
|
||||
padding: 50px 30px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
width: 90%;
|
||||
max-width: 400px;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 30px;
|
||||
/* 增加底部边距 */
|
||||
margin: 0 auto;
|
||||
/* 居中 */
|
||||
}
|
||||
|
||||
.logo {
|
||||
max-width: 80%;
|
||||
height: auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
cursor: pointer;
|
||||
padding: 10px 20px;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
border-bottom: 2px solid #1e88e5;
|
||||
color: #1e88e5;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 10px 15px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border-color: #1e88e5;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(30, 136, 229, 0.5);
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
padding: 10px 15px;
|
||||
background-color: #1e88e5;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #177ddc;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
background-color: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.verification-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.verification-row input {
|
||||
width: calc(100% - 120px);
|
||||
/* 确保输入框宽度 */
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.qr-code {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* 响应式布局 */
|
||||
@media screen and (min-width: 768px) {
|
||||
|
||||
/* 平板及更大屏幕 */
|
||||
.login-container {
|
||||
padding-bottom: 0;
|
||||
/* 移除底部padding */
|
||||
}
|
||||
|
||||
.login-box {
|
||||
width: 400px;
|
||||
/* 固定宽度 */
|
||||
margin: 0 auto;
|
||||
/* 水平居中 */
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
margin-top: -10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.captcha-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.captcha-row input {
|
||||
width: calc(100% - 120px);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.captcha-row img {
|
||||
cursor: pointer;
|
||||
height: 40px;
|
||||
width: 100px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue