mirror of
https://github.com/xinnan-tech/xiaozhi-esp32-server.git
synced 2026-07-21 22:53:56 +08:00
update：新增移动端忘记密码前端页面
This commit is contained in:
3030332422
@@ -19,8 +19,7 @@ export default {
|
||||
'login.enterCaptcha': 'Please enter verification code',
|
||||
'login.loginButton': 'Login',
|
||||
'login.loggingIn': 'Logging in...',
|
||||
'login.noAccount': 'did not have an account?',
|
||||
'login.registerNow': 'Register Now',
|
||||
'login.noAccount': 'Sign Up',
|
||||
'login.enterPhone': 'Please enter phone number',
|
||||
'login.selectCountry': 'Select Country/Region',
|
||||
'login.confirm': 'Confirm',
|
||||
@@ -30,6 +29,7 @@ export default {
|
||||
'login.requiredCaptcha': 'Verification code cannot be empty',
|
||||
'login.requiredMobile': 'Please enter a valid phone number',
|
||||
'login.captchaError': 'Graphic verification code error',
|
||||
'login.forgotPassword': 'Forgot Password',
|
||||
|
||||
// Register page
|
||||
'register.pageTitle': 'Register',
|
||||
@@ -189,6 +189,27 @@ export default {
|
||||
'common.unknownError': 'Unknown error',
|
||||
'common.networkError': 'Network error',
|
||||
|
||||
// Retrieve Password page
|
||||
'retrievePassword.title': 'Reset Password',
|
||||
'retrievePassword.subtitle': 'Recover your account password via mobile number',
|
||||
'retrievePassword.mobileRequired': 'Please enter mobile number',
|
||||
'retrievePassword.inputCorrectMobile': 'Please enter a valid mobile number',
|
||||
'retrievePassword.captchaRequired': 'Please enter graphic verification code',
|
||||
'retrievePassword.mobileCaptchaRequired': 'Please enter SMS verification code',
|
||||
'retrievePassword.newPasswordRequired': 'Please enter new password',
|
||||
'retrievePassword.confirmNewPasswordRequired': 'Please confirm new password',
|
||||
'retrievePassword.passwordsNotMatch': 'Passwords do not match',
|
||||
'retrievePassword.mobilePlaceholder': 'Please enter mobile number',
|
||||
'retrievePassword.captchaPlaceholder': 'Please enter graphic verification code',
|
||||
'retrievePassword.mobileCaptchaPlaceholder': 'Please enter SMS verification code',
|
||||
'retrievePassword.newPasswordPlaceholder': 'Please enter new password',
|
||||
'retrievePassword.confirmNewPasswordPlaceholder': 'Please confirm new password',
|
||||
'retrievePassword.getMobileCaptcha': 'Get Code',
|
||||
'retrievePassword.captchaSendSuccess': 'Verification code sent successfully',
|
||||
'retrievePassword.passwordUpdateSuccess': 'Password reset successfully',
|
||||
'retrievePassword.resetButton': 'Reset Password',
|
||||
'retrievePassword.goToLogin': 'Back to Login',
|
||||
|
||||
// SM2 encryption related error messages
|
||||
'sm2.publicKeyNotConfigured': 'SM2 public key not configured, please contact administrator',
|
||||
'sm2.encryptionFailed': 'Password encryption failed',
|
||||
|
||||
@@ -19,8 +19,7 @@ export default {
|
||||
'login.enterCaptcha': '请输入验证码',
|
||||
'login.loginButton': '登录',
|
||||
'login.loggingIn': '登录中...',
|
||||
'login.noAccount': '还没有账户？',
|
||||
'login.registerNow': '立即注册',
|
||||
'login.noAccount': '新用户注册',
|
||||
'login.enterPhone': '请输入手机号码',
|
||||
'login.selectCountry': '选择国家/地区',
|
||||
'login.confirm': '确认',
|
||||
@@ -30,6 +29,7 @@ export default {
|
||||
'login.requiredCaptcha': '验证码不能为空',
|
||||
'login.requiredMobile': '请输入正确的手机号码',
|
||||
'login.captchaError': '图形验证码错误',
|
||||
'login.forgotPassword': '忘记密码',
|
||||
|
||||
// 注册页面
|
||||
'register.pageTitle': '注册',
|
||||
@@ -265,6 +265,27 @@ export default {
|
||||
'settings.selectLanguage': '选择语言',
|
||||
'settings.languageChanged': '语言切换成功',
|
||||
|
||||
// 重置密码页面
|
||||
'retrievePassword.title': '重置密码',
|
||||
'retrievePassword.subtitle': '通过手机号找回您的账户密码',
|
||||
'retrievePassword.mobileRequired': '请输入手机号码',
|
||||
'retrievePassword.inputCorrectMobile': '请输入正确的手机号码',
|
||||
'retrievePassword.captchaRequired': '请输入图形验证码',
|
||||
'retrievePassword.mobileCaptchaRequired': '请输入短信验证码',
|
||||
'retrievePassword.newPasswordRequired': '请输入新密码',
|
||||
'retrievePassword.confirmNewPasswordRequired': '请确认新密码',
|
||||
'retrievePassword.passwordsNotMatch': '两次输入的密码不一致',
|
||||
'retrievePassword.mobilePlaceholder': '请输入手机号码',
|
||||
'retrievePassword.captchaPlaceholder': '请输入图形验证码',
|
||||
'retrievePassword.mobileCaptchaPlaceholder': '请输入短信验证码',
|
||||
'retrievePassword.newPasswordPlaceholder': '请输入新密码',
|
||||
'retrievePassword.confirmNewPasswordPlaceholder': '请确认新密码',
|
||||
'retrievePassword.getMobileCaptcha': '获取验证码',
|
||||
'retrievePassword.captchaSendSuccess': '验证码发送成功',
|
||||
'retrievePassword.passwordUpdateSuccess': '密码重置成功',
|
||||
'retrievePassword.resetButton': '重置密码',
|
||||
'retrievePassword.goToLogin': '返回登录',
|
||||
|
||||
// 消息提示
|
||||
'message.loginSuccess': '登录成功！',
|
||||
'message.loginFail': '登录失败',
|
||||
|
||||
@@ -19,8 +19,7 @@ export default {
|
||||
'login.enterCaptcha': '請輸入驗證碼',
|
||||
'login.loginButton': '登錄',
|
||||
'login.loggingIn': '登錄中...',
|
||||
'login.noAccount': '還沒有賬戶？',
|
||||
'login.registerNow': '立即註冊',
|
||||
'login.noAccount': '新用戶註冊',
|
||||
'login.enterPhone': '請輸入手機號碼',
|
||||
'login.selectCountry': '選擇國家/地區',
|
||||
'login.confirm': '確認',
|
||||
@@ -30,6 +29,32 @@ export default {
|
||||
'login.requiredCaptcha': '驗證碼不能為空',
|
||||
'login.requiredMobile': '請輸入正確的手機號碼',
|
||||
'login.captchaError': '圖形驗證碼錯誤',
|
||||
'login.forgotPassword': '忘記密碼',
|
||||
|
||||
// 忘記密碼頁面
|
||||
'retrievePassword.title': '重置密碼',
|
||||
'retrievePassword.subtitle': '請輸入您的手機號碼以重置密碼',
|
||||
'retrievePassword.mobileRequired': '請輸入手機號碼',
|
||||
'retrievePassword.inputCorrectMobile': '請輸入正確的手機號碼',
|
||||
'retrievePassword.captchaRequired': '請輸入圖形驗證碼',
|
||||
'retrievePassword.mobileCaptchaRequired': '請輸入手機驗證碼',
|
||||
'retrievePassword.newPasswordRequired': '請輸入新密碼',
|
||||
'retrievePassword.confirmNewPasswordRequired': '請確認新密碼',
|
||||
'retrievePassword.passwordsNotMatch': '兩次輸入的密碼不一致',
|
||||
'retrievePassword.mobilePlaceholder': '請輸入手機號碼',
|
||||
'retrievePassword.captchaPlaceholder': '請輸入圖形驗證碼',
|
||||
'retrievePassword.mobileCaptchaPlaceholder': '請輸入手機驗證碼',
|
||||
'retrievePassword.newPasswordPlaceholder': '請輸入新密碼',
|
||||
'retrievePassword.confirmNewPasswordPlaceholder': '請確認新密碼',
|
||||
'retrievePassword.confirmPasswordPlaceholder': '請確認新密碼',
|
||||
'retrievePassword.captchaSendSuccess': '驗證碼發送成功',
|
||||
'retrievePassword.passwordUpdateSuccess': '密碼更新成功',
|
||||
'retrievePassword.getCaptcha': '獲取驗證碼',
|
||||
'retrievePassword.getMobileCaptcha': '獲取驗證碼',
|
||||
'retrievePassword.resend': '重新發送',
|
||||
'retrievePassword.resetPasswordButton': '重置密碼',
|
||||
'retrievePassword.resetButton': '重置密碼',
|
||||
'retrievePassword.goToLogin': '返回登錄',
|
||||
|
||||
// 註冊頁面
|
||||
'register.pageTitle': '註冊',
|
||||
|
||||
@@ -0,0 +1,622 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "ForgotPassword"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { useConfigStore } from "@/store";
|
||||
import { getEnvBaseUrl } from "@/utils";
|
||||
import { toast } from "@/utils/toast";
|
||||
// 导入国际化相关功能
|
||||
import { t, initI18n } from "@/i18n";
|
||||
|
||||
// 获取屏幕边界到安全区域距离
|
||||
let safeAreaInsets;
|
||||
let systemInfo;
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 微信小程序使用新的API
|
||||
systemInfo = uni.getWindowInfo();
|
||||
safeAreaInsets = systemInfo.safeArea
|
||||
? {
|
||||
top: systemInfo.safeArea.top,
|
||||
right: systemInfo.windowWidth - systemInfo.safeArea.right,
|
||||
bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
|
||||
left: systemInfo.safeArea.left,
|
||||
}
|
||||
: null;
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
// 其他平台继续使用uni API
|
||||
systemInfo = uni.getSystemInfoSync();
|
||||
safeAreaInsets = systemInfo.safeAreaInsets;
|
||||
// #endif
|
||||
|
||||
// 表单数据
|
||||
interface ForgotPasswordData {
|
||||
mobile: string;
|
||||
captcha: string;
|
||||
captchaId: string;
|
||||
mobileCaptcha: string;
|
||||
newPassword: string;
|
||||
confirmPassword: string;
|
||||
}
|
||||
|
||||
const formData = ref<ForgotPasswordData>({
|
||||
mobile: "",
|
||||
captcha: "",
|
||||
captchaId: "",
|
||||
mobileCaptcha: "",
|
||||
newPassword: "",
|
||||
confirmPassword: "",
|
||||
});
|
||||
|
||||
// 验证码图片
|
||||
const captchaImage = ref("");
|
||||
const loading = ref(false);
|
||||
|
||||
// 获取配置store
|
||||
const configStore = useConfigStore();
|
||||
|
||||
// 区号选择相关
|
||||
const selectedAreaCode = ref("+86");
|
||||
|
||||
// 短信验证码倒计时
|
||||
const smsCountdown = ref(0);
|
||||
const smsLoading = ref(false);
|
||||
|
||||
// 计算属性：区号列表
|
||||
const areaCodeList = computed(() => {
|
||||
return configStore.config.mobileAreaList || [{ name: "中国大陆", key: "+86" }];
|
||||
});
|
||||
|
||||
// 生成UUID
|
||||
function generateUUID() {
|
||||
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
|
||||
const r = (Math.random() * 16) | 0;
|
||||
const v = c === "x" ? r : (r & 0x3) | 0x8;
|
||||
return v.toString(16);
|
||||
});
|
||||
}
|
||||
|
||||
// 获取图形验证码
|
||||
async function refreshCaptcha() {
|
||||
const uuid = generateUUID();
|
||||
formData.value.captchaId = uuid;
|
||||
captchaImage.value = `${getEnvBaseUrl()}/user/captcha?uuid=${uuid}&t=${Date.now()}`;
|
||||
}
|
||||
|
||||
// 发送短信验证码
|
||||
async function sendSmsCode() {
|
||||
// 手机号格式验证
|
||||
const phoneRegex = /^1[3-9]\d{9}$/;
|
||||
if (!phoneRegex.test(formData.value.mobile)) {
|
||||
toast.warning(t("retrievePassword.inputCorrectMobile"));
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formData.value.captcha) {
|
||||
toast.warning(t("retrievePassword.captchaRequired"));
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
smsLoading.value = true;
|
||||
// TODO: 调用发送短信验证码API
|
||||
// await sendSmsCode({
|
||||
// mobile: formData.value.mobile,
|
||||
// captcha: formData.value.captcha,
|
||||
// captchaId: formData.value.captchaId
|
||||
// })
|
||||
|
||||
toast.success(t("retrievePassword.captchaSendSuccess"));
|
||||
|
||||
// 开始倒计时
|
||||
smsCountdown.value = 60;
|
||||
const timer = setInterval(() => {
|
||||
smsCountdown.value--;
|
||||
if (smsCountdown.value <= 0) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
}, 1000);
|
||||
} catch (error: any) {
|
||||
// 处理验证码错误
|
||||
if (error.message.includes("请求错误[10067]")) {
|
||||
toast.warning(t("login.captchaError"));
|
||||
}
|
||||
// 发送失败重新获取图形验证码
|
||||
refreshCaptcha();
|
||||
} finally {
|
||||
smsLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 重置密码
|
||||
async function handleResetPassword() {
|
||||
// 表单验证
|
||||
if (!formData.value.mobile) {
|
||||
toast.warning(t("retrievePassword.mobileRequired"));
|
||||
return;
|
||||
}
|
||||
|
||||
// 手机号格式验证
|
||||
const phoneRegex = /^1[3-9]\d{9}$/;
|
||||
if (!phoneRegex.test(formData.value.mobile)) {
|
||||
toast.warning(t("retrievePassword.inputCorrectMobile"));
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formData.value.captcha) {
|
||||
toast.warning(t("retrievePassword.captchaRequired"));
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formData.value.mobileCaptcha) {
|
||||
toast.warning(t("retrievePassword.mobileCaptchaRequired"));
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formData.value.newPassword) {
|
||||
toast.warning(t("retrievePassword.newPasswordRequired"));
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formData.value.confirmPassword) {
|
||||
toast.warning(t("retrievePassword.confirmNewPasswordRequired"));
|
||||
return;
|
||||
}
|
||||
|
||||
if (formData.value.newPassword !== formData.value.confirmPassword) {
|
||||
toast.warning(t("retrievePassword.passwordsNotMatch"));
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
loading.value = true;
|
||||
|
||||
// TODO: 调用重置密码API
|
||||
// await resetPassword({
|
||||
// mobile: formData.value.mobile,
|
||||
// mobileCaptcha: formData.value.mobileCaptcha,
|
||||
// password: formData.value.newPassword,
|
||||
// captchaId: formData.value.captchaId
|
||||
// })
|
||||
|
||||
toast.success(t("retrievePassword.passwordUpdateSuccess"));
|
||||
|
||||
// 跳转到登录页
|
||||
setTimeout(() => {
|
||||
uni.redirectTo({
|
||||
url: "/pages/login/index",
|
||||
});
|
||||
}, 1000);
|
||||
} catch (error: any) {
|
||||
// 处理验证码错误
|
||||
if (error.message.includes("请求错误[10067]")) {
|
||||
toast.warning(t("login.captchaError"));
|
||||
}
|
||||
// 重置失败重新获取验证码
|
||||
refreshCaptcha();
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 返回登录
|
||||
function goBack() {
|
||||
uni.redirectTo({
|
||||
url: "/pages/login/index",
|
||||
});
|
||||
}
|
||||
|
||||
// 页面加载时获取验证码
|
||||
onLoad(() => {
|
||||
refreshCaptcha();
|
||||
});
|
||||
|
||||
// 组件挂载时确保配置已加载
|
||||
onMounted(async () => {
|
||||
if (!configStore.config.name) {
|
||||
try {
|
||||
await configStore.fetchPublicConfig();
|
||||
} catch (error) {
|
||||
console.error("获取配置失败:", error);
|
||||
}
|
||||
}
|
||||
// 初始化国际化
|
||||
initI18n();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view
|
||||
class="app-container box-border h-screen w-full"
|
||||
:style="{ paddingTop: `${safeAreaInsets?.top}px` }"
|
||||
>
|
||||
<view class="header">
|
||||
<view class="back-button" @click="goBack">
|
||||
<wd-icon name="arrow-left" custom-class="back-icon" />
|
||||
</view>
|
||||
<view class="logo-section">
|
||||
<wd-img :width="80" :height="80" round src="/static/logo.png" class="logo" />
|
||||
<text class="welcome-text">
|
||||
{{ t("retrievePassword.title") }}
|
||||
</text>
|
||||
<text class="subtitle">
|
||||
{{ t("retrievePassword.subtitle") }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-container">
|
||||
<view class="form">
|
||||
<!-- 手机号输入 -->
|
||||
<view class="input-group">
|
||||
<view class="input-wrapper mobile-wrapper">
|
||||
<view class="area-code-selector">
|
||||
<text class="area-code-text">
|
||||
{{ selectedAreaCode }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="mobile-input-wrapper">
|
||||
<wd-input
|
||||
v-model="formData.mobile"
|
||||
custom-class="styled-input"
|
||||
no-border
|
||||
:placeholder="t('retrievePassword.mobilePlaceholder')"
|
||||
type="number"
|
||||
:maxlength="11"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 图形验证码 -->
|
||||
<view class="input-group">
|
||||
<view class="input-wrapper captcha-wrapper">
|
||||
<wd-input
|
||||
v-model="formData.captcha"
|
||||
custom-class="styled-input"
|
||||
no-border
|
||||
:placeholder="t('retrievePassword.captchaPlaceholder')"
|
||||
:maxlength="6"
|
||||
/>
|
||||
<view class="captcha-image" @click="refreshCaptcha">
|
||||
<image :src="captchaImage" class="captcha-img" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 短信验证码 -->
|
||||
<view class="input-group">
|
||||
<view class="input-wrapper sms-wrapper">
|
||||
<wd-input
|
||||
v-model="formData.mobileCaptcha"
|
||||
custom-class="styled-input"
|
||||
no-border
|
||||
:placeholder="t('retrievePassword.mobileCaptchaPlaceholder')"
|
||||
:maxlength="6"
|
||||
/>
|
||||
<view class="sms-button" @click="sendSmsCode">
|
||||
<text class="sms-text">
|
||||
{{
|
||||
smsCountdown > 0
|
||||
? `${smsCountdown}${t("register.secondsLater")}`
|
||||
: t("retrievePassword.getMobileCaptcha")
|
||||
}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 新密码 -->
|
||||
<view class="input-group">
|
||||
<view class="input-wrapper">
|
||||
<wd-input
|
||||
v-model="formData.newPassword"
|
||||
custom-class="styled-input"
|
||||
no-border
|
||||
:placeholder="t('retrievePassword.newPasswordPlaceholder')"
|
||||
show-password
|
||||
:maxlength="20"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 确认新密码 -->
|
||||
<view class="input-group">
|
||||
<view class="input-wrapper">
|
||||
<wd-input
|
||||
v-model="formData.confirmPassword"
|
||||
custom-class="styled-input"
|
||||
no-border
|
||||
:placeholder="t('retrievePassword.confirmNewPasswordPlaceholder')"
|
||||
show-password
|
||||
:maxlength="20"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 重置密码按钮 -->
|
||||
<view class="reset-btn" @click="handleResetPassword">
|
||||
{{ loading ? t("common.loading") : t("retrievePassword.resetButton") }}
|
||||
</view>
|
||||
|
||||
<!-- 返回登录链接 -->
|
||||
<view class="back-login-hint" @click="goBack">
|
||||
<text class="hint-text">
|
||||
{{ t("retrievePassword.goToLogin") }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-container {
|
||||
background: linear-gradient(145deg, #f5f8fd, #6baaff, #9ebbfc, #f5f8fd);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 100vh;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px) rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
flex: 0 0 auto;
|
||||
min-height: 280rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 15% 0 40rpx 0;
|
||||
position: relative;
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
top: 50rpx;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(10rpx);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.3);
|
||||
|
||||
.back-icon {
|
||||
font-size: 32rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
text-align: center;
|
||||
|
||||
.logo {
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
display: block;
|
||||
color: #ffffff;
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12rpx;
|
||||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
display: block;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-container {
|
||||
padding: 0 40rpx 40rpx 40rpx;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.form {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 24rpx;
|
||||
padding: 40rpx 30rpx 30rpx 30rpx;
|
||||
backdrop-filter: blur(10rpx);
|
||||
box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.2);
|
||||
max-height: calc(100vh - 350rpx);
|
||||
overflow-y: auto;
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
background: #f8f9fa;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx 16rpx;
|
||||
border: 2rpx solid #e9ecef;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:focus-within {
|
||||
border-color: #667eea;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
&.mobile-wrapper {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
|
||||
.area-code-selector {
|
||||
width: 120rpx;
|
||||
height: 60rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 16rpx;
|
||||
border: 2rpx solid #e9ecef;
|
||||
|
||||
.area-code-text {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-input-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.captcha-wrapper {
|
||||
.captcha-image {
|
||||
margin-left: 20rpx;
|
||||
width: 150rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #e9ecef;
|
||||
border: 1rpx solid #ddd;
|
||||
|
||||
.captcha-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.sms-wrapper {
|
||||
.sms-button {
|
||||
margin-left: 20rpx;
|
||||
width: 180rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #667eea;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
background: #5a6fd8;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.sms-text {
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.styled-input) {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
|
||||
&::placeholder {
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
border: none;
|
||||
border-radius: 16rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
margin-bottom: 30rpx;
|
||||
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
background-color: var(
|
||||
--wot-button-primary-bg-color,
|
||||
var(--wot-color-theme, #4d80f0)
|
||||
);
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
|
||||
&:active {
|
||||
transform: translateY(2rpx);
|
||||
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.back-login-hint {
|
||||
text-align: center;
|
||||
|
||||
.hint-text {
|
||||
color: #667eea;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -116,6 +116,13 @@ function goToRegister() {
|
||||
})
|
||||
}
|
||||
|
||||
// 跳转到忘记密码页面
|
||||
function goToForgotPassword() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/forgot-password/index',
|
||||
})
|
||||
}
|
||||
|
||||
// 生成UUID
|
||||
function generateUUID() {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
|
||||
@@ -369,14 +376,19 @@ onMounted(async () => {
|
||||
{{ loading ? t('login.loggingIn') : t('login.loginButton') }}
|
||||
</view>
|
||||
|
||||
<view class="hint-row">
|
||||
<view class="register-hint">
|
||||
<text class="hint-text">
|
||||
<text class="register-link" @click="goToRegister">
|
||||
{{ t('login.noAccount') }}
|
||||
</text>
|
||||
<text class="register-link" @click="goToRegister">
|
||||
{{ t('login.registerNow') }}
|
||||
</view>
|
||||
|
||||
<view class="forgot-password">
|
||||
<text class="forgot-text" @click="goToForgotPassword">
|
||||
{{ t('login.forgotPassword') }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 登录方式切换 -->
|
||||
<view v-if="enableMobileLogin" class="login-type-switch">
|
||||
@@ -665,10 +677,14 @@ onMounted(async () => {
|
||||
}
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
text-align: right;
|
||||
.hint-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
.forgot-text {
|
||||
color: #667eea;
|
||||
font-size: 26rpx;
|
||||
@@ -706,14 +722,6 @@ onMounted(async () => {
|
||||
}
|
||||
|
||||
.register-hint {
|
||||
text-align: center;
|
||||
|
||||
.hint-text {
|
||||
color: #666666;
|
||||
font-size: 26rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.register-link {
|
||||
color: #667eea;
|
||||
font-size: 26rpx;
|
||||
|
||||
Reference in New Issue
Block a user