自定义title
This commit is contained in:
@@ -1,3 +1,9 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '验证手机号',
|
||||
})
|
||||
navigationBarTitleText: "验证手机号",
|
||||
navigationBarBackgroundColor: "#ffffff",
|
||||
navigationBarTextStyle: "black",
|
||||
backgroundColor: "#f5f5f5",
|
||||
enablePullDownRefresh: false,
|
||||
disableScroll: false,
|
||||
navigationStyle: "custom",
|
||||
});
|
||||
|
||||
@@ -1,56 +1,100 @@
|
||||
.set-transaction-password-page {
|
||||
background-color: #f5f5f5;
|
||||
box-sizing: border-box;
|
||||
height: 100vh;
|
||||
overflow-y: hidden;
|
||||
.custom-navbar {
|
||||
height: 56px;
|
||||
/* 通常与原生导航栏高度一致 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// background-color: #fff;
|
||||
color: #000;
|
||||
padding-top: 44px;
|
||||
/* 适配状态栏 */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.detail-navigator {
|
||||
height: 30px;
|
||||
width: fit-content;
|
||||
border-radius: 15px;
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.detail-navigator-back {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-style: Semibold;
|
||||
font-size: 20px;
|
||||
letter-spacing: 0.38px;
|
||||
|
||||
& > .detail-navigator-back-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-item {
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
height: 100vh;
|
||||
overflow-y: hidden;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #0000000d;
|
||||
font-size: 14px;
|
||||
|
||||
.form-item {
|
||||
height: 50px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #0000000D;
|
||||
font-size: 14px;
|
||||
|
||||
.form-label {
|
||||
width: 56px;
|
||||
text-align: right;
|
||||
}
|
||||
.form-label {
|
||||
width: 56px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 78px;
|
||||
height: 24px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
background: #000;
|
||||
box-shadow: 0 8px 64px 0 rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(16px);
|
||||
font-feature-settings: "liga" off, "clig" off;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 9.6px;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
border-radius: 8px;
|
||||
margin-right: 0;
|
||||
.btn {
|
||||
width: 78px;
|
||||
height: 24px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
background: #000;
|
||||
box-shadow: 0 8px 64px 0 rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(16px);
|
||||
font-feature-settings: "liga" off, "clig" off;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 9.6px;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
border-radius: 8px;
|
||||
margin-right: 0;
|
||||
|
||||
&.disabled {
|
||||
color: rgba(255, 255, 255, 0.30);
|
||||
}
|
||||
&.disabled {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-btn {
|
||||
position: fixed;
|
||||
bottom: 40px;
|
||||
height: 54px;
|
||||
width: calc(100vw - 40px);
|
||||
margin: 0 auto;
|
||||
border-radius: 16px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.bottom-btn {
|
||||
position: fixed;
|
||||
bottom: 40px;
|
||||
height: 54px;
|
||||
width: calc(100vw - 40px);
|
||||
border-radius: 16px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Taro from '@tarojs/taro';
|
||||
import { View, Text, Input, Button } from "@tarojs/components";
|
||||
import Taro from "@tarojs/taro";
|
||||
import { View, Text, Input, Button, Image } from "@tarojs/components";
|
||||
|
||||
import "./index.scss";
|
||||
import httpService from "@/services/httpService";
|
||||
import { useUserInfo } from "@/store/userStore";
|
||||
import { useKeyboardHeight } from '@/store/keyboardStore'
|
||||
import { useKeyboardHeight } from "@/store/keyboardStore";
|
||||
import img from "@/config/images";
|
||||
|
||||
interface FormFields {
|
||||
phone?: string;
|
||||
@@ -13,24 +14,33 @@ interface FormFields {
|
||||
}
|
||||
|
||||
const ValidPhone: React.FC = () => {
|
||||
// 获取当前页面的配置
|
||||
const currentPage = Taro.getCurrentInstance();
|
||||
const pageConfig = currentPage.page?.config;
|
||||
const pageTitle = pageConfig?.navigationBarTitleText;
|
||||
// 使用全局键盘状态
|
||||
const { keyboardHeight, isKeyboardVisible, addListener, initializeKeyboardListener } = useKeyboardHeight()
|
||||
const {
|
||||
keyboardHeight,
|
||||
isKeyboardVisible,
|
||||
addListener,
|
||||
initializeKeyboardListener,
|
||||
} = useKeyboardHeight();
|
||||
const [smsCodeSended, setSmsCodeSended] = useState(false);
|
||||
const [smsCodeText, setSmsCodeText] = useState('获取验证码');
|
||||
const [smsCodeText, setSmsCodeText] = useState("获取验证码");
|
||||
// 使用全局键盘状态监听
|
||||
useEffect(() => {
|
||||
// 初始化全局键盘监听器
|
||||
initializeKeyboardListener()
|
||||
initializeKeyboardListener();
|
||||
|
||||
// 添加本地监听器
|
||||
const removeListener = addListener((height, visible) => {
|
||||
console.log('AiImportPopup 收到键盘变化:', height, visible)
|
||||
})
|
||||
console.log("AiImportPopup 收到键盘变化:", height, visible);
|
||||
});
|
||||
|
||||
return () => {
|
||||
removeListener()
|
||||
}
|
||||
}, [initializeKeyboardListener, addListener])
|
||||
removeListener();
|
||||
};
|
||||
}, [initializeKeyboardListener, addListener]);
|
||||
const userInfo = useUserInfo();
|
||||
const [formData, setFormData] = useState<FormFields>({
|
||||
phone: userInfo.phone || "",
|
||||
@@ -44,14 +54,20 @@ const ValidPhone: React.FC = () => {
|
||||
const handleConfirm = async () => {
|
||||
const isValid = await validSMSCode();
|
||||
if (isValid) {
|
||||
Taro.navigateTo({ url: `/user_pages/setTransactionPassword/index?type=reset&phone=${formData.phone}&sms_code=${formData.sms_code}` });
|
||||
Taro.navigateTo({
|
||||
url: `/user_pages/setTransactionPassword/index?type=reset&phone=${formData.phone}&sms_code=${formData.sms_code}`,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const validSMSCode = async () => {
|
||||
const { phone, sms_code } = formData;
|
||||
try {
|
||||
const res = await httpService.post("/wallet/verify_sms_code", { phone, sms_code, type: "reset_password" });
|
||||
const res = await httpService.post("/wallet/verify_sms_code", {
|
||||
phone,
|
||||
sms_code,
|
||||
type: "reset_password",
|
||||
});
|
||||
const { verified } = res.data;
|
||||
if (verified) {
|
||||
return true;
|
||||
@@ -78,7 +94,7 @@ const ValidPhone: React.FC = () => {
|
||||
time--;
|
||||
setSmsCodeText(`${time}秒后重发`);
|
||||
} else {
|
||||
setSmsCodeText('获取验证码');
|
||||
setSmsCodeText("获取验证码");
|
||||
setSmsCodeSended(false);
|
||||
clearInterval(timer);
|
||||
}
|
||||
@@ -92,16 +108,56 @@ const ValidPhone: React.FC = () => {
|
||||
|
||||
return (
|
||||
<View className="set-transaction-password-page">
|
||||
{/* 导航栏 */}
|
||||
<View className="custom-navbar">
|
||||
<View className="detail-navigator">
|
||||
<View
|
||||
className="detail-navigator-back"
|
||||
onClick={() => {
|
||||
Taro.navigateBack();
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
className="detail-navigator-back-icon"
|
||||
src={img.ICON_NAVIGATOR_BACK}
|
||||
/>
|
||||
<Text>{pageTitle}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className="form-item">
|
||||
<Text className="form-label">手机号</Text>
|
||||
<Input defaultValue={formData.phone} type="number" disabled></Input>
|
||||
</View>
|
||||
<View className="form-item">
|
||||
<Text className="form-label">验证码</Text>
|
||||
<Input placeholder="请输入验证码" type="number" onInput={(e) => { handleInput(e, "sms_code") }}></Input>
|
||||
<Button className={`btn ${smsCodeSended ? 'disabled' : ''}`} disabled={smsCodeSended} onClick={getSMSCode}>{smsCodeText}</Button>
|
||||
<Input
|
||||
placeholder="请输入验证码"
|
||||
type="number"
|
||||
onInput={(e) => {
|
||||
handleInput(e, "sms_code");
|
||||
}}
|
||||
></Input>
|
||||
<Button
|
||||
className={`btn ${smsCodeSended ? "disabled" : ""}`}
|
||||
disabled={smsCodeSended}
|
||||
onClick={getSMSCode}
|
||||
>
|
||||
{smsCodeText}
|
||||
</Button>
|
||||
</View>
|
||||
<Button className={`btn bottom-btn ${formData.sms_code === "" ? 'disabled' : ''}`} disabled={formData.sms_code === ""} onClick={handleConfirm} style={{ bottom: isKeyboardVisible ? `${keyboardHeight + 20}px` : undefined }}>提交</Button>
|
||||
<Button
|
||||
className={`btn bottom-btn ${
|
||||
formData.sms_code === "" ? "disabled" : ""
|
||||
}`}
|
||||
disabled={formData.sms_code === ""}
|
||||
onClick={handleConfirm}
|
||||
style={{
|
||||
bottom: isKeyboardVisible ? `${keyboardHeight + 20}px` : undefined,
|
||||
}}
|
||||
>
|
||||
提交
|
||||
</Button>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user