root/airz-uniapp
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 完成项目基础功能搭建与样式优化

Browse Source 
1.  新增评估选择组件、本地草稿存储与新闻/金融内容服务
2.  重构页面布局与样式：调整按钮阴影、图标尺寸、导航栏样式
3.  更新启动页、报告页、消息中心等页面UI与交互逻辑
4.  替换图标资源，调整禁用态透明度
5.  补充README文档与本地数据模拟实现
This commit is contained in:
hujun
2026-09-18 12:59:43 +08:00
parent b0ee4f9d7e
commit 94a4558290
30 changed files with 1376 additions and 640 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/login/login.uvue
+71 -92
View File
@@ -1,101 +1,85 @@
<template>
<view class="login-page page-white" :style="pageStyle()">
<view class="status-space" :style="statusStyle(90)"></view>
<view class="login-content">
<BrandLogo />
<text class="welcome">欢迎登录 AI融资</text>
<view class="login-tabs">
<view :class="mode == 'phone' ? 'login-tab selected' : 'login-tab'" @click="switchMode('phone')"><text>手机号登录</text></view>
<view :class="mode == 'password' ? 'login-tab selected' : 'login-tab'" @click="switchMode('password')"><text>密码登录</text></view>
<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" type="number" maxlength="11" placeholder="请输入手机号" class="field-input" /></view>
<view v-if="mode == 'password'" class="input-box"><input v-model="password" :disabled="loading" password placeholder="请输入登录密码" class="field-input" /></view>
<view v-if="mode == 'phone' && smsSent" class="input-box"><input v-model="smsCode" 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 ? '处理中…' : (mode == 'phone' ? (smsSent ? '登录' : '获取验证码') : '登录') }}</button>
<view class="mode-row"><text class="mode-link" @click="switchMode">{{ mode == 'phone' ? '密码登录' : '使用验证码登录' }}</text><text v-if="isDemo" class="demo-label">演示模式</text></view>
<text v-if="isDemo && smsSent" class="demo-hint">未发送真实短信，可输入任意 6 位数字体验。</text>
<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('微信')"><AppIcon name="message" :size="62" /><text class="social-label">微信</text></view><view class="social-button" @click="socialLogin('一键登录')"><AppIcon name="user" :size="62" /><text class="social-label">一键登录</text></view></view>
<view class="agreement"><view class="check-hit" @click="agreed = !agreed"><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('用户协议')">《用户协议》</text>和<text class="agreement-link" @click="showAgreement('隐私政策')">《隐私政策》</text></text></view>
</view>
<view class="input-box"><text class="input-prefix">+86</text><input v-model="phone" type="number" maxlength="11" placeholder="请输入手机号" class="input-box-input" /></view>
<view v-if="mode == 'password'" class="input-box"><text class="input-prefix">密码</text><input v-model="password" password placeholder="请输入登录密码" class="input-box-input" /></view>
<view v-if="mode == 'phone' && smsSent" class="input-box"><text class="input-prefix">验证码</text><input v-model="smsCode" type="number" maxlength="6" placeholder="请输入 6 位验证码" class="input-box-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" :class="loading ? 'login-disabled' : ''">{{ loading ? '处理中...' : (mode == 'phone' ? (smsSent ? '登录' : '获取验证码') : '登录') }}</button>
<view class="other-login"><view class="line"></view><text>其他登录方式</text><view class="line"></view></view>
<view class="social-row">
<view class="social wechat"><AppIcon name="message" :size="38" /></view><view class="social apple"><AppIcon name="lock" :size="38" /></view><view class="social phone"><AppIcon name="user" :size="38" /></view>
</view>
<view class="agreement" @click="agreed = !agreed"><view :class="agreed ? 'check checked' : 'check'"><text v-if="agreed">✓</text></view><text>我已阅读并同意《用户协议》和《隐私政策》</text></view>
</view>
</scroll-view>
</view>
</template>
<script setup lang="uts">
import { usePageLayout } from '@/services/layout.uts'
const { statusStyle, pageStyle } = usePageLayout()
import BrandLogo from '@/components/BrandLogo.uvue'
import AppIcon from '@/components/AppIcon.uvue'
import { requestSmsCode, loginWithSms, loginWithPassword, saveSession } from '@/services/api.uts'
import { API_BASE_URL, requestSmsCode, loginWithSms, loginWithPassword, saveSession } from '@/services/api.uts'
import { showAgreementNotice } from '@/services/assessment.uts'
const { statusStyle, contentStyle, pageStyle } = usePageLayout()
const mode = ref('phone')
const phone = ref('13800138000')
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(true)
const agreed = ref(false)
const isDemo = API_BASE_URL.length == 0
const showAgreement = (title: string) => { showAgreementNotice(title) }
let countdownTimer = 0
const switchMode = (nextMode: string) => {
mode.value = nextMode
errorMessage.value = ''
}
watch(phone, () => {
smsSent.value = false; smsCode.value = ''; countdown.value = 0; errorMessage.value = ''
clearInterval(countdownTimer)
})
const switchMode = () => { if (loading.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
}
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)
countdownTimer = 0
} else {
countdown.value -= 1
}
if (countdown.value <= 1) { countdown.value = 0; clearInterval(countdownTimer) } else countdown.value -= 1
}, 1000)
}
const finishLogin = (token: string) => {
saveSession(token, phone.value)
uni.redirectTo({ url: '/pages/home/home' })
}
const finishLogin = (token: string) => { saveSession(token, phone.value); uni.redirectTo({ url: '/pages/home/home' }) }
const resendSms = async () => {
if (loading.value || countdown.value > 0 || !validPhone()) return
loading.value = true
errorMessage.value = ''
if (!agreed.value) { errorMessage.value = '请先阅读并勾选用户协议与隐私政策'; return }
loading.value = true; errorMessage.value = ''
try {
if (!(await requestSmsCode(phone.value))) throw new Error('验证码发送失败，请稍后重试')
startCountdown()
uni.showToast({ title: '验证码已重新发送', icon: 'none' })
} catch (error) {
errorMessage.value = error instanceof Error ? error.message : '验证码发送失败，请稍后重试'
} finally {
loading.value = false
}
uni.showToast({ title: isDemo ? '演示验证码已就绪' : '验证码已重新发送', icon: 'none' })
} catch (error) { errorMessage.value = error instanceof Error ? error.message : '验证码发送失败，请稍后重试' } finally { loading.value = false }
}
const login = async () => {
errorMessage.value = ''
if (!agreed.value) { errorMessage.value = '请先同意用户协议'; return }
if (!validPhone()) return
if (loading.value) return
if (!agreed.value) { errorMessage.value = '请先阅读并勾选用户协议与隐私政策'; return }
if (!validPhone() || loading.value) return
loading.value = true
try {
if (mode.value == 'phone') {
if (!smsSent.value) {
if (countdown.value > 0) return
const sent = await requestSmsCode(phone.value)
if (!sent) throw new Error('验证码发送失败，请稍后重试')
smsSent.value = true
startCountdown()
uni.showToast({ title: '验证码已发送', icon: 'none' })
if (!(await requestSmsCode(phone.value))) throw new Error('验证码发送失败，请稍后重试')
smsSent.value = true; startCountdown()
uni.showToast({ title: isDemo ? '演示验证码已就绪' : '验证码已发送', icon: 'none' })
} else {
if (!/^[0-9]{6}$/.test(smsCode.value)) throw new Error('请输入 6 位数字验证码')
finishLogin(await loginWithSms(phone.value, smsCode.value))
@@ -104,42 +88,37 @@
if (password.value.length < 6) throw new Error('密码至少需要 6 位')
finishLogin(await loginWithPassword(phone.value, password.value))
}
} catch (error) {
errorMessage.value = error instanceof Error ? error.message : '登录失败，请稍后重试'
} finally {
loading.value = false
}
} catch (error) { errorMessage.value = error instanceof Error ? error.message : '登录失败，请稍后重试' } finally { loading.value = false }
}
onUnmounted(() => { clearInterval(countdownTimer) })
</script>
<style>
.login-page { }
.status-space { }
.login-content { padding: 0 54rpx; }
.welcome { font-size: 48rpx; line-height: 70rpx; font-weight: 800; margin-top: 60rpx; color: #122347; }
.login-tabs { flex-direction: row; margin-top: 52rpx; border-bottom: 2rpx solid #eaf0f7; }
.login-tab { margin-right: 58rpx; padding: 0 4rpx 18rpx; color: #7d899d; font-size: 28rpx; }
.login-tab.selected { color: #0868f7; font-weight: 700; border-bottom: 5rpx solid #0868f7; }
.input-box { height: 96rpx; margin-top: 28rpx; border: 2rpx solid #dfe7f2; border-radius: 14rpx; padding: 0 24rpx; flex-direction: row; align-items: center; background-color: #fbfdff; }
.input-prefix { font-size: 25rpx; color: #3c4a61; margin-right: 24rpx; }
.input-box-input { flex: 1; font-size: 28rpx; color: #17243c; }
.countdown { min-width: 90rpx; text-align: right; color: #0868f7; font-size: 24rpx; }
.error-message {
/* #ifndef APP */
display: block;
/* #endif */
margin-top: 16rpx; color: #e55353; font-size: 23rpx; }
.login-button { height: 92rpx; line-height: 92rpx; margin-top: 32rpx; border-radius: 14rpx; color: white; font-size: 29rpx; font-weight: 700; background-color: #0868f7; box-shadow: 0 16rpx 30rpx rgba(8, 104, 247, .2); }
.login-disabled { opacity: .6; }
.other-login { margin-top: 62rpx; flex-direction: row; align-items: center; justify-content: center; color: #a0a9b7; font-size: 22rpx; }
.line { height: 1rpx; background-color: #e5eaf1; width: 120rpx; margin: 0 20rpx; }
.social-row { flex-direction: row; justify-content: center; margin-top: 40rpx; }
.social { width: 84rpx; height: 84rpx; border-radius: 50%; align-items: center; justify-content: center; margin: 0 25rpx; font-size: 28rpx; font-weight: 800; }
.wechat { background-color: #e9f8ef; color: #12ad58; }
.apple { background-color: #f2f4f7; color: #111; }
.phone { background-color: #fff0ea; color: #ff6530; }
.agreement { margin-top: 62rpx; flex-direction: row; align-items: center; justify-content: center; color: #8793a8; font-size: 21rpx; }
.check { width: 28rpx; height: 28rpx; border: 2rpx solid #aeb8c7; border-radius: 6rpx; align-items: center; justify-content: center; margin-right: 10rpx; }
.checked { color: white; background-color: #0868f7; border-color: #0868f7; }
.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; }
.demo-label { color: #8591a2; font-size: 22rpx; }
.demo-hint { color: #65748a; font-size: 24rpx; line-height: 36rpx; margin-top: 8rpx; }
.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-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; }
</style>