yzy/sweekar-app
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
yzy committed 2026-01-21 11:31:56 +08:00
1 parent fb4888188f
commit 01af5542b8
1 file changed
+22 -392
Download Patch File Download Diff File Expand all files Collapse all files
pages/login/index.vue
+22 -392
View File
@@ -1,24 +1,13 @@
<script setup>
import { ref } from 'vue';
import { login, register, loginByEmail, sendCodeToEmail, registerByEmail } from './api';
import { loginByEmail } from './api';
import { useUserStore } from '@/store/user.js';
import { showLoadingToast, closeToast } from '@/common/common.js';
const email = ref(''); // 邮箱
const password = ref(''); // 密码
const checked = ref(true); // 同意条款，默认勾选
const isLoading = ref(false); // 加载状态
// 注册相关变量
const showRegister = ref(false); // 显示注册弹窗
const registerEmail = ref(''); // 注册邮箱
const registerPassword = ref(''); // 注册密码
const confirmPassword = ref(''); // 确认密码
const verificationCode = ref(''); // 验证码
const codeBtnText = ref('获取验证码');
const codeBtnDisabled = ref(false);
let countdownTimer = null;
const userStore = useUserStore();
// 邮箱格式验证
@@ -31,7 +20,7 @@ const validateEmail = (email) => {
const onLogin = async() => {
if (!checked.value) {
uni.showToast({
title: '请先同意用户协议',
title: 'Please agree to the user agreement',
icon: 'none',
duration: 2000,
});
@@ -40,7 +29,7 @@ const onLogin = async() => {
if (!email.value) {
uni.showToast({
title: '请输入邮箱',
title: 'Please enter email',
icon: 'none',
});
return;
@@ -48,7 +37,7 @@ const onLogin = async() => {
if (!password.value) {
uni.showToast({
title: '请输入密码',
title: 'Please enter password',
icon: 'none',
});
return;
@@ -57,7 +46,7 @@ const onLogin = async() => {
// 邮箱格式验证
if (!validateEmail(email.value)) {
uni.showToast({
title: '请输入正确的邮箱',
title: 'Please enter a valid email',
icon: 'none',
});
return;
@@ -66,7 +55,7 @@ const onLogin = async() => {
// 密码长度验证
if (password.value.length < 6) {
uni.showToast({
title: '密码至少6位',
title: 'Password must be at least 6 characters',
icon: 'none',
});
return;
@@ -79,7 +68,7 @@ const onLogin = async() => {
try {
uni.showLoading({
title: '登录中...',
title: 'Logging in...',
mask: true,
});
@@ -97,29 +86,23 @@ const onLogin = async() => {
userStore.setLoginStatus(true);
uni.showToast({
title: '登录成功',
title: 'Login successful',
icon: 'success',
});
uni.switchTab({
url:'/pages/mine/index'
})
// 延迟一点时间再关闭弹窗，让用户看到成功提示
setTimeout(() => {
// 触发父组件的登录成功事件
emit('success');
emit('close');
}, 1000);
} else {
uni.showToast({
title: res.msg || '登录失败',
title: res.msg || 'Login failed',
icon: 'error',
});
}
} catch (error) {
console.error('登录错误:', error);
console.error('Login error:', error);
uni.showToast({
title: error.message || '登录失败，请稍后重试',
title: error.message || 'Login failed, please try again',
icon: 'error',
});
} finally {
@@ -136,11 +119,11 @@ const onChange = (e) => {
// 显示用户协议
const showAgreement = () => {
uni.showModal({
title: '用户协议',
content: '欢迎使用我们的服务！\n\n本协议规定了您使用我们服务的条款和条件，请仔细阅读。\n\n1. 服务使用条款\n2. 隐私政策\n3. 账户安全\n4. 免责声明\n\n继续使用即表示您同意遵守这些条款。',
title: 'User Agreement',
content: 'Welcome to our service!\n\nThis agreement sets forth the terms and conditions for your use of our services, please read carefully.\n\n1. Terms of Service\n2. Privacy Policy\n3. Account Security\n4. Disclaimer\n\nContinuing to use means you agree to comply with these terms.',
showCancel: true,
confirmText: '同意',
cancelText: '取消',
confirmText: 'Agree',
cancelText: 'Cancel',
success: (res) => {
if (res.confirm) {
checked.value = true;
@@ -150,9 +133,9 @@ const showAgreement = () => {
};
// 忘记密码
const forgetPassword = () => {
const forgetPassword = function() {
uni.navigateTo({
url: '/pages/auth/forget-password'
url: '/pages/login/changePassword'
});
};
@@ -163,233 +146,12 @@ const goRegisterPage = function() {
})
}
// 显示注册弹窗
const showRegisterPopup = () => {
showRegister.value = true;
};
// 隐藏注册弹窗
const hideRegisterPopup = () => {
showRegister.value = false;
// 清空注册表单
registerEmail.value = '';
registerPassword.value = '';
confirmPassword.value = '';
verificationCode.value = '';
};
// 获取验证码
const getVerificationCode = async () => {
if (!registerEmail.value) {
uni.showToast({
title: '请输入邮箱',
icon: 'none',
});
return;
}
if (!validateEmail(registerEmail.value)) {
uni.showToast({
title: '请输入正确的邮箱',
icon: 'none',
});
return;
}
// 发送验证码
try {
uni.showLoading({
title: '发送中...',
mask: true,
});
const params = {
email: registerEmail.value,
register: true
};
const res = await sendCodeToEmail(params);
if (res && res.code === 0) {
uni.hideLoading();
uni.showToast({
title: '验证码已发送',
icon: 'success',
});
// 开始倒计时
let timeLeft = 60;
codeBtnDisabled.value = true;
codeBtnText.value = `${timeLeft}秒`;
countdownTimer = setInterval(() => {
timeLeft--;
codeBtnText.value = `${timeLeft}秒`;
if (timeLeft <= 0) {
clearInterval(countdownTimer);
codeBtnText.value = '重新获取';
codeBtnDisabled.value = false;
}
}, 1000);
} else {
uni.hideLoading();
uni.showToast({
title: res.msg || '发送失败',
icon: 'error',
});
}
} catch (error) {
uni.hideLoading();
uni.showToast({
title: error.message || '发送失败，请重试',
icon: 'error',
});
}
};
// 注册提交
const onRegister = async () => {
if (!registerEmail.value) {
uni.showToast({
title: '请输入邮箱',
icon: 'none',
});
return;
}
if (!validateEmail(registerEmail.value)) {
uni.showToast({
title: '请输入正确的邮箱',
icon: 'none',
});
return;
}
if (!verificationCode.value) {
uni.showToast({
title: '请输入验证码',
icon: 'none',
});
return;
}
if (!registerPassword.value) {
uni.showToast({
title: '请输入密码',
icon: 'none',
});
return;
}
if (registerPassword.value !== confirmPassword.value) {
uni.showToast({
title: '两次输入密码不一致',
icon: 'none',
});
return;
}
if (registerPassword.value.length < 6) {
uni.showToast({
title: '密码至少6位',
icon: 'none',
});
return;
}
try {
uni.showLoading({
title: '注册中...',
mask: true,
});
// 调用注册API
const registerParams = {
email: registerEmail.value,
verificationCode: verificationCode.value,
password: registerPassword.value,
confirmPassword: confirmPassword.value
};
const res = await registerByEmail(registerParams);
if (res && res.code === 0) {
uni.hideLoading();
uni.showToast({
title: '注册成功',
icon: 'success',
});
// 注册成功后直接调用登录接口
setTimeout(async () => {
try {
const loginRes = await loginByEmail({
email: registerEmail.value,
password: registerPassword.value
});
if (loginRes && loginRes.code === 0) {
// 存储用户信息到全局状态
userStore.setUserInfo(loginRes.data);
userStore.setToken(loginRes.data.accessToken);
userStore.setLoginStatus(true);
uni.showToast({
title: '登录成功',
icon: 'success',
});
// 关闭注册弹窗和登录弹窗
setTimeout(() => {
emit('success');
emit('close');
hideRegisterPopup();
}, 1000);
} else {
uni.showToast({
title: loginRes.msg || '自动登录失败',
icon: 'none',
});
}
} catch (error) {
console.error('自动登录失败:', error);
uni.showToast({
title: '自动登录失败，请手动登录',
icon: 'none',
});
}
}, 1000);
} else {
uni.hideLoading();
uni.showToast({
title: res.msg || '注册失败',
icon: 'error',
});
}
} catch (error) {
uni.hideLoading();
uni.showToast({
title: error.message || '注册失败，请稍后重试',
icon: 'error',
});
}
};
// 清空输入框
const clearInput = (type) => {
if (type === 'email') {
email.value = '';
} else if (type === 'password') {
password.value = '';
} else if (type === 'registerEmail') {
registerEmail.value = '';
} else if (type === 'registerPassword') {
registerPassword.value = '';
} else if (type === 'confirmPassword') {
confirmPassword.value = '';
} else if (type === 'verificationCode') {
verificationCode.value = '';
}
};
@@ -401,9 +163,6 @@ const onInputChange = (type) => {
// 移除密码错误状态
}
};
// 暴露事件给父组件
const emit = defineEmits(['close', 'success']);
</script>
<template>
@@ -476,8 +235,7 @@ const emit = defineEmits(['close', 'success']);
<!-- 注册链接 -->
<view class="flex justify-center items-center my-8 text-gray-500 text-sm">
<text>Don't have an account?</text>
<text class="text-green-500 ml-2" @tap="showRegisterPopup">Create one</text>
<text class="text-green-500 ml-2" @tap="goRegisterPage">Create one</text>
<text class="text-green-500 ml-2" @tap="goRegisterPage">Create one</text>
</view>
<!-- 同意条款 -->
@@ -488,139 +246,11 @@ const emit = defineEmits(['close', 'success']);
:checked="checked"
@change="onChange"
/>
我已阅读并同意
<text class="text-green-500 underline" @tap="showAgreement">《用户协议》</text>
和
<text class="text-green-500 underline" @tap="showAgreement">《隐私政策》</text>
I have read and agree to the
<text class="text-green-500 underline" @tap="showAgreement"> User Agreement</text>
and
<text class="text-green-500 underline" @tap="showAgreement"> Privacy Policy</text>
</label>
</view>
</view>
<!-- 注册弹窗 -->
<u-popup
v-model:show="showRegister"
mode="center"
:border-radius="20"
:safe-area-inset-bottom="false"
width="80%"
:closeable="true"
@close="hideRegisterPopup"
>
<view class="p-4 min-h-screen bg-white">
<view class="mb-12 text-center">
<text class="block text-2xl font-bold text-gray-800 mb-4">用户注册</text>
<text class="text-lg text-gray-500">请填写注册信息</text>
</view>
<!-- 注册邮箱输入 -->
<view class="mb-8">
<view class="text-sm text-gray-700 mb-4 ml-2">邮箱</view>
<view class="relative flex items-center h-12 bg-gray-100 rounded-full px-6">
<input
class="w-full text-base text-gray-800 bg-transparent"
type="text"
placeholder="请输入邮箱"
v-model="registerEmail"
/>
<view
v-if="registerEmail"
class="absolute right-6 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-white font-bold"
@tap="clearInput('registerEmail')"
>
×
</view>
</view>
</view>
<!-- 验证码输入 -->
<view class="mb-8">
<view class="text-sm text-gray-700 mb-4 ml-2">验证码</view>
<view class="relative flex items-center h-12 bg-gray-100 rounded-full px-6">
<input
class="w-full text-base text-gray-800 bg-transparent pr-32"
type="text"
placeholder="请输入验证码"
v-model="verificationCode"
/>
<view
v-if="verificationCode"
class="absolute right-36 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-white font-bold"
@tap="clearInput('verificationCode')"
>
×
</view>
</view>
<button
class="absolute right-2 top-1/2 transform -translate-y-1/2 h-10 px-4 bg-gradient-to-r from-green-500 to-green-400 text-white text-xs rounded-full disabled:bg-gray-400 disabled:text-gray-300"
:disabled="codeBtnDisabled"
@tap="getVerificationCode"
>
{{ codeBtnText }}
</button>
</view>
<!-- 注册密码输入 -->
<view class="mb-8">
<view class="text-sm text-gray-700 mb-4 ml-2">密码</view>
<view class="relative flex items-center h-12 bg-gray-100 rounded-full px-6">
<input
class="w-full text-base text-gray-800 bg-transparent"
type="password"
placeholder="请输入密码"
v-model="registerPassword"
/>
<view
v-if="registerPassword"
class="absolute right-6 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-white font-bold"
@tap="clearInput('registerPassword')"
>
×
</view>
</view>
</view>
<!-- 确认密码输入 -->
<view class="mb-8">
<view class="text-sm text-gray-700 mb-4 ml-2">确认密码</view>
<view class="relative flex items-center h-12 bg-gray-100 rounded-full px-6">
<input
class="w-full text-base text-gray-800 bg-transparent"
type="password"
placeholder="请再次输入密码"
v-model="confirmPassword"
/>
<view
v-if="confirmPassword"
class="absolute right-6 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-white font-bold"
@tap="clearInput('confirmPassword')"
>
×
</view>
</view>
</view>
<!-- 注册按钮 -->
<button
class="w-full h-12 bg-gradient-to-r from-green-500 to-green-400 rounded-full text-white text-xl font-bold flex items-center justify-center mt-5"
@tap="onRegister"
>
注册
</button>
<!-- 同意条款 -->
<view class="mt-auto text-center">
<label class="flex items-center justify-center text-xs text-gray-500 leading-loose">
<checkbox
class="scale-75 mr-2"
:checked="checked"
@change="onChange"
/>
我已阅读并同意
<text class="text-green-500 underline" @tap="showAgreement">《用户协议》</text>
和
<text class="text-green-500 underline" @tap="showAgreement">《隐私政策》</text>
</label>
</view>
</view>
</u-popup>
</template>