ysc/thebet365
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(player): 接入创蓝短信手机注册与登录页优化

Browse Source 
新增 SMS 验证码注册、8 国手机号选择与 Redis 频控；优化登录/注册 UI 及图形验证码样式。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Mars
2026-06-12 10:25:59 +08:00
parent 168aecfd5c
commit db28390be9
39 changed files with 1521 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
apps/player/src/views/LoginView.vue
View File

@@ -66,10 +66,20 @@ function goRegister() {
<LocaleSwitcher compact />
</div>
<form @submit.prevent="submit" class="login-form ps-gold-frame">
<label>{{ t('auth.username') }}</label>
<input v-model="username" class="ps-gold-input" required />
<label>{{ t('auth.password') }}</label>
<input v-model="password" class="ps-gold-input" type="password" required />
<div class="field">
<label>{{ t('auth.username') }}</label>
<input
v-model="username"
class="field-input"
required
autocomplete="username"
:placeholder="t('auth.login_username_placeholder')"
/>
</div>
<div class="field">
<label>{{ t('auth.password') }}</label>
<input v-model="password" class="field-input" type="password" required />
</div>
<RobotVerify ref="captchaRef" />
<p v-if="error" class="error">{{ error }}</p>
<button type="submit" class="btn-login btn-gold-outline" :disabled="loading">
@@ -111,11 +121,45 @@ function goRegister() {
.login-form {
width: 100%;
max-width: 340px;
max-width: 320px;
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px;
gap: 8px;
padding: 12px;
}
.field {
display: flex;
flex-direction: column;
gap: 4px;
}
.field-input {
width: 100%;
height: 36px;
padding: 0 10px;
border: 1px solid var(--border);
border-radius: 6px;
background: #0d0d0d;
color: var(--text);
font-size: 14px;
font-family: inherit;
}
.field-input:focus {
outline: none;
border-color: #555;
}
.inline-row {
display: flex;
gap: 6px;
align-items: center;
}
.inline-row .field-input {
flex: 1;
min-width: 0;
}
label {

241
apps/player/src/views/RegisterView.vue
View File

@@ -2,34 +2,59 @@
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { defaultPhoneIsoForLocale, getPhoneDialFromIso } from '@thebet365/shared';
import { useAuthStore } from '../stores/auth';
import { useAppLocale } from '../composables/useAppLocale';
import { useSmsCode } from '../composables/useSmsCode';
import LocaleSwitcher from '../components/LocaleSwitcher.vue';
import RobotVerify from '../components/RobotVerify.vue';
import PhoneCountrySelect from '../components/PhoneCountrySelect.vue';
import loginBg from '../assets/images/h5bg.png';
const { t } = useI18n();
const { t, locale } = useI18n();
const { initFromUser } = useAppLocale();
const auth = useAuthStore();
const router = useRouter();
const route = useRoute();
const captchaRef = ref<InstanceType<typeof RobotVerify> | null>(null);
const username = ref('');
const phone = ref('');
const countryIso = ref(defaultPhoneIsoForLocale(locale.value));
const password = ref('');
const confirmPassword = ref('');
const smsCode = ref('');
const inviteCode = ref(typeof route.query.code === 'string' ? route.query.code : '');
const error = ref('');
const loading = ref(false);
const { sessionId, countdown, sending, error: smsError, send } = useSmsCode();
async function sendCode() {
await send(phone.value, getPhoneDialFromIso(countryIso.value));
}
async function submit() {
if (!captchaRef.value?.validate()) {
error.value = t('auth.captcha_wrong');
captchaRef.value?.refresh();
if (!sessionId.value) {
error.value = t('auth.sms_required');
return;
}
if (!smsCode.value.trim()) {
error.value = t('auth.sms_code_required');
return;
}
if (password.value !== confirmPassword.value) {
error.value = t('auth.password_mismatch');
return;
}
loading.value = true;
error.value = '';
try {
await auth.register(username.value, password.value, inviteCode.value);
await auth.register(
phone.value,
getPhoneDialFromIso(countryIso.value),
password.value,
smsCode.value,
sessionId.value,
inviteCode.value,
);
initFromUser(auth.user?.locale);
const redirectTo = (route.query.redirect as string) || '/';
router.push(redirectTo);
@@ -43,6 +68,25 @@ async function submit() {
function goLogin() {
router.push({ path: '/login', query: route.query.redirect ? { redirect: route.query.redirect as string } : {} });
}
function isGuestBrowsablePath(path: string): boolean {
if (!path || path === '/' || path === '/bet') return true;
if (path.startsWith('/match/')) return true;
return false;
}
function continueBrowsing() {
const redirect = typeof route.query.redirect === 'string' ? route.query.redirect : '';
const target = isGuestBrowsablePath(redirect) ? redirect || '/' : '/';
router.replace(target);
}
const fieldError = () => {
if (error.value) return error.value;
if (smsError.value === 'phone_required') return t('auth.phone_required');
if (smsError.value) return smsError.value;
return '';
};
</script>
<template>
@@ -52,14 +96,61 @@ function goLogin() {
</div>
<form @submit.prevent="submit" class="login-form ps-gold-frame">
<h2 class="form-title">{{ t('auth.register') }}</h2>
<label>{{ t('auth.invite_code') }} <span class="optional-tag">{{ t('auth.optional') }}</span></label>
<input v-model="inviteCode" class="ps-gold-input" autocomplete="off" />
<label>{{ t('auth.username') }}</label>
<input v-model="username" class="ps-gold-input" required autocomplete="username" />
<label>{{ t('auth.password') }}</label>
<input v-model="password" class="ps-gold-input" type="password" required autocomplete="new-password" minlength="8" />
<RobotVerify ref="captchaRef" />
<p v-if="error" class="error">{{ error }}</p>
<div class="field">
<label>{{ t('auth.phone') }}</label>
<div class="inline-row">
<PhoneCountrySelect v-model="countryIso" />
<input
v-model="phone"
class="field-input"
type="tel"
required
autocomplete="tel-national"
:placeholder="t('auth.phone_local_placeholder')"
/>
</div>
</div>
<div class="field">
<label>{{ t('auth.sms_code') }}</label>
<div class="inline-row">
<input
v-model="smsCode"
class="field-input"
inputmode="numeric"
maxlength="6"
autocomplete="one-time-code"
:placeholder="t('auth.sms_code_placeholder')"
/>
<button
type="button"
class="btn-secondary"
:disabled="sending || countdown > 0 || !phone.trim()"
@click="sendCode"
>
{{ countdown > 0 ? `${countdown}s` : t('auth.send_sms') }}
</button>
</div>
</div>
<div class="field">
<label>{{ t('auth.password') }}</label>
<input v-model="password" class="field-input" type="password" required autocomplete="new-password" minlength="8" />
</div>
<div class="field">
<label>{{ t('auth.confirm_password') }}</label>
<input v-model="confirmPassword" class="field-input" type="password" required autocomplete="new-password" minlength="8" />
</div>
<div class="field field-optional">
<label>{{ t('auth.invite_code') }} <span class="optional-tag">{{ t('auth.optional') }}</span></label>
<input v-model="inviteCode" class="field-input" autocomplete="off" />
</div>
<p v-if="fieldError()" class="error">{{ fieldError() }}</p>
<button type="submit" class="btn-login btn-gold-outline" :disabled="loading">
{{ t('auth.register_btn') }}
</button>
@@ -67,6 +158,9 @@ function goLogin() {
{{ t('auth.have_account') }}
</button>
</form>
<button type="button" class="btn-skip-light" @click="continueBrowsing">
{{ t('auth.continue_browsing') }}
</button>
</div>
</template>
@@ -87,7 +181,7 @@ function goLogin() {
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding: 28vh 20px calc(12vh + max(28px, env(safe-area-inset-bottom)));
padding: 30vh 16px calc(10vh + max(20px, env(safe-area-inset-bottom)));
background-color: var(--tertiary);
background-size: cover;
background-position: center top;
@@ -96,41 +190,101 @@ function goLogin() {
.login-form {
width: 100%;
max-width: 340px;
max-width: 320px;
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px;
gap: 8px;
padding: 12px;
}
.form-title {
margin: 0 0 4px;
font-size: 18px;
margin: 0 0 2px;
font-size: 16px;
font-weight: 800;
color: #fff;
text-align: center;
}
.optional-tag {
font-size: 10px;
font-weight: 500;
color: rgba(255, 255, 255, 0.45);
.field {
display: flex;
flex-direction: column;
gap: 4px;
}
.field-optional {
opacity: 0.85;
}
label {
font-size: 11px;
font-size: 10px;
color: var(--text-muted);
font-weight: 600;
letter-spacing: 0.04em;
letter-spacing: 0.03em;
}
.optional-tag {
font-size: 10px;
font-weight: 500;
color: rgba(255, 255, 255, 0.4);
}
.field-input {
width: 100%;
height: 36px;
padding: 0 10px;
border: 1px solid var(--border);
border-radius: 6px;
background: #0d0d0d;
color: var(--text);
font-size: 14px;
font-family: inherit;
}
.field-input::placeholder {
color: rgba(255, 255, 255, 0.32);
}
.field-input:focus {
outline: none;
border-color: #555;
}
.inline-row {
display: flex;
gap: 6px;
align-items: center;
}
.inline-row .field-input {
flex: 1;
min-width: 0;
}
.btn-secondary {
flex-shrink: 0;
height: 36px;
padding: 0 10px;
border: 1px solid var(--border);
border-radius: 6px;
background: #141414;
color: var(--text);
font-size: 11px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
}
.btn-secondary:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.btn-login {
margin-top: 4px;
padding: 10px 14px;
margin-top: 2px;
padding: 9px 12px;
border-radius: 6px;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.06em;
}
.btn-login:disabled {
@@ -153,9 +307,30 @@ label {
color: rgba(255, 255, 255, 0.75);
}
.error {
color: var(--danger);
.btn-skip-light {
position: absolute;
bottom: calc(20px + env(safe-area-inset-bottom));
left: 50%;
transform: translateX(-50%);
padding: 8px 16px;
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.45);
font-size: 13px;
font-weight: 300;
cursor: pointer;
white-space: nowrap;
}
.btn-skip-light:active {
color: rgba(255, 255, 255, 0.65);
}
.error {
margin: 0;
color: var(--danger);
font-size: 12px;
font-weight: 600;
line-height: 1.3;
}
</style>