|
|
|
|
@ -15,7 +15,8 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 登录表单 -->
|
|
|
|
|
<form @submit.prevent="login" class="login-form">
|
|
|
|
|
<button @click="login" v-if="false">测试登录</button>
|
|
|
|
|
<form @submit.prevent="Login1" class="login-form">
|
|
|
|
|
<div class="input-group">
|
|
|
|
|
<!-- 用户标识输入框（用户名/邮箱/手机） -->
|
|
|
|
|
<input
|
|
|
|
|
@ -70,98 +71,102 @@
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
<script setup name="UserLogin">
|
|
|
|
|
import { ref, computed } from 'vue';
|
|
|
|
|
import axios from 'axios';
|
|
|
|
|
import request from '@/utils/request';
|
|
|
|
|
import { ElMessage } from 'element-plus';
|
|
|
|
|
import { useUserStore } from '@/stores/user.ts';
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: 'UserLogin',
|
|
|
|
|
//TODO: 引入props, { emit }然后实现登陆成功跳转
|
|
|
|
|
setup() {
|
|
|
|
|
const currentType = ref('username'); //当前选择的登录方式
|
|
|
|
|
const cooldown = ref(0); //验证码发送倒计时
|
|
|
|
|
const userStore = useUserStore(); //引入用户状态管理
|
|
|
|
|
//登录方式
|
|
|
|
|
const loginTypes = [
|
|
|
|
|
import { useUserStore } from '@/stores/user.js';
|
|
|
|
|
|
|
|
|
|
const currentType = ref('username'); // 当前选择的登录方式
|
|
|
|
|
const cooldown = ref(0); // 验证码发送倒计时
|
|
|
|
|
const userStore = useUserStore(); // 引入用户状态管理
|
|
|
|
|
const emit = defineEmits(['toggleForm', 'LoginSuccess']); // 定义事件
|
|
|
|
|
// 登录方式
|
|
|
|
|
const loginTypes = [
|
|
|
|
|
{ label: '用户名登录', value: 'username' },
|
|
|
|
|
{ label: '邮箱登录', value: 'email' },
|
|
|
|
|
{ label: '手机登录', value: 'phone' }
|
|
|
|
|
];
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
//登录数据对象
|
|
|
|
|
const loginForm = ref({
|
|
|
|
|
// 登录数据对象
|
|
|
|
|
const loginForm = ref({
|
|
|
|
|
userFlag: '', // 用户标识
|
|
|
|
|
password: '', // 密码
|
|
|
|
|
verifyCode: '', // 验证码（邮箱/手机登录时使用）
|
|
|
|
|
remember: false // 记住登录状态
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
//输入框类型
|
|
|
|
|
const inputType = computed(() => {
|
|
|
|
|
switch(currentType.value) {
|
|
|
|
|
case 'email': return 'email'; // 邮箱输入类型
|
|
|
|
|
case 'phone': return 'tel'; // 电话号码输入类型
|
|
|
|
|
default: return 'text'; // 默认文本输入类型
|
|
|
|
|
// 输入框类型
|
|
|
|
|
const inputType = computed(() => {
|
|
|
|
|
switch (currentType.value) {
|
|
|
|
|
case 'email':
|
|
|
|
|
return 'email'; // 邮箱输入类型
|
|
|
|
|
case 'phone':
|
|
|
|
|
return 'tel'; // 电话号码输入类型
|
|
|
|
|
default:
|
|
|
|
|
return 'text'; // 默认文本输入类型
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
//输入框提示文字
|
|
|
|
|
const placeholder = computed(() => {
|
|
|
|
|
switch(currentType.value) {
|
|
|
|
|
case 'username': return '请输入用户名';
|
|
|
|
|
case 'email': return '请输入邮箱';
|
|
|
|
|
case 'phone': return '请输入手机号';
|
|
|
|
|
default: return '';
|
|
|
|
|
// 输入框提示文字
|
|
|
|
|
const placeholder = computed(() => {
|
|
|
|
|
switch (currentType.value) {
|
|
|
|
|
case 'username':
|
|
|
|
|
return '请输入用户名';
|
|
|
|
|
case 'email':
|
|
|
|
|
return '请输入邮箱';
|
|
|
|
|
case 'phone':
|
|
|
|
|
return '请输入手机号';
|
|
|
|
|
default:
|
|
|
|
|
return '';
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
//判断是否显示验证码输入框
|
|
|
|
|
const showVerifyCode = computed(() => {
|
|
|
|
|
// 判断是否显示验证码输入框
|
|
|
|
|
const showVerifyCode = computed(() => {
|
|
|
|
|
return ['email', 'phone'].includes(currentType.value);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
//验证输入框是否有效
|
|
|
|
|
const isValidInput = computed(() => {
|
|
|
|
|
const value = loginForm.value.userFlag
|
|
|
|
|
if(!value) return false; //输入不能为空
|
|
|
|
|
// 验证输入框是否有效
|
|
|
|
|
const isValidInput = computed(() => {
|
|
|
|
|
const value = loginForm.value.userFlag;
|
|
|
|
|
if (!value) return false; // 输入不能为空
|
|
|
|
|
|
|
|
|
|
switch(currentType.value) {
|
|
|
|
|
switch (currentType.value) {
|
|
|
|
|
case 'email':
|
|
|
|
|
return /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+\.[a-zA-Z0-9_-]+$/.test(value);
|
|
|
|
|
case 'phone':
|
|
|
|
|
return /^1[3-9]\d{9}$/.test(value);
|
|
|
|
|
default:
|
|
|
|
|
return value.length > 0; //用户名非空
|
|
|
|
|
return value.length > 0; // 用户名非空
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
//验证表单
|
|
|
|
|
const isvalidForm = computed(() => {
|
|
|
|
|
if(!isValidInput.value) return false;
|
|
|
|
|
// 验证表单
|
|
|
|
|
const isvalidForm = computed(() => {
|
|
|
|
|
if (!isValidInput.value) return false;
|
|
|
|
|
|
|
|
|
|
if(showVerifyCode.value){
|
|
|
|
|
return loginForm.value.verifyCode.length === 6; //验证码长度
|
|
|
|
|
if (showVerifyCode.value) {
|
|
|
|
|
return loginForm.value.verifyCode.length === 6; // 验证码长度
|
|
|
|
|
} else {
|
|
|
|
|
return loginForm.value.password.length >= 6; //密码长度
|
|
|
|
|
return loginForm.value.password.length >= 6; // 密码长度
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 发送验证码（用于邮箱和手机登录）
|
|
|
|
|
async function sendCode() {
|
|
|
|
|
if (cooldown.value > 0 || !isValidInput.value) return; //在冷却时间内，不允许重复发送
|
|
|
|
|
// 发送验证码（用于邮箱和手机登录）
|
|
|
|
|
async function sendCode() {
|
|
|
|
|
if (cooldown.value > 0 || !isValidInput.value) return; // 在冷却时间内，不允许重复发送
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
//TODO:后端发送验证码请求
|
|
|
|
|
// TODO: 后端发送验证码请求
|
|
|
|
|
const response = await axios.post('/user/sendCode', {
|
|
|
|
|
type: currentType.value,
|
|
|
|
|
target: loginForm.value.userFlag
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (response.data.success) {
|
|
|
|
|
//开始60秒倒计时
|
|
|
|
|
// 开始60秒倒计时
|
|
|
|
|
cooldown.value = 60;
|
|
|
|
|
const timer = setInterval(() => {
|
|
|
|
|
cooldown.value--;
|
|
|
|
|
@ -173,36 +178,34 @@ export default {
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('发送验证码失败:', error);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//登录
|
|
|
|
|
/*
|
|
|
|
|
function login1() {
|
|
|
|
|
}
|
|
|
|
|
//前端测试登录
|
|
|
|
|
function Login1() {
|
|
|
|
|
userStore.login({
|
|
|
|
|
avatar: '/assets/default-avatar/boy_1.png',
|
|
|
|
|
avatar:require('@/assets/default-avatar/boy_1.png'),
|
|
|
|
|
userName: '珈人一号'
|
|
|
|
|
})
|
|
|
|
|
}*/
|
|
|
|
|
|
|
|
|
|
async function login() {
|
|
|
|
|
});
|
|
|
|
|
emit('LoginSuccess');
|
|
|
|
|
}
|
|
|
|
|
// 登录
|
|
|
|
|
async function login() {
|
|
|
|
|
if (!isvalidForm.value) return;
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
const loginData = {
|
|
|
|
|
userFlag: loginForm.value.userFlag,
|
|
|
|
|
password: loginForm.value.password
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
if (showVerifyCode.value) {
|
|
|
|
|
loginData.verifyCode = loginForm.value.verifyCode; //验证码
|
|
|
|
|
loginData.verifyCode = loginForm.value.verifyCode; // 验证码
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//post请求登录接口
|
|
|
|
|
// post请求登录接口
|
|
|
|
|
const response = await request.post('/user/login', loginData);
|
|
|
|
|
|
|
|
|
|
if (response.code === 200) {
|
|
|
|
|
//登录成功，保存token到本地存储
|
|
|
|
|
//还应读入用户数据，后续设计
|
|
|
|
|
// 登录成功，保存token到本地存储
|
|
|
|
|
const { accessToken, refreshToken } = response.data;
|
|
|
|
|
localStorage.setItem('accessToken', accessToken);
|
|
|
|
|
localStorage.setItem('refreshToken', refreshToken);
|
|
|
|
|
@ -210,55 +213,35 @@ export default {
|
|
|
|
|
userStore.login({
|
|
|
|
|
avatar: '/assets/default-avatar/boy_1.png',
|
|
|
|
|
userName: '珈人一号'
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
ElMessage({
|
|
|
|
|
message: '登录成功',
|
|
|
|
|
type: 'success',
|
|
|
|
|
duration: 500
|
|
|
|
|
});
|
|
|
|
|
//TODO:跳转到目标页面
|
|
|
|
|
//or 关闭登录弹窗
|
|
|
|
|
}else{
|
|
|
|
|
//登录失败
|
|
|
|
|
// TODO: 跳转到目标页面或关闭登录弹窗
|
|
|
|
|
} else {
|
|
|
|
|
// 登录失败
|
|
|
|
|
ElMessage({
|
|
|
|
|
message: '登陆失败，用户名或密码错误',
|
|
|
|
|
type: 'error',
|
|
|
|
|
duration: 500
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('登录失败:', error);
|
|
|
|
|
alert(error.response?.message ||'登录失败，请稍后重试');
|
|
|
|
|
}
|
|
|
|
|
alert(error.response?.message || '登录失败，请稍后重试');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//切换登陆方式时重置表单
|
|
|
|
|
const switchLoginType = (type) => {
|
|
|
|
|
// 切换登录方式时重置表单
|
|
|
|
|
const switchLoginType = (type) => {
|
|
|
|
|
currentType.value = type;
|
|
|
|
|
loginForm.value.userFlag = '';
|
|
|
|
|
loginForm.value.password = '';
|
|
|
|
|
loginForm.value.verifyCode = '';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 返回模板需要使用的数据和方法
|
|
|
|
|
return {
|
|
|
|
|
currentType,
|
|
|
|
|
loginTypes,
|
|
|
|
|
loginForm,
|
|
|
|
|
inputType,
|
|
|
|
|
placeholder,
|
|
|
|
|
showVerifyCode,
|
|
|
|
|
cooldown,
|
|
|
|
|
sendCode,
|
|
|
|
|
//login1,
|
|
|
|
|
login,
|
|
|
|
|
switchLoginType,
|
|
|
|
|
isValidInput
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
|
