refactor: 优化跨端导航适配与页面文案体验

- 新增微信小程序胶囊区域避让布局逻辑
- 统一首页导航与标题对齐规则
- 更新多处演示提示文案为正式表述
- 调整个人中心账户状态显示
- 优化产品页分享按钮条件渲染
This commit is contained in:
hujun
2026-09-20 14:18:55 +08:00
parent 69130d11e7
commit 046a03e5e9
12 changed files with 110 additions and 43 deletions
+3 -6
View File
@@ -12,8 +12,7 @@
<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="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="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>
@@ -67,7 +66,7 @@
try {
if (!(await requestSmsCode(phone.value))) throw new Error('验证码发送失败,请稍后重试')
startCountdown()
uni.showToast({ title: isDemo ? '演示验证码已就绪' : '验证码已重新发送', icon: 'none' })
uni.showToast({ title: isDemo ? '请输入 6 位验证码' : '验证码已重新发送', icon: 'none' })
} catch (error) { errorMessage.value = error instanceof Error ? error.message : '验证码发送失败,请稍后重试' } finally { loading.value = false }
}
const login = async () => {
@@ -80,7 +79,7 @@
if (!smsSent.value) {
if (!(await requestSmsCode(phone.value))) throw new Error('验证码发送失败,请稍后重试')
smsSent.value = true; startCountdown()
uni.showToast({ title: isDemo ? '演示验证码已就绪' : '验证码已发送', icon: 'none' })
uni.showToast({ title: isDemo ? '请输入 6 位验证码' : '验证码已发送', icon: 'none' })
} else {
if (!/^[0-9]{6}$/.test(smsCode.value)) throw new Error('请输入 6 位数字验证码')
finishLogin(await loginWithSms(phone.value, smsCode.value))
@@ -107,8 +106,6 @@
.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; }