airz-uniapp/packages/account/login/login.uvue

<template>
	<view class="login-page page-white" :style="pageStyle()">
		<view :style="statusStyle(44)"></view>
		<scroll-view scroll-y :style="contentStyle(44, false)">
			<view class="login-content">
				<BrandLogo />
				<text class="welcome">欢迎登录 AI融资</text>
				<text class="login-subtitle">智能评估，让融资更简单</text>
				<text class="form-heading">{{ mode == 'phone' ? '手机号登录 / 注册' : '密码登录' }}</text>
				<view class="input-box"><text class="input-prefix">+86</text><input v-model="phone" :disabled="loading || authenticated" type="number" maxlength="11" placeholder="请输入手机号" class="field-input" /></view>
				<view v-if="mode == 'password'" class="input-box"><input v-model="password" :disabled="loading || authenticated" password placeholder="请输入登录密码" class="field-input" /></view>
				<view v-if="mode == 'phone' && smsSent" class="input-box"><input v-model="smsCode" :disabled="loading || authenticated" type="number" maxlength="6" placeholder="请输入 6 位验证码" class="field-input" /><text class="countdown" @click="resendSms">{{ countdown > 0 ? countdown.toString() + 's 后重试' : '重新获取' }}</text></view>
				<text v-if="errorMessage.length > 0" class="error-message">{{ errorMessage }}</text>
				<button class="login-button" :disabled="loading" @click="login">{{ loading ? '处理中…' : (authenticated ? '确认同意记录并继续' : (mode == 'phone' ? (smsSent ? '登录' : '获取验证码') : '登录')) }}</button>
				<view class="mode-row"><text class="mode-link" @click="switchMode">{{ mode == 'phone' ? '密码登录' : '使用验证码登录' }}</text></view>
				<view class="other-login"><view class="line"></view><text class="other-text">其他登录方式</text><view class="line"></view></view>
				<view class="social-row"><view class="social-button" @click="socialLogin('微信')"><image class="social-icon" src="/packages/account/static/wechat.svg" mode="aspectFit" /><text class="social-label">微信</text></view><view class="social-button" @click="socialLogin('一键登录')"><image class="social-icon" src="/packages/account/static/quick-login.svg" mode="aspectFit" /><text class="social-label">一键登录</text></view></view>
				<view class="agreement"><view class="check-hit" @click="toggleAgreement"><view :class="agreed ? 'check checked' : 'check'"><text v-if="agreed" class="check-mark">✓</text></view></view><text class="agreement-copy">我已阅读并同意<text class="agreement-link" @click="showAgreement('terms')">《用户协议》</text>和<text class="agreement-link" @click="showAgreement('privacy')">《隐私政策》</text></text></view>
				<text v-if="agreementState == 'ready'" class="agreement-note">确认版本：用户协议 {{ terms.version }} / 隐私政策 {{ privacy.version }}</text>
				<text v-else class="agreement-note">{{ agreementNote }}</text>
				<text v-if="agreementState == 'error' || agreementState == 'unavailable'" class="agreement-retry" @click="loadAgreements">重新加载协议</text>
				<text v-if="authenticated" class="agreement-note">登录已成功。确认同意记录失败时，点击上方按钮以原请求重试，无需再次验证密码或短信。</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="uts">
	import { usePageLayout } from '@/services/layout.uts'
	import BrandLogo from '@/components/BrandLogo.uvue'
	import { API_BASE_URL, requestSmsCode, loginWithSms, loginWithPassword } from '@/packages/account/services/auth.uts'
	import { getSession } from '@/services/api.uts'
	import { Agreement, emptyAgreement, fetchAgreement, agreementRoute, agreementUnavailable, agreementChanged, grantConsent, consentRequestId, sameConsentSession } from '@/services/agreements.uts'
	import { consumeInitialLaunch } from '@/services/launch.uts'
    import { assistantReturnPath } from '@/services/assistant-return.uts'
    import { nextStepRoute } from '@/services/next-step-route.uts'
    import { reportRoute } from '@/services/report-route.uts'
    import { matchReturnPath } from '@/services/match-route.uts'
    let afterLoginUrl = '/pages/home/home'
    onLoad((options) => {
        consumeInitialLaunch()
        if (options?.['resumeLesson'] == '1' && /^[1-9][0-9]{0,9}$/.test(options?.['lessonId'] ?? '')) {
            afterLoginUrl = '/packages/content/lesson/lesson?id=' + options?.['lessonId']
        } else if (options?.['resumeMessages'] == '1') {
            afterLoginUrl = '/packages/account/messages/messages'
        } else if (options?.['resumeHelp'] == '1') {
            afterLoginUrl = '/packages/content/help/help?feedback=1'
            const feedbackId = options?.['feedbackId'] ?? ''
            if (/^[1-9][0-9]{0,9}$/.test(feedbackId) && !(feedbackId.length == 10 && feedbackId > '2147483647')) afterLoginUrl += '&feedbackId=' + feedbackId
        } else if (options?.['resumeAssistant'] == '1') {
            const target = assistantReturnPath(options?.['assessmentId'] ?? '', options?.['productIds'] ?? '', options?.['chatId'] ?? '', options?.['from'] ?? '', options?.['revisionId'] ?? '')
            if (target.length > 0) afterLoginUrl = target
        } else if (options?.['resumeNextStep'] == '1') {
            const target = nextStepRoute(options?.['assessmentId'] ?? '', options?.['productId'] ?? '', options?.['section'] ?? 'actions', options?.['revisionId'] ?? '')
            if (target.length > 0) afterLoginUrl = target
        } else if (options?.['resumeReport'] == '1') {
            const target = reportRoute(options?.['assessmentId'] ?? '', options?.['tab'] ?? 'overview', options?.['revisionId'] ?? '')
            if (target.length > 0) afterLoginUrl = target
        } else if (options?.['resumeMatch'] == '1') {
            const target = matchReturnPath(options?.['matchPage'] ?? '', options?.['assessmentId'] ?? '', options?.['productIds'] ?? '', options?.['revisionId'] ?? '', options?.['productId'] ?? '', options?.['group'] ?? 'eligible', options?.['tab'] ?? 'explanation', options?.['from'] ?? '')
            if (target.length > 0) afterLoginUrl = target
        } else if (options?.['resumePoints'] == '1') {
            afterLoginUrl = '/packages/account/points/points'
        } else if (options?.['resumeConsents'] == '1') {
            afterLoginUrl = '/packages/account/consents/consents'
        } else if (options?.['resumeAgreement'] == '1') {
            const target = agreementRoute(options?.['agreementCode'] ?? '')
            if (target.length > 0) afterLoginUrl = target
        }
    })
	const { statusStyle, contentStyle, pageStyle } = usePageLayout()
	const mode = ref('password')
	const phone = ref('')
	const password = ref('')
	const smsCode = ref('')
	const smsSent = ref(false)
	const countdown = ref(0)
	const loading = ref(false)
	const errorMessage = ref('')
	const agreed = ref(false)
	const authenticated = ref(false)
	const terms = ref<Agreement>(emptyAgreement()); const privacy = ref<Agreement>(emptyAgreement())
	const agreementState = ref('loading'); const agreementNote = ref('正在加载用户协议与隐私政策…')
	const isDemo = API_BASE_URL.length == 0
	let pageVisible = false; let generation = 0; let agreementGeneration = 0; let accountTimer = 0; let authToken = ''; let authUserId = ''
	type LoginConsentCommand = { agreement: Agreement, requestId: string }
	let pendingConsents: LoginConsentCommand[] = []; let confirmedCount = 0; let selectedTerms: Agreement | null = null; let selectedPrivacy: Agreement | null = null
	const showAgreement = (code: string) => { const item = code == 'terms' ? terms.value : privacy.value; const url = agreementRoute(code, item.version); if (pageVisible && url.length > 0) uni.navigateTo({ url }) }
	const sameAuthentication = (): boolean => { const current = getSession(); return sameConsentSession(authToken, authUserId, current?.getString('token') ?? '', current?.getString('userId') ?? '') }
	const clearAuthentication = () => { authToken = ''; authUserId = ''; authenticated.value = false; pendingConsents = []; confirmedCount = 0; agreed.value = false; selectedTerms = null; selectedPrivacy = null; generation++ }
	const toggleAgreement = () => {
		if (loading.value || agreementState.value != 'ready' || pendingConsents.length > 0) return
		agreed.value = !agreed.value
		selectedTerms = agreed.value ? terms.value : null; selectedPrivacy = agreed.value ? privacy.value : null
	}
	async function loadAgreements() {
		if (!pageVisible || loading.value || pendingConsents.length > 0) return
		const request = ++agreementGeneration; agreementState.value = 'loading'; agreementNote.value = '正在加载用户协议与隐私政策…'
		let nextTerms: Agreement | null = null; let nextPrivacy: Agreement | null = null; let missing = false; let failure = ''
		try { nextTerms = await fetchAgreement('terms') } catch (err) { if (agreementUnavailable(err)) missing = true; else failure = err instanceof Error ? err.message : '协议加载失败' }
		try { nextPrivacy = await fetchAgreement('privacy') } catch (err) { if (agreementUnavailable(err)) missing = true; else failure = err instanceof Error ? err.message : '协议加载失败' }
		if (!pageVisible || request != agreementGeneration) return
		if (failure.length > 0 || missing || nextTerms == null || nextPrivacy == null) {
			agreed.value = false; selectedTerms = null; selectedPrivacy = null; terms.value = emptyAgreement(); privacy.value = emptyAgreement()
			agreementState.value = failure.length > 0 ? 'error' : 'unavailable'
			agreementNote.value = failure.length > 0 ? failure + '，请重新加载协议。' : '用户协议或隐私政策尚未正式发布，暂不记录同意；现有账户可使用密码登录。'
			return
		}
		if (selectedTerms?.version != nextTerms!.version || selectedTerms?.contentHash != nextTerms!.contentHash || selectedPrivacy?.version != nextPrivacy!.version || selectedPrivacy?.contentHash != nextPrivacy!.contentHash) { agreed.value = false; selectedTerms = null; selectedPrivacy = null }
		terms.value = nextTerms!; privacy.value = nextPrivacy!; agreementState.value = 'ready'; agreementNote.value = ''
	}
	const agreementReadyForLogin = (): boolean => {
		if (agreementState.value == 'unavailable' && mode.value == 'password') return true
		if (agreementState.value != 'ready') { errorMessage.value = agreementState.value == 'unavailable' ? '协议未正式发布，请使用现有账户密码登录' : '请先重新加载用户协议与隐私政策'; return false }
		if (!agreed.value || selectedTerms == null || selectedPrivacy == null) { errorMessage.value = '请先阅读并勾选用户协议与隐私政策'; return false }
		return true
	}
	let countdownTimer = 0
	watch(phone, () => {
		smsSent.value = false; smsCode.value = ''; countdown.value = 0; errorMessage.value = ''
		clearInterval(countdownTimer)
	})
	const switchMode = () => { if (loading.value || authenticated.value) return; mode.value = mode.value == 'phone' ? 'password' : 'phone'; errorMessage.value = '' }
	const socialLogin = (provider: string) => { uni.showModal({ title: provider + '暂未开放', content: '请先使用手机号登录。该登录方式将在正式服务接入后开放。', showCancel: false, confirmText: '我知道了' }) }
	const validPhone = (): boolean => {
		if (!/^1[3-9][0-9]{9}$/.test(phone.value)) { errorMessage.value = '请输入正确的 11 位手机号'; return false }
		return true
	}
	const startCountdown = () => {
		countdown.value = 60
		clearInterval(countdownTimer)
		countdownTimer = setInterval(() => {
			if (countdown.value <= 1) { countdown.value = 0; clearInterval(countdownTimer) } else countdown.value -= 1
		}, 1000)
	}
	async function confirmLoginConsents(request: number) {
		if (!pageVisible || request != generation || !sameAuthentication()) throw new Error('登录状态已变化，请重新登录')
		if (pendingConsents.length == 0 && agreementState.value == 'ready') {
			if (!agreed.value || selectedTerms == null || selectedPrivacy == null) throw new Error('请重新阅读并确认当前协议')
			pendingConsents = [{ agreement: selectedTerms!, requestId: consentRequestId() }, { agreement: selectedPrivacy!, requestId: consentRequestId() }]; confirmedCount = 0
		}
		while (confirmedCount < pendingConsents.length) {
			const command = pendingConsents[confirmedCount]
			await grantConsent(command.agreement, command.requestId)
			if (!pageVisible || request != generation || !sameAuthentication()) return
			confirmedCount++
		}
		if (pageVisible && request == generation && sameAuthentication()) { pendingConsents = []; uni.redirectTo({ url: afterLoginUrl }) }
	}
	const resendSms = async () => {
		if (!pageVisible || authenticated.value || loading.value || countdown.value > 0 || !validPhone()) return
		if (!agreementReadyForLogin()) return
		const request = generation
		loading.value = true; errorMessage.value = ''
		try {
			if (!(await requestSmsCode(phone.value))) throw new Error('验证码发送失败，请稍后重试')
			if (!pageVisible || request != generation) return
			startCountdown()
			uni.showToast({ title: isDemo ? '请输入 6 位验证码' : '验证码已重新发送', icon: 'none' })
		} catch (error) { if (pageVisible && request == generation) errorMessage.value = error instanceof Error ? error.message : '验证码发送失败，请稍后重试' } finally { if (request == generation) loading.value = false }
	}
	const login = async () => {
		if (!pageVisible || loading.value) return
		errorMessage.value = ''
		if (authenticated.value && !sameAuthentication()) { clearAuthentication(); errorMessage.value = '登录状态已变化，请重新登录'; return }
		if (pendingConsents.length == 0 && !agreementReadyForLogin()) return
		if (!authenticated.value && !validPhone()) return
		const request = ++generation
		loading.value = true
		try {
			if (authenticated.value) { await confirmLoginConsents(request); return }
			let token = ''
			if (mode.value == 'phone') {
				if (!smsSent.value) {
					if (!(await requestSmsCode(phone.value))) throw new Error('验证码发送失败，请稍后重试')
					if (!pageVisible || request != generation) return
					smsSent.value = true; startCountdown()
					uni.showToast({ title: isDemo ? '请输入 6 位验证码' : '验证码已发送', icon: 'none' })
					return
				} else {
					if (!/^[0-9]{6}$/.test(smsCode.value)) throw new Error('请输入 6 位数字验证码')
					token = await loginWithSms(phone.value, smsCode.value)
				}
			} else {
				if (password.value.length < 6) throw new Error('密码至少需要 6 位')
				token = await loginWithPassword(phone.value, password.value)
			}
			if (!pageVisible || request != generation) return
			const session = getSession()
			if (session?.getString('token') != token) throw new Error('登录状态已变化，请重新登录')
			authToken = token; authUserId = session?.getString('userId') ?? ''; authenticated.value = true
			await confirmLoginConsents(request)
		} catch (err) {
			if (!pageVisible || request != generation) return
			if (agreementChanged(err)) { pendingConsents = []; confirmedCount = 0; agreed.value = false; selectedTerms = null; selectedPrivacy = null; loading.value = false; await loadAgreements(); errorMessage.value = '协议版本已更新，请重新阅读并勾选后继续。' }
			else errorMessage.value = (err instanceof Error ? err.message : '登录失败，请稍后重试') + (authenticated.value ? '；同意记录未确认，请点击按钮以原请求重试。' : '')
		} finally { if (request == generation) loading.value = false }
	}
	onShow(async () => {
		pageVisible = true
		if (authenticated.value && !sameAuthentication()) clearAuthentication()
		clearInterval(accountTimer); accountTimer = setInterval(() => { if (pageVisible && authenticated.value && !sameAuthentication()) { clearAuthentication(); loading.value = false; errorMessage.value = '登录状态已变化，请重新登录'; loadAgreements() } }, 1000)
		if (pendingConsents.length == 0) await loadAgreements()
	})
	const hidePage = () => { pageVisible = false; generation++; agreementGeneration++; loading.value = false; clearInterval(accountTimer) }
	onHide(() => hidePage())
	onUnload(() => { hidePage(); clearInterval(countdownTimer); clearAuthentication() })
	onUnmounted(() => { clearInterval(countdownTimer); clearInterval(accountTimer) })
