优化
This commit is contained in:
1 parent
01af5542b8
commit
a4e01d96b8
1 file changed
+79
-70
+79
-70
@@ -5,48 +5,48 @@ import { useUserStore } from '@/store/user.js';
|
|||||||
|
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
|
|
||||||
// 注册相关变量
|
// Registration related variables
|
||||||
const registerEmail = ref(''); // 注册邮箱
|
const registerEmail = ref(''); // Email for registration
|
||||||
const registerPassword = ref(''); // 注册密码
|
const registerPassword = ref(''); // Password for registration
|
||||||
const confirmPassword = ref(''); // 确认密码
|
const confirmPassword = ref(''); // Confirm password
|
||||||
const verificationCode = ref(''); // 验证码
|
const verificationCode = ref(''); // Verification code
|
||||||
const codeBtnText = ref('获取验证码');
|
const codeBtnText = ref('Get Code');
|
||||||
const codeBtnDisabled = ref(false);
|
const codeBtnDisabled = ref(false);
|
||||||
const checked = ref(true); // 同意条款,默认勾选
|
const checked = ref(true); // Agree to terms, default checked
|
||||||
let countdownTimer = null;
|
let countdownTimer = null;
|
||||||
|
|
||||||
// 邮箱格式验证
|
// Email format validation
|
||||||
const validateEmail = (email) => {
|
const validateEmail = (email) => {
|
||||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||||
return emailRegex.test(email);
|
return emailRegex.test(email);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 同意条款切换
|
// Toggle agreement to terms
|
||||||
const onChange = (e) => {
|
const onChange = (e) => {
|
||||||
checked.value = e.detail.value; // 更新checked值
|
checked.value = e.detail.value; // Update checked value
|
||||||
};
|
};
|
||||||
|
|
||||||
// 显示用户协议
|
// 显示用户协议
|
||||||
const showAgreement = () => {
|
const showAgreement = () => {
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
title: '用户协议',
|
title: 'User Agreement',
|
||||||
content: '欢迎使用我们的服务!\n\n本协议规定了您使用我们服务的条款和条件,请仔细阅读。\n\n1. 服务使用条款\n2. 隐私政策\n3. 账户安全\n4. 免责声明\n\n继续使用即表示您同意遵守这些条款。',
|
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,
|
showCancel: true,
|
||||||
confirmText: '同意',
|
confirmText: 'Agree',
|
||||||
cancelText: '取消',
|
cancelText: 'Cancel',
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
if (res.confirm) {
|
if (res.confirm) {
|
||||||
checked.value = true;
|
checked.value = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// 获取验证码
|
// 获取验证码
|
||||||
const getVerificationCode = async () => {
|
const getVerificationCode = async () => {
|
||||||
if (!registerEmail.value) {
|
if (!registerEmail.value) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '请输入邮箱',
|
title: 'Please enter email',
|
||||||
icon: 'none',
|
icon: 'none',
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
@@ -54,16 +54,16 @@ const getVerificationCode = async () => {
|
|||||||
|
|
||||||
if (!validateEmail(registerEmail.value)) {
|
if (!validateEmail(registerEmail.value)) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '请输入正确的邮箱',
|
title: 'Please enter a valid email',
|
||||||
icon: 'none',
|
icon: 'none',
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 发送验证码
|
// Send verification code
|
||||||
try {
|
try {
|
||||||
uni.showLoading({
|
uni.showLoading({
|
||||||
title: '发送中...',
|
title: 'Sending...',
|
||||||
mask: true,
|
mask: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -77,46 +77,46 @@ const getVerificationCode = async () => {
|
|||||||
if (res && res.code === 0) {
|
if (res && res.code === 0) {
|
||||||
uni.hideLoading();
|
uni.hideLoading();
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '验证码已发送',
|
title: 'Verification code sent',
|
||||||
icon: 'success',
|
icon: 'success',
|
||||||
});
|
});
|
||||||
|
|
||||||
// 开始倒计时
|
// Start countdown
|
||||||
let timeLeft = 60;
|
let timeLeft = 60;
|
||||||
codeBtnDisabled.value = true;
|
codeBtnDisabled.value = true;
|
||||||
codeBtnText.value = `${timeLeft}秒`;
|
codeBtnText.value = `${timeLeft}s`;
|
||||||
|
|
||||||
countdownTimer = setInterval(() => {
|
countdownTimer = setInterval(() => {
|
||||||
timeLeft--;
|
timeLeft--;
|
||||||
codeBtnText.value = `${timeLeft}秒`;
|
codeBtnText.value = `${timeLeft}s`;
|
||||||
|
|
||||||
if (timeLeft <= 0) {
|
if (timeLeft <= 0) {
|
||||||
clearInterval(countdownTimer);
|
clearInterval(countdownTimer);
|
||||||
codeBtnText.value = '重新获取';
|
codeBtnText.value = 'Resend';
|
||||||
codeBtnDisabled.value = false;
|
codeBtnDisabled.value = false;
|
||||||
}
|
}
|
||||||
}, 1000);
|
}, 1000);
|
||||||
} else {
|
} else {
|
||||||
uni.hideLoading();
|
uni.hideLoading();
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: res.msg || '发送失败',
|
title: res.msg || 'Send failed',
|
||||||
icon: 'error',
|
icon: 'error',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
uni.hideLoading();
|
uni.hideLoading();
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: error.message || '发送失败,请重试',
|
title: error.message || 'Send failed, please try again',
|
||||||
icon: 'error',
|
icon: 'error',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 注册提交
|
// 注册提交
|
||||||
const onRegister = async () => {
|
const onRegister = async () => {
|
||||||
if (!registerEmail.value) {
|
if (!registerEmail.value) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '请输入邮箱',
|
title: 'Please enter email',
|
||||||
icon: 'none',
|
icon: 'none',
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
@@ -124,7 +124,7 @@ const onRegister = async () => {
|
|||||||
|
|
||||||
if (!validateEmail(registerEmail.value)) {
|
if (!validateEmail(registerEmail.value)) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '请输入正确的邮箱',
|
title: 'Please enter a valid email',
|
||||||
icon: 'none',
|
icon: 'none',
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
@@ -132,7 +132,7 @@ const onRegister = async () => {
|
|||||||
|
|
||||||
if (!verificationCode.value) {
|
if (!verificationCode.value) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '请输入验证码',
|
title: 'Please enter verification code',
|
||||||
icon: 'none',
|
icon: 'none',
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
@@ -140,7 +140,7 @@ const onRegister = async () => {
|
|||||||
|
|
||||||
if (!registerPassword.value) {
|
if (!registerPassword.value) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '请输入密码',
|
title: 'Please enter password',
|
||||||
icon: 'none',
|
icon: 'none',
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
@@ -148,7 +148,7 @@ const onRegister = async () => {
|
|||||||
|
|
||||||
if (registerPassword.value !== confirmPassword.value) {
|
if (registerPassword.value !== confirmPassword.value) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '两次输入密码不一致',
|
title: 'Passwords do not match',
|
||||||
icon: 'none',
|
icon: 'none',
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
@@ -156,7 +156,7 @@ const onRegister = async () => {
|
|||||||
|
|
||||||
if (registerPassword.value.length < 6) {
|
if (registerPassword.value.length < 6) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '密码至少6位',
|
title: 'Password must be at least 6 characters',
|
||||||
icon: 'none',
|
icon: 'none',
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
@@ -164,7 +164,7 @@ const onRegister = async () => {
|
|||||||
|
|
||||||
if (!checked.value) {
|
if (!checked.value) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '请先同意用户协议',
|
title: 'Please agree to the user agreement',
|
||||||
icon: 'none',
|
icon: 'none',
|
||||||
duration: 2000,
|
duration: 2000,
|
||||||
});
|
});
|
||||||
@@ -173,11 +173,11 @@ const onRegister = async () => {
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
uni.showLoading({
|
uni.showLoading({
|
||||||
title: '注册中...',
|
title: 'Registering...',
|
||||||
mask: true,
|
mask: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
// 调用注册API
|
// Call registration API
|
||||||
const registerParams = {
|
const registerParams = {
|
||||||
email: registerEmail.value,
|
email: registerEmail.value,
|
||||||
verificationCode: verificationCode.value,
|
verificationCode: verificationCode.value,
|
||||||
@@ -190,11 +190,11 @@ const onRegister = async () => {
|
|||||||
if (res && res.code === 0) {
|
if (res && res.code === 0) {
|
||||||
uni.hideLoading();
|
uni.hideLoading();
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '注册成功',
|
title: 'Registration successful',
|
||||||
icon: 'success',
|
icon: 'success',
|
||||||
});
|
});
|
||||||
|
|
||||||
// 注册成功后自动登录
|
// Auto login after successful registration
|
||||||
setTimeout(async () => {
|
setTimeout(async () => {
|
||||||
try {
|
try {
|
||||||
const loginRes = await loginByEmail({
|
const loginRes = await loginByEmail({
|
||||||
@@ -203,39 +203,39 @@ const onRegister = async () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
if (loginRes && loginRes.code === 0) {
|
if (loginRes && loginRes.code === 0) {
|
||||||
// 存储用户信息到全局状态
|
// Store user info to global state
|
||||||
userStore.setUserInfo(loginRes.data);
|
userStore.setUserInfo(loginRes.data);
|
||||||
userStore.setToken(loginRes.data.accessToken);
|
userStore.setToken(loginRes.data.accessToken);
|
||||||
userStore.setLoginStatus(true);
|
userStore.setLoginStatus(true);
|
||||||
|
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '登录成功',
|
title: 'Login successful',
|
||||||
icon: 'success',
|
icon: 'success',
|
||||||
});
|
});
|
||||||
|
|
||||||
// 跳转到首页
|
// Navigate to home page
|
||||||
uni.switchTab({
|
uni.switchTab({
|
||||||
url: '/pages/mine/index'
|
url: '/pages/mine/index'
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: loginRes.msg || '自动登录失败',
|
title: loginRes.msg || 'Auto login failed',
|
||||||
icon: 'none',
|
icon: 'none',
|
||||||
});
|
});
|
||||||
|
|
||||||
// 即使自动登录失败也跳转到首页,让用户重新登录
|
// Navigate to home page even if auto login fails, so user can login manually
|
||||||
uni.switchTab({
|
uni.switchTab({
|
||||||
url: '/pages/mine/index'
|
url: '/pages/mine/index'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('自动登录失败:', error);
|
console.error('Auto login failed:', error);
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '自动登录失败,请手动登录',
|
title: 'Auto login failed, please login manually',
|
||||||
icon: 'none',
|
icon: 'none',
|
||||||
});
|
});
|
||||||
|
|
||||||
// 跳转到首页
|
// Navigate to home page
|
||||||
uni.switchTab({
|
uni.switchTab({
|
||||||
url: '/pages/mine/index'
|
url: '/pages/mine/index'
|
||||||
});
|
});
|
||||||
@@ -244,21 +244,21 @@ const onRegister = async () => {
|
|||||||
} else {
|
} else {
|
||||||
uni.hideLoading();
|
uni.hideLoading();
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: res.msg || '注册失败',
|
title: res.msg || 'Registration failed',
|
||||||
icon: 'error',
|
icon: 'error',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
uni.hideLoading();
|
uni.hideLoading();
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: error.message || '注册失败,请稍后重试',
|
title: error.message || 'Registration failed, please try again',
|
||||||
icon: 'error',
|
icon: 'error',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 清空输入框
|
// Clear input field
|
||||||
const clearInput = (type) => {
|
const clearInput = (type) => {
|
||||||
if (type === 'registerEmail') {
|
if (type === 'registerEmail') {
|
||||||
registerEmail.value = '';
|
registerEmail.value = '';
|
||||||
} else if (type === 'registerPassword') {
|
} else if (type === 'registerPassword') {
|
||||||
@@ -268,13 +268,22 @@ const clearInput = (type) => {
|
|||||||
} else if (type === 'verificationCode') {
|
} else if (type === 'verificationCode') {
|
||||||
verificationCode.value = '';
|
verificationCode.value = '';
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
//跳转到登录页面
|
||||||
|
//跳转到注册页面
|
||||||
|
const goLoginPage = function() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pages/login/index'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view class="h-[120vh] p-4 min-h-screen bg-white flex flex-col justify-center">
|
<view class="p-4 min-h-screen bg-white flex flex-col justify-center">
|
||||||
<!-- 标题 -->
|
<!-- 标题 -->
|
||||||
<view class="mb-12 mt-20 text-center">
|
<view class="mb-12 text-center">
|
||||||
<image src="/static/tabbar/find.png" class="w-20 h-20 mb-8" mode="aspectFit"></image>
|
<image src="/static/tabbar/find.png" class="w-20 h-20 mb-8" mode="aspectFit"></image>
|
||||||
<text class="block text-3xl font-bold text-gray-800 mb-4">CREATE ACCOUNT</text>
|
<text class="block text-3xl font-bold text-gray-800 mb-4">CREATE ACCOUNT</text>
|
||||||
<text class="text-sm text-gray-500">Join Sweekar to get started</text>
|
<text class="text-sm text-gray-500">Join Sweekar to get started</text>
|
||||||
@@ -372,22 +381,22 @@ const clearInput = (type) => {
|
|||||||
<!-- 登录链接 -->
|
<!-- 登录链接 -->
|
||||||
<view class="flex justify-center items-center my-8 text-gray-500 text-sm">
|
<view class="flex justify-center items-center my-8 text-gray-500 text-sm">
|
||||||
<text>Already have an account?</text>
|
<text>Already have an account?</text>
|
||||||
<text class="text-green-500 ml-2" @click="$Router.push('/pages/login/index')">Sign in</text>
|
<text class="text-green-500 ml-2" @click="goLoginPage">Sign in</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 同意条款 -->
|
<!-- 同意条款 -->
|
||||||
<view class="mt-auto text-center">
|
<!-- <view class="mt-auto text-center">
|
||||||
<label class="flex items-center justify-center text-xs text-gray-500 leading-loose">
|
<label class="flex items-center justify-center text-xs text-gray-500 leading-loose">
|
||||||
<checkbox
|
<checkbox
|
||||||
class="scale-75 mr-2"
|
class="scale-75 mr-2"
|
||||||
:checked="checked"
|
:checked="checked"
|
||||||
@change="onChange"
|
@change="onChange"
|
||||||
/>
|
/>
|
||||||
我已阅读并同意
|
I have read and agree to the
|
||||||
<text class="text-green-500 underline" @tap="showAgreement">《用户协议》</text>
|
<text class="text-green-500 underline" @tap="showAgreement"> User Agreement</text>
|
||||||
和
|
and
|
||||||
<text class="text-green-500 underline" @tap="showAgreement">《隐私政策》</text>
|
<text class="text-green-500 underline" @tap="showAgreement"> Privacy Policy</text>
|
||||||
</label>
|
</label>
|
||||||
</view>
|
</view> -->
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
Reference in new issue
Block a user