feat(h5-auth): restore partner and shop WeChat login
Re-enable one-tap WeChat login, post-SMS OAuth bind, and quick login gates so partner/shop openId flows work again on staging.
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
import { Navigate, useLocation } from 'react-router-dom';
|
import { Navigate, useLocation } from 'react-router-dom';
|
||||||
import { getPartnerProfile } from '../lib/api';
|
import { getPartnerProfile, hasPartnerWxSession } from '../lib/api';
|
||||||
import { usePartnerSession } from '../contexts/PartnerSessionContext';
|
import { usePartnerSession } from '../contexts/PartnerSessionContext';
|
||||||
import { partnerHomePath } from '../lib/partnerAccess';
|
import { partnerHomePath } from '../lib/partnerAccess';
|
||||||
|
|
||||||
@@ -18,6 +18,10 @@ export default function AuthGate({ children }: { children: React.ReactNode }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (!authenticated && !PUBLIC_PATHS.has(location.pathname)) {
|
if (!authenticated && !PUBLIC_PATHS.has(location.pathname)) {
|
||||||
|
const profile = getPartnerProfile();
|
||||||
|
if (profile && hasPartnerWxSession() && profile.hasWechat) {
|
||||||
|
return <Navigate to="/login?quick=1" replace state={{ from: location }} />;
|
||||||
|
}
|
||||||
return <Navigate to="/login" replace state={{ from: location }} />;
|
return <Navigate to="/login" replace state={{ from: location }} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,14 +1,25 @@
|
|||||||
import { useRef, useState, type RefObject } from 'react';
|
import { useEffect, useRef, useState, type RefObject } from 'react';
|
||||||
import { Link, useNavigate } from 'react-router-dom';
|
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
|
||||||
|
import { isWxAuthorizeEnabled } from '@dukang/shared-types';
|
||||||
|
import { WECHAT_INAPP_REQUIRED_MSG } from '@dukang/weixin-sdk';
|
||||||
import {
|
import {
|
||||||
getLastPhone,
|
getLastPhone,
|
||||||
getPartnerProfile,
|
getPartnerProfile,
|
||||||
|
hasPartnerWxSession,
|
||||||
request,
|
request,
|
||||||
saveRememberedSession,
|
saveRememberedSession,
|
||||||
type PartnerSessionPayload,
|
type PartnerSessionPayload,
|
||||||
} from '../lib/api';
|
} from '../lib/api';
|
||||||
import { usePartnerSession } from '../contexts/PartnerSessionContext';
|
import { usePartnerSession } from '../contexts/PartnerSessionContext';
|
||||||
import { partnerHomePath } from '../lib/partnerAccess';
|
import { partnerHomePath } from '../lib/partnerAccess';
|
||||||
|
import {
|
||||||
|
bindPartnerWechatAfterSmsLogin,
|
||||||
|
canPartnerUseWechatLogin,
|
||||||
|
fetchClientConfig,
|
||||||
|
loginPartnerWithWechat,
|
||||||
|
PARTNER_WECHAT_LOGIN_HINT,
|
||||||
|
} from '../lib/wechat-auth';
|
||||||
|
import { isWechatEnv } from '../lib/weixin';
|
||||||
|
|
||||||
const REMEMBER_PHONE_KEY = 'partner_remember_phone';
|
const REMEMBER_PHONE_KEY = 'partner_remember_phone';
|
||||||
const REMEMBER_FLAG_KEY = 'partner_remember_account';
|
const REMEMBER_FLAG_KEY = 'partner_remember_account';
|
||||||
@@ -39,6 +50,11 @@ function AgreementCheckbox({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function maskPhone(phone: string) {
|
||||||
|
if (phone.length < 7) return phone;
|
||||||
|
return `${phone.slice(0, 3)} **** ${phone.slice(-4)}`;
|
||||||
|
}
|
||||||
|
|
||||||
function loadRememberedPhone(): { phone: string; remember: boolean } {
|
function loadRememberedPhone(): { phone: string; remember: boolean } {
|
||||||
try {
|
try {
|
||||||
const remember = localStorage.getItem(REMEMBER_FLAG_KEY) === '1';
|
const remember = localStorage.getItem(REMEMBER_FLAG_KEY) === '1';
|
||||||
@@ -60,9 +76,19 @@ function formatPartnerError(e: unknown): string {
|
|||||||
return text;
|
return text;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function formatWechatError(e: unknown): string {
|
||||||
|
const text = e instanceof Error ? e.message : '微信登录失败';
|
||||||
|
if (text.includes('首次登录') || text.includes('手机验证码')) {
|
||||||
|
return '该微信尚未绑定合伙人账号,请先使用手机验证码登录,登录后将自动关联微信';
|
||||||
|
}
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
|
||||||
export default function LoginPage() {
|
export default function LoginPage() {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { applySession, refresh, account } = usePartnerSession();
|
const { applySession, refresh, account } = usePartnerSession();
|
||||||
|
const [params] = useSearchParams();
|
||||||
|
const quick = params.get('quick') === '1';
|
||||||
const savedProfile = getPartnerProfile();
|
const savedProfile = getPartnerProfile();
|
||||||
const remembered = loadRememberedPhone();
|
const remembered = loadRememberedPhone();
|
||||||
const [phone, setPhone] = useState(remembered.phone || getLastPhone());
|
const [phone, setPhone] = useState(remembered.phone || getLastPhone());
|
||||||
@@ -70,10 +96,22 @@ export default function LoginPage() {
|
|||||||
const [rememberAccount, setRememberAccount] = useState(remembered.remember);
|
const [rememberAccount, setRememberAccount] = useState(remembered.remember);
|
||||||
const [agreed, setAgreed] = useState(false);
|
const [agreed, setAgreed] = useState(false);
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [wxLoading, setWxLoading] = useState(false);
|
||||||
const [msg, setMsg] = useState('');
|
const [msg, setMsg] = useState('');
|
||||||
const [codeCooldown, setCodeCooldown] = useState(0);
|
const [codeCooldown, setCodeCooldown] = useState(0);
|
||||||
|
const [wxAuthorize, setWxAuthorize] = useState(false);
|
||||||
const agreementRef = useRef<HTMLLabelElement>(null);
|
const agreementRef = useRef<HTMLLabelElement>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchClientConfig()
|
||||||
|
.then((config) => setWxAuthorize(isWxAuthorizeEnabled(config)))
|
||||||
|
.catch(() => setWxAuthorize(false));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const quickName = savedProfile?.name ?? '城市合伙人';
|
||||||
|
const quickCompany = savedProfile?.companyName ?? '';
|
||||||
|
const quickPhone = savedProfile?.phone || phone;
|
||||||
|
|
||||||
function ensureAgreed() {
|
function ensureAgreed() {
|
||||||
if (!agreed) {
|
if (!agreed) {
|
||||||
setMsg('请先勾选并同意用户协议');
|
setMsg('请先勾选并同意用户协议');
|
||||||
@@ -140,6 +178,11 @@ export default function LoginPage() {
|
|||||||
saveRememberedSession(data);
|
saveRememberedSession(data);
|
||||||
applySession(data);
|
applySession(data);
|
||||||
persistRememberAccount(phone);
|
persistRememberAccount(phone);
|
||||||
|
if (isWechatEnv() && wxAuthorize) {
|
||||||
|
setMsg('登录成功,正在关联微信…');
|
||||||
|
await bindPartnerWechatAfterSmsLogin();
|
||||||
|
return;
|
||||||
|
}
|
||||||
await finishLoginNavigate();
|
await finishLoginNavigate();
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
setMsg(formatPartnerError(e));
|
setMsg(formatPartnerError(e));
|
||||||
@@ -148,6 +191,116 @@ export default function LoginPage() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function wechatLogin() {
|
||||||
|
if (!ensureAgreed()) return;
|
||||||
|
setMsg('');
|
||||||
|
if (!isWechatEnv()) {
|
||||||
|
setMsg(WECHAT_INAPP_REQUIRED_MSG);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const canUseWechat = await canPartnerUseWechatLogin({
|
||||||
|
profile: savedProfile,
|
||||||
|
phone,
|
||||||
|
});
|
||||||
|
if (!canUseWechat) {
|
||||||
|
setMsg(PARTNER_WECHAT_LOGIN_HINT);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setWxLoading(true);
|
||||||
|
try {
|
||||||
|
const session = await loginPartnerWithWechat();
|
||||||
|
if (session) {
|
||||||
|
applySession(session);
|
||||||
|
await finishLoginNavigate();
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
setMsg(formatWechatError(e));
|
||||||
|
} finally {
|
||||||
|
setWxLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (quick) {
|
||||||
|
const canWechatQuick =
|
||||||
|
wxAuthorize &&
|
||||||
|
isWechatEnv() &&
|
||||||
|
hasPartnerWxSession() &&
|
||||||
|
!!savedProfile &&
|
||||||
|
savedProfile.hasWechat === true;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="partner-auth-page partner-auth-page--quick">
|
||||||
|
<header className="partner-auth-brand">
|
||||||
|
<div className="partner-quick-avatar" style={{ width: 120, height: 120, margin: '0 auto 16px' }}>
|
||||||
|
<span className="material-symbols-outlined" style={{ fontSize: 48 }}>wine_bar</span>
|
||||||
|
</div>
|
||||||
|
<h1 className="partner-auth-title" style={{ fontSize: 20 }}>杜康好客</h1>
|
||||||
|
<p className="partner-auth-subtitle" style={{ fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase' }}>城市合伙人端</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section className="partner-glass-card">
|
||||||
|
<div className="partner-quick-badge">已识别账号</div>
|
||||||
|
<div className="partner-quick-avatar">
|
||||||
|
<span className="material-symbols-outlined">person</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ textAlign: 'center' }}>
|
||||||
|
<h2 className="headline-md">
|
||||||
|
{quickName}
|
||||||
|
{quickCompany ? (
|
||||||
|
<span className="text-muted body-md" style={{ fontWeight: 400 }}> ({quickCompany})</span>
|
||||||
|
) : null}
|
||||||
|
</h2>
|
||||||
|
<p className="text-muted body-md" style={{ letterSpacing: '0.1em', marginTop: 4 }}>
|
||||||
|
{quickPhone ? maskPhone(quickPhone) : '暂无已保存账号'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<nav style={{ width: '100%', maxWidth: 384, marginTop: 16 }}>
|
||||||
|
{msg && <p className="partner-auth-msg" style={{ color: 'var(--color-error, #d33)', fontSize: 13, textAlign: 'center', marginBottom: 12 }}>{msg}</p>}
|
||||||
|
<AgreementCheckbox
|
||||||
|
agreed={agreed}
|
||||||
|
onChange={setAgreed}
|
||||||
|
inputRef={agreementRef}
|
||||||
|
/>
|
||||||
|
{canWechatQuick ? (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="partner-btn-primary"
|
||||||
|
style={{ marginTop: 16 }}
|
||||||
|
disabled={wxLoading}
|
||||||
|
onClick={() => void wechatLogin()}
|
||||||
|
>
|
||||||
|
<span className="material-symbols-outlined">chat</span>
|
||||||
|
<span>{wxLoading ? '登录中...' : '微信一键登录'}</span>
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<p className="partner-auth-msg" style={{ textAlign: 'center', marginTop: 12, marginBottom: 12 }}>
|
||||||
|
{wxAuthorize && !isWechatEnv()
|
||||||
|
? '请在微信内打开以使用一键登录'
|
||||||
|
: '请使用验证码登录并绑定微信后,即可 7 天内免登录'}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{!canWechatQuick && (
|
||||||
|
<Link to="/login" className="partner-btn-primary" style={{ display: 'block', textAlign: 'center', textDecoration: 'none', marginTop: 12 }}>
|
||||||
|
验证码登录
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
<Link to="/login" className="partner-btn-ghost" style={{ display: 'block', marginTop: 12 }}>切换账号</Link>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<footer className="partner-auth-footer">
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||||
|
<span className="material-symbols-outlined">verified_user</span>
|
||||||
|
<span className="label-md" style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase' }}>
|
||||||
|
{canWechatQuick ? '微信验证 · 7 天内免登录' : 'Secured by Dukang Heritage'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="partner-auth-page">
|
<div className="partner-auth-page">
|
||||||
<div className="partner-auth-brand">
|
<div className="partner-auth-brand">
|
||||||
@@ -214,12 +367,29 @@ export default function LoginPage() {
|
|||||||
<span>{loading ? '登录中...' : '登录'}</span>
|
<span>{loading ? '登录中...' : '登录'}</span>
|
||||||
{!loading && <span className="material-symbols-outlined">arrow_forward</span>}
|
{!loading && <span className="material-symbols-outlined">arrow_forward</span>}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
{wxAuthorize && (
|
||||||
|
<>
|
||||||
|
<div className="partner-auth-divider"><span>其他登录方式</span></div>
|
||||||
|
<button type="button" className="partner-btn-wechat" onClick={() => void wechatLogin()} disabled={wxLoading}>
|
||||||
|
<svg viewBox="0 0 24 24" fill="#07C160" aria-hidden>
|
||||||
|
<path d="M8.25 4.5C4.52 4.5 1.5 7.04 1.5 10.17c0 1.78.98 3.37 2.5 4.48l-.63 1.88 2.19-1.09c.84.24 1.74.38 2.69.38.25 0 .5 0 .75-.03-.16-.53-.25-1.09-.25-1.66 0-3.13 3.02-5.67 6.75-5.67.57 0 1.13.06 1.66.17C15.17 6.13 12 4.5 8.25 4.5zm10.5 6.33c-3.11 0-5.62 2.12-5.62 4.73 0 2.61 2.51 4.73 5.62 4.73.79 0 1.54-.14 2.24-.38l1.83.91-.53-1.57c1.27-.92 2.08-2.25 2.08-3.73 0-2.61-2.51-4.73-5.62-4.73z" />
|
||||||
|
</svg>
|
||||||
|
<span>{wxLoading ? '登录中...' : '微信一键登录'}</span>
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
<p className="partner-auth-msg" style={{ textAlign: 'center' }}>
|
<p className="partner-auth-msg" style={{ textAlign: 'center' }}>
|
||||||
手机号验证成功后,7 天内无需再次输入验证码
|
手机号验证成功后,7 天内无需再次输入验证码;微信内登录将自动关联微信
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
{hasPartnerWxSession() && savedProfile?.hasWechat && (
|
||||||
|
<Link to="/login?quick=1" className="partner-link">微信快捷登录</Link>
|
||||||
|
)}
|
||||||
|
|
||||||
<footer className="partner-auth-footer">
|
<footer className="partner-auth-footer">
|
||||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||||
<span className="material-symbols-outlined">verified_user</span>
|
<span className="material-symbols-outlined">verified_user</span>
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import { Navigate, useLocation } from 'react-router-dom';
|
import { Navigate, useLocation } from 'react-router-dom';
|
||||||
|
import { getStoreProfile, hasShopWxSession } from '../lib/api';
|
||||||
import { useStoreSession } from '../contexts/StoreSessionContext';
|
import { useStoreSession } from '../contexts/StoreSessionContext';
|
||||||
|
|
||||||
const PUBLIC_PATHS = new Set(['/login', '/legal/user-agreement', '/legal/privacy-policy']);
|
const PUBLIC_PATHS = new Set(['/login', '/legal/user-agreement', '/legal/privacy-policy']);
|
||||||
@@ -25,6 +26,10 @@ export default function AuthGate({ children }: { children: React.ReactNode }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (!authenticated && !PUBLIC_PATHS.has(location.pathname)) {
|
if (!authenticated && !PUBLIC_PATHS.has(location.pathname)) {
|
||||||
|
const profile = getStoreProfile();
|
||||||
|
if (profile && hasShopWxSession() && location.pathname !== '/login') {
|
||||||
|
return <Navigate to="/login?quick=1" replace state={{ from: location }} />;
|
||||||
|
}
|
||||||
return <Navigate to="/login" replace state={{ from: location }} />;
|
return <Navigate to="/login" replace state={{ from: location }} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -7,6 +7,8 @@ import {
|
|||||||
useState,
|
useState,
|
||||||
type ReactNode,
|
type ReactNode,
|
||||||
} from 'react';
|
} from 'react';
|
||||||
|
import { stripOAuthParamsFromLocation } from '@dukang/weixin-sdk';
|
||||||
|
import { isWxAuthorizeEnabled } from '@dukang/shared-types';
|
||||||
import {
|
import {
|
||||||
clearAuth,
|
clearAuth,
|
||||||
ensureSession,
|
ensureSession,
|
||||||
@@ -14,6 +16,12 @@ import {
|
|||||||
type ShopSessionPayload,
|
type ShopSessionPayload,
|
||||||
type StoreSessionStore,
|
type StoreSessionStore,
|
||||||
} from '../lib/api';
|
} from '../lib/api';
|
||||||
|
import {
|
||||||
|
fetchClientConfig,
|
||||||
|
handleShopWechatCallback,
|
||||||
|
handleShopWechatLoginResult,
|
||||||
|
} from '../lib/wechat-auth';
|
||||||
|
import { isWechatEnv } from '../lib/weixin';
|
||||||
|
|
||||||
type StoreSessionContextValue = {
|
type StoreSessionContextValue = {
|
||||||
ready: boolean;
|
ready: boolean;
|
||||||
@@ -26,6 +34,12 @@ type StoreSessionContextValue = {
|
|||||||
|
|
||||||
const StoreSessionContext = createContext<StoreSessionContextValue | null>(null);
|
const StoreSessionContext = createContext<StoreSessionContextValue | null>(null);
|
||||||
|
|
||||||
|
function deriveSelectStore(session: ShopSessionPayload, nextStore: StoreSessionStore | null) {
|
||||||
|
const storeId = nextStore?.storeId || session.selectedStoreId || '';
|
||||||
|
const stores = session.stores ?? nextStore?.stores ?? [];
|
||||||
|
return stores.length > 1 && !storeId;
|
||||||
|
}
|
||||||
|
|
||||||
export function StoreSessionProvider({ children }: { children: ReactNode }) {
|
export function StoreSessionProvider({ children }: { children: ReactNode }) {
|
||||||
const [ready, setReady] = useState(false);
|
const [ready, setReady] = useState(false);
|
||||||
const [authenticated, setAuthenticated] = useState(false);
|
const [authenticated, setAuthenticated] = useState(false);
|
||||||
@@ -43,9 +57,7 @@ export function StoreSessionProvider({ children }: { children: ReactNode }) {
|
|||||||
}
|
}
|
||||||
: null;
|
: null;
|
||||||
setStore(nextStore);
|
setStore(nextStore);
|
||||||
const storeId = nextStore?.storeId || session.selectedStoreId || '';
|
setNeedsSelectStore(deriveSelectStore(session, nextStore));
|
||||||
const stores = session.stores ?? nextStore?.stores ?? [];
|
|
||||||
setNeedsSelectStore(stores.length > 1 && !storeId);
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const resetSession = useCallback(() => {
|
const resetSession = useCallback(() => {
|
||||||
@@ -59,6 +71,23 @@ export function StoreSessionProvider({ children }: { children: ReactNode }) {
|
|||||||
let cancelled = false;
|
let cancelled = false;
|
||||||
(async () => {
|
(async () => {
|
||||||
try {
|
try {
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
if (isWechatEnv() && params.get('code')) {
|
||||||
|
try {
|
||||||
|
const config = await fetchClientConfig();
|
||||||
|
if (isWxAuthorizeEnabled(config)) {
|
||||||
|
const result = await handleShopWechatCallback();
|
||||||
|
if (result && !cancelled) {
|
||||||
|
const session = handleShopWechatLoginResult(result);
|
||||||
|
if (session) applySession(session);
|
||||||
|
}
|
||||||
|
stripOAuthParamsFromLocation();
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
stripOAuthParamsFromLocation();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const result = await ensureSession();
|
const result = await ensureSession();
|
||||||
if (cancelled) return;
|
if (cancelled) return;
|
||||||
setAuthenticated(result.authenticated);
|
setAuthenticated(result.authenticated);
|
||||||
@@ -73,7 +102,7 @@ export function StoreSessionProvider({ children }: { children: ReactNode }) {
|
|||||||
return () => {
|
return () => {
|
||||||
cancelled = true;
|
cancelled = true;
|
||||||
};
|
};
|
||||||
}, [resetSession]);
|
}, [applySession, resetSession]);
|
||||||
|
|
||||||
const value = useMemo(
|
const value = useMemo(
|
||||||
() => ({ ready, authenticated, needsSelectStore, store, applySession, resetSession }),
|
() => ({ ready, authenticated, needsSelectStore, store, applySession, resetSession }),
|
||||||
|
|||||||
@@ -1,14 +1,39 @@
|
|||||||
import { useRef, useState, type RefObject } from 'react';
|
import { useEffect, useRef, useState, type RefObject } from 'react';
|
||||||
import { Link, useNavigate } from 'react-router-dom';
|
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
|
||||||
import AppImage from '@dukang/shared-ui/AppImage';
|
import AppImage from '@dukang/shared-ui/AppImage';
|
||||||
|
import { isWxAuthorizeEnabled } from '@dukang/shared-types';
|
||||||
|
import { stripOAuthParamsFromLocation } from '@dukang/weixin-sdk';
|
||||||
import { useStoreSession } from '../contexts/StoreSessionContext';
|
import { useStoreSession } from '../contexts/StoreSessionContext';
|
||||||
import {
|
import {
|
||||||
getLastPhone,
|
getLastPhone,
|
||||||
|
getStoreProfile,
|
||||||
|
hasShopWxSession,
|
||||||
request,
|
request,
|
||||||
saveRememberedSession,
|
saveRememberedSession,
|
||||||
type ShopSessionPayload,
|
type ShopSessionPayload,
|
||||||
} from '../lib/api';
|
} from '../lib/api';
|
||||||
import { routeAfterShopLogin } from './SelectStorePage';
|
import { routeAfterShopLogin } from './SelectStorePage';
|
||||||
|
import {
|
||||||
|
bindShopWechatAfterSmsLogin,
|
||||||
|
fetchClientConfig,
|
||||||
|
handleShopWechatCallback,
|
||||||
|
handleShopWechatLoginResult,
|
||||||
|
loginShopWithWechat,
|
||||||
|
} from '../lib/wechat-auth';
|
||||||
|
import { isWechatEnv } from '../lib/weixin';
|
||||||
|
|
||||||
|
function maskPhone(phone: string) {
|
||||||
|
if (phone.length < 7) return phone;
|
||||||
|
return `${phone.slice(0, 3)} **** ${phone.slice(-4)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatWechatError(e: unknown): string {
|
||||||
|
const text = e instanceof Error ? e.message : '微信登录失败';
|
||||||
|
if (text.includes('首次登录') || text.includes('手机验证码')) {
|
||||||
|
return '该微信尚未绑定门店账号,请先使用手机验证码登录,登录后将自动关联微信';
|
||||||
|
}
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
|
||||||
function ShopAgreementCheckbox({
|
function ShopAgreementCheckbox({
|
||||||
agreed,
|
agreed,
|
||||||
@@ -43,14 +68,44 @@ function ShopAgreementCheckbox({
|
|||||||
export default function LoginPage() {
|
export default function LoginPage() {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { applySession } = useStoreSession();
|
const { applySession } = useStoreSession();
|
||||||
|
const [params, setSearchParams] = useSearchParams();
|
||||||
|
const quick = params.get('quick') === '1';
|
||||||
|
const savedProfile = getStoreProfile();
|
||||||
const [phone, setPhone] = useState(getLastPhone());
|
const [phone, setPhone] = useState(getLastPhone());
|
||||||
const [code, setCode] = useState('');
|
const [code, setCode] = useState('');
|
||||||
const [agreed, setAgreed] = useState(false);
|
const [agreed, setAgreed] = useState(false);
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [wxLoading, setWxLoading] = useState(false);
|
||||||
const [msg, setMsg] = useState('');
|
const [msg, setMsg] = useState('');
|
||||||
const [codeCooldown, setCodeCooldown] = useState(0);
|
const [codeCooldown, setCodeCooldown] = useState(0);
|
||||||
|
const [wxAuthorize, setWxAuthorize] = useState(false);
|
||||||
const agreementRef = useRef<HTMLLabelElement>(null);
|
const agreementRef = useRef<HTMLLabelElement>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchClientConfig()
|
||||||
|
.then((config) => setWxAuthorize(isWxAuthorizeEnabled(config)))
|
||||||
|
.catch(() => setWxAuthorize(false));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isWechatEnv() || !wxAuthorize || !params.get('code')) return;
|
||||||
|
void handleShopWechatCallback()
|
||||||
|
.then((result) => {
|
||||||
|
if (!result) return;
|
||||||
|
const session = handleShopWechatLoginResult(result);
|
||||||
|
if (session) {
|
||||||
|
applySession(session);
|
||||||
|
stripOAuthParamsFromLocation();
|
||||||
|
setSearchParams({}, { replace: true });
|
||||||
|
routeAfterShopLogin(session, navigate);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((e) => setMsg(formatWechatError(e)));
|
||||||
|
}, [applySession, navigate, params, setSearchParams, wxAuthorize]);
|
||||||
|
|
||||||
|
const quickStoreName = savedProfile?.storeName ?? '门店管理中心';
|
||||||
|
const quickPhone = savedProfile?.phone || phone;
|
||||||
|
|
||||||
function ensureAgreed() {
|
function ensureAgreed() {
|
||||||
if (!agreed) {
|
if (!agreed) {
|
||||||
setMsg('请先阅读并同意用户协议');
|
setMsg('请先阅读并同意用户协议');
|
||||||
@@ -95,6 +150,11 @@ export default function LoginPage() {
|
|||||||
});
|
});
|
||||||
saveRememberedSession(data);
|
saveRememberedSession(data);
|
||||||
applySession(data);
|
applySession(data);
|
||||||
|
if (isWechatEnv() && wxAuthorize) {
|
||||||
|
setMsg('登录成功,正在关联微信…');
|
||||||
|
await bindShopWechatAfterSmsLogin();
|
||||||
|
return;
|
||||||
|
}
|
||||||
routeAfterShopLogin(data, navigate);
|
routeAfterShopLogin(data, navigate);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
setMsg(e instanceof Error ? e.message : '登录失败');
|
setMsg(e instanceof Error ? e.message : '登录失败');
|
||||||
@@ -103,6 +163,103 @@ export default function LoginPage() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function wechatLogin() {
|
||||||
|
if (!ensureAgreed()) return;
|
||||||
|
setMsg('');
|
||||||
|
if (!isWechatEnv()) {
|
||||||
|
setMsg('请在微信内打开以使用微信一键登录');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setWxLoading(true);
|
||||||
|
try {
|
||||||
|
const session = await loginShopWithWechat();
|
||||||
|
if (session) {
|
||||||
|
applySession(session);
|
||||||
|
routeAfterShopLogin(session, navigate);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
setMsg(formatWechatError(e));
|
||||||
|
} finally {
|
||||||
|
setWxLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (quick) {
|
||||||
|
const canWechatQuick = wxAuthorize && isWechatEnv() && hasShopWxSession() && !!savedProfile;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="shop-quick-login-page">
|
||||||
|
<header className="shop-quick-header">
|
||||||
|
<AppImage src="/logo.png" alt="杜康好客" wrapperClassName="shop-quick-logo" fit="contain" />
|
||||||
|
<h1 className="shop-quick-welcome">欢迎回来</h1>
|
||||||
|
<div className="shop-quick-welcome-line" />
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section className="shop-quick-store-card">
|
||||||
|
<div className="shop-quick-store-inner">
|
||||||
|
<div className="shop-quick-store-icon">
|
||||||
|
<span className="material-symbols-outlined shop-fill-icon">storefront</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="shop-quick-store-name">{quickStoreName}</h2>
|
||||||
|
<p className="shop-quick-store-phone">{maskPhone(quickPhone)}</p>
|
||||||
|
</div>
|
||||||
|
<span className="shop-quick-verified">
|
||||||
|
<span className="material-symbols-outlined shop-fill-icon" style={{ fontSize: 14 }}>verified_user</span>
|
||||||
|
认证门店
|
||||||
|
</span>
|
||||||
|
<div className="shop-quick-switch">
|
||||||
|
<Link to="/login">
|
||||||
|
<span className="material-symbols-outlined" style={{ fontSize: 18 }}>sync</span>
|
||||||
|
切换账号
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div className="shop-quick-actions">
|
||||||
|
{msg && <p className="shop-login-msg">{msg}</p>}
|
||||||
|
<ShopAgreementCheckbox
|
||||||
|
agreed={agreed}
|
||||||
|
onChange={setAgreed}
|
||||||
|
labelRef={agreementRef}
|
||||||
|
/>
|
||||||
|
{canWechatQuick ? (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="shop-quick-login-btn shop-quick-login-btn--wechat"
|
||||||
|
disabled={wxLoading}
|
||||||
|
onClick={() => void wechatLogin()}
|
||||||
|
>
|
||||||
|
<span className="material-symbols-outlined">chat</span>
|
||||||
|
<span>{wxLoading ? '登录中...' : '微信一键登录'}</span>
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<p className="shop-login-msg" style={{ textAlign: 'center' }}>
|
||||||
|
{wxAuthorize && !isWechatEnv()
|
||||||
|
? '请在微信内打开以使用一键登录'
|
||||||
|
: '请使用验证码登录并绑定微信后,即可 7 天内免登录'}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{!canWechatQuick && (
|
||||||
|
<Link to="/login" className="shop-quick-login-btn" style={{ textAlign: 'center', textDecoration: 'none' }}>
|
||||||
|
验证码登录
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
<div className="shop-quick-secure">
|
||||||
|
<span className="material-symbols-outlined" style={{ fontSize: 16 }}>lock</span>
|
||||||
|
<span>{canWechatQuick ? '微信验证 · 7 天内免登录' : '加密环境安全登录中'}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer className="shop-quick-footer">
|
||||||
|
<p className="shop-login-footer-brand">SECURED BY DUKANG HERITAGE</p>
|
||||||
|
<p style={{ fontSize: 10, fontFamily: 'var(--font-label)' }}>© 2024 杜康酒业门店管理系统</p>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="shop-login-page">
|
<div className="shop-login-page">
|
||||||
<header className="shop-login-hero">
|
<header className="shop-login-hero">
|
||||||
@@ -172,8 +329,29 @@ export default function LoginPage() {
|
|||||||
<span>{loading ? '登录中...' : '登录'}</span>
|
<span>{loading ? '登录中...' : '登录'}</span>
|
||||||
{!loading && <span className="material-symbols-outlined">arrow_forward</span>}
|
{!loading && <span className="material-symbols-outlined">arrow_forward</span>}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
{wxAuthorize && (
|
||||||
|
<>
|
||||||
|
<div className="shop-login-divider">
|
||||||
|
<span className="shop-login-divider-line" />
|
||||||
|
<span className="shop-login-divider-text">或者</span>
|
||||||
|
<span className="shop-login-divider-line" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="shop-login-wechat"
|
||||||
|
disabled={wxLoading}
|
||||||
|
onClick={() => void wechatLogin()}
|
||||||
|
>
|
||||||
|
<span className="material-symbols-outlined">chat</span>
|
||||||
|
<span>{wxLoading ? '登录中...' : '微信一键登录'}</span>
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
<p className="shop-login-msg" style={{ textAlign: 'center', marginTop: 12 }}>
|
<p className="shop-login-msg" style={{ textAlign: 'center', marginTop: 12 }}>
|
||||||
手机号验证成功后,7 天内无需再次输入验证码
|
手机号验证成功后,7 天内无需再次输入验证码;微信内登录将自动关联微信
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
@@ -183,6 +361,11 @@ export default function LoginPage() {
|
|||||||
<span className="material-symbols-outlined shop-fill-icon" style={{ opacity: 0.3, fontSize: 20, color: 'var(--color-outline)' }}>
|
<span className="material-symbols-outlined shop-fill-icon" style={{ opacity: 0.3, fontSize: 20, color: 'var(--color-outline)' }}>
|
||||||
security
|
security
|
||||||
</span>
|
</span>
|
||||||
|
{hasShopWxSession() && savedProfile && (
|
||||||
|
<p style={{ marginTop: 16, textAlign: 'center' }}>
|
||||||
|
<Link to="/login?quick=1" className="text-primary body-md">微信快捷登录</Link>
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user