</script>

<style>
	.login-content { padding: 20rpx 40rpx 48rpx; }
	.welcome { font-size: 42rpx; line-height: 60rpx; font-weight: 800; margin-top: 38rpx; color: #152443; }
	.login-subtitle { font-size: 26rpx; color: #748198; line-height: 40rpx; margin-top: 8rpx; }
	.form-heading { margin-top: 54rpx; font-size: 28rpx; font-weight: 600; color: #22324a; }
	.input-box { height: 96rpx; margin-top: 22rpx; border: 1rpx solid #dce4ef; border-radius: 16rpx; padding: 0 24rpx; flex-direction: row; align-items: center; background-color: #fafcff; }
	.input-prefix { font-size: 28rpx; color: #31415a; margin-right: 22rpx; flex-shrink: 0; }
	.field-input { flex: 1; min-width: 0; font-size: 28rpx; color: #17243c; }
	.countdown { text-align: right; color: #0868f7; font-size: 24rpx; flex-shrink: 0; margin-left: 12rpx; }
	.error-message { margin-top: 16rpx; color: #d64040; font-size: 24rpx; line-height: 36rpx; }
	.login-button { height: 92rpx; line-height: 92rpx; margin-top: 28rpx; border-radius: 16rpx; color: #fff; font-size: 30rpx; font-weight: 600; background-color: #0868f7; }
	.mode-row { flex-direction: row; justify-content: space-between; align-items: center; margin-top: 12rpx; }
	.mode-link { padding: 16rpx 0; color: #31415a; font-size: 26rpx; }
	.other-login { margin-top: 66rpx; flex-direction: row; align-items: center; justify-content: center; }
	.other-text { font-size: 24rpx; color: #8490a3; flex-shrink: 0; }
	.line { height: 1rpx; background-color: #e5eaf1; flex: 1; margin: 0 20rpx; }
	.social-row { flex-direction: row; justify-content: center; margin-top: 28rpx; }
	.social-button { width: 150rpx; min-height: 112rpx; align-items: center; justify-content: center; margin: 0 26rpx; }
	.social-icon { width: 62rpx; height: 62rpx; flex-shrink: 0; }
	.social-label { color: #58677e; font-size: 24rpx; margin-top: 12rpx; }
	.agreement { margin-top: 52rpx; flex-direction: row; align-items: flex-start; }
	.check-hit { width: 44rpx; min-height: 44rpx; flex-shrink: 0; justify-content: center; }
	.check { width: 30rpx; height: 30rpx; border: 2rpx solid #9aa8ba; border-radius: 6rpx; align-items: center; justify-content: center; }
	.checked { background-color: #0868f7; border-color: #0868f7; }
	.check-mark { font-size: 23rpx; color: #fff; }
	.agreement-copy { flex: 1; min-width: 0; color: #748198; font-size: 24rpx; line-height: 42rpx; }
	.agreement-link { color: #0868f7; font-size: 24rpx; line-height: 42rpx; }
	.agreement-note { color: #748198; font-size: 23rpx; line-height: 38rpx; margin-top: 16rpx; }
	.agreement-retry { color: #0868f7; font-size: 24rpx; padding: 18rpx 0; }
</style>