Yuzhiran Dev
415 lines
15 KiB
Vue
415 lines
15 KiB
Vue
<template>
|
||
<view class="login-page page-layout">
|
||
<view class="bg-orb orb-1"></view>
|
||
<view class="bg-orb orb-2"></view>
|
||
<view class="bg-orb orb-3"></view>
|
||
|
||
<view class="login-container">
|
||
<view class="logo-wrap">
|
||
<view class="logo-ring"></view>
|
||
<text class="logo-text">AI</text>
|
||
</view>
|
||
<text class="app-title">宇之然 AI 维度</text>
|
||
<text class="app-subtitle">从 5 个维度系统理解人工智能</text>
|
||
|
||
<view class="tab-switch">
|
||
<text class="tab-item" :class="{ active: activeTab === 'login' }" @click="activeTab = 'login'">登录</text>
|
||
<text class="tab-item" :class="{ active: activeTab === 'register' }" @click="activeTab = 'register'">注册</text>
|
||
</view>
|
||
|
||
<!-- 登录表单 -->
|
||
<view class="form-card" v-if="activeTab === 'login'">
|
||
<view class="form-item">
|
||
<text class="form-label">邮箱 / 用户名</text>
|
||
<input class="form-input" v-model="loginForm.email" placeholder="请输入邮箱或用户名" @input="loginForm.email = $event.detail.value.trim()" />
|
||
</view>
|
||
<view class="form-item">
|
||
<text class="form-label">密码</text>
|
||
<input class="form-input" v-model="loginForm.password" type="password" placeholder="请输入密码" />
|
||
</view>
|
||
|
||
<!-- 登录协议勾选 -->
|
||
<view class="agreement-row">
|
||
<view class="agreement-checkbox" :class="{ checked: loginAgreed }" @click="loginAgreed = !loginAgreed">
|
||
<text v-if="loginAgreed">✓</text>
|
||
</view>
|
||
<text class="agreement-text">
|
||
登录即表示同意
|
||
<text class="agreement-link" @click.stop="openAgreement('terms')">《用户协议》</text>
|
||
和
|
||
<text class="agreement-link" @click.stop="openAgreement('privacy')">《隐私政策》</text>
|
||
</text>
|
||
</view>
|
||
|
||
<view class="submit-btn" :class="{ loading: loading, disabled: !loginAgreed }" @click="handleLogin">
|
||
<text>{{ loading ? '登录中...' : '登录' }}</text>
|
||
</view>
|
||
<!-- 微信小程序一键登录 -->
|
||
<view class="wx-login-row" v-if="isMiniApp">
|
||
<view class="wx-login-btn" @click="wechatLogin">
|
||
<text class="wx-icon">💬</text>
|
||
<text>微信一键登录</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 注册表单 -->
|
||
<view class="form-card" v-if="activeTab === 'register'">
|
||
<view class="form-item">
|
||
<text class="form-label">邮箱 <text style="color:var(--color-vip);font-size:11px;">*</text></text>
|
||
<input class="form-input" v-model="registerForm.email" type="email" placeholder="请输入邮箱地址" @input="registerForm.email = $event.detail.value.trim(); verifyCodeSent = false" />
|
||
</view>
|
||
<view class="form-item">
|
||
<text class="form-label">昵称 <text style="color:var(--text-muted);font-size:11px;">（选填）</text></text>
|
||
<input class="form-input" v-model="registerForm.nickName" placeholder="显示名称，留空自动生成" />
|
||
</view>
|
||
<view class="form-item">
|
||
<text class="form-label">密码 <text style="color:var(--color-vip);font-size:11px;">*</text></text>
|
||
<input class="form-input" v-model="registerForm.password" type="password" placeholder="至少 6 位" />
|
||
</view>
|
||
|
||
<!-- 邮箱验证码 -->
|
||
<view class="form-item">
|
||
<text class="form-label">验证码 <text style="color:var(--color-vip);font-size:11px;">*</text></text>
|
||
<view class="verify-row">
|
||
<input class="form-input verify-input" v-model="registerForm.verifyCode" type="text" maxlength="6" placeholder="输入6位验证码" />
|
||
<view class="send-code-btn" :class="{ disabled: codeSending || codeCountdown > 0 }" @click="handleSendCode">
|
||
<text>{{ codeCountdown > 0 ? codeCountdown + 's' : (codeSending ? '发送中...' : '获取验证码') }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 用户协议勾选 -->
|
||
<view class="agreement-row">
|
||
<view class="agreement-checkbox" :class="{ checked: agreed }" @click="agreed = !agreed">
|
||
<text v-if="agreed">✓</text>
|
||
</view>
|
||
<text class="agreement-text">
|
||
我已阅读并同意
|
||
<text class="agreement-link" @click.stop="openAgreement('terms')">《用户协议》</text>
|
||
和
|
||
<text class="agreement-link" @click.stop="openAgreement('privacy')">《隐私政策》</text>
|
||
</text>
|
||
</view>
|
||
|
||
<view class="submit-btn" :class="{ loading: loading, disabled: !agreed }" @click="handleRegister">
|
||
<text>{{ loading ? '注册中...' : '注册' }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="footer-info">
|
||
<text>© 2026 宇之然 · AI 维度</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { useUserStore } from '@/stores/index'
|
||
|
||
const isMiniApp = ref(false)
|
||
try {
|
||
const sysInfo = uni.getSystemInfoSync()
|
||
if (sysInfo && sysInfo.version && sysInfo.platform) {
|
||
isMiniApp.value = true
|
||
}
|
||
} catch (e) {}
|
||
|
||
const activeTab = ref('login')
|
||
const loading = ref(false)
|
||
const agreed = ref(false)
|
||
const loginAgreed = ref(false)
|
||
const codeSending = ref(false)
|
||
const codeCountdown = ref(0)
|
||
const verifyCodeSent = ref(false)
|
||
let countdownTimer = null
|
||
const userStore = useUserStore()
|
||
|
||
const loginForm = ref({ email: '', password: '' })
|
||
const registerForm = ref({ email: '', password: '', nickName: '', verifyCode: '' })
|
||
|
||
const BASE_URL = 'https://wdkj.yuzhiran.com.cn'
|
||
|
||
/** 发送邮箱验证码 */
|
||
async function handleSendCode() {
|
||
if (!agreed.value) {
|
||
uni.showToast({ title: '请先阅读并同意用户协议和隐私政策', icon: 'none' })
|
||
return
|
||
}
|
||
const email = registerForm.value.email
|
||
if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
||
uni.showToast({ title: '请先输入正确的邮箱', icon: 'none' })
|
||
return
|
||
}
|
||
if (codeSending.value || codeCountdown.value > 0) return
|
||
|
||
codeSending.value = true
|
||
try {
|
||
const resp = await fetch(`${BASE_URL}/api/auth/user/send-code`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ email })
|
||
})
|
||
const data = await resp.json()
|
||
if (!resp.ok) {
|
||
throw new Error(data.error?.message || data.message || '发送失败')
|
||
}
|
||
verifyCodeSent.value = true
|
||
uni.showToast({ title: '验证码已发送', icon: 'success' })
|
||
// 开始倒计时
|
||
codeCountdown.value = 60
|
||
countdownTimer = setInterval(() => {
|
||
codeCountdown.value--
|
||
if (codeCountdown.value <= 0) {
|
||
clearInterval(countdownTimer)
|
||
countdownTimer = null
|
||
}
|
||
}, 1000)
|
||
} catch (err) {
|
||
uni.showToast({ title: err.message || '发送失败，请稍后重试', icon: 'none' })
|
||
} finally {
|
||
codeSending.value = false
|
||
}
|
||
}
|
||
|
||
const wechatLogin = async () => {
|
||
if (!loginAgreed.value) {
|
||
uni.showToast({ title: '请先阅读并同意用户协议和隐私政策', icon: 'none' })
|
||
return
|
||
}
|
||
try {
|
||
const loginRes = await new Promise((resolve, reject) => {
|
||
uni.login({ success: resolve, fail: reject })
|
||
})
|
||
if (!loginRes.code) {
|
||
uni.showToast({ title: '登录失败，请重试', icon: 'none' })
|
||
return
|
||
}
|
||
loading.value = true
|
||
await userStore.login(loginRes.code, {})
|
||
uni.showToast({ title: '登录成功', icon: 'success' })
|
||
setTimeout(() => uni.switchTab({ url: '/pages/index/index' }), 1000)
|
||
} catch (err) {
|
||
uni.showToast({ title: '登录失败，请重试', icon: 'none' })
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
const handleLogin = async () => {
|
||
if (!loginAgreed.value) {
|
||
uni.showToast({ title: '请阅读并同意用户协议和隐私政策', icon: 'none' })
|
||
return
|
||
}
|
||
if (!loginForm.value.email || !loginForm.value.password) {
|
||
uni.showToast({ title: '请填写完整信息', icon: 'none' })
|
||
return
|
||
}
|
||
loading.value = true
|
||
try {
|
||
// 支持邮箱或用户名登录
|
||
const identifier = loginForm.value.email
|
||
const isEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(identifier)
|
||
const loginData = isEmail
|
||
? { email: identifier, password: loginForm.value.password }
|
||
: { username: identifier, password: loginForm.value.password }
|
||
await userStore.h5Login(loginData)
|
||
uni.showToast({ title: '登录成功', icon: 'success' })
|
||
setTimeout(() => uni.switchTab({ url: '/pages/index/index' }), 1000)
|
||
} catch (err) {
|
||
uni.showToast({ title: err.message || '登录失败', icon: 'none' })
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
const handleRegister = async () => {
|
||
if (!agreed.value) {
|
||
uni.showToast({ title: '请阅读并同意用户协议和隐私政策', icon: 'none' })
|
||
return
|
||
}
|
||
if (!registerForm.value.email) {
|
||
uni.showToast({ title: '请输入邮箱', icon: 'none' })
|
||
return
|
||
}
|
||
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(registerForm.value.email)) {
|
||
uni.showToast({ title: '邮箱格式不正确', icon: 'none' })
|
||
return
|
||
}
|
||
if (!registerForm.value.password) {
|
||
uni.showToast({ title: '请输入密码', icon: 'none' })
|
||
return
|
||
}
|
||
if (registerForm.value.password.length < 6) {
|
||
uni.showToast({ title: '密码至少 6 位', icon: 'none' })
|
||
return
|
||
}
|
||
if (!registerForm.value.verifyCode) {
|
||
uni.showToast({ title: '请输入验证码', icon: 'none' })
|
||
return
|
||
}
|
||
loading.value = true
|
||
try {
|
||
await userStore.h5Register(
|
||
registerForm.value.email,
|
||
registerForm.value.password,
|
||
registerForm.value.nickName || '',
|
||
registerForm.value.verifyCode
|
||
)
|
||
uni.showToast({ title: '注册成功', icon: 'success' })
|
||
setTimeout(() => uni.switchTab({ url: '/pages/index/index' }), 1000)
|
||
} catch (err) {
|
||
uni.showToast({ title: err.message || '注册失败', icon: 'none' })
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
function openAgreement(type) {
|
||
const pages = {
|
||
'terms': '/pages/agreement/agreement?type=terms',
|
||
'privacy': '/pages/agreement/agreement?type=privacy'
|
||
}
|
||
uni.navigateTo({ url: pages[type] || pages.terms })
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.login-page {
|
||
position: relative;
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--bg-primary);
|
||
|
||
.bg-orb {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
filter: blur(60px);
|
||
opacity: 0.3;
|
||
pointer-events: none;
|
||
}
|
||
.orb-1 { width: 200px; height: 200px; top: -50px; left: -50px; background: var(--dim1-color); }
|
||
.orb-2 { width: 160px; height: 160px; top: 30%; right: -40px; background: var(--dim3-color); }
|
||
.orb-3 { width: 180px; height: 180px; bottom: -60px; left: 30%; background: var(--dim5-color); }
|
||
|
||
.login-container {
|
||
position: relative; z-index: 1;
|
||
width: 100%; max-width: 360px;
|
||
padding: 0 32px;
|
||
display: flex; flex-direction: column; align-items: center;
|
||
}
|
||
|
||
.logo-wrap {
|
||
position: relative; width: 72px; height: 72px; margin-bottom: 16px;
|
||
.logo-ring {
|
||
position: absolute; inset: 0; border-radius: 18px;
|
||
background: linear-gradient(135deg, var(--dim1-color), var(--dim3-color));
|
||
box-shadow: 0 8px 32px rgba(124, 77, 255, 0.2);
|
||
}
|
||
.logo-text {
|
||
position: absolute; inset: 0;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 28px; font-weight: 700; color: white;
|
||
}
|
||
}
|
||
|
||
.app-title { font-size: 24px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
|
||
.app-subtitle { font-size: 13px; color: var(--text-secondary); margin-bottom: 32px; }
|
||
|
||
.tab-switch {
|
||
display: flex; width: 100%; margin-bottom: 20px; border-bottom: 1px solid var(--glass-border);
|
||
.tab-item {
|
||
flex: 1; text-align: center; padding: 10px 0;
|
||
color: var(--text-secondary); font-size: 15px; font-weight: 500;
|
||
border-bottom: 2px solid transparent; transition: all 0.3s;
|
||
&.active { color: var(--color-brand); border-bottom-color: var(--color-brand); }
|
||
}
|
||
}
|
||
|
||
.form-card {
|
||
width: 100%;
|
||
background: var(--glass-bg); border: 1px solid var(--glass-border);
|
||
border-radius: 16px; padding: 24px 20px;
|
||
}
|
||
|
||
.form-item { margin-bottom: 16px;
|
||
.form-label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; font-weight: 500; }
|
||
.form-input {
|
||
width: 100%; height: 44px;
|
||
background: var(--bg-secondary); border: 1px solid var(--glass-border);
|
||
border-radius: 10px; padding: 0 14px;
|
||
color: var(--text-primary); font-size: 14px; box-sizing: border-box; outline: none;
|
||
&::placeholder { color: var(--text-disabled); }
|
||
}
|
||
}
|
||
|
||
// 验证码行
|
||
.verify-row {
|
||
display: flex; gap: 10px;
|
||
.verify-input { flex: 1; }
|
||
.send-code-btn {
|
||
flex-shrink: 0; height: 44px; padding: 0 16px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
background: linear-gradient(135deg, var(--color-brand), var(--dim3-color));
|
||
color: white; border-radius: 10px; font-size: 13px; font-weight: 600;
|
||
cursor: pointer; white-space: nowrap;
|
||
&.disabled { opacity: 0.5; pointer-events: none; }
|
||
&:active { opacity: 0.8; }
|
||
}
|
||
}
|
||
|
||
// 用户协议勾选
|
||
.agreement-row {
|
||
display: flex; align-items: center; gap: 10px;
|
||
margin: 12px 0 4px;
|
||
}
|
||
.agreement-checkbox {
|
||
width: 20px; height: 20px;
|
||
border: 2px solid var(--glass-border);
|
||
border-radius: 4px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
flex-shrink: 0;
|
||
transition: all 0.2s;
|
||
text { font-size: 12px; color: white; font-weight: 700; display: none; }
|
||
&.checked {
|
||
background: var(--color-brand); border-color: var(--color-brand);
|
||
text { display: block; }
|
||
}
|
||
}
|
||
.agreement-text { font-size: 12px; color: var(--text-tertiary); line-height: 1.5; }
|
||
.agreement-link { color: var(--color-brand); text-decoration: underline; }
|
||
|
||
.submit-btn {
|
||
width: 100%; height: 46px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
background: linear-gradient(135deg, var(--color-brand), var(--dim3-color));
|
||
color: white; border-radius: 10px; font-size: 15px; font-weight: 600;
|
||
margin-top: 8px; cursor: pointer;
|
||
box-shadow: 0 4px 16px rgba(124, 77, 255, 0.25);
|
||
transition: opacity 0.3s;
|
||
&:active { opacity: 0.8; }
|
||
&.loading { opacity: 0.7; }
|
||
&.disabled { opacity: 0.4; pointer-events: none; }
|
||
}
|
||
|
||
.wx-login-row {
|
||
margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--glass-border);
|
||
.wx-login-btn {
|
||
width: 100%; height: 46px;
|
||
display: flex; align-items: center; justify-content: center; gap: 8px;
|
||
background: linear-gradient(135deg, #07c160, #06ad56); color: white;
|
||
border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer;
|
||
box-shadow: 0 4px 16px rgba(7, 193, 96, 0.3); transition: opacity 0.3s;
|
||
&:active { opacity: 0.8; }
|
||
.wx-icon { font-size: 18px; }
|
||
}
|
||
}
|
||
|
||
.footer-info { margin-top: 40px; font-size: 11px; color: var(--text-muted); }
|
||
}
|
||
</style> |