feat(passport): 重构短信登录页并提供手机号授权降级入口
- 修复购物车数据库缺失 spec_info 字段问题，新增迁移脚本 - 登录页处理手机号授权失败，按错误类型弹窗引导用户改用短信登录 - 登录页新增长期显示的「使用短信验证码登录」入口，提升用户降级体验 - 注册页同步改造，去除微信小程序环境下短信按钮隐藏问题 - 短信登录页整体 UI 重构，弃用 NutUI 组件，采用原生组件实现 - 短信登录页新增渐变背景、浮动光圈、圆形 logo、卡片输入区设计 - 实现手机号输入、验证码发送、倒计时及登录校验逻辑全覆盖 - 短信登录页新增返回微信快捷登录链接，避免用户被困登录流程 - 新增配套样式文件，实现多重动效及分阶段入场动画 - 保证类型检查和编译无误，增加设计稿 HTML 预览文件
This commit is contained in:
@@ -206,6 +206,21 @@
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
// 降级登录入口（短信验证码）
|
||||
.login-methods__alt {
|
||||
text-align: center;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.login-methods__alt-link {
|
||||
display: inline-block;
|
||||
font-size: 26px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
text-decoration: underline;
|
||||
padding: 8px 16px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
// 登录按钮
|
||||
.login-btn {
|
||||
height: 96px;
|
||||
|
||||
@@ -158,6 +158,44 @@ const Login = () => {
|
||||
await Taro.redirectTo({ url: redirectUrl })
|
||||
}
|
||||
|
||||
/** 跳转到短信验证码登录（降级方案） */
|
||||
const goSmsLogin = () => {
|
||||
const params: Record<string, string> = {}
|
||||
if (redirectUrl) params.redirect = redirectUrl
|
||||
// 透传邀请参数，避免从登录页切到短信登录时丢失 inviter
|
||||
const inviteParams = parseInviteParams({ query: router?.params })
|
||||
if (inviteParams?.inviter) params.inviter = inviteParams.inviter
|
||||
if (inviteParams?.source) params.source = inviteParams.source
|
||||
if (inviteParams?.t) params.t = inviteParams.t
|
||||
|
||||
const qs = Object.entries(params)
|
||||
.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(String(v))}`)
|
||||
.join('&')
|
||||
Taro.navigateTo({ url: `/passport/sms-login${qs ? `?${qs}` : ''}` })
|
||||
}
|
||||
|
||||
/** 手机号授权失败时弹窗引导走短信登录（区分原因） */
|
||||
const showPhoneAuthFailedModal = (errMsg?: string) => {
|
||||
let content = '请尝试使用短信验证码登录'
|
||||
if (errMsg?.includes('user deny')) {
|
||||
content = '您已取消微信手机号授权，可改用短信验证码登录'
|
||||
} else if (errMsg?.includes('privacy')) {
|
||||
content = '微信未授权获取手机号，可改用短信验证码登录'
|
||||
} else if (errMsg?.includes('no permission')) {
|
||||
content = '小程序暂未获得手机号授权，可改用短信验证码登录'
|
||||
}
|
||||
Taro.showModal({
|
||||
title: '未获取到手机号',
|
||||
content,
|
||||
confirmText: '短信登录',
|
||||
cancelText: '我知道了',
|
||||
confirmColor: '#07c160',
|
||||
success: (res) => {
|
||||
if (res.confirm) goSmsLogin()
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
/** 手机号快捷登录 */
|
||||
const handleGetPhoneNumber = async ({ detail }: GetPhoneNumberEvent) => {
|
||||
if (!isAgree) {
|
||||
@@ -168,7 +206,7 @@ const Login = () => {
|
||||
|
||||
const { code: phoneCode, errMsg } = detail || {}
|
||||
if (!phoneCode || (errMsg && errMsg.includes('fail'))) {
|
||||
Taro.showToast({ title: '未授权手机号', icon: 'none' })
|
||||
showPhoneAuthFailedModal(errMsg)
|
||||
return
|
||||
}
|
||||
|
||||
@@ -282,8 +320,17 @@ const Login = () => {
|
||||
手机号快捷登录
|
||||
</Button>
|
||||
|
||||
<View className='login-methods__tip text-gray-200'>
|
||||
<Text>点击上方按钮，快速登录</Text>
|
||||
{/*<View className='login-methods__tip text-gray-200'>*/}
|
||||
{/* <Text>点击上方按钮，快速登录</Text>*/}
|
||||
{/*</View>*/}
|
||||
|
||||
<View className='login-methods__alt'>
|
||||
<Text
|
||||
className='login-methods__alt-link'
|
||||
onClick={() => goSmsLogin()}
|
||||
>
|
||||
使用短信验证码登录
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View className='login-methods__divider'>
|
||||
|
||||
@@ -150,6 +150,28 @@ const Register = () => {
|
||||
await Taro.redirectTo({ url: redirectUrl })
|
||||
}
|
||||
|
||||
/** 手机号授权失败时弹窗引导走短信注册/登录（区分原因） */
|
||||
const showPhoneAuthFailedModal = (errMsg?: string) => {
|
||||
let content = '请尝试使用短信验证码注册/登录'
|
||||
if (errMsg?.includes('user deny')) {
|
||||
content = '您已取消微信手机号授权，可改用短信验证码注册/登录'
|
||||
} else if (errMsg?.includes('privacy')) {
|
||||
content = '微信未授权获取手机号，可改用短信验证码注册/登录'
|
||||
} else if (errMsg?.includes('no permission')) {
|
||||
content = '小程序暂未获得手机号授权，可改用短信验证码注册/登录'
|
||||
}
|
||||
Taro.showModal({
|
||||
title: '未获取到手机号',
|
||||
content,
|
||||
confirmText: '短信注册/登录',
|
||||
cancelText: '我知道了',
|
||||
confirmColor: '#07c160',
|
||||
success: (res) => {
|
||||
if (res.confirm) goSmsLogin()
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const handleGetPhoneNumber = async ({ detail }: GetPhoneNumberEvent) => {
|
||||
if (!isAgree) {
|
||||
Taro.showToast({ title: '请先勾选同意协议', icon: 'none' })
|
||||
@@ -159,7 +181,7 @@ const Register = () => {
|
||||
|
||||
const { code: phoneCode, encryptedData, iv, errMsg } = detail || {}
|
||||
if (!phoneCode || (errMsg && errMsg.includes('fail'))) {
|
||||
Taro.showToast({ title: '未授权手机号', icon: 'none' })
|
||||
showPhoneAuthFailedModal(errMsg)
|
||||
return
|
||||
}
|
||||
|
||||
@@ -281,11 +303,9 @@ const Register = () => {
|
||||
手机号一键注册/登录
|
||||
</Button>
|
||||
|
||||
{!isWeapp && (
|
||||
<Button type='default' block disabled={!isAgree || loading} onClick={goSmsLogin}>
|
||||
短信验证码注册/登录
|
||||
</Button>
|
||||
)}
|
||||
<Button type='default' block disabled={!isAgree || loading} onClick={goSmsLogin}>
|
||||
短信验证码注册/登录
|
||||
</Button>
|
||||
</View>
|
||||
|
||||
<View className='mt-6 flex text-sm items-center px-1'>
|
||||
|
||||
332
src/passport/sms-login.scss
Normal file
332
src/passport/sms-login.scss
Normal file
@@ -0,0 +1,332 @@
|
||||
// 页面容器
|
||||
.page-sms-login {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 背景装饰
|
||||
.sms-login-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sms-login-bg__gradient {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
right: -50%;
|
||||
bottom: -50%;
|
||||
background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
|
||||
animation: gradientMove 15s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes gradientMove {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) rotate(0deg);
|
||||
}
|
||||
33% {
|
||||
transform: translate(30px, -30px) rotate(120deg);
|
||||
}
|
||||
66% {
|
||||
transform: translate(-20px, 20px) rotate(240deg);
|
||||
}
|
||||
}
|
||||
|
||||
.sms-login-bg__circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
opacity: 0.1;
|
||||
background: #ffffff;
|
||||
animation: float 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.sms-login-bg__circle--1 {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
top: -150px;
|
||||
right: -100px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.sms-login-bg__circle--2 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
bottom: 10%;
|
||||
left: -100px;
|
||||
animation-delay: -7s;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
33% {
|
||||
transform: translate(30px, -30px) scale(1.1);
|
||||
}
|
||||
66% {
|
||||
transform: translate(-20px, 20px) scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
// 内容区域
|
||||
.sms-login-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
padding: 0 50px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// 头部 Logo 和标题
|
||||
.sms-login-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 120px;
|
||||
margin-bottom: 60px;
|
||||
animation: slideDown 0.8s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.sms-login-logo {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
border-radius: 35px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 36px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
animation: logoFloat 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes logoFloat {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
}
|
||||
|
||||
.sms-login-logo__icon {
|
||||
font-size: 72px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.sms-login-title {
|
||||
font-size: 52px;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
margin-bottom: 18px;
|
||||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.sms-login-subtitle {
|
||||
font-size: 26px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// 表单卡片
|
||||
.sms-login-card {
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border-radius: 28px;
|
||||
padding: 12px 32px;
|
||||
margin-bottom: 48px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
|
||||
animation: slideUp 0.6s ease-out 0.2s both;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.sms-login-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 110px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sms-login-field--code {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sms-login-field__icon-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sms-login-field__icon {
|
||||
font-size: 36px;
|
||||
margin-right: 20px;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sms-login-field__input {
|
||||
flex: 1;
|
||||
height: 110px;
|
||||
font-size: 30px;
|
||||
color: #333333;
|
||||
letter-spacing: 1px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sms-login-field__placeholder {
|
||||
color: #b8b8b8;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.sms-login-divider {
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, #e8e8e8 20%, #e8e8e8 80%, transparent);
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
// 发送验证码按钮
|
||||
.sms-login-send {
|
||||
flex-shrink: 0;
|
||||
height: 64px;
|
||||
padding: 0 22px;
|
||||
border-radius: 32px;
|
||||
background: linear-gradient(135deg, #07c160, #06ad56);
|
||||
color: #ffffff;
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 16px;
|
||||
box-shadow: 0 6px 20px rgba(7, 193, 96, 0.35);
|
||||
letter-spacing: 0.5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sms-login-send--disabled {
|
||||
background: #e0e0e0;
|
||||
color: #999999;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// 登录按钮
|
||||
.sms-login-submit {
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
border-radius: 50px;
|
||||
background: linear-gradient(135deg, #07c160, #06ad56);
|
||||
color: #ffffff;
|
||||
font-size: 34px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
letter-spacing: 4px;
|
||||
box-shadow: 0 12px 36px rgba(7, 193, 96, 0.4);
|
||||
margin-bottom: 36px;
|
||||
animation: slideUp 0.6s ease-out 0.35s both;
|
||||
}
|
||||
|
||||
.sms-login-submit--disabled {
|
||||
background: #b8e0c5;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
box-shadow: 0 4px 12px rgba(7, 193, 96, 0.15);
|
||||
}
|
||||
|
||||
.sms-login-submit--hover {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
// 返回链接
|
||||
.sms-login-back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 80px;
|
||||
margin-bottom: 32px;
|
||||
animation: fadeIn 0.8s ease-out 0.5s both;
|
||||
}
|
||||
|
||||
.sms-login-back__icon {
|
||||
font-size: 30px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
margin-right: 10px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.sms-login-back__text {
|
||||
font-size: 28px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
text-decoration: underline;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
// 底部协议
|
||||
.sms-login-tips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 40px;
|
||||
margin-top: auto;
|
||||
padding-bottom: 60px;
|
||||
animation: fadeIn 0.8s ease-out 0.6s both;
|
||||
}
|
||||
|
||||
.sms-login-tips__text {
|
||||
font-size: 22px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.sms-login-tips__link {
|
||||
font-size: 22px;
|
||||
color: #ffffff;
|
||||
text-decoration: underline;
|
||||
margin: 0 4px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
@@ -1,10 +1,10 @@
|
||||
import {useEffect, useState} from "react";
|
||||
import Taro from '@tarojs/taro'
|
||||
import { View } from '@tarojs/components'
|
||||
import {Input, Button} from '@nutui/nutui-react-taro'
|
||||
import { View, Text, Input } from '@tarojs/components'
|
||||
import {loginBySms, sendSmsCaptcha} from "@/api/passport/login";
|
||||
import {LoginParam} from "@/api/passport/login/model";
|
||||
import {checkAndHandleInviteRelation, hasPendingInvite, parseInviteParams, saveInviteParams, trackInviteSource} from "@/utils/invite";
|
||||
import './sms-login.scss'
|
||||
|
||||
const SmsLogin = () => {
|
||||
const [loading, setLoading] = useState<boolean>(false)
|
||||
@@ -55,12 +55,8 @@ const SmsLogin = () => {
|
||||
await Taro.redirectTo({ url: redirectUrl })
|
||||
}
|
||||
|
||||
const reload = () => {
|
||||
// sms-login 页面不是 tabBar 页面，无需调用 hideTabBar
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
reload()
|
||||
// sms-login 页面不是 tabBar 页面，无需调用 hideTabBar
|
||||
}, [])
|
||||
|
||||
// 如果从分享/二维码链接进入短信登录页，先暂存邀请信息
|
||||
@@ -78,7 +74,7 @@ const SmsLogin = () => {
|
||||
|
||||
// 倒计时效果
|
||||
useEffect(() => {
|
||||
let timer: NodeJS.Timeout
|
||||
let timer: ReturnType<typeof setTimeout> | undefined
|
||||
if (countdown > 0) {
|
||||
timer = setTimeout(() => {
|
||||
setCountdown(countdown - 1)
|
||||
@@ -218,52 +214,114 @@ const SmsLogin = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const phoneValid = validatePhone(formData.phone)
|
||||
const codeValid = formData.code.length === 6
|
||||
const canSubmit = phoneValid && codeValid && !loading
|
||||
const sendDisabled = !phoneValid || sendingCode || countdown > 0
|
||||
|
||||
const sendBtnText = countdown > 0
|
||||
? `${countdown}s 后重试`
|
||||
: sendingCode
|
||||
? '发送中'
|
||||
: '获取验证码'
|
||||
|
||||
return (
|
||||
<>
|
||||
<View className='flex flex-col justify-center px-5 pt-3'>
|
||||
<View className='flex flex-col justify-between items-center my-2'>
|
||||
<Input
|
||||
type='number'
|
||||
placeholder='请输入手机号码'
|
||||
maxLength={11}
|
||||
value={formData.phone}
|
||||
onChange={(value) => setFormData({...formData, phone: value})}
|
||||
style={{backgroundColor: '#ffffff', borderRadius: '8px'}}
|
||||
/>
|
||||
<View className='page-sms-login'>
|
||||
{/* 渐变背景 */}
|
||||
<View className='sms-login-bg'>
|
||||
<View className='sms-login-bg__gradient' />
|
||||
<View className='sms-login-bg__circle sms-login-bg__circle--1' />
|
||||
<View className='sms-login-bg__circle sms-login-bg__circle--2' />
|
||||
</View>
|
||||
|
||||
<View className='sms-login-content'>
|
||||
{/* 头部 Logo 和标题 */}
|
||||
<View className='sms-login-header'>
|
||||
<View className='sms-login-logo'>
|
||||
<Text className='sms-login-logo__icon'>📱</Text>
|
||||
</View>
|
||||
<Text className='sms-login-title'>验证码登录</Text>
|
||||
<Text className='sms-login-subtitle'>未注册的手机号验证后将自动注册</Text>
|
||||
</View>
|
||||
<View className='flex justify-between items-center bg-white rounded-lg my-2 pr-2'>
|
||||
<Input
|
||||
type='number'
|
||||
placeholder='请输入6位验证码'
|
||||
maxLength={6}
|
||||
value={formData.code}
|
||||
onChange={(value) => setFormData({...formData, code: value})}
|
||||
style={{ backgroundColor: '#ffffff', borderRadius: '8px'}}
|
||||
/>
|
||||
<Button
|
||||
size='small'
|
||||
type={countdown > 0 ? "default" : "primary"}
|
||||
loading={sendingCode}
|
||||
disabled={sendingCode || countdown > 0}
|
||||
onClick={handleSendCode}
|
||||
>
|
||||
{countdown > 0 ? `${countdown}s` : sendingCode ? '发送中...' : '获取验证码'}
|
||||
</Button>
|
||||
|
||||
{/* 表单卡片 */}
|
||||
<View className='sms-login-card'>
|
||||
{/* 手机号 */}
|
||||
<View className='sms-login-field'>
|
||||
<Text className='sms-login-field__icon'>📞</Text>
|
||||
<Input
|
||||
className='sms-login-field__input'
|
||||
type='number'
|
||||
placeholder='请输入手机号码'
|
||||
placeholderClass='sms-login-field__placeholder'
|
||||
maxLength={11}
|
||||
value={formData.phone}
|
||||
onInput={(e: any) => setFormData({ ...formData, phone: e.detail.value })}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View className='sms-login-divider' />
|
||||
|
||||
{/* 验证码 */}
|
||||
<View className='sms-login-field sms-login-field--code'>
|
||||
<View className='sms-login-field__icon-wrap'>
|
||||
<Text className='sms-login-field__icon'>🔐</Text>
|
||||
<Input
|
||||
className='sms-login-field__input'
|
||||
type='number'
|
||||
placeholder='请输入6位验证码'
|
||||
placeholderClass='sms-login-field__placeholder'
|
||||
maxLength={6}
|
||||
value={formData.code}
|
||||
onInput={(e: any) => setFormData({ ...formData, code: e.detail.value })}
|
||||
/>
|
||||
</View>
|
||||
<View
|
||||
className={`sms-login-send ${sendDisabled ? 'sms-login-send--disabled' : ''}`}
|
||||
onClick={handleSendCode}
|
||||
>
|
||||
{sendBtnText}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className='flex justify-center my-5'>
|
||||
<Button
|
||||
type='info'
|
||||
size='large'
|
||||
className='w-full rounded-lg p-2'
|
||||
loading={loading}
|
||||
disabled={loading}
|
||||
onClick={handleLogin}
|
||||
|
||||
{/* 登录按钮 */}
|
||||
<View
|
||||
className={`sms-login-submit ${canSubmit ? '' : 'sms-login-submit--disabled'}`}
|
||||
hoverClass={canSubmit ? 'sms-login-submit--hover' : 'none'}
|
||||
onClick={canSubmit ? handleLogin : undefined}
|
||||
>
|
||||
{loading ? '登录中...' : '登录 / 注册'}
|
||||
</View>
|
||||
|
||||
{/* 返回微信登录 */}
|
||||
<View
|
||||
className='sms-login-back'
|
||||
onClick={() => Taro.navigateBack({ delta: 1 })}
|
||||
>
|
||||
<Text className='sms-login-back__icon'>←</Text>
|
||||
<Text className='sms-login-back__text'>返回微信快捷登录</Text>
|
||||
</View>
|
||||
|
||||
{/* 协议 */}
|
||||
<View className='sms-login-tips'>
|
||||
<Text className='sms-login-tips__text'>登录即代表您已阅读并同意</Text>
|
||||
<Text
|
||||
className='sms-login-tips__link'
|
||||
onClick={() => Taro.navigateTo({ url: '/passport/agreement?type=terms' })}
|
||||
>
|
||||
{loading ? '登录中...' : '登录'}
|
||||
</Button>
|
||||
《服务协议》
|
||||
</Text>
|
||||
<Text className='sms-login-tips__text'>和</Text>
|
||||
<Text
|
||||
className='sms-login-tips__link'
|
||||
onClick={() => Taro.navigateTo({ url: '/passport/agreement?type=privacy' })}
|
||||
>
|
||||
《隐私政策》
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
export default SmsLogin
|
||||
|
||||
Reference in New Issue
Block a user