aaa
old易
parent
d4f7f15a89
commit
6cfd82bab7
|
|
@ -1,10 +1,10 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import LoginComponent from './components/Login.vue';
|
import MinProLoginComponent from './components/MinProLogin.vue';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<LoginComponent />
|
<MinProLoginComponent />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -37,7 +37,8 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="selectedTab === 'wechat'">
|
<div v-if="selectedTab === 'wechat'">
|
||||||
<div class="qr-code" id="login_container"></div>
|
<div class="qr-code" id="login_container">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</